在創(chuàng)建好實(shí)體類后，開(kāi)始寫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; }}

代碼解釋：

①. UserService接口

public interface UserService { /** * 查詢數(shù)據(jù)庫(kù)對(duì)應(yīng)表中所有的數(shù)據(jù) * * @return 集合對(duì)象 */ List<User> selectAll();}

②. UserServiceImpl實(shí)現(xiàn)類

@Servicepublic class UserServiceImpl implements UserService { @Autowired private UserMapper userMapper; /** * 查詢數(shù)據(jù)庫(kù)中所有的集合 * * @return 集合對(duì)象 */ @Override public List<User> selectAll() {List<User> userList = userMapper.selectList(null);return userList; }}

在MybatisPlus中，selectList方法的參數(shù)為空時(shí)會(huì)查詢當(dāng)前表中的所有數(shù)據(jù)

①. 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語(yǔ)句可以自動(dòng)生成

完成前端和后端的基本配置之后,接下來(lái)進(jìn)行前后端分離項(xiàng)目的整合,在進(jìn)行整合時(shí)先對(duì)實(shí)現(xiàn)過(guò)程進(jìn)行分析1. 當(dāng)用戶點(diǎn)擊顯示表格按鈕時(shí)就應(yīng)該發(fā)起Ajax請(qǐng)求獲取userList數(shù)據(jù)2. 將UserList中的數(shù)據(jù)在頁(yè)面中展現(xiàn)（頁(yè)面中的數(shù)據(jù)必須在data中定義）3. 將請(qǐng)求的結(jié)果賦值給data屬性4. 利用v-for指令實(shí)現(xiàn)數(shù)據(jù)的遍歷

對(duì)<script>代碼塊中VUE的代碼進(jìn)行編輯：因?yàn)楹蠖说姆祷刂凳且粋€(gè)集合，所以首先在data數(shù)據(jù)域中定義userList數(shù)組對(duì)象用來(lái)接收從后端傳來(lái)的集合，接著在methods方法區(qū)域中定義一個(gè)方法getUserList，該方法中要進(jìn)行axios向后端發(fā)起請(qǐng)求，并將返回的數(shù)據(jù)存儲(chǔ)到數(shù)組對(duì)象中。在HTML的<table>標(biāo)簽中添加一個(gè)按鈕組件，為按鈕綁定getUserList方法。

添加完按鈕組件之后，在<table>標(biāo)簽中也添加<tr>標(biāo)簽，使用VUE中的v-for指令來(lái)對(duì)userList集合進(jìn)行遍歷，依次取出并進(jìn)行渲染。

<script>// 設(shè)定axios的請(qǐng)求前綴axios.defaults.baseURL = 'http://localhost:8090'// 指定VUE的渲染區(qū)域const app = new Vue({el: '#app',data: {// 定義集合來(lái)存儲(chǔ)數(shù)據(jù), 此時(shí)數(shù)據(jù)為nulluserList: []},methods: {// 1. 定義getUserList方法 獲取后臺(tái)服務(wù)器數(shù)據(jù)async getUserList() {// 新增操作請(qǐng)求的類型: post接收時(shí)需要使用JSON方式處理let {data: result} = await axios.get('/table/getAllUser')// Ajax調(diào)用之后, 將請(qǐng)求結(jié)果賦值給data屬性this.userList = result}}})</script>

<table border='1' 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>