SpringBoot+Vue+axios实现增删改查分页全套代码

目录

src下创建此目录

api目录下创建js文件引入axios（封装的方法）

前端页面（使用elementui组件）

后端

1.搭建项目结构

2.分页插件

3.entity层

4.mapper层

5.service层

service下的impl层

6.xml映射文件

7.controller层

结果

点击页码效果

模糊查询

点击修改键

点击新增键

 点击删除

---

src下创建此目录

api目录下创建js文件引入axios（封装的方法）

//引入axios的对象
import request from '../utils/request'

export function getUser(page,size,name) {
    return request({
        url: '/getUserList',
        method: 'get',
        params:{
            page,
            size,
            name
        }
    })
}
export function deleUser(id) {
    return request({
        url: '/deleUser',
        method: 'DELETE',
        params:{
            id
        }
    })
}

export function addUser(user) {
    return request({
        url: '/addUser',
        method: 'post',
        data:user
    })
}

export function updateUser(user) {
    return request({
        url: '/updateUser',
        method: 'post',
        data:user
    })
}

前端页面（使用elementui组件）

<template>
    <el-card class="box-card">
        <el-breadcrumb separator="/">
            <el-breadcrumb-item>系统管理</el-breadcrumb-item>
            <el-breadcrumb-item :to="{ path: '/index' }">首页</el-breadcrumb-item>
        </el-breadcrumb>
        <!-- 表单 -->
        <el-form :inline="true" :model="user" class="demo-form-inline">
            <el-form-item label="用户名">
                <el-input v-model="user.name" placeholder="用户名" clearable
                ></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="onSubmit">查询</el-button>
            </el-form-item>

            <el-button
                    type="primary"
                    style="float: right; margin-right: 20px"
                    @click="toDoAddUser()"
            >新增用户信息</el-button
            >
        </el-form>
        <!-- 表格 -->
        <el-table :data="userList" border style="width: 100%">
            <el-table-column prop="id" label="编号" width="180"> </el-table-column>
            <el-table-column prop="name" label="姓名" width="180"> </el-table-column>
            <el-table-column prop="age" label="年龄" width="100"> </el-table-column>
            <el-table-column prop="email" label="邮箱" width="220"> </el-table-column>
            <el-table-column>
                <template slot-scope="scope">

                    <el-button type="danger" icon="el-icon-delete"
                               @click="delUser(scope.row.id)">删除</el-button>
                    <el-button
                            type="primary"
                            icon="el-icon-edit"
                            @click="toDoUpUser(scope.row)"
                    >修改</el-button
                    >
                </template>

            </el-table-column>
        </el-table>
        <!-- 分页 -->
        <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="page"
                :page-sizes="[2, 3, 4, 5]"
                :page-size="size"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total"
        >