一、创建项目

二、导入依赖（pom.xml）

<?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>

    <parent>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-parent</artifactId>
        <version>2.2.12.RELEASE</version>
    </parent>

    <groupId>com.cy</groupId>
    <artifactId>Springboot-day01-re</artifactId>
    <version>1.0-SNAPSHOT</version>

    <properties>
        <maven.compiler.source>8</maven.compiler.source>
        <maven.compiler.target>8</maven.compiler.target>
        <project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
    </properties>

    <dependencies>
        <!--②、引入依赖(起步依赖)-->
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-web</artifactId>
        </dependency>

        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-jdbc</artifactId>
        </dependency>

        <!--mybatis提供依赖-->
        <dependency>
            <groupId>org.mybatis.spring.boot</groupId>
            <artifactId>mybatis-spring-boot-starter</artifactId>
            <version>2.2.2</version>
        </dependency>

        <dependency>
            <groupId>mysql</groupId>
            <artifactId>mysql-connector-java</artifactId>
            <version>5.1.49</version>
        </dependency>

        <!--连接池-->
        <dependency>
            <groupId>com.alibaba</groupId>
            <artifactId>druid-spring-boot-starter</artifactId>
            <version>1.2.16</version>
        </dependency>

        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-test</artifactId>
        </dependency>
        <dependency>
            <groupId>org.projectlombok</groupId>
            <artifactId>lombok</artifactId>
        </dependency>
    </dependencies>

</project>

三、配置文件

application.yml文件

server:
  port: 8080
  servlet:
    context-path: /suv
#Spring配置
spring:
  #资源配置
  datasource:
    #数据源类型
    type: com.alibaba.druid.pool.DruidDataSource
    #地址
    url: jdbc:mysql://localhost:3306/rbac
    #用户名
    username: root
    #密码
    password: chenying
    #驱动名称
    driver-class-name: com.mysql.jdbc.Driver
    
#持久层框架配置    
mybatis:
  #别名配置
  type-aliases-package: com.cy.pojo.entity
  #映射文件
  mapper-locations: classpath*:mappers/**/*mapper.xml
  

# 配置日志
logging:
  level:
    root: info
    com.cy: debug

四、XxxApplication内容

@SpringBootApplication
public class XxxApplication {
    public static void main(String[] args) {
        SpringApplication.run(XxxApplication.class,args);
    }
}

五、使用注解或config配置文件解决注解问题

package com.cy.config;


import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.cors.CorsConfiguration;
import org.springframework.web.cors.UrlBasedCorsConfigurationSource;
import org.springframework.web.filter.CorsFilter;

@Configuration
public class CorsConfig {
    @Bean
    public CorsFilter corsFilter() {
        CorsConfiguration config = new CorsConfiguration();
        config.addAllowedOrigin("*");
        config.addAllowedMethod("*");
        config.addAllowedHeader("*");
        UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
        source.registerCorsConfiguration("/**", config);
        return new CorsFilter(source);
    }
}

六、完成后端的增删查改操作

controller(控制器层)

package com.cy.controller;

import com.cy.pojo.dto.EmployeeDto;

import com.cy.pojo.entity.Employee;
import com.cy.pojo.vo.Result;
import com.cy.service.EmployeeService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.*;

import javax.annotation.Resource;
import java.util.List;

@RestController
@RequestMapping("list")
//解决跨域问题
public class EmployeeController {
    @Autowired
    private EmployeeService employeeService;

    @GetMapping("/{pageNo}/{pageSize}")
    public Result queryPage(@PathVariable("pageNo") Integer pageNo,
                            @PathVariable("pageSize") Integer pagesize,
                            @RequestParam(required = false) String  username ){
     EmployeeDto employees= employeeService.PageByData(pageNo,pagesize,username);
        Result result = Result.builder()
                .code(20000)
                .message("查询成功")
                .data(employees)
                .build();
        return result;
    }

    @PostMapping("/save")
    public Result save(@RequestBody Employee employee){
       Integer add= employeeService.addByData(employee);
       if (add==null){
           return Result.builder().code(50000).message("新增失败").build();
       }
        return  Result.builder().code(20000).message("新增成功").build();
    }

