使用SSM+Vue前后端分离开发实现增删改查(超详细)(中)

简介: 使用SSM+Vue前后端分离开发实现增删改查(超详细)(中)

*.xml 处会报红,是因为还没有xml文件,先不用管。

新建 springmvc.xml 文件:


<?xml version="1.0" encoding="UTF-8"?>
<beans default-lazy-init="true"
  xmlns="http://www.springframework.org/schema/beans" xmlns:p="http://www.springframework.org/schema/p"
  xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:context="http://www.springframework.org/schema/context"
  xmlns:mvc="http://www.springframework.org/schema/mvc"
  xsi:schemaLocation="  
       http://www.springframework.org/schema/beans   
       http://www.springframework.org/schema/beans/spring-beans-3.0.xsd  
       http://www.springframework.org/schema/mvc   
       http://www.springframework.org/schema/mvc/spring-mvc-3.0.xsd   
       http://www.springframework.org/schema/context  
       http://www.springframework.org/schema/context/spring-context-3.0.xsd">
  <!-- 扫描带注解的包下的类,注册Bean-->
  <context:component-scan base-package="com.shaonaiyi.minimall.controller" />
  <!-- 通过注解,把URL映射到Controller上,该标签默认注册DefaultAnnotationHandlerMapping和AnnotationMethodHandlerAdapter -->
  <mvc:annotation-driven />
</beans>  


新建 db.properties 文件

jdbc.driver=com.mysql.jdbc.Driver
jdbc.url=jdbc:mysql://localhost:3306/minimall?characterEncoding=utf-8
jdbc.username=root
jdbc.password=123456


配置文件都搞定之后,就可以敲代码了,说实话,用过SpringBoot之后,再用起SSM来,就像说一个字:绝!(真繁琐…)


编写代码的顺序一般是这样的,先把对应的实体类给建好,必须清楚自己到底想干啥,然后你可以从 Controller 再到 Service 再到 Dao 层,再把 MyBatis 的xml文件搞定。


但实际上开发要比这个轻松很多,因为一般都会用代码生成工具,把很多琐碎的代码都自动生成了,可以减少很多工作,比如增删改查,只需要写少量 Controller 和 Service 层代码就可以了。


当然,在实际开发上,还可以继续再简化,这个就需要衡量一下你项目的够不够大了,如果项目比较小,复制粘贴就可以搞定了,但如果体量比较大,复制粘贴都非常繁琐。当然,你也可以选择一些低代码开发平台,配置一下、跑一下,很多功能都可以实现,具体大家也可以去了解一下:


其实只有写教程是最费时间的:


image.png


我不忍了,你们在学校学的都是…没有没有,只是太基础而已。


image.png


彩蛋:打印日志实现

为了使用日志,我们在util包里编写工具类:

package com.shaonaiyi.minimall.util;
import org.aspectj.lang.JoinPoint;
import org.aspectj.lang.annotation.After;
import org.aspectj.lang.annotation.Aspect;
import org.aspectj.lang.annotation.Before;
import org.springframework.stereotype.Component;
/**
 * @Auther: shaonaiyi@163.com
 * @Date: 2021/8/17 23:58
 * @Description:
 */
@Component
@Aspect
public class LogPrint {
    @Before("execution(* com.shaonaiyi.minimall.service.impl.*.*(..))")
    public void methodBegin(JoinPoint joinPoint){
        System.out.println("方法开始了");
    }
    @After("execution(* com.shaonaiyi.minimall.service.impl.*.*(..))")
    public void methodEnd(){
        System.out.println("方法结束了");
    }
    @Before("execution(* com.shaonaiyi.minimall.service.impl.*.*(..))")
    public void methodBegin1(JoinPoint joinPoint){
        System.out.println(joinPoint.getTarget()+" "+joinPoint.getSignature().getName()+"方法开始了");
    }
}


增删改查实现


先把实体类构建好,然后的写代码顺序可以灵活处理,一般是先写Controller,然后是Service接口,接着是Service实现,然后是Dao层接口,然后是Dao的xml文件。

简单来说就是:entity => XxxController => iXxxService => XxxServiceImpl => XxxDao.java => XxxDao.xml。


代码结构请参考下图,以免有些小伙伴不知道要复制到哪里:


微信图片_20220619194330.png


编写 Product.java

完整代码:

package com.shaonaiyi.minimall.entity;
/**
 * @Auther: shaonaiyi@163.com
 * @Date: 2021/8/17 14:09
 * @Description: 商品实体类
 */
