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内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • MyBatis学习教程(二)—如何使用MyBatis对users表执行CRUD操作

    上一篇文章MyBatis入门学习教程(一)-MyBatis快速入门中我们讲了如何使用Mybatis查询users表中的数据,算是对MyBatis有一个初步的入门了,今天讲解一下如何使用MyBatis对users表执行CRUD操作.在没奔主题之前,先给大家补充点有关mybatis和crud的基本知识. 什么是 MyBatis? MyBatis 是支持普通 SQL 查询,存储过程和高级映射的优秀持久层框架. MyBatis 消除了几乎所有的 JDBC 代码和参数的手工设置以及对结果集的检索.MyBa

  • Mybatis实现增删改查（CRUD）实例代码

    MyBatis简介 MyBatis 是支持普通 SQL 查询,存储过程和高级映射的优秀持久层框架. MyBatis 消除了几乎所有的 JDBC 代码和参数的手工设置以及对结果集的检索.MyBatis 可以使用简单的XML 或注解用于配置和原始映射,将接口和 Java 的 POJO(Plain Old Java Objects,普通的Java对象)映射成数据库中的记录. MyBatis下载:https://github.com/mybatis/mybatis-3/releases Mybatis实

  • Spring boot整合Mybatis实现级联一对多CRUD操作的完整步骤

    Spring boot整合Mybatis实现级联一对多CRUD操作的完整步骤

    前言 在关系型数据库中,随处可见表之间的连接,对级联的表进行增删改查也是程序员必备的基础技能.关于Spring Boot整合Mybatis在之前已经详细写过,不熟悉的可以回顾Spring Boot整合Mybatis并完成CRUD操作,这是本文操作的基础.本文先准备一个测试的数据库,然后使用MyBatis Generator进行部分代码自动生成,再以一个例子来展示稍微高级点的操作:使用Mybatis完成级联一对多的CRUD操作. 数据库准备 数据库用到三张表:user表,role表,user_ro

  • SpringBoot整合Mybatis实现CRUD

    准备工具:IDEA jdk1.8 Navicat for MySQL Postman 一.新建Project 选择依赖:mybatis Web Mysql JDBC 项目结构 pom依赖: <?xml version="1.0" encoding="UTF-8"?> <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.o

  • 详解springboot+mybatis-plue实现内置的CRUD使用详情

    mybatis-plus的特性 无侵入:只做增强不做改变,引入它不会对现有工程产生影响,如丝般顺滑 损耗小:启动即会自动注入基本CURD,性能基本无损耗,直接面向对象操作 强大的 CRUD操作:内置通用 Mapper.通用Service,仅仅通过少量配置即可实现单表大部分 CRUD 操作,更有强大的条件构造器,满足各类使用需求 支持 Lambda形式调用:通过 Lambda 表达式,方便的编写各类查询条件,无需再担心字段写错 支持主键自动生成:支持多达 4种主键策略(内含分布式唯一 ID 生成器

  • 基于Mybatis实现CRUD操作过程解析(xml方式)

    1.环境搭建 1.1 表结构 create table user ( id int primary key auto_increment, username varchar(20) not null, birthday date, sex char(1) default '男', address varchar(50) ); insert into user values (null, '孙悟空','1980-10-24','男','花果山水帘洞'); insert into user valu

  • MyBatis Plus配置日志CRUD的使用详解

    配置日志 我们所有的sql在mybatisplus是不可见的,所以在开发中需要配置日志,开发完成后,就可以取消日志了,因为日志也是损耗资源的 #配置日志 mybatis-plus: configuration: log-impl: org.apache.ibatis.logging.stdout.StdOutImpl #仅控制台输出的日志 配置完日志后,后面的学习就需要注意自动生成的SQL,相信你们会喜欢上MybatisPlus CRUD使用 Insert插入 //测试插入 @Test publ

  • MybatisPlus,无XML分分钟实现CRUD操作

    不讲太多理论知识,官网都有,直接上手. 1.测试表 DROP TABLE IF EXISTS `user`; CREATE TABLE `user` ( `id` bigint(20) UNSIGNED NOT NULL, `name` varchar(128) CHARACTER SET utf8 COLLATE utf8_general_ci DEFAULT NULL COMMENT '用户名', `password` varchar(18) CHARACTER SET utf8 COLLA

  • 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.

  • SpringBoot+mybatis+Vue实现前后端分离项目的示例

    SpringBoot+mybatis+Vue实现前后端分离项目的示例

    目录 一.SpringBoot环境搭建 1.项目的数据库 2.项目所需依赖 3.application.yml文件 4.入口类 二.vue实现前后端分离 1.前端页面 2.springBoot控制层 3.mapper文件 4.项目完整源代码 vue前后端分离实现功能:员工的增删改(先实现数据回显之后,再进行修改)查 一.SpringBoot环境搭建 1.项目的数据库 /* Navicat Premium Data Transfer Source Server : windows Source S

  • 在Java的MyBatis框架中建立接口进行CRUD操作的方法

    在Java的MyBatis框架中建立接口进行CRUD操作的方法

    以接口操作的方式编程 一般来讲,我们建立映射SQL接口的类时通常会这样: public static void testBasicQuery(int id) { SqlSession session = MybatisUtils.getSqlSession(); try { /* * 此处的david.mybatis.demo.IVisitorOperation.basicQuery必须和下图中配置里面的namespace对应 */ Visitor visitor = (Visitor) ses

  • 详解mall整合SpringBoot+MyBatis搭建基本骨架

    SpringBoot实战电商项目mall(20k+star)地址:https://github.com/macrozheng/mall 摘要 本文主要讲解mall整合SpringBoot+MyBatis搭建基本骨架,以商品品牌为例实现基本的CRUD操作及通过PageHelper实现分页查询. mysql数据库环境搭建 下载并安装mysql5.7版本,下载地址:https://dev.mysql.com/downloads/installer/ 设置数据库帐号密码:root root 下载并安装客

  • Spring boot + mybatis + Vue.js + ElementUI 实现数据的增删改查实例代码(一)

    Spring boot + mybatis + Vue.js + ElementUI 实现数据的增删改查实例代码(一)

    环境搭建 spring boot的简介 以往我们开发时用到spring总是避免不了繁琐的配置,例如我们要配置一个数据库连接,可能需要以下几步: 1.编写jdbc.properties配置文件: 2.创建spring的配置文件,加入spring配置文件前缀.配置数据库连接信息以及sqlsessionFactory等等: 3.还要在web.xml文件中加入spring的监听. springboot的出现大大简化了项目的搭建过程(spring配置以及maven配置),让我们专注于应用功能的开发,而不是

  • Springboot与vue实例讲解实现前后端分离的人事管理系统

    Springboot与vue实例讲解实现前后端分离的人事管理系统

    目录 一,项目简介 二,环境介绍 三,系统展示 四,核心代码展示 五,项目总结 一,项目简介 系统是前后端分离的项目,直接启动Springboot应用程序类后,再启动前端工程访问即可.主要实现了企业的人事管理功能,主要包含员工管理.薪资管理.职位管理.权限管理.网盘文件分享管理等模块. 系统亮点:使用REDIS进行数据缓存,优化查询性能:使用分布式文件系统进行文件存储服务:基于Springboot+vue实现前后端分离开发 二,环境介绍 语言环境:Java: jdk1.8 数据库:Mysql:

  • Spring Boot整合Mybatis并完成CRUD操作的实现示例

    Spring Boot整合Mybatis并完成CRUD操作的实现示例

    MyBatis 是一款优秀的持久层框架,被各大互联网公司使用,本文使用Spring Boot整合Mybatis,并完成CRUD操作. 为什么要使用Mybatis?我们需要掌握Mybatis吗? 说的官方一点: MyBatis 是一款优秀的持久层框架,它支持定制化 SQL.存储过程以及高级映射.MyBatis 避免了几乎所有的 JDBC 代码和手动设置参数以及获取结果集.MyBatis 可以使用简单的 XML 或注解来配置和映射原生信息,将接口和 Java 的 POJOs(Plain Ordina

  • Vue实现商品飞入购物车效果(电商项目)

    各位掘友,好久不见,最近利用工作之余开源了Vue电商项目,高仿某知名O2O买菜平台,整个项目做下来收获还是蛮多的,可以扫描下方二维码体验,本篇是项目的核心知识拆解篇,主要是拆解增加商品飞入购物车的实现过程. 点我体验 项目开源地址 感谢点星+收藏 首先我先简单的介绍下本项目所用到的技术栈: 整个项目采用 vue-cli3 脚手架搭建, Vue全家桶(vue.vuex.vue-router) . Vant UI框架 以及很多著名好用的第三方库如: axios . fastclick . bette

  • springboot+mybatis通过实体类自动生成数据库表的方法

    前言 本章介绍使用mybatis结合mysql数据库自动根据实体类生成相关的数据库表. 首先引入相关的pom包我这里使用的是springboot2.1.8.RELEASE的版本 <dependency> <groupId>org.mybatis.spring.boot</groupId> <artifactId>mybatis-spring-boot-starter</artifactId> <version>2.1.0</ve

随机推荐