SpringBoot 前后台交互 -- CRUD-EW帮帮网

下面几个文章呢，带大家小小的实战一下，通过SpringBoot整合SSM实现怎删改查，异常处理以及使用SpringMvc拦截器完成业务，话不多说，咱直接开始~

首先再带大家实现一下SSM整合，步骤如下：

1. SSM整合

1.1创建工程项目

这里我使用的是Maven原生构建项目

1.2 导依赖

<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0"
         xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
    <modelVersion>4.0.0</modelVersion>

    <groupId>com.ityang</groupId>
    <artifactId>ssm2</artifactId>
    <version>1.0-SNAPSHOT</version>

    <properties>
        <maven.compiler.source>17</maven.compiler.source>
        <maven.compiler.target>17</maven.compiler.target>
    </properties>
    <!-- Spring Boot 父项目依赖，提供默认配置和管理Spring Boot相关依赖的版本 -->
    <parent>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-parent</artifactId>
        <version>3.4.4</version>
        <relativePath/> <!-- 不使用本地路径，直接从Maven仓库查找父POM -->
    </parent>

    <!--  依赖-->
    <dependencies>
        <!--    web依赖，内置tomcat-->
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-web</artifactId>
        </dependency>
        <!--        mysql  -->
        <dependency>
            <groupId>mysql</groupId>
            <artifactId>mysql-connector-java</artifactId>
            <version>8.0.33</version>
        </dependency>
        <!--        springboot 整合jdbc-->
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter</artifactId>
        </dependency>
        <!--        mybatis -->
        <dependency>
            <groupId>com.baomidou</groupId>
            <artifactId>mybatis-plus-spring-boot3-starter</artifactId>
            <version>3.5.7</version>
        </dependency>

        <!--        druid  -->
        <dependency>
            <groupId>com.alibaba</groupId>
            <artifactId>druid-spring-boot-3-starter</artifactId>
            <version>1.2.23</version>
        </dependency>
        <!--        junit测试  +springboot -->
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-test</artifactId>
            <scope>test</scope>
        </dependency>
        <dependency>
            <groupId>org.projectlombok</groupId>
            <artifactId>lombok</artifactId>
            <!--            指定版本号  -->
            <version>1.18.24</version>
            <scope>provided</scope>
        </dependency>
        <dependency>
            <groupId>junit</groupId>
            <artifactId>junit</artifactId>
            <scope>test</scope>
        </dependency>
    </dependencies>
</project>

1.3 yml配置文件配置

server:
  port: 8080
spring:
  datasource:
    username: root
    password: 1234
    url: jdbc:mysql:///db1
    type: com.alibaba.druid.pool.DruidDataSource
    driver-class-name: com.mysql.jdbc.Driver

1.4 功能业务

数据库

Emps实体类

package com.it.pojo;

import lombok.Data;

@Data
public class Emps {
    private int id;
    private String username;
    private String password;
    private String addr;
    private int age;
    private String phone;

}

EmpsMapper接口层

package com.it.mapper;

import com.it.pojo.Emps;
import org.apache.ibatis.annotations.*;

import java.util.List;

@Mapper
public interface EmpsMapper {
//    查询所有
    @Select("select * from emps")
    List<Emps> findAll();
//    根据id查询
    @Select("select * from emps where id=#{id}")
    Emps findById(int id);
//    新增
    @Insert("insert into emps(id,username,password,addr,age,phone) values(null,#{username},#{password},#{addr},#{age},#{phone})")
    int save(Emps emps);
//    修改
    @Update("update emps set username=#{username},password=#{password}" +
            ",addr=#{addr},age=#{age},phone=#{phone} where id=#{id}")
    int update(Emps emps);
//    删除
    @Delete("delete from emps where id=#{id}")
    int deleteById(int id);
}

EmpsService

package com.it.service;


import com.it.pojo.Emps;

import java.util.List;

public interface EmpsService {
    //    查询所有
    List<Emps> findAll();
    //    根据id查询
    Emps findById(int id);
    //    新增
    int save(Emps emps);
    //    修改
    int update(Emps emps);
    //    删除
    int deleteById(int id);

}