    @RequestMapping("/listById")
    public Result getById(@RequestParam("id") Integer id){
        Employee employee=employeeService.selectById(id);
        if (employee==null){
            return Result.builder().code(50000).message("查询失败").build();
        }
        return   Result.builder()
                .code(20000)
                .message("查询成功")
                .data(employee)
                .build();
    }

    @PutMapping("/update")
    public Result update(@RequestBody Employee employee){
        Integer update=employeeService.updateByData(employee);
        if (update==null){
            return Result.builder().code(50000).message("修改失败").build();
        }
        return  Result.builder().code(20000).message("修改成功").build();
    }

    @DeleteMapping("/delete")
    public Result del(@RequestParam Integer id){
        Integer del=employeeService.delById(id);
        if (del==null){
            return Result.builder().code(50000).message("删除失败").build();
        }
        return  Result.builder().code(20000).message("删除成功").build();
    }

    @RequestMapping("/batchDel")
    public Result batchDel(@RequestBody List<Integer> ids){
        Integer dels= employeeService.batchDel(ids);
        if (dels==null){
            return Result.builder().code(50000).message("批量删除失败").build();
        }
        return  Result.builder().code(20000).message("批量删除成功").build();
    }

}

service（业务逻辑层）

package com.cy.service;

import com.cy.pojo.dto.EmployeeDto;
import com.cy.pojo.entity.Employee;

import java.util.List;

public interface EmployeeService {
    EmployeeDto PageByData(Integer pageNo, Integer pagesize, String username);

    Integer addByData(Employee employee);

    Integer updateByData(Employee employee);

    Employee selectById(Integer id);

    Integer delById(Integer id);

    Integer batchDel(List<Integer> ids);
}

package com.cy.service.impl;

import com.cy.mapper.EmployeeMapper;
import com.cy.pojo.dto.EmployeeDto;
import com.cy.pojo.entity.Employee;
import com.cy.service.EmployeeService;
import org.springframework.stereotype.Service;

import javax.annotation.Resource;
import java.util.List;

@Service
public class EmployeeServiceImpl implements EmployeeService {
    @Resource
    private EmployeeMapper employeeMapper;
    @Override
    public EmployeeDto PageByData(Integer pageNo, Integer pagesize,String username) {
        Integer total=employeeMapper.sum();

        int ceil =(int) Math.ceil((total / (double) pagesize));
        Integer c=ceil;
        Integer start;
        if (pageNo<c){
            start=(pageNo-1)*pagesize;
        }else {
            start=(ceil-1)*pagesize;
        }
        List<Employee> employeeList=employeeMapper.getPage(start,pagesize,username);

        EmployeeDto dto = EmployeeDto.builder()
                .pageNo(pageNo)
                .pageSize(pagesize)
                .total(ceil)
                .dataList(employeeList)
                .build();

        return dto;
    }

    @Override
    public Integer addByData(Employee employee) {
        Integer add=employeeMapper.add(employee);

        return add;
    }

    @Override
    public Integer updateByData(Employee employee) {
        Integer update=employeeMapper.updateByData(employee);

        return update;
    }

    @Override
    public Employee selectById(Integer id) {
        Employee employee=employeeMapper.getById(id);

        return employee;
    }

    @Override
    public Integer delById(Integer id) {
        Integer del=employeeMapper.del(id);

        return del;
    }

    @Override
    public Integer batchDel(List<Integer> ids) {
        return employeeMapper.batchDel(ids);
    }
}

mapper（数据访问层）

package com.cy.mapper;

import com.cy.pojo.entity.Employee;
import org.apache.ibatis.annotations.Mapper;
import org.apache.ibatis.annotations.Param;

import java.util.List;

@Mapper
public interface EmployeeMapper {
    List<Employee> getPage(@Param("start") Integer start,
                           @Param("pageSize") Integer pagesize,
                           @Param("username") String username);

    Integer sum();