public class Product {
    private Integer id;
    private String productName;
    private Integer nums;
    public Integer getId() {
        return id;
    }
    public void setId(Integer id) {
        this.id = id;
    }
    public String getProductName() {
        return productName;
    }
    public void setProductName(String productName) {
        this.productName = productName;
    }
    public Integer getNums() {
        return nums;
    }
    public void setNums(Integer nums) {
        this.nums = nums;
    }
    @Override
    public String toString() {
        final StringBuffer sb = new StringBuffer("Product{");
        sb.append("id=").append(id);
        sb.append(", productName='").append(productName).append('\'');
        sb.append(", nums=").append(nums);
        sb.append('}');
        return sb.toString();
    }
}


注意:数据库里商品名称为 productname ,而实体类里字段为 productName ,所以后面操作要额外注意,这里写不同,方便各位小伙伴有个区别。

编写 ProductController.java

完整代码:


package com.shaonaiyi.minimall.controller;
import com.shaonaiyi.minimall.entity.Product;
import com.shaonaiyi.minimall.service.IProductService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.*;
import java.util.List;
/**
 * @Auther: shaonaiyi@163.com
 * @Date: 2021/8/17 14:10
 * @Description: 商品控制器
 */
@Controller
@RequestMapping("/product")
@CrossOrigin
public class ProductController {
    @Autowired
    private IProductService iProductService;
    @RequestMapping("/list")
    @ResponseBody
    public List<Product> list() {
        return iProductService.list();
    }
    @RequestMapping(value = "/add",method = RequestMethod.POST)
    @ResponseBody
    public boolean add(@RequestBody Product product) {
        return iProductService.add(product);
    }
    @RequestMapping(value = "/update",method = RequestMethod.POST)
    @ResponseBody
    public boolean update(@RequestBody Product product) {
        return iProductService.update(product);
    }
    @RequestMapping(value = "/delete",method = RequestMethod.POST)
    @ResponseBody
    public boolean delete(@RequestBody Product product) {
        return iProductService.delete(product);
    }
    @RequestMapping(value = "/add-test",method = RequestMethod.POST)
    @ResponseBody
    public boolean addTest(String productName,Integer nums) {
        Product product = new Product();
        product.setProductName(productName);
        product.setNums(nums);
        return iProductService.add(product);
    }
    @RequestMapping(value = "/delete-test",method = RequestMethod.POST)
    @ResponseBody
    public boolean deleteTest(int id) {
        Product product = new Product();
        product.setId(id);
        return iProductService.delete(product);
    }
}


说明:

1、这里提供多了两个接口: /add-test 、 /delete-test ,方便大家对比学习,两种方式的接受参数的方式不一样, Content-Type 一个是 JSON ,一个是 application/x-www-form-urlencoded ,方式不同,如果不对应上,会报400错误,后面有测试用例,可以看后面内容。

2、目前的开发模式一般都是前后端分离开发,所以用 JSON 格式进行交互是最常见的;如果想按照自己的风格,没有前后端分离的话,可以使用另外一种。初学者比较容易对这里的内容有误解,可以查阅相关资料。


编写 IProductService.java

完整代码:


package com.shaonaiyi.minimall.service;
import com.shaonaiyi.minimall.entity.Product;
import java.util.List;
/**
 * @Auther: shaonaiyi@163.com
 * @Date: 2021/8/17 14:13
 * @Description: 商品逻辑接口
 */
public interface IProductService {
    List<Product> list();
    boolean add(Product product);
    boolean update(Product product);
    boolean delete(Product product);
}


编写 ProductServiceImpl.java

完整代码:

package com.shaonaiyi.minimall.service.impl;
import com.shaonaiyi.minimall.dao.ProductDao;
import com.shaonaiyi.minimall.entity.Product;
import com.shaonaiyi.minimall.service.IProductService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;
import java.util.List;
/**
 * @Auther: shaonaiyi@163.com
 * @Date: 2021/8/17 14:13
 * @Description: 商品逻辑实现
 */
@Service
public class ProductServiceImpl implements IProductService {
    @Autowired
    private ProductDao productDao;
    @Override
    public List<Product> list() {
        return productDao.list();
    }
    @Override
    public boolean add(Product product) {
        int result = productDao.add(product);
        return result > 0;
    }
    @Override
    public boolean update(Product product) {
        int result = productDao.update(product);
        return result > 0;
    }
    @Override
    public boolean delete(Product product) {
        int result = productDao.delete(product.getId());
        return result > 0;
    }
}


