springboot + vue3实现增删改查分页操作

环境

jdk17 vue3

最终实现效果

实现功能

添加用户，禁用，启用，删除，编辑，分页查询

主要框架

后端
springboot mybatis-plus
前端
element-plus axios

代码实现

数据库

数据库中就一个 user表主要就包含以下字段

后端

yml配置文件

server:
  port: 8000
spring:
  datasource:
    driver-class-name: com.mysql.cj.jdbc.Driver
    url: jdbc:mysql://localhost:3306/java-db1?serverTimezone=Asia/Shanghai&useUnicode=true&characterEncoding=utf-8&zeroDateTimeBehavior=convertToNull&useSSL=false&allowPublicKeyRetrieval=true
    username: root
    password: 123456
    type: com.alibaba.druid.pool.DruidDataSource
  jackson:
    date-format: yyyy-MM-dd HH:mm:ss
    time-zone: GMT-8
  thymeleaf:
    cache: false
mybatis-plus:
  global-config:
    db-config:
      id-type: assign_id
  configuration:
    map-underscore-to-camel-case: true

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 https://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>3.2.1</version>
        <relativePath/> <!-- lookup parent from repository -->
    </parent>
    <groupId>com.example</groupId>
    <artifactId>demo</artifactId>
    <version>0.0.1-SNAPSHOT</version>
    <name>demo</name>
    <description>demo</description>
    <properties>
        <java.version>17</java.version>
    </properties>
    <dependencies>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-jdbc</artifactId>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-web</artifactId>
        </dependency>

        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-devtools</artifactId>
            <scope>runtime</scope>
            <optional>true</optional>
        </dependency>
        <dependency>
            <groupId>com.mysql</groupId>
            <artifactId>mysql-connector-j</artifactId>
            <scope>runtime</scope>
        </dependency>
        <dependency>
            <groupId>org.projectlombok</groupId>
            <artifactId>lombok</artifactId>
            <optional>true</optional>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-test</artifactId>
            <scope>test</scope>
        </dependency>
        <!-- https://mvnrepository.com/artifact/com.alibaba/druid-spring-boot-starter -->
        <dependency>
            <groupId>com.alibaba</groupId>
            <artifactId>druid-spring-boot-starter</artifactId>
            <version>1.2.11</version>
        </dependency>
        <dependency>
            <groupId>com.baomidou</groupId>
            <artifactId>mybatis-plus-spring-boot3-starter</artifactId>
            <version>3.5.5</version>
        </dependency>
        <!-- https://mvnrepository.com/artifact/org.springframework.security/spring-security-crypto -->
        <dependency>
            <groupId>org.springframework.security</groupId>
            <artifactId>spring-security-crypto</artifactId>
            <version>6.2.1</version>
        </dependency>


    </dependencies>

    <build>
        <plugins>
            <plugin>
                <groupId>org.springframework.boot</groupId>
                <artifactId>spring-boot-maven-plugin</artifactId>
                <configuration>
                    <excludes>
                        <exclude>
                            <groupId>org.projectlombok</groupId>
                            <artifactId>lombok</artifactId>
                        </exclude>
                    </excludes>
                </configuration>
            </plugin>
        </plugins>
    </build>

</project>

User实体类

package com.example.demo.entity;


import com.baomidou.mybatisplus.annotation.IdType;
import com.baomidou.mybatisplus.annotation.TableField;
import com.baomidou.mybatisplus.annotation.TableId;
import lombok.AllArgsConstructor;
import lombok.Data;

import java.sql.Timestamp;

@Data
@AllArgsConstructor
public class User {
    @TableId(value = "id",type = IdType.AUTO)
    private Integer id;

    private String username;

    private String password;
    private String nickname;

    private String email;

    private Timestamp add_time;

    private Integer disabled;

}

UserService接口中我们需要添加一个方法

   Page<User> getPage(Page<User> page, QueryWrapper<User> queryWrapper);

UserServiceImple实现类中实现这个方法
这个方法主要用来实现分页

 @Autowired
    private UserMapper userMapper;
    @Override
    public Page<User> getPage(Page<User> page, QueryWrapper<User> queryWrapper) {
       return userMapper.selectPage(page,queryWrapper);
    }

UserMapper类和 我们平时写的mapper类一样，没有区别
在config包下添加Mybatis-plus分页插件

package com.example.demo.config;

