溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要講解了“SpringBoot+VUE怎么實現數據表格”，文中的講解內容簡單清晰，易于學習與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學習“SpringBoot+VUE怎么實現數據表格”吧！
前言
使用的開發工具：
一、前端準備
1. 基礎界面
2. 導入JS文件
二、后端準備
1. 創建實體類
2. Controller層
3. Service層
4. Mapper層
三、前后端整合
四、運行結果
還記得第一次做項目時，因為不會將數據庫表中的數據渲染到前端而頭疼，最后還是靠layui提供的數據表格API實現了前端數據表格的渲染。一直到現在做了很多SpringBoot項目、SSM項目之后，現在返回頭來看這個曾經這個讓我備受折磨的問題，腦海中下意識就會想到很多種解決的方法，比如導入前端的數據表格、通過JavaScript渲染數據表格、通過VUE來渲染數據表格…本文將使用VUE+SpringBoot+MybatisPlus，以前后端分離的形式來實現數據表格在前端的渲染，在此做下記錄，便于以后進行回顧。
前端：HBuilderX
后端：IntelliJ IDEA
本次要進行渲染的數據庫內容如下：
提示：以下是本篇文章正文內容，下面案例可供參考
在前端先將頁面寫好，在這里我按照數據庫表格中的字段順序依次填寫
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>showDataList</title> </head> <body> <div id="app" align="center"> <table border="1" width="48%" > <tr> <td colspan="5"> <h2>用戶列表</h2> </td> </tr> <tr> <td>編號</td> <td>姓名</td> <td>性別</td> <td>年齡</td> </tr> </table> </div> </body> </html>
顯示效果：
在這里我導入了VUE和Axios的JS文件，在HTML的<head>標簽中引入相應的JS文件 （axios起的作用和Ajax是相同的，使用axios是因為在做項目的過程中axios相較于Ajax來說很好的解決了回調地獄的問題）
<script src="static/js/vue.js"></script> <script src="static/js/axios.js"></script>
導入了JS文件后，準備<script>標簽用來準備VUE對象和axios進行數據傳輸<script>標簽中的代碼如下：
<script>
// 設定axios的請求前綴
axios.defaults.baseURL = "http://localhost:8090"
// 指定VUE的渲染區域
const app = new Vue({
el: "#app",
data: {
},
methods: {
}
})
</script>代碼解釋：
axios.defaults.baseURL = "http://localhost:8090"
在前后端分離的項目中，前端每一次向后端傳輸數據時都要指定HTTP協議以及端口號，這行代碼定義了請求前綴，之后axios傳輸數據時都默認加上了雙引號中的內容
const app = new Vue({...})這段代碼中指定了VUE要渲染的區域,el對應內容是id為app的div圖層，data為指定數據的區域，methods為定義方法的區域
新建SpringBoot項目并配置MybatisPlus，配置MybatisPlus的過程就不在此贅述
在后端pojo包下新建User實體類，實體類中的屬性要與數據庫中的字段對應一致。
@Data
@Accessors(chain = true)
@TableName("demo_user")
public class User implements Serializable {
@TableId(type = IdType.AUTO)
private Integer id;
// 如果屬性與字段同名（包括駝峰規則）注解可以省略
private String name;
private Integer age;
private String sex;
}代碼解釋：
@Data為lombok插件提供的注解，自動為屬性提供了get/set/toString等方法
@Accessors(chain = true)也是lombok插件提供的注解，開啟鏈式編程
@TableName("demo_user")為MybatisPlus提供的注解,用于指定該實體類對應數據中的哪張表
@TableId(type = IdType.AUTO)用來指定實體類中的哪個屬性作為表中的主鍵，并且主鍵自增實現了
Serializable接口的作用是將該實體類序列化，將實體類序列化的目的是為了保證數據在傳輸的過程中不會出錯
在創建好實體類后，開始寫Controller層的代碼
@RestController
@CrossOrigin
@RequestMapping("/table")
public class TableController {
@Autowired
private UserService userService;
@GetMapping("/getAllUser")
public List<User> getAllUser() {
List<User> userList = userService.selectAll();
return userList;
}
}代碼解釋：
在Controller層中添加@CrossOrigin注解的作用是支持跨域
@RestController相當于@Controller和@ResponseBody兩個注解的結合，將后端的數據以JSON串的格式返回到前端
①. UserService接口
public interface UserService {
/**
* 查詢數據庫對應表中所有的數據
*
* @return 集合對象
*/
List<User> selectAll();
}②. UserServiceImpl實現類
@Service
public class UserServiceImpl implements UserService {
@Autowired
private UserMapper userMapper;
/**
* 查詢數據庫中所有的集合
*
* @return 集合對象
*/
@Override
public List<User> selectAll() {
List<User> userList = userMapper.selectList(null);
return userList;
}
}在MybatisPlus中，selectList方法的參數為空時會查詢當前表中的所有數據
①. UserMapper接口
public interface UserMapper extends BaseMapper<User> {
}②. UserMapper.xml文件
<?xml version="1.0" encoding="utf-8" ?> <!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd" > <mapper namespace="cn.shijimo.mapper.UserMapper"> </mapper>
在MybatisPlus中SQL語句可以自動生成
完成前端和后端的基本配置之后,接下來進行前后端分離項目的整合,在進行整合時先對實現過程進行分析
1. 當用戶點擊顯示表格按鈕時就應該發起Ajax請求獲取userList數據
2. 將UserList中的數據在頁面中展現（頁面中的數據必須在data中定義）
3. 將請求的結果賦值給data屬性
4. 利用v-for指令實現數據的遍歷
對<script>代碼塊中VUE的代碼進行編輯：
因為后端的返回值是一個集合，所以首先在data數據域中定義userList數組對象用來接收從后端傳來的集合，接著在methods方法區域中定義一個方法getUserList，該方法中要進行axios向后端發起請求，并將返回的數據存儲到數組對象中。在HTML的<table>標簽中添加一個按鈕組件，為按鈕綁定getUserList方法。
添加完按鈕組件之后，在<table>標簽中也添加<tr>標簽，使用VUE中的v-for指令來對userList集合進行遍歷，依次取出并進行渲染。
<script>
// 設定axios的請求前綴
axios.defaults.baseURL = "http://localhost:8090"
// 指定VUE的渲染區域
const app = new Vue({
el: "#app",
data: {
// 定義集合來存儲數據, 此時數據為null
userList: []
},
methods: {
// 1. 定義getUserList方法 獲取后臺服務器數據
async getUserList() {
// 新增操作請求的類型: post 接收時需要使用JSON方式處理
let {
data: result
} = await axios.get("/table/getAllUser")
// Ajax調用之后, 將請求結果賦值給data屬性
this.userList = result
}
}
})
</script><table border="1" width="48%" > <tr> <td colspan="5"> <h2>用戶列表</h2> </td> </tr> <tr> <td colspan="5" > <button type="button" @click="getUserList">顯示表格</button> </td> </tr> <tr> <td>編號</td> <td>姓名</td> <td>性別</td> <td>年齡</td> </tr> <tr v-for="user in userList"> <td v-text="user.id"></td> <td v-text="user.name"></td> <td v-text="user.sex"></td> <td v-text="user.age"></td> </tr> </table>
代碼解釋：
在這里使用v-text指令不使用插值表達式（即{{}}）的原因是因為如果傳輸的數據很多的話，在沒有顯示完之前頁面上會顯示{{XXX}}，不利于瀏覽器的安全。
至此前后端整合完畢。
表中的內容就全部顯示在了前端，最后再用bootstrap進行修飾美化
感謝各位的閱讀，以上就是“SpringBoot+VUE怎么實現數據表格”的內容了，經過本文的學習后，相信大家對SpringBoot+VUE怎么實現數據表格這一問題有了更深刻的體會，具體使用情況還需要大家實踐驗證。這里是億速云，小編將為大家推送更多相關知識點的文章，歡迎關注！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
