基于10-springboot-goods的批改应用vue实现CRUD，并应用bootstrap进行优化
基于10-springboot-goods我的项目进行批改
第一步 创立新module,名字为10-springboot-goods-vue2.
第二步 增加maven依赖并进行初步配置(拷贝即可)
第三步 拷贝pojo,dao,service包中的所有接口和类.
第四步 拷贝动态资源到static目录(例如vue.js,axios.min.js)
vue实现
第一步：创立Controller
package com.cy.pj.goods.controller;import com.cy.pj.goods.pojo.Goods;import com.cy.pj.goods.service.GoodsService;import org.springframework.beans.factory.annotation.Autowired;import org.springframework.web.bind.annotation.PathVariable;import org.springframework.web.bind.annotation.RequestBody;import org.springframework.web.bind.annotation.RequestMapping;import org.springframework.web.bind.annotation.RestController;import java.util.List;@RestControllerpublic class GoodsController{ @Autowired private GoodsService goodsService; @RequestMapping("doFindById/{id}") public Goods doFindById(@PathVariable Integer id){ return goodsService.findById(id); } @RequestMapping("doUpdateGoods") public String doUpdateGoods(@RequestBody Goods entity){ goodsService.updateGoods(entity); return "save ok"; } @RequestMapping("doSaveGoods") public String doSaveGoods(@RequestBody Goods entity){ goodsService.saveGoods(entity); return "save ok"; } @RequestMapping("doDeleteById/{id}") public String doDeleteById(@PathVariable Integer id){ goodsService.deleteById(id); return "delete ok"; } @RequestMapping("/doFindGoods") public List<Goods> doFindGoods(){ List<Goods> goodsList=goodsService.findGoods(); return goodsList; }}第二步：增加bootstrap的文件
第三步：创立goods-vue-01.html文件
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> ul>li{list-style-type: none} </style></head><body> <link href="bootstrap/css/bootstrap.min.css" rel="stylesheet"> <div id="app"> <h1>The Goods Page</h1> <form> <ul> <li><input type="hidden" v-model="id"></li> <li>name</li> <li><input v-model="name"></li> <li>remark</li> <li><textarea v-model="remark" rows="3" cols="50"></textarea></li> <li><input type="button" v-on:click="doSaveOrUpdata" value="Save Goods"/></li> </ul> </form> <table class="table table-bordered"> <thead> <tr> <th>id</th> <th>name</th> <th>remark</th> <th>createdTime</th> <th colspan="2">operation</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> <td><a @click="doDeleteById(g.id)">delete</a></td> <td><a @click="doFindById(g.id)">update</a></td> </tr> </tbody> </table> </div> <script src="js/axios.min.js"></script> <script src="js/vue.js"></script> <script> var vue=new Vue({//vue对象是vue.js的入口函数 el:"#app",//Vue对象要监控的区域（底层会对这块区域的内容构建一个虚构的dom树） data:{//此对象用于同步页面数据的一个对象 id:"", name:"", remark:"", goods:[] }, methods:{//同步与页面元素事件处理函数 doFindById:function (id){ let url=`doFindById/${id}`; axios.get(url).then(function (result){ console.log(result.data); this.vue.id=result.data.id; this.vue.name=result.data.name; this.vue.remark=result.data.remark; }) }, doSaveOrUpdata:function (){ let url=this.id?"http://localhost:1314/doUpdateGoods":"http://localhost:1314/doSaveGoods"; var params={"id":this.id,"name":this.name,"remark":this.remark}; console.log(params); axios.post(url,params) .then(function (result){ alert(result.data); this.vue.doFindGoods(); this.id=""; this.vue.name=""; this.vue.remark=""; }) .catch() }, doDeleteById:function (id){ let Url="http://localhost:1314/doDeleteById/"+id; axios.get(Url).then(function (result){ alert(result.data); this.vue.doFindGoods(); }) }, doFindGoods:function (){ let Url="http://localhost:1314/doFindGoods"; axios.get(Url) .then(function (result){ this.vue.goods=result.data; console.log(result.data); }) .catch() } }, mounted:function (){ this.doFindGoods(); } }) </script></body></html>第四步：启动服务器进行测试
http://localhost:1314/goods-vue-01.html