SpringBoot+Mybatis+Vue 實(shí)現(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)
商品查詢?cè)O(shè)計(jì)及實(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(); }}
在項(xiàng)目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.gepszalag.com/bcjs/js/axios.min.js'></script> <script src='http://www.gepszalag.com/bcjs/js/vue.js'></script> <script> var vm=new Vue({//vue對(duì)象時(shí)vue.js應(yīng)用的入口對(duì)象 el:'#app',//vue對(duì)象要監(jiān)控的區(qū)域 data:{//此對(duì)象用于同步頁(yè)面數(shù)據(jù)的一個(gè)對(duì)象 goods:{} }, methods:{//同步與頁(yè)面元素事件處理函數(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>
啟動(dòng)tomcat進(jìn)行訪問(wèn)測(cè)試，如圖所示：
商品刪除設(shè)計(jì)及實(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對(duì)象內(nèi)部添加刪除元素，代碼如下：
<td><a @click='doDeleteById(g.id)'>刪除</a></td>
在商品模塊的vue對(duì)象中添加執(zhí)行刪除邏輯的方法，代碼如下：
doDeleteById:function(id){ var url='goods/doDeleteById/'+id; axios.get(url) .then(function(res){ alert(res.data); this.vm.doFindGoods(); })}
啟動(dòng)服務(wù)進(jìn)行訪問(wèn)測(cè)試，檢測(cè)其結(jié)果。
商品添加設(shè)計(jì)及實(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頁(yè)面上添加表單元素，用于實(shí)現(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對(duì)象內(nèi)部添加用于同步表單數(shù)據(jù)的Data屬性內(nèi)容，代碼如下：
data:{ name:'', remark:'', goods:'',}
在vue對(duì)象內(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=''; });}
啟動(dòng)服務(wù)，進(jìn)行添加操作測(cè)試。
商品修改設(shè)計(jì)及實(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頁(yè)面表單中添加隱藏的表單元素用于記錄id值，代碼如下：
<li><input type='hidden' v-model='id'></li>
在Goods頁(yè)面記錄中添加修改操作的需要的a元素，代碼如下：
<td><a @click='doFindById(g.id)'>修改</a></td>
在Vue對(duì)象中添加基于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對(duì)象中的用于保存和修改數(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=''; });}
啟動(dòng)服務(wù)進(jìn)行訪問(wèn)測(cè)試，檢測(cè)其結(jié)果。
總結(jié)(Summary)
本小節(jié)主要基于vue和axio技術(shù)實(shí)現(xiàn)了商品模塊的基本操作，重點(diǎn)掌握客戶端與服務(wù)端的交互和傳值過(guò)程。
到此這篇關(guān)于SpringBoot+Mybatis+Vue 實(shí)現(xiàn)商品模塊的crud操作的文章就介紹到這了,更多相關(guān)SpringBoot Mybatis Vue crud內(nèi)容請(qǐng)搜索好吧啦網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持好吧啦網(wǎng)！
相關(guān)文章：
1. 基于javaweb+jsp實(shí)現(xiàn)學(xué)生宿舍管理系統(tǒng)2. 如何封裝一個(gè)Ajax函數(shù)3. ASP.NET MVC實(shí)現(xiàn)樹形導(dǎo)航菜單4. 多級(jí)聯(lián)動(dòng)下拉選擇框，動(dòng)態(tài)獲取下一級(jí)5. jsp網(wǎng)頁(yè)實(shí)現(xiàn)貪吃蛇小游戲6. Ajax常用封裝庫(kù)——Axios的使用7. jsp+servlet簡(jiǎn)單實(shí)現(xiàn)上傳文件功能（保存目錄改進(jìn)）8. CSS Hack大全-教你如何區(qū)分出IE6-IE10、FireFox、Chrome、Opera9. 怎樣打開XML文件？xml文件如何打開?10. Python數(shù)據(jù)分析JupyterNotebook3魔法命令詳解及示例
網(wǎng)公網(wǎng)安備