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

最新推荐文章于 2025-06-01 17:05:40 发布

lu__lala

最新推荐文章于 2025-06-01 17:05:40 发布

阅读量2.7k

点赞数 5

CC 4.0 BY-SA版权

文章标签： vue.js spring boot elementui

本文链接：https://blog.youkuaiyun.com/lu__lala/article/details/124765627

本文介绍了如何使用SpringBoot后端结合Vue.js前端和axios库，实现完整的增删改查及分页功能。在前端，利用ElementUI组件进行页面布局；后端涉及项目结构搭建、分页插件配置、各层服务及XML映射文件的编写。最终实现了点击页码、模糊查询、修改、新增和删除操作。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

src下创建此目录

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

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