import com.baomidou.mybatisplus.annotation.DbType;
import com.baomidou.mybatisplus.extension.plugins.MybatisPlusInterceptor;
import com.baomidou.mybatisplus.extension.plugins.inner.OptimisticLockerInnerInterceptor;
import com.baomidou.mybatisplus.extension.plugins.inner.PaginationInnerInterceptor;
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;

@Configuration
public class MyBatisPlusConfig {
    @Bean
    public MybatisPlusInterceptor mybatisPlusInterceptor() {
        MybatisPlusInterceptor interceptor = new MybatisPlusInterceptor();

        // 向MyBatis-Plus的过滤器链中添加分页拦截器，需要设置数据库类型（主要用于分页方言）
        interceptor.addInnerInterceptor(new PaginationInnerInterceptor(DbType.MYSQL));
//        interceptor.addInnerInterceptor(new PaginationInnerInterceptor(DbType.MYSQL));
        // 添加乐观锁拦截器
        interceptor.addInnerInterceptor(new OptimisticLockerInnerInterceptor());
        return interceptor;
    }
}

UserController控制器类

package com.example.demo.controller;

import com.baomidou.mybatisplus.core.conditions.query.QueryWrapper;
import com.baomidou.mybatisplus.extension.plugins.pagination.Page;
import com.example.demo.entity.User;
import com.example.demo.service.UserService;
import com.example.demo.util.Res;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.security.crypto.bcrypt.BCryptPasswordEncoder;
import org.springframework.web.bind.annotation.*;

import java.sql.Timestamp;
import java.util.Date;

@RestController
@RequestMapping("/user")
public class UserController{
    @Autowired
    private UserService userService;

    @PostMapping("/add")
    public Res<User> add (@RequestBody User user){
        //判断用户是否存在
        QueryWrapper<User> queryWrapper = new QueryWrapper<>();
        queryWrapper.eq("username",user.getUsername());

        User u = userService.getOne(queryWrapper);
        if(u!=null){
            return Res.error("用户已存在");
        }

        //设置添加时间
        Timestamp timestamp = new Timestamp(new Date().getTime());
        user.setAdd_time(timestamp);
        //加密密码
        BCryptPasswordEncoder bCryptPasswordEncoder = new BCryptPasswordEncoder();

        String hash_password =bCryptPasswordEncoder.encode(user.getPassword());

        user.setPassword(hash_password);

        boolean res = userService.save(user);
        if(!res){
            return Res.error("添加失败");
        }
        return Res.success("添加用户成功",user);
    }

    @PostMapping("/edit")
    public Res<User> edit(@RequestBody User user){
        boolean res = userService.updateById(user);
        if(!res){
            return Res.error("编辑用户信息失败");
        }
        return Res.success("编辑用户信息成功",user);
    }

    @DeleteMapping("/delete/{id}")
    public Res<Object> delete(@PathVariable int id){
        boolean res = userService.removeById(id);
        if(!res){
            return Res.error("删除失败");
        }
        return Res.success("删除成功",id);
    }

    @GetMapping("/getid/{id}")
    public Res<User> getId(@PathVariable int id){
        User user = userService.getById(id);
        if(user!=null){
            return Res.success("获取数据成功",user);
        }
        return Res.error("获取数据失败");
    }

    @GetMapping("/page")
    public Res<Object> page(@RequestParam(defaultValue = "1") int page,
                            @RequestParam(defaultValue = "10") int pageSize,
                            @RequestParam(defaultValue = "") String username,
                            @RequestParam(defaultValue = "") String nickname
                            ){
        Page<User> userPage = new Page<>(page,pageSize);

        QueryWrapper<User> queryWrapper = new QueryWrapper<>();
        queryWrapper.like("username",username).or().like("nickname",nickname);

        return Res.success("获取数据成功",userService.getPage(userPage,queryWrapper));
    }

    @PostMapping("/disabled")
    public Res<Object> disabledById(@RequestBody User user){
        boolean res =userService.updateById(user);
        if(res){
            return Res.success("禁用成功",user);
        }
        return Res.error("禁用失败");
    }

    @PostMapping("/enable")
    public Res<Object> enableById(@RequestBody User user){
        boolean res =  userService.updateById(user);
        if(res){
            return Res.success("启用成功",user);
        }
        return Res.error("启用失败");
    }
}

在UserController控制器中Res是我们自己封装的返回类

package com.example.demo.util;