编写 ProductDao.java

完整代码:

package com.shaonaiyi.minimall.dao;
import com.shaonaiyi.minimall.entity.Product;
import java.util.List;
/**
 * @Auther: shaonaiyi@163.com
 * @Date: 2021/8/17 14:18
 * @Description: 商品Dao接口
 */
public interface ProductDao {
    List<Product> list();
    int add(Product product);
    int update(Product product);
    int delete(int id);
}
相关文章
|
10月前
|
JavaScript
Vue中如何实现兄弟组件之间的通信
在Vue中,兄弟组件可通过父组件中转、事件总线、Vuex/Pinia或provide/inject实现通信。小型项目推荐父组件中转或事件总线,大型项目建议使用Pinia等状态管理工具,确保数据流清晰可控,避免内存泄漏。
785 2
|
9月前
|
缓存 JavaScript
vue中的keep-alive问题(2)
vue中的keep-alive问题(2)
661 137
|
人工智能 JavaScript 算法
Vue 中 key 属性的深入解析:改变 key 导致组件销毁与重建
Vue 中 key 属性的深入解析:改变 key 导致组件销毁与重建
1254 0
|
JavaScript UED
用组件懒加载优化Vue应用性能
用组件懒加载优化Vue应用性能
|
人工智能 JSON JavaScript
VTJ.PRO 首发 MasterGo 设计智能识别引擎,秒级生成 Vue 代码
VTJ.PRO发布「AI MasterGo设计稿识别引擎」,成为全球首个支持解析MasterGo原生JSON文件并自动生成Vue组件的AI工具。通过双引擎架构,实现设计到代码全流程自动化,效率提升300%,助力企业降本增效,引领“设计即生产”新时代。
822 1
|
JavaScript 前端开发 开发者
Vue 自定义进度条组件封装及使用方法详解
这是一篇关于自定义进度条组件的使用指南和开发文档。文章详细介绍了如何在Vue项目中引入、注册并使用该组件,包括基础与高级示例。组件支持分段配置(如颜色、文本)、动画效果及超出进度提示等功能。同时提供了完整的代码实现,支持全局注册,并提出了优化建议,如主题支持、响应式设计等,帮助开发者更灵活地集成和定制进度条组件。资源链接已提供,适合前端开发者参考学习。
788 17
|
12月前
|
JavaScript 安全
在 Vue 中,如何在回调函数中正确使用 this?
在 Vue 中,如何在回调函数中正确使用 this?
573 0
|
JavaScript 前端开发 UED
Vue 表情包输入组件实现代码及详细开发流程解析
这是一篇关于 Vue 表情包输入组件的使用方法与封装指南的文章。通过安装依赖、全局注册和局部使用,可以快速集成表情包功能到 Vue 项目中。文章还详细介绍了组件的封装实现、高级配置(如自定义表情列表、主题定制、动画效果和懒加载)以及完整集成示例。开发者可根据需求扩展功能,例如 GIF 搜索或自定义表情上传,提升用户体验。资源链接提供进一步学习材料。
865 1
|
存储 JavaScript 前端开发
如何高效实现 vue 文件批量下载及相关操作技巧
在Vue项目中,实现文件批量下载是常见需求。例如文档管理系统或图片库应用中,用户可能需要一次性下载多个文件。本文介绍了三种技术方案:1) 使用`file-saver`和`jszip`插件在前端打包文件为ZIP并下载;2) 借助后端接口完成文件压缩与传输;3) 使用`StreamSaver`解决大文件下载问题。同时,通过在线教育平台的实例详细说明了前后端的具体实现步骤,帮助开发者根据项目需求选择合适方案。
1086 0
|
JavaScript 前端开发 UED
Vue 项目中如何自定义实用的进度条组件
本文介绍了如何使用Vue.js创建一个灵活多样的自定义进度条组件。该组件可接受进度段数据数组作为输入,动态渲染进度段,支持动画效果和内容展示。当进度超出总长时,超出部分将以红色填充。文章详细描述了组件的设计目标、实现步骤(包括props定义、宽度计算、模板渲染、动画处理及超出部分的显示),并提供了使用示例。通过此组件,开发者可根据项目需求灵活展示进度情况,优化用户体验。资源地址:[https://pan.quark.cn/s/35324205c62b](https://pan.quark.cn/s/35324205c62b)。
602 0