SpringBoot+Mybatis+Vue 實現(xiàn)商品模塊的crud操作
準(zhǔn)備工作
第一步 創(chuàng)建新module,名字為10-springboot-goods-vue.
第二步 添加maven依賴并進(jìn)行初步配置(拷貝即可)
第三步 拷貝pojo,dao,service包中的所有接口和類.
第四步 拷貝靜態(tài)資源到static目錄(例如vue.js,axios.min.js)
商品查詢設(shè)計及實現(xiàn)
創(chuàng)建GoodsController并定義相關(guān)方法,代碼如下:
package com.cy.pj.goods.controller;import com.cy.pj.goods.pojo.Goods;import com.cy.pj.goods.service.GoodsService;import java.util.List;@RestControllerpublic class GoodsController { @Autowired private GoodsService goodsService; /**查詢所有商品信息*/ @GetMapping('/goods/doFindGoods') public List<Goods> doFindGoods(){ return goodsService.findGoods(); }}
在項目static目錄創(chuàng)建goods-vue.html,并基于vue呈現(xiàn)數(shù)據(jù)，代碼如下
<!DOCTYPE html><html lang='en'><head> <meta charset='UTF-8'> <title>Title</title></head><body> <div id='app'> <h1>The Goods Page</h1> <table> <thead> <tr> <th>id</th> <th>name</th> <th>remark</th> <th>createdTime</th> </tr> </thead> <tbody> <tr v-for='g in goods'> <td>{{g.id}}</td> <td>{{g.name}}</td> <td>{{g.remark}}</td> <td>{{g.createdTime}}</td> </tr> </tbody> </table> </div> <script src='http://www.aoyou183.cn/bcjs/js/axios.min.js'></script> <script src='http://www.aoyou183.cn/bcjs/js/vue.js'></script> <script> var vm=new Vue({//vue對象時vue.js應(yīng)用的入口對象 el:'#app',//vue對象要監(jiān)控的區(qū)域 data:{//此對象用于同步頁面數(shù)據(jù)的一個對象 goods:{} }, methods:{//同步與頁面元素事件處理函數(shù)doFindGoods:function(){ let url='goods/doFindGoods'; axios.get(url) .then(function(result){ this.vm.goods=result.data; }); } }, mounted:function(){ this.doFindGoods(); } }); </script></body></html>
啟動tomcat進(jìn)行訪問測試，如圖所示：
商品刪除設(shè)計及實現(xiàn)
在控制層方法中添加，處理刪除邏輯的方法，代碼如如下：
@RequestMapping('/goods/doDeleteById/{id}')public String doDeleteById(@PathVariable('id') Integer id){ System.out.println('delete id '+id); goodsService.deleteById(id); return 'delete ok';}
在商品列表中的tr對象內(nèi)部添加刪除元素，代碼如下：
<td><a @click='doDeleteById(g.id)'>刪除</a></td>
在商品模塊的vue對象中添加執(zhí)行刪除邏輯的方法，代碼如下：
doDeleteById:function(id){ var url='goods/doDeleteById/'+id; axios.get(url) .then(function(res){ alert(res.data); this.vm.doFindGoods(); })}
啟動服務(wù)進(jìn)行訪問測試，檢測其結(jié)果。
商品添加設(shè)計及實現(xiàn)
在Controller類中添加用于處理商品添加邏輯的方法，代碼如下：
@RequestMapping('/goods/doSaveGoods')public String doSaveGoods(@RequestBody Goods entity){ System.out.println('entity='+entity); goodsService.saveGoods(entity); return 'save ok';}
在Goods頁面上添加表單元素，用于實現(xiàn)用戶輸入，代碼如下：
<form> <ul> <li>name</li> <li><input v-model='name'></li> <li>remark</li> <li><textarea v-model='remark'></textarea></li> <li><input type='button' @click='doSaveOrUpdateGoods' value='Save Goods'></li> </ul></form>
在vue對象內(nèi)部添加用于同步表單數(shù)據(jù)的Data屬性內(nèi)容，代碼如下：
data:{ name:'', remark:'', goods:'',}
在vue對象內(nèi)部添加處理添加操作的事件處理函數(shù)，代碼如下：
doSaveOrUpdateGoods:function(){ var params={'name':this.name,'remark':this.remark}; var url='goods/doSaveGoods'; axios.post(url,params) .then(function(res){ alert(res.data); this.vm.doFindGoods(); this.vm.name=''; this.vm.remark=''; });}
啟動服務(wù)，進(jìn)行添加操作測試。
商品修改設(shè)計及實現(xiàn)
在Controller中添加基于商品id查詢和更新商品信息的方法，代碼如下：
@RequestMapping('/goods/doFindById/{id}')public Goods doFindById(@PathVariable('id') Integer id){ return goodsService.findById(id);}
@RequestMapping('goods/doUpdateGoods')public String doUpdateGoods(@RequestBody Goods entity){ goodsService.updateGoods(entity); return 'update ok';}
在Goods頁面表單中添加隱藏的表單元素用于記錄id值，代碼如下：
<li><input type='hidden' v-model='id'></li>
在Goods頁面記錄中添加修改操作的需要的a元素，代碼如下：
<td><a @click='doFindById(g.id)'>修改</a></td>
在Vue對象中添加基于id查詢的方法，代碼如下：
doFindById:function(id){ var url='goods/doFindById/'+id; axios.get(url) .then(function(res){ console.log(res.data); this.vm.id=res.data.id; this.vm.name=res.data.name; this.vm.remark=res.data.remark; })}
修改Vue對象中的用于保存和修改數(shù)據(jù)的方法，代碼如下：
doSaveOrUpdateGoods:function(){ var params={'id':this.id,'name':this.name,'remark':this.remark}; var url=this.id?'goods/doUpdateGoods':'goods/doSaveGoods'; axios.post(url,params) .then(function(res){ this.vm.doFindGoods(); alert(res.data); this.vm.id=''; this.vm.name=''; this.vm.remark=''; });}
啟動服務(wù)進(jìn)行訪問測試，檢測其結(jié)果。
總結(jié)(Summary)
本小節(jié)主要基于vue和axio技術(shù)實現(xiàn)了商品模塊的基本操作，重點掌握客戶端與服務(wù)端的交互和傳值過程。
到此這篇關(guān)于SpringBoot+Mybatis+Vue 實現(xiàn)商品模塊的crud操作的文章就介紹到這了,更多相關(guān)SpringBoot Mybatis Vue crud內(nèi)容請搜索好吧啦網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持好吧啦網(wǎng)！
相關(guān)文章：
1. idea設(shè)置提示不區(qū)分大小寫的方法2. .NET SkiaSharp 生成二維碼驗證碼及指定區(qū)域截取方法實現(xiàn)3. HTTP協(xié)議常用的請求頭和響應(yīng)頭響應(yīng)詳解說明（學(xué)習(xí)）4. css代碼優(yōu)化的12個技巧5. CentOS郵件服務(wù)器搭建系列—— POP / IMAP 服務(wù)器的構(gòu)建（ Dovecot ）6. ASP.NET MVC通過勾選checkbox更改select的內(nèi)容7. 原生JS實現(xiàn)記憶翻牌游戲8. Django使用HTTP協(xié)議向服務(wù)器傳參方式小結(jié)9. django創(chuàng)建css文件夾的具體方法10. IntelliJ IDEA創(chuàng)建web項目的方法
網(wǎng)公網(wǎng)安備