EmpsServiceImpl实现类

package com.it.service.impl;

import com.it.mapper.EmpsMapper;
import com.it.pojo.Emps;
import com.it.service.EmpsService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;

import java.util.List;

@Service
public class EmpsServiceImpl implements EmpsService {
//    @Autowired 遵循先按照接口类型注入，如果没有，再按照接口名称注入
    @Autowired
    private EmpsMapper  empsMapper;

    @Override
    public List<Emps> findAll() {
        return empsMapper.findAll();
    }

    @Override
    public Emps findById(int id) {
        return empsMapper.findById(id);
    }

    @Override
    public int save(Emps emps) {
        return empsMapper.save(emps);
    }

    @Override
    public int update(Emps emps) {
        return empsMapper.update(emps);
    }

    @Override
    public int deleteById(int id) {
        return empsMapper.deleteById(id);
    }
}

EmpsController层

package com.it.controller;

import com.it.pojo.Emps;
import com.it.service.EmpsService;
import org.apache.ibatis.annotations.Delete;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.*;

import java.util.List;

//@Controller
//@ResponseBody
@RestController
@RequestMapping("/emps")
public class EmpsController {
    @Autowired
    private EmpsService empsService;

    @GetMapping
    public List<Emps> findAll() {
        return empsService.findAll();
    }

    @GetMapping("/{id}")
    public Emps findById(@PathVariable int id) {
        return empsService.findById(id);
    }

    @PostMapping
    public int save(@RequestBody Emps emps) {
        return empsService.save(emps);
    }

    @PutMapping
    public int update(@RequestBody Emps emps) {
        return empsService.update(emps);
    }

//    ?挂参数
    @DeleteMapping
    public int deleteById(@RequestParam int id) {
        return empsService.deleteById(id);
    }

}

使用Apipost测试增删改查都是ok的✌

2. 前端整合

2.1 页面放行

在resourse下的page包下放入前端页面资料

浏览器输入路径查看页面是不行的，是因为把资料复制过来之后没有进行重新编译，SpringBoot项目并不知道我们提供的资料是项目的，所以需要我们自己进行编译并配置静态资源放行

停掉项目，进行重新编译

SpringMvcConfig 配置静态资源放行

package com.it.config;

import lombok.extern.slf4j.Slf4j;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.EnableWebMvc;
import org.springframework.web.servlet.config.annotation.ResourceHandlerRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;

// 声明是配置类
@Configuration
// mvc配置注解
@EnableWebMvc
// 日志注解
@Slf4j
public class SpringMvcConfig implements WebMvcConfigurer {
    /**
     * Spring MVC配置类，用于配置Web相关的设置。
     * 实现了WebMvcConfigurer接口以自定义MVC配置。
     */

    // 添加静态资源过滤
        @Override
    public void addResourceHandlers(ResourceHandlerRegistry registry) {
//        拦截下路径/pages/** 放行到 /pages/
        registry.addResourceHandler("/pages/**")
                .addResourceLocations("classpath:/pages/");
//        打印日志
        log.info("静态资源已经放行");
    }



}

页面放行成功✌

2.2 前后端请求响应

修改前端请求路径，对应到后端，后端从而响应数据给前端，前端渲染展示，前端代码如下：

