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

更新时间：2020年10月29日 08:28:03 作者：小韩

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

到此这篇关于SpringBoot+Mybatis+Vue 实现商品模块的crud操作的文章就介绍到这了,更多相关SpringBoot Mybatis Vue crud内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

SpringBoot整合MyBatis实现CRUD操作项目实践

Java实现简单推箱子游戏
这篇文章主要为大家详细介绍了Java实现推箱子游戏，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2020-06-06
一文详解Java闭锁和栅栏的实现
闭锁与栅栏是在多线程编程中的概念，因为在多线程中，我们不能控制线程的执行状态，所以给线程加锁，让其按照我们的想法有秩序的执行。本文将详解Java闭锁和栅栏的实现，需要的可以参考一下
2022-06-06
springboot配置aop切面日志打印过程解析
这篇文章主要介绍了springboot配置aop切面日志打印过程解析,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
2020-01-01
Java中的SecretKeyFactory类使用详解
这篇文章主要介绍了Java中的SecretKeyFactory类使用详解,SecretKeyFactory表示私密密钥的工厂,密钥工厂用来将密钥(类型 Key 的不透明加密密钥)转换为密钥规范(底层密钥材料的透明表示形式),需要的朋友可以参考下
2024-01-01
java可变参数（不定向参数）的作用与实例
这篇文章主要给大家介绍了关于java可变参数（不定向参数）的作用与实例，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2021-04-04
SpringBoot中的@RequestMapping注解的用法示例
@RequestMapping注解是SpringBoot中最常用的注解之一，它可以帮助开发者定义和处理HTTP请求，本篇文章我们将详细为大家介绍如何使用SpringBoot中的@RequestMapping注解，感兴趣的同学跟着小编一起来学习吧
2023-06-06
Java中的ThreadLocal线程池原理
这篇文章主要介绍了Java中的ThreadLocal线程池原理,ThreadLocal提供了线程的局部变量(或本地变量),它可以保证访问到的变量属于当前线程,每个访问这种变量的线程(通过它的get或set方法)都有自己的、独立初始化的变量副本,需要的朋友可以参考下
2023-11-11
springboot跨域访问cros与@CrossOrigin注解详析
这篇文章主要给大家介绍了关于springboot跨域访问cros与@CrossOrigin注解的相关资料,跨域是指不同域名之间相互访问,它是浏览器的同源策略造成的,是浏览器对JavaScript施加的安全限制,需要的朋友可以参考下
2023-12-12
springboot vue前后端接口测试树结点添加功能
这篇文章主要为大家介绍了springboot vue前后端接口测试树结点添加功能，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2022-05-05
浅谈java中静态方法的重写问题详解
本篇文章是对java中静态方法的重写问题进行了详细的分析介绍，需要的朋友参考下
2013-06-06