import lombok.Data;
import org.springframework.stereotype.Component;

@Data
public class Res<T> {
    private Integer code;
    private String msg;
    private T data;

    public static <T> Res<T> success(String msg,T data){
        Res<T> res = new Res<T>();
        res.code = 200;
        res.msg = msg;
        res.data = data;
        return res;
    }

    public static <T> Res<T> error(String msg){
        Res<T> res = new Res<T>();
        res.code = 400;
        res.msg = msg;
        res.data = null;
        return res;
    }
}

配置跨域请求
在config包下配置

package com.example.demo.config;

import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.CorsRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;
@Configuration
public class CorsConfig implements WebMvcConfigurer {
    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**")
//                .allowedOrigins("*")
                .allowedOriginPatterns("*")
                .allowedMethods("GET", "HEAD", "POST", "PUT", "DELETE", "OPTIONS")
                .allowCredentials(true)
                .maxAge(3600)
                .allowedHeaders("*")
                .exposedHeaders("*");
    }
}

前端

依赖

  "dependencies": {
    "axios": "^1.6.4",
    "element-plus": "^2.4.4",
    "pinia": "^2.1.7",
    "sass": "^1.69.7",
    "vue": "^3.3.11",
    "vue-router": "^4.2.5"
  },

这里我给axios添加了一个baseUrl可以根据我们自己的需要添加请求头

import axios from "axios"

const http = axios.create({
    baseURL:"http://127.0.0.1:8000",
    timeout:5000
});

export default http

实现代码
由于功能不是很多我只写了一个页面
下面是全部实现代码

<script setup>
import { onMounted, ref } from 'vue';
import http from "@/http/http.js"
import { ElMessage, ElMessageBox } from 'element-plus'

const currentPage = ref(1)
const pageSize = ref(10)

const total = ref(0)

const dialogVisible = ref(false)

const addDialogVisible = ref(false)

const tableData = ref([])

const form = ref({})

const keyword = ref("")

const addForm =ref({
    username:"",
    password:"",
    email:"",
    nickname:""
})

const addFormRef = ref(null)

const rules = ref({
  username: [
    { required: true, message: 'Please input username', trigger: 'blur' },
    { min: 5, max: 14, message: 'Length should be 5 to 14', trigger: 'blur' },
  ],
  password: [
  { required: true, message: 'Please input password', trigger: 'blur' },
    { min: 5, max: 15, message: 'Length should be 5 to 15', trigger: 'blur' },
  ]
})

const handleSizeChange = (size) => {
    pageSize.value = size
    currentPage.value = 1
    getPage()
}

const handleCurrentChange = (page) => {
    currentPage = page
    getPage()
}



const getPage = async () => {
    const { data: res } = await http.get(`/user/page?page=${currentPage.value}&pageSize=${pageSize.value}&username=${keyword.value}&nickname=${keyword.value}`)
    total.value = res.data.total
    tableData.value = res.data.records
}

const disabledById = async (row) => {
    const { data: res } = await http.post("/user/disabled", {
        id: row.id,
        disabled: 1
    }
    );
    if (res.code == 200) {
        ElMessage.success("禁用成功");
        getPage()
    } else {
        ElMessage.error("禁用失败");
    }
}

const enableById = async (row) => {
    const { data: res } = await http.post("/user/enable", {
        id: row.id,
        disabled: 0
    }
    );
    if (res.code == 200) {
        ElMessage.success("启用成功");
        getPage()
    } else {
        ElMessage.error("启用失败");
    }
}

const openDialogVisible = (row) => {
    dialogVisible.value = true
    form.value = row
}

const edit = async () => {
    const { data: res } = await http.post("user/edit",
        form.value
    )
    if (res.code !== 200) {
        dialogVisible.value = false
        return ElMessage.error("编辑失败")
    }
    ElMessage.success("编辑成功");
    dialogVisible.value = false
    getPage()
}

const deleteById = (row) => {
    ElMessageBox.confirm(
        '此操作将永久删除该项,是否继续?',
        '警告',
        {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
        }
    )
        .then(async () => {
            const { data: res } = await http.delete(`/user/delete/${row.id}`)
            if (res.code !== 200) {
                return ElMessage.error("删除失败");
            }
            ElMessage({
                type: 'success',
                message: '删除成功!',
            })
            getPage()
        })
        .catch(() => {
            ElMessage({
                type: 'info',
                message: '已取消删除!',
            })
        })
}

