筹备工作
第一步 创立新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;
@RestController
public 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技术实现了商品模块的基本操作，重点把握客户端与服务端的交互和传值过程。
发表回复