SpringBoot+Mybatis+Vue 实现商品模块的crud操作

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;

@RestController

public class GoodsController {

@Autowired

private GoodsService goodsService;

/**查询所有商品信息*/

@GetMapping("/goods/doFindGoods")

public List doFindGoods(){

return goodsService.findGoods();

}

}

在项目static目录创建goods-vue.html,并基于vue呈现数据，代码如下

http://

启动tomcat进行访问测试，如图所示：

商品删除设计及实现

在控制层方法中添加，处理删除逻辑的方法，代码如如下：

@RequestMapping("/goodshttp:///doDeleteById/{id}")

public String doDeleteById(@PathVariable("id") Integer id){

System.out.println("delete id "+id);

goodsService.deleteById(id);

return "delete ok";

}

在商品列表中的tr对象内部添加删除元素，代码如下：

在商品模块的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页面上添加表单元素，用于实现用户输入，代码如下：

在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页面表单中添加隐藏的表单元素用于记录iFbSBIzd值，代码如下：

在Goods页面记录中添加修改操作的需要的a元素，代码如下：

在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技术实现了商品模块的基本操作，重点掌握客户端与服务端的交互和传值过程。

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。