const openAddDialogVisible = () => {
    addDialogVisible.value = true
}

const addUser = async () =>{
    const {data:res} = await http.post("/user/add",addForm.value)
    if(res.code!==200){
        addDialogVisible.value =false
        return ElMessage.error("添加用户失败");
    }
    ElMessage.success("添加用户成功");
    addDialogVisible.value = false
    getPage()
}

const findUser = () =>{
    getPage()
}

const handleClose = () =>{
    addFormRef.value.resetFields()
}

onMounted(() => {
    getPage()
})
</script>

<template>
    <div class="index">
        <el-row :gutter="20">
            <el-col :span="4">
                <el-button type="primary" @click="openAddDialogVisible">添加用户</el-button>
            </el-col>
            <el-col :span="6">
                <el-input v-model="keyword" class="w-50 m-2" placeholder="请输入用户名或昵称">
                    <template #append>
                        <el-button @click="findUser">查找用户</el-button>
                    </template>
                </el-input>
            </el-col>
        </el-row>
        <el-table :data="tableData" border style="width: 100%" stripe>
            <el-table-column prop="id" label="ID" />
            <el-table-column prop="username" label="用户名" />
            <el-table-column prop="nickname" label="昵称" />
            <el-table-column prop="email" label="邮箱" />
            <el-table-column prop="add_time" label="添加时间" />
            <el-table-column label="状态">
                <template v-slot="scoped">
                    <el-tag v-if="scoped.row.disabled == 1" type="danger">禁用</el-tag>
                    <el-tag v-else type="success">启用</el-tag>
                </template>
            </el-table-column>
            <el-table-column label="操作">
                <template v-slot="scoped">
                    <el-button size="small" type="info" @click="disabledById(scoped.row)">禁用</el-button>
                    <el-button size="small" type="success" @click="enableById(scoped.row)">启用</el-button>
                    <el-button size="small" type="warning" @click="openDialogVisible(scoped.row)">编辑</el-button>
                    <el-button size="small" type="danger" @click="deleteById(scoped.row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination v-model:current-page="currentPage" v-model:page-size="pageSize" :page-sizes="[1, 2, 3, 4]"
            :small="small" :disabled="disabled" :background="background" layout="total, sizes, prev, pager, next, jumper"
            :total="total" @size-change="handleSizeChange" @current-change="handleCurrentChange" />

        <el-dialog v-model="dialogVisible" title="编辑" width="30%" :before-close="handleClose">
            <el-form :model="form" label-width="120px">
                <el-form-item label="id">
                    <el-input v-model="form.id" disabled />
                </el-form-item>
                <el-form-item label="昵称">
                    <el-input v-model="form.nickname" />
                </el-form-item>
                <el-form-item label="邮箱">
                    <el-input v-model="form.email" />
                </el-form-item>
            </el-form>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="dialogVisible = false">取消</el-button>
                    <el-button type="primary" @click="edit">
                        确定
                    </el-button>
                </span>
            </template>
        </el-dialog>

        <el-dialog v-model="addDialogVisible" title="添加用户" width="30%" @close="handleClose" >
            <el-form :model="addForm" label-width="120px" :rules="rules" ref="addFormRef">
                <el-form-item label="用户名" prop="username">
                    <el-input v-model="addForm.username" />
                </el-form-item>
                <el-form-item label="密码" prop="password"> 
                    <el-input v-model="addForm.password" />
                </el-form-item>
                <el-form-item label="邮箱">
                    <el-input v-model="addForm.email" placeholder="选填" />
                </el-form-item>
                <el-form-item label="昵称">
                    <el-input v-model="addForm.nickname" placeholder="选填" />
                </el-form-item>
            </el-form>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="addDialogVisible = false">取消</el-button>
                    <el-button type="primary" @click="addUser">
                        添加
                    </el-button>
                </span>
            </template>
        </el-dialog>
    </div>
</template>

<style lang="scss" scoped>
.index {
    width: auto;
    height: auto;
    padding: 30px;

    .el-pagination {
        margin-top: 25px;
    }

    .el-row {
        margin-bottom: 25px;
    }
}
</style>

注意事项

后端使用mybatis-plus分页记得添加分页插件
记得配置跨域请求文件
springboot3.2.1 搭配的mybatis-plus 要使用3.5.5，其他的会报错