SpringBoot+VUE實(shí)現(xiàn)數(shù)據(jù)表格的實(shí)戰(zhàn)
前言
還記得第一次做項(xiàng)目時(shí)，因?yàn)椴粫?huì)將數(shù)據(jù)庫表中的數(shù)據(jù)渲染到前端而頭疼，最后還是靠layui提供的數(shù)據(jù)表格API實(shí)現(xiàn)了前端數(shù)據(jù)表格的渲染。一直到現(xiàn)在做了很多SpringBoot項(xiàng)目、SSM項(xiàng)目之后，現(xiàn)在返回頭來看這個(gè)曾經(jīng)這個(gè)讓我備受折磨的問題，腦海中下意識(shí)就會(huì)想到很多種解決的方法，比如導(dǎo)入前端的數(shù)據(jù)表格、通過JavaScript渲染數(shù)據(jù)表格、通過VUE來渲染數(shù)據(jù)表格…本文將使用VUE+SpringBoot+MybatisPlus，以前后端分離的形式來實(shí)現(xiàn)數(shù)據(jù)表格在前端的渲染，在此做下記錄，便于以后進(jìn)行回顧。
使用的開發(fā)工具：
- 前端：HBuilderX
- 后端：IntelliJ IDEA
本次要進(jìn)行渲染的數(shù)據(jù)庫內(nèi)容如下：
提示：以下是本篇文章正文內(nèi)容，下面案例可供參考
一、前端準(zhǔn)備
1. 基礎(chǔ)界面
在前端先將頁面寫好，在這里我按照數(shù)據(jù)庫表格中的字段順序依次填寫
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>showDataList</title> </head> <body> <div id="app" align="center"> <table border="1" width="48%" style="text-align: center;"> <tr> <td colspan="5"> <h1>用戶列表</h1> </td> </tr> <tr> <td>編號(hào)</td> <td>姓名</td> <td>性別</td> <td>年齡</td> </tr> </table> </div> </body> </html>
顯示效果：
2. 導(dǎo)入JS文件
在這里我導(dǎo)入了VUE和Axios的JS文件，在HTML的<head>標(biāo)簽中引入相應(yīng)的JS文件 （axios起的作用和Ajax是相同的，使用axios是因?yàn)樵谧鲰?xiàng)目的過程中axios相較于Ajax來說很好的解決了回調(diào)地獄的問題）
<script src="static/js/vue.js"></script> <script src="static/js/axios.js"></script>
導(dǎo)入了JS文件后，準(zhǔn)備<script>標(biāo)簽用來準(zhǔn)備VUE對象和axios進(jìn)行數(shù)據(jù)傳輸
<script>標(biāo)簽中的代碼如下：
<script>
// 設(shè)定axios的請求前綴
axios.defaults.baseURL = "http://localhost:8090"
// 指定VUE的渲染區(qū)域
const app = new Vue({
el: "#app",
data: {
},
methods: {
}
})
</script>
代碼解釋：
axios.defaults.baseURL = "http://localhost:8090"
在前后端分離的項(xiàng)目中，前端每一次向后端傳輸數(shù)據(jù)時(shí)都要指定HTTP協(xié)議以及端口號(hào)，這行代碼定義了請求前綴，之后axios傳輸數(shù)據(jù)時(shí)都默認(rèn)加上了雙引號(hào)中的內(nèi)容
const app = new Vue({...})
這段代碼中指定了VUE要渲染的區(qū)域,el對應(yīng)內(nèi)容是id為app的div圖層，data為指定數(shù)據(jù)的區(qū)域，methods為定義方法的區(qū)域
二、后端準(zhǔn)備
新建SpringBoot項(xiàng)目并配置MybatisPlus，配置MybatisPlus的過程就不在此贅述
1. 創(chuàng)建實(shí)體類
在后端pojo包下新建User實(shí)體類，實(shí)體類中的屬性要與數(shù)據(jù)庫中的字段對應(yīng)一致。
@Data
@Accessors(chain = true)
@TableName("demo_user")
public class User implements Serializable {
@TableId(type = IdType.AUTO)
private Integer id;
// 如果屬性與字段同名（包括駝峰規(guī)則）注解可以省略
private String name;
private Integer age;
private String sex;
}
代碼解釋：
@Data為lombok插件提供的注解，自動(dòng)為屬性提供了get/set/toString等方法@Accessors(chain = true)也是lombok插件提供的注解，開啟鏈?zhǔn)骄幊?/strong>@TableName("demo_user")為MybatisPlus提供的注解,用于指定該實(shí)體類對應(yīng)數(shù)據(jù)中的哪張表@TableId(type = IdType.AUTO)用來指定實(shí)體類中的哪個(gè)屬性作為表中的主鍵，并且主鍵自增實(shí)現(xiàn)了Serializable接口的作用是將該實(shí)體類序列化，將實(shí)體類序列化的目的是為了保證數(shù)據(jù)在傳輸?shù)倪^程中不會(huì)出錯(cuò)
2. Controller層
在創(chuàng)建好實(shí)體類后，開始寫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相當(dāng)于@Controller和@ResponseBody兩個(gè)注解的結(jié)合，將后端的數(shù)據(jù)以JSON串的格式返回到前端
3. Service層
①. UserService接口
public interface UserService {
/**
* 查詢數(shù)據(jù)庫對應(yīng)表中所有的數(shù)據(jù)
*
* @return 集合對象
*/
List<User> selectAll();
}
②. UserServiceImpl實(shí)現(xiàn)類
@Service
public class UserServiceImpl implements UserService {
@Autowired
private UserMapper userMapper;
/**
* 查詢數(shù)據(jù)庫中所有的集合
*
* @return 集合對象
*/
@Override
public List<User> selectAll() {
List<User> userList = userMapper.selectList(null);
return userList;
}
}
在MybatisPlus中，selectList方法的參數(shù)為空時(shí)會(huì)查詢當(dāng)前表中的所有數(shù)據(jù)
4. Mapper層
①. 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語句可以自動(dòng)生成
三、前后端整合
完成前端和后端的基本配置之后,接下來進(jìn)行前后端分離項(xiàng)目的整合,在進(jìn)行整合時(shí)先對實(shí)現(xiàn)過程進(jìn)行分析
1. 當(dāng)用戶點(diǎn)擊顯示表格按鈕時(shí)就應(yīng)該發(fā)起Ajax請求獲取userList數(shù)據(jù)
2. 將UserList中的數(shù)據(jù)在頁面中展現(xiàn)（頁面中的數(shù)據(jù)必須在data中定義）
3. 將請求的結(jié)果賦值給data屬性
4. 利用v-for指令實(shí)現(xiàn)數(shù)據(jù)的遍歷
對<script>代碼塊中VUE的代碼進(jìn)行編輯：
因?yàn)楹蠖说姆祷刂凳且粋€(gè)集合，所以首先在data數(shù)據(jù)域中定義userList數(shù)組對象用來接收從后端傳來的集合，接著在methods方法區(qū)域中定義一個(gè)方法getUserList，該方法中要進(jìn)行axios向后端發(fā)起請求，并將返回的數(shù)據(jù)存儲(chǔ)到數(shù)組對象中。在HTML的<table>標(biāo)簽中添加一個(gè)按鈕組件，為按鈕綁定getUserList方法。
添加完按鈕組件之后，在<table>標(biāo)簽中也添加<tr>標(biāo)簽，使用VUE中的v-for指令來對userList集合進(jìn)行遍歷，依次取出并進(jìn)行渲染。
<script>
// 設(shè)定axios的請求前綴
axios.defaults.baseURL = "http://localhost:8090"
// 指定VUE的渲染區(qū)域
const app = new Vue({
el: "#app",
data: {
// 定義集合來存儲(chǔ)數(shù)據(jù), 此時(shí)數(shù)據(jù)為null
userList: []
},
methods: {
// 1. 定義getUserList方法 獲取后臺(tái)服務(wù)器數(shù)據(jù)
async getUserList() {
// 新增操作請求的類型: post 接收時(shí)需要使用JSON方式處理
let {
data: result
} = await axios.get("/table/getAllUser")
// Ajax調(diào)用之后, 將請求結(jié)果賦值給data屬性
this.userList = result
}
}
})
</script>
<table border="1" width="48%" style="text-align: center;"> <tr> <td colspan="5"> <h1>用戶列表</h1> </td> </tr> <tr> <td colspan="5" style="text-align: left;"> <button type="button" @click="getUserList">顯示表格</button> </td> </tr> <tr> <td>編號(hào)</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指令不使用插值表達(dá)式（即{{}}）的原因是因?yàn)?strong>如果傳輸?shù)臄?shù)據(jù)很多的話，在沒有顯示完之前頁面上會(huì)顯示{{XXX}}，不利于瀏覽器的安全。
至此前后端整合完畢。
四、運(yùn)行結(jié)果
表中的內(nèi)容就全部顯示在了前端，最后再用bootstrap進(jìn)行修飾美化
總結(jié)
以上就是使用SpringBoot + VUE + Mybatis實(shí)現(xiàn)了數(shù)據(jù)表格的渲染，更多相關(guān)SpringBoot+VUE數(shù)據(jù)表格內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
- springboot+VUE前后端分離實(shí)現(xiàn)疫情防疫平臺(tái)JAVA
- springboot+vue實(shí)現(xiàn)驗(yàn)證碼功能
- vue+springboot實(shí)現(xiàn)登錄功能
- Vue+SpringBoot前后端分離中的跨域問題
- 基于springboot+vue實(shí)現(xiàn)垃圾分類管理系統(tǒng)
- SpringBoot+MyBatisPlus+Vue 前后端分離項(xiàng)目快速搭建過程(前端篇)
- SpringBoot+MyBatisPlus+Vue 前后端分離項(xiàng)目快速搭建過程(后端)
- springboot+vue制作后臺(tái)管理系統(tǒng)項(xiàng)目
相關(guān)文章
使用Swagger時(shí)Controller中api接口顯示不全的問題分析及解決
swagger是一個(gè)十分好用的api接口管理、測試框架,現(xiàn)在越來越多的人使用這個(gè)做接口的測試和管理,但經(jīng)常遇到Controller中的api接口顯示不全的問題,所以本文給大家詳細(xì)分析了問題以及解決方法,需要的朋友可以參考下2024-02-02
springboot手動(dòng)事務(wù)回滾的實(shí)現(xiàn)代碼
這篇文章主要介紹了springboot手動(dòng)事務(wù)回滾的實(shí)現(xiàn)方法，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-07-07
在?Web應(yīng)用開發(fā)中,攔截器（Interceptor）是一種非常重要的機(jī)制,能夠在請求處理的各個(gè)階段進(jìn)行前置和后置處理,本文主要來探討一下?Spring?攔截鏈的實(shí)現(xiàn)原理,需要的可以了解下2025-01-01
Java生產(chǎn)者消費(fèi)者的三種實(shí)現(xiàn)方式
這篇文章主要介紹了Java生產(chǎn)者消費(fèi)者的三種實(shí)現(xiàn)方式,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-07-07
Java中documentHelper解析xml獲取想要的數(shù)據(jù)
本文主要介紹了Java中documentHelper解析xml獲取想要的數(shù)據(jù)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-02-02
mvc架構(gòu)實(shí)現(xiàn)商品的購買（二）
這篇文章主要為大家詳細(xì)介紹了mvc架構(gòu)實(shí)現(xiàn)商品購買功能,具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-11-11
Spring主配置文件(applicationContext.xml) 導(dǎo)入約束詳解
在本篇文章里我們給各位整理的是關(guān)于Spring主配置文件(applicationContext.xml) 導(dǎo)入約束的相關(guān)知識(shí)點(diǎn)內(nèi)容，需要參考下。2019-08-08
Springboot實(shí)現(xiàn)多文件上傳代碼解析
這篇文章主要介紹了Springboot實(shí)現(xiàn)多文件上傳代碼解析,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-04-04
這篇文章主要介紹了java編程scanner類用法示例，涉及一個(gè)通過scanner類實(shí)現(xiàn)需要手動(dòng)輸入變量時(shí)進(jìn)行輸入的實(shí)例，然后分享了一個(gè)簡單的eclipse對Java代碼格式化的技巧，具有一定借鑒價(jià)值，需要的朋友可以參考。2017-11-11
詳解Spring注解驅(qū)動(dòng)開發(fā)之屬性賦值
今天帶大家學(xué)習(xí)Spring注解驅(qū)動(dòng)開發(fā)的相關(guān)知識(shí),文中有非常詳細(xì)的代碼示例,對正在學(xué)習(xí)Java的小伙伴們很有幫助,需要的朋友可以參考下2021-05-05