SpringBoot+Mybatis+Vue 實現商品模塊的crud操作
準備工作
第一步 創建新module,名字為10-springboot-goods-vue.
第二步 添加maven依賴并進行初步配置(拷貝即可)
第三步 拷貝pojo,dao,service包中的所有接口和類.
第四步 拷貝靜態資源到static目錄(例如vue.js,axios.min.js)
商品查詢設計及實現
創建GoodsController并定義相關方法,代碼如下:
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目錄創建goods-vue.html,并基于vue呈現數據，代碼如下
<!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://m.cgvv.com.cn/bcjs/js/axios.min.js'></script> <script src='http://m.cgvv.com.cn/bcjs/js/vue.js'></script> <script> var vm=new Vue({//vue對象時vue.js應用的入口對象 el:'#app',//vue對象要監控的區域 data:{//此對象用于同步頁面數據的一個對象 goods:{} }, methods:{//同步與頁面元素事件處理函數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進行訪問測試，如圖所示：
商品刪除設計及實現
在控制層方法中添加，處理刪除邏輯的方法，代碼如如下：
@RequestMapping('/goods/doDeleteById/{id}')public String doDeleteById(@PathVariable('id') Integer id){ System.out.println('delete id '+id); goodsService.deleteById(id); return 'delete ok';}
在商品列表中的tr對象內部添加刪除元素，代碼如下：
<td><a @click='doDeleteById(g.id)'>刪除</a></td>
在商品模塊的vue對象中添加執行刪除邏輯的方法，代碼如下：
doDeleteById:function(id){ var url='goods/doDeleteById/'+id; axios.get(url) .then(function(res){ alert(res.data); this.vm.doFindGoods(); })}
啟動服務進行訪問測試，檢測其結果。
商品添加設計及實現
在Controller類中添加用于處理商品添加邏輯的方法，代碼如下：
@RequestMapping('/goods/doSaveGoods')public String doSaveGoods(@RequestBody Goods entity){ System.out.println('entity='+entity); goodsService.saveGoods(entity); return 'save ok';}
在Goods頁面上添加表單元素，用于實現用戶輸入，代碼如下：
<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對象內部添加用于同步表單數據的Data屬性內容，代碼如下：
data:{ name:'', remark:'', goods:'',}
在vue對象內部添加處理添加操作的事件處理函數，代碼如下：
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=''; });}
啟動服務，進行添加操作測試。
商品修改設計及實現
在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對象中的用于保存和修改數據的方法，代碼如下：
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=''; });}
啟動服務進行訪問測試，檢測其結果。
總結(Summary)
本小節主要基于vue和axio技術實現了商品模塊的基本操作，重點掌握客戶端與服務端的交互和傳值過程。
到此這篇關于SpringBoot+Mybatis+Vue 實現商品模塊的crud操作的文章就介紹到這了,更多相關SpringBoot Mybatis Vue crud內容請搜索好吧啦網以前的文章或繼續瀏覽下面的相關文章希望大家以后多多支持好吧啦網！
相關文章：
網公網安備