首先引入hutool工具類

Hutool是一個(gè)Java工具包類庫(kù)，對(duì)文件、流、加密解密、轉(zhuǎn)碼、正則、線程、XML等JDK方法進(jìn)行封裝，組成各種Util工具類
Hutool是一個(gè)小而全的Java工具類庫(kù)，通過靜態(tài)方法封裝，降低相關(guān)API的學(xué)習(xí)成本，提高工作效率，使Java擁有函數(shù)式語(yǔ)言般的優(yōu)雅，讓Java語(yǔ)言也可以“甜甜的”。

<dependency><groupId>cn.hutool</groupId><artifactId>hutool-all</artifactId><version>5.7.19</version></dependency>

https://www.hutool.cn/

編寫查詢接口,使用GetMapping

使用分頁(yè)查詢,因?yàn)橹凹恿薽ybatisplus 分頁(yè)查詢組件

@GetMappingpublic Result<?> findPage(@RequestParam(defaultValue = "1") Integer pageNum,@RequestParam(defaultValue = "10") Integer pageSize,@RequestParam (defaultValue = "")String search) {LambdaQueryWrapper<User> wrapper = Wrappers.<User>lambdaQuery();if(StrUtil.isNotBlank(search)){wrapper.like(User::getUsername,search);}Page<User> userPage = userMapper.selectPage(new Page<>(pageNum, pageSize),wrapper);return Result.success(userPage);}

通過這樣一個(gè)Api的調(diào)用實(shí)現(xiàn)了后臺(tái)分頁(yè)模糊查詢

啟動(dòng)項(xiàng)目查看結(jié)果

http://localhost:9090/user

發(fā)現(xiàn)數(shù)據(jù)已經(jīng)被展示了出來

對(duì)數(shù)據(jù)進(jìn)行渲染

在之前寫element前端的時(shí)候在Home.vue里找到tableData表格.

只需要把從后臺(tái)請(qǐng)求過來的值放入tableData里面即可實(shí)現(xiàn)對(duì)后臺(tái)數(shù)據(jù)庫(kù)的渲染

創(chuàng)建一個(gè)load()方法,往tableData傳入數(shù)據(jù)

因?yàn)槭欠猪?yè)查詢所以需要3個(gè)變量

load(){request.get("/user",{params:{pageNum: this.currentPage,pageSize: this.pageSize,search: this.search,}}).then(res =>{console.log(res)this.tableData = res.data.recordsthis.total = res.data.total})},

這里this.tableData = res.data.records, records指的是

created方法是用來啟動(dòng) load()方法的

created() {this.load()},

存入的數(shù)據(jù)庫(kù)里面的數(shù)據(jù)就成功的在前臺(tái)展現(xiàn)出來了

完善查詢按鈕功能

<!-- 搜索區(qū)域--><div style="margin: 10px 0"><el-input v-model="search" placeholder="請(qǐng)輸入關(guān)鍵字" style="width: 20%" clearable /><el-button type="primary" style="margin-left: 5px" @click="load">查詢</el-button></div>

編寫編輯功能

<el-button size="mini" @click="handleEdit( scope.row)">編輯</el-button>

編寫handleEdit() {
},方法

handleEdit(row) {this.form = JSON.parse(JSON.stringify(row))this.dialogVisible = true}

在UserController.java里面編寫更新接口,因?yàn)榫庉嬐陻?shù)據(jù)后,不更新id會(huì)導(dǎo)致數(shù)據(jù)重復(fù)報(bào)錯(cuò),這里id在數(shù)據(jù)庫(kù)里面是主鍵

@PutMappingpublic Result<?> update(@RequestBody User user) {userMapper.updateById(user);return Result.success();}

完善save方法

save(){if(this.form.id){//更新request.put("/user",this.form).then(res => {console.log(res)if (res.code === '0') {this.$message({type:"success",message:"更新成功"})}else {this.$message({type:"error",message: res.msg})}this.load()//刷新表格數(shù)據(jù)this.dialogVisible = false//關(guān)閉彈窗})}else{//新增request.post("/user", this.form).then(res => {console.log(res)if (res.code === '0') {this.$message({type:"success",message:"新增成功"})}else {this.$message({type:"error",message: res.msg})}this.load()//刷新表格數(shù)據(jù)this.dialogVisible = false//關(guān)閉彈窗})}},

試一下效果

完善分頁(yè)功能

編寫handleSizeChange() 方法 與 handleCurrentChange()方法

handleSizeChange(pageSize) {//改變當(dāng)前每頁(yè)的個(gè)數(shù)this.pageSize=pageSizethis.load()},handleCurrentChange(pageNum){//改變當(dāng)前所在的頁(yè)碼this.currentPage=pageNumthis.load()}

分頁(yè)功能就能正常使用了

完善刪除功能

該刪除部分主要是根據(jù)主鍵id進(jìn)行刪除的

<el-popconfirm title="確定刪除嗎,鐵子?" @confirm="handleDelete( scope.row.id)"><template #reference><el-buttonsize="mini"type="danger">刪除</el-button></template></el-popconfirm>

在UserController.java類中定義 一個(gè)刪除接口,參數(shù)為id

@DeleteMapping("/{id}")//刪除public Result<?> update(@PathVariable Long id) {userMapper.deleteById(id);return Result.success();}

編寫handleDelete()方法

handleDelete(id) {console.log(id)request.delete("/user/"+ id ).then(res=>{if (res.code === '0') {this.$message({type:"success",message:"刪除成功"})}else {this.$message({type:"error",message: res.msg})}this.load() //刪除之后重新加載表格數(shù)據(jù)})},

測(cè)試刪除功能

與50位技術(shù)專家面對(duì)面20年技術(shù)見證，附贈(zèng)技術(shù)全景圖

總結(jié)

以上是生活随笔為你收集整理的从0搭建一个Springboot+vue前后端分离项目(八)把数据从后台传到前端进行展示渲染,完善增删改查的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。