筹备工作
第一步 创立新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="js/axios.min.js"></script> <script src="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技术实现了商品模块的基本操作，重点把握客户端与服务端的交互和传值过程。