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

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

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

目录

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"
        >
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值