    Integer add(Employee employee);

    Integer updateByData(Employee employee);

    Employee getById(Integer id);

    Integer del(Integer id);

    Integer batchDel(List<Integer> ids);
}

mappers

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE mapper
        PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
        "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="com.cy.mapper.EmployeeMapper">
    <insert id="add">
        insert into employee(username,name,password,email,age,admin,dept_id)
                values(#{username},#{name},#{password},#{email},#{age},#{admin},#{deptId})
    </insert>
    <update id="updateByData">
        update employee
            <set>
                <if test="username!=null">
                    username=#{username},
                </if>
                <if test="name!=null">
                    name=#{name},
                </if>
                <if test="password!=null">
                    password=#{password},
                </if>
                <if test="email!=null">
                    email=#{email},
                </if>
                <if test="age!=null">
                    age=#{age},
                </if>
                <if test="admin!=null">
                    admin=#{admin},
                </if>
                <if test="deptId!=null">
                    dept_id=#{deptId},
                </if>
            </set>
            where id=#{id}

    </update>
    <delete id="del">
        delete from employee where id=#{id}
    </delete>
    <delete id="batchDel">
        delete from employee
            where id
            <trim prefix="in (" suffix=")" suffixOverrides=",">
            <foreach collection="ids" item="item" separator=",">
                #{item}
            </foreach>
            </trim>
    </delete>
    <!--<mapper namespace="">-->


    <select id="getPage" resultType="com.cy.pojo.entity.Employee">
        select * from employee
            <where>
                <if test="username!=null">
                   and username like concat("%",#{username},"%")
                </if>
            </where>
            <if test="start!=null and pageSize!=null">
                limit #{start},#{pageSize}
            </if>
    </select>
    <select id="sum" resultType="java.lang.Integer">
        select count(*) from employee
    </select>
    <select id="getById" resultType="com.cy.pojo.entity.Employee">
        select * from employee
            where id=#{id}
    </select>
</mapper>

还有一些简单的工具类

EmployeeDto

package com.cy.pojo.dto;

import com.cy.pojo.entity.Employee;
import lombok.AllArgsConstructor;
import lombok.Builder;
import lombok.Data;
import lombok.NoArgsConstructor;

import java.util.ArrayList;
import java.util.List;

/**
 * @Author chen
 * @Version 1.0
 * @Date 2024/12/24
 * @Description 返回前端的数据
 */
@Data
@Builder
@AllArgsConstructor
@NoArgsConstructor
public class EmployeeDto {
    /**
     *数据总数
     */
    private Integer total;

    /**
     *页面数
     */
    private Integer pageNo;

    /**
     *每页数据大小
     */
    private Integer pageSize;

    /**
     *数据集合
     */
    private List<Employee> dataList=new ArrayList<>();
}

实体类

package com.cy.pojo.entity;

import lombok.AllArgsConstructor;
import lombok.Builder;
import lombok.Data;
import lombok.NoArgsConstructor;

import java.util.ArrayList;
import java.util.List;

@Data
@Builder
@NoArgsConstructor
@AllArgsConstructor
public class Employee {
    /**
     *主键
     */
    private Integer id;
    /**
     *用户名
     */
    private String username;
    /**
     *名称
     */
    private String name;
    /**
     *密码
     */
    private String password;
    /**
     *邮箱
     */
    private String email;
    /**
     *年龄
     */
    private Integer age;
    /**
     *管理员
     */
    private Integer admin;
    /**
     *所属部门
     */
    private Integer deptId;

    //角色id集
    //private List<Integer> roleIds = new ArrayList<>();
}

统一后端返回前端的格式

package com.cy.pojo.vo;

import lombok.AllArgsConstructor;
import lombok.Builder;
import lombok.Data;
import lombok.NoArgsConstructor;

/**
 * @Author chen
 * @Version 1.0
 * @Date 2024/12/24
 * @Description 统一返回类型
 */
@Data
@Builder
@NoArgsConstructor
@AllArgsConstructor
public class Result {
    /**
     *状态码
     */
    private Integer code;
    /**
     *提示信息
     */
    private String  message;
    /**
     *返回数据
     */
    private Object data;

}

前端HTML页面效果显示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!-- Bootstrap -->
    <link rel="stylesheet" href="./css/bootstrap.css" >
    <script src="./js/vue.js"></script>
    <script src="./js/axios.min.js"></script>
</head>
<body>
<div id="app">
<table class="table">
    <form class="form-inline">
            <label >产品名/概述</label>
            <input type="text" v-model="username" placeholder="请输入产品名/概述">
        <button type="submit" @click="search">搜索</button>
        <button class="fat-btn"
                type="button" style="background-color: #269abc" @click="resBtn">重置
        </button>
    </form>
    <div>
    <button class="fat-btn"
            type="button" style="background-color: #269abc" @click="asveBtn"> 新增
    </button>
    <button class="fat-btn"
            type="button" style="background-color: tomato" @click="batchDel"> 批量删除
    </button>
    </div>
    <thead>
    <tr>
        <th>选择</th>
        <th>用户名</th>
        <th>用户</th>
        <th>密码</th>
        <th>邮件</th>
        <th>年龄</th>
        <th>管理员</th>
        <th>操作</th>
    </tr>
    </thead>
    <tbody>
    <tr v-for="(value,key) in dataList" :key="key">
        <td>
            <input type="checkbox" :value="value.id" v-model="ids">
        </td>
        <td>{{value.username}}</td>
        <td>{{value.name}}</td>
        <td>{{value.password}}</td>
        <td>{{value.email}}</td>
        <td>{{value.age}}</td>
        <td>{{value.admin}}</td>
         <td>
             <button
                     type="button" style="background-color: tomato" @click="delData(value.id)"> 删除
             </button>
             <button class="fat-btn"
                     type="button" style="background-color: darkcyan" @click="findData(value.id)"> 编辑
             </button>
         </td>
    </tr>
    </tbody>
</table>
    <!--分页-->
    <div style="padding-right: 20px">
    <ul class="pagination" >
        <li><a href="#">&laquo;</a></li>
        <li v-for="page in totalPage" :key="page" >
            <a href="#" :class="{active:page==pageNo}" @click="change(page)">{{page}}</a></li>
        <li><a href="#">&raquo;</a></li>
    </ul>
    </div>
<!--新增窗口-->
     <div style="width: 50%;align-content: center" v-if="newBtn">
    <form>
        <div class="form-group">
            <label >用户名</label>
            <input type="text" class="form-control" v-model="addem.username"  placeholder="用户名">
        </div>
        <div class="form-group">
            <label >用户</label>
            <input type="text" class="form-control" v-model="addem.name"  placeholder="用户">
        </div>
        <div class="form-group">
            <label >密码</label>
            <input type="text" class="form-control" v-model="addem.password" placeholder="密码">
        </div>
        <div class="form-group">
            <label >邮件</label>
            <input type="text" class="form-control" placeholder="邮件" v-model="addem.email">
        </div>
        <div class="form-group">
            <label >年龄</label>
            <input type="text" class="form-control" placeholder="年龄" v-model="addem.age">
        </div>
        <div class="form-group">
            <label >管理员</label>
            <input type="text" class="form-control" placeholder="管理员" v-model="addem.admin">
        </div>
        <div class="form-group">
            <label >所属部门</label>
            <input type="text" class="form-control" placeholder="所属部门" v-model="addem.deptId">
        </div>

        <button type="submit" class="btn btn-default" @click="saveData">确定</button>
        <button type="submit" class="btn btn-default" @click="closeBtn">取消</button>
    </form>
     </div>
<!--编辑窗口-->
    <div  style="width: 50%;align-content: center" v-if="updateBtn">
        <form>
            <div class="form-group">
                <label >用户名</label>
                <input type="text" class="form-control" v-model="empol.username"  placeholder="用户名">
            </div>
            <div class="form-group">
                <label >用户</label>
                <input type="text" class="form-control" v-model="empol.name"  placeholder="用户">
            </div>
            <div class="form-group">
                <label >密码</label>
                <input type="text" class="form-control" v-model="empol.password" placeholder="密码">
            </div>
            <div class="form-group">
                <label >邮件</label>
                <input type="text" class="form-control" placeholder="邮件" v-model="empol.email">
            </div>
            <div class="form-group">
                <label >年龄</label>
                <input type="text" class="form-control" placeholder="年龄" v-model="empol.age">
            </div>
            <div class="form-group">
                <label >管理员</label>
                <input type="text" class="form-control" placeholder="管理员" v-model="empol.admin">
            </div>
            <div class="form-group">
                <label >所属部门</label>
                <input type="text" class="form-control" placeholder="所属部门" v-model="empol.deptId">
            </div>

            <button type="submit" class="btn btn-default" @click="updateData">确定</button>
            <button type="submit" class="btn btn-default" @click="closeBtn">取消</button>
        </form>
    </div>
</div>
    <script src="./js/bootstrap.js"></script>
<script>
    new Vue({
        el:'#app',
        data:{
            pageNo:1,
            pageSize:3,
            totalPage:1,
            dataList:[],
            ids:[],
           username:null,
            form:{
              username:null,
                name:null
            },
            addem:{

            },
            empol:{},
            newBtn:false,
            updateBtn:false
        },
        methods:{
            getAll(){
                console.log("username：",this.username)
                axios({
                    method:'get',
                    url:`http://localhost:8080/suv/list/${this.pageNo}/${this.pageSize}`,
                    params:{
                     username:this.username
                    }
                }).then(resp=>{
                console.log("分页查询的数据：",resp.data)
                    if (resp.data.code===20000){
                        this.dataList=resp.data.data.dataList
                        this.totalPage=resp.data.data.total
                    }

                })
            },
            change(page){
                this.pageNo=page
                this.getAll()
            }
            ,
            /*新增*/
            saveData(){
                axios({
                    method: 'post',
                    url: 'http://localhost:8080/suv/list/save',
                    data: this.addem
                }).then(resp=>{
                    if (resp.data.code===20000){
                        alert(resp.data.message)
                    }else {
                        alert(resp.data.message)
                    }
                })
            },
            findData(id){
                this.updateBtn = true
                axios({
                    method:'get',
                    url:'http://localhost:8080/suv/list/listById',
                    params: {
                        id:id
                    }
                }).then(resp=>{
                    console.log(resp.data)
                    if (resp.data.code===20000){
                        this.empol=resp.data.data
                    }
                })
            }
            ,
            updateData() {
                axios({
                    method:'put',
                    url:'http://localhost:8080/suv/list/update',
                    data:this.empol
                }).then(resp=>{
                    if (resp.data.code===20000){
                        alert(resp.data.message)
                        this.updateBtn=false
                        this.getAll()
                    }
                })
            }
            ,
            asveBtn(){
                this.newBtn=true
            },
            search(){
                this.pageNo = 1,
                this.getAll()
            }
            ,
            resBtn(){
                this.closeBtn()
                this.username=null
                this.getAll()
            },
            closeBtn(){
                this.newBtn = false,
                this.updateBtn = false
            },
        /*删除*/
            delData(id){
                if (confirm("确定删除吗")){
                    axios({
                        method:'delete',
                        url:'http://localhost:8080/suv/list/delete',
                        params:{
                            id:id
                        }
                    }).then(resp=>{
                        if (resp.data.code===20000){
                            alert(resp.data.message)
                        }else {
                            alert(resp.data.message)
                        }
                        this.pageNo=1
                        this.getAll()
                    })
                }

            },
            /*批量删除*/
            batchDel(){
                axios({
                    method:'post',
                    url:'http://localhost:8080/suv/list/batchDel',
                    data:this.ids
                }).then(resp=>{
                    alert(resp.data.message)
                    this.pageNo=1
                    this.getAll()
                })
            }
        },
        created(){
           this.getAll()
        }
    })

</script>
</body>
</html>

数据库数据设置：

效果展示