methods: {
            init() {
                // 初始化查询
                axios.get("/emps").then(resp => {
                    if (resp.data.code == "200") {
                        // 数据封装
                        this.tableData = resp.data.data
                        // 总条数赋值
                        // this.page.total = resp.data.total
                    }
                })
            },
            // 条目数发生改变
            handleSizeChange(val) {
                console.log(`每页 ${val} 条`);
                this.page.pageSize = val
                this.init()
            },
            // 页码发生改变
            handleCurrentChange(val) {
                console.log(`当前页: ${val}`);
                this.page.currentPage = val
                this.init()
            },
            // 打开新增弹框
            savedialog() {
                this.form = {}
                this.dialogFormVisible = true
            },
            // 查看单条数据详情
            handleClick(row) {
                console.log(row);
            },
            // 新增submit
            saveEmp() {
                console.log(this.form)
                /*请求后台 json格式数据发送到后台*/
                axios.post("/emps",
                    this.form).then(resp => {
                    if (resp.data.code == "200"){
                        /*清空form*/
                        this.form = {}
                        /*重新查询*/
                        this.init()
                        /*关闭天窗*/
                        this.dialogFormVisible = false
                        /*提示*/
                        this.$message({
                            message: resp.data.msg,
                            type: 'success'
                        })
                    }
                })

            },
            // 删除
            deleteEmp(val) {
                console.log(val)
                /*请求后台 删除数据 刷新页面*/
                this.$confirm('此操作将永久删除该用户, 是否继续?', '提示', {
                    confirmButtonText: '删除',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {// 确定处理逻辑
                    axios.delete("/emps?id="+val.id)
                        .then(resp => {
                            if (resp.data.code== "200") {
                                this.$message({
                                    message: '恭喜你，删除成功',
                                    type: 'success'
                                });
                                /*重新加载数据*/
                                this.init()
                            } else {
                                this.$message('删除失败');
                            }
                        })
                }).catch(() => {// 取消的处理逻辑
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            },
            // 修改回显
            updateEmp(val) {
                console.log(val)
                /*控制弹框*/
                this.dialogUpdateVisible = true
                /*数据赋值*/
                var str = JSON.stringify(val)
                var data = JSON.parse(str)
                this.form = data
            },
            // 修改提交
            updateEmpSubmit() {
                console.log(this.form)
                /*请求后台 json格式数据发送到后台*/
                axios.put("/emps", this.form)
                    .then(resp => {
                        if (resp.data.code == "200") {
                            /*把弹框隐藏掉*/
                            this.dialogUpdateVisible = false
                            /*把form清空*/
                            this.form = {}
                            this.$message({
                                message: '恭喜你，修改成功',
                                type: 'success'
                            });
                            /*重新加载数据*/
                            this.init()
                        } else {
                            this.$message(resp.data.msg);
                        }
                    })

            },

3. 结果集封装

在项目开发中，为了明确记录各种返回码和数据结构，支持后端向前端响应不同类型的数据，可以进行统一结果集封装

3.1 结果集

package com.gaohe.ssm1.common;

import lombok.Data;

@Data
public class R {
    private String code;
    private String msg;
    private Object data;
    public static R success(String msg){
        R r = new R();
        r.code = "200";
        r.msg = msg;
        return r;
    }
    public static R success(Object data){
        R r = new R();
        r.code = "200";
        r.data = data;
        r.msg = "查询成功";
        return r;
    }
    public static R fail(String msg){
        R r = new R();
        r.code = "500";
        r.msg = msg;
        return r;
    }
}

3.2 controller层响应数据

那EmpsController可以进一步优化：

package com.gaohe.ssm1.controller;

import com.gaohe.ssm1.common.R;
import com.gaohe.ssm1.pojo.Emps;
import com.gaohe.ssm1.service.EmpsService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.*;

import java.util.List;

@RestController
@RequestMapping("/emps")
public class EmpsController {
    @Autowired
    private EmpsService empsService;

    @GetMapping
    public R list() {
        System.out.println("this handler");
        List<Emps> emps = empsService.list();
        return R.success(emps);
    }

    @GetMapping("/{id}")
    public R findById(@PathVariable int id) {
        Emps byId = empsService.findById(id);
        return R.success(byId);
    }

    @PostMapping
    public R save(@RequestBody Emps emps) {
        int i = empsService.save(emps);
        return i > 0 ? R.success("新增成功") : R.fail("新增失败");
    }

    @PutMapping
    public R update(@RequestBody Emps emps) {
        int i = empsService.update(emps);
        return i > 0 ? R.success("修改成功") : R.fail("修改失败");
    }

    @DeleteMapping
    public R delete(@RequestParam int id) {
        int i = empsService.delete(id);
        return i > 0 ? R.success("删除成功") : R.fail("删除失败");
    }
}

SpringBoot 前后台交互 -- CRUD