【Vue+Element+SpringBoot+MybatisPlus】 使用心得。单个页面的增删改查,批量删除,分页查询

Vue前端

一、新建vue脚手架

新建vue手脚架项目参考我上一个笔记:
【Vue】cli安装,创建脚手架项目,vue项目目录介绍,路由配置

本篇首先分析前端代码的增删改查…然后再逐一分析后端代码,分析每个操作时可能会把其他的代码附带一点。不过不要紧最后我会把所有代码整体粘上

在脚手架框架中要想使用element首先得安装

npm i element-ui -S

并在main.js中添加

import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
//让Vue引入使用ElementUI
Vue.use(ElementUI);

axios简介和安装

axios的优点:
易用、简洁且高效的http库。 支持原始JS中的Promise,做异步请求数据工具。

向后端发送Ajax请求,安装axios

npm  i  --save axios
import axios from 'axios'//设置路径的默认前缀
axios.defaults.baseURL="http://localhost:9090"
//把axios挂载到vue对象
Vue.prototype.$http=axios;

创建好Vue项目并新建一个Userinfo.vue页面,我们对这个页面进行操作,废话少说,接下来做查询所有

二、查询所有

vue页面:

<el-table
        :data="userList"
        style="width: 100%"
        @selection-change="selectChanged">
    <el-table-column
            type="selection"
            width="55">
    </el-table-column>
    <el-table-column
            prop="id"
            label="Id"
            width="180">
    </el-table-column>
    <el-table-column
            prop="username"
            label="用户名"
            width="180">
    </el-table-column>
    <el-table-column
            prop="password"
            label="密码">
    </el-table-column>
    <el-table-column
            prop="phone"
            label="手机号">
    </el-table-column>
    <el-table-column
            prop="avatar"
            label="头像">
    </el-table-column>
    <el-table-column
            prop="deptid"
            label="部门编号">
    </el-table-column>
    <el-table-column
            prop="createtime"
            label="创建时间">
    </el-table-column>
    <el-table-column
            fixed="right"
            label="操作"
            width="160">
        <template slot-scope="scope">
            <el-button @click="openUpdate(scope.row)" type="primary" size="small">修改</el-button>
            <el-button @click="delUser(scope.row)" type="danger" size="small">删除</el-button>
        </template>
    </el-table-column>
</el-table>

在data中添加上面用到的值,通过查询方法给他赋值

data() {
   	return {
       	userList: [],
   	};
}

methods中添加查询所有的方法:

getAll() {
    var _this = this;
    this.$http.get('/user')
        .then(function (response) {
            _this.userList = response.data.data;
        })
},

在created钩子函数中调用getAll方法

 created() {//created在模板渲染成html前调用,通常在这里初始化某些属性,然后再渲染视图
     this.getAll();
 },

查询所有小结:

  • 在钩子函数created()中调用方法。页面加载前调用getAll方法,我们访问页面时,页面加载完就能看到我们的数据。
  • getAll方法的回调函数中将查询的值赋给data中的userList,通过数据的双向绑定此时页面就能看到数据

三、添加操作

在适当位置添加按钮

<el-row>
    <el-button type="danger" @click="delUsers">批量删除</el-button>
    <el-button type="success" @click="dialogFormVisible = true">添加</el-button>
</el-row>

点击按钮将dialogFormVisible 的值改为true,就是显示一个对话框

 <el-dialog title="添加用户" :visible.sync="dialogFormVisible">
     <el-form :model="form">
         <el-form-item label="用户名" :label-width="formLabelWidth">
             <el-input v-model="form.username" autocomplete="off"></el-input>
         </el-form-item>
         <el-form-item label="密码" :label-width="formLabelWidth">
             <el-input v-model="form.password" autocomplete="off"></el-input>
         </el-form-item>
         <el-form-item label="手机号" :label-width="formLabelWidth">
             <el-input v-model="form.phone" autocomplete="off"></el-input>
         </el-form-item>
         <el-form-item label="部门编号" :label-width="formLabelWidth">
             <el-input v-model="form.deptid" autocomplete="off"></el-input>
         </el-form-item>
     </el-form>
     <div slot="footer" class="dialog-footer">
         <el-button @click="dialogFormVisible = false">取 消</el-button>
         <el-button type="primary" @click="addUser()">确 定</el-button>
     </div>
 </el-dialog>

填完数据,点击确定 触发addUser()方法:

addUser() {
    var _this = this;
    this.$http.post('/user', _this.form)
        .then(function (response) {
            //将form的值设为空,下次再点击添加时就没有上次填写的数据
            _this.form = "";
            //关闭对话框
            _this.dialogFormVisible = false;
            //重新查询数据
            _this.getAll();
            //提示操作信息
            _this.$message.success(response.data.msg);
        })
},

data中form:

form: {
    username: '',
    password: '',
    phone: '',
    deptid: ''
},
dialogFormVisible: false,

添加操作小结:

  • 首先要先有添加的按钮,点击按钮–>显示添加的对话框–>提交表单–>发送Ajax请求–>回调函数中将form设为空,关闭对话框,重新查询,提示信息
  • 发送请求时将data中form的值穿到后端,form中的数据是通过数据的双向绑定赋值,是刚填写的表单中的值

四、删除操作

删除单个
首先添加删除按钮,点击按钮触发delUser(scope.row)方法

delUser(row) {
    this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
    }).then(() => {
        var _this = this;
        this.$http.delete('/user/' + row.id)
            .then(function (response) {
                _this.$message.success(response.data.msg);
                _this.getAll();
            })
    }).catch(() => {
        this.$message({
            type: 'info',
            message: '已取消删除'
        });
    });
},

删除单个小结:

  • 删除单个时比较简单,搞懂delUser(scope.row)方法scope.row就是这一行所有的值,在方法中把id传到后端根据id删除!

五、修改操作

修改操作肯定是从点击修改按钮后触发
点击按钮触发openUpdate(scope.row)方法,方法中将scope.row赋给form,这里跟添加操作时用的同一个form,也是可以用的
然后打开修改的对话框

openUpdate(row) {
	  //赋值
    this.form = row;
    //打开修改的对话框
    this.dialogUpdateForm = true;
}

修改的对话框

<el-dialog title="修改用户" :visible.sync="dialogUpdateForm">
    <el-form :model="form">
        <el-form-item label="用户名" :label-width="formLabelWidth">
            <el-input v-model="form.username" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="密码" :label-width="formLabelWidth">
            <el-input v-model="form.password" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="手机号" :label-width="formLabelWidth">
            <el-input v-model="form.phone" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="部门编号" :label-width="formLabelWidth">
            <el-input v-model="form.deptid" autocomplete="off"></el-input>
        </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
        <el-button @click="dialogUpdateForm=false">取 消</el-button>
        <el-button type="primary" @click="updUser()">确 定</el-button>
    </div>
</el-dialog>

填好数据后提交表单,点击确定触发updUser()方法,将form中的数据传到后端。form和添加时的form使用的同一个(没什么影响,可以用)

updUser(row) {
    var _this = this;
    this.$http.put('/user', _this.form)
        .then(function (response) {
            _this.dialogUpdateForm = false;
            _this.$message.success(response.data.msg);
            _this.getAll();
        })
},
dialogUpdateForm: false,

修改操作小结:

  • 做修改时第一要先把数据回显(给要打开的表单赋值),然后打开对话框,提交表单,修改数据

六、分页查询

先从element中赋值分页组件,这里为了解释我加了注释,大家使用的时候不能加注释(在别人标签中不能再添加注释标签了)

<div class="block">
    <el-pagination
            <!--当前页发生改变时触发-->
            @current-change="handleCurrentChange"
            <!--当前页-->
            :current-page="pagination.currentPage"
            <!--每页多少条-->
            :page-size="pagination.pageSize"
            <!--分页的组件-->
            layout="total, prev, pager, next, jumper"
            <!--总条数-->
            :total="pagination.total">
    </el-pagination>
</div>

data中的分页相关的参数,主要是当前页,每页多少行,总条数,上面用的这里的值。pageSize这里是写死了,不能修改,就是每页5行。

若想添加修改每页显示多少行的功能,可以在组件中添加:page-sizes="[100, 200, 300, 400]"
属性,并添加@size-change="handleSizeChange",通过其中的方法,类似监听pageSize的值改变时触发(改变时重新查询)。

这里就把这个功能删掉了

pagination: {
    currentPage: 1,
    pageSize: 5,
    total: 0
},

修改查询所有方法,回调函数中给userList和pagination赋值。

getAll() {
    var _this = this;
    this.$http.get('/user/' + _this.pagination.currentPage + '/' + _this.pagination.pageSize)
        .then(function (response) {
            _this.userList = response.data.data.records;
            _this.pagination.pageSize = response.data.data.size;
            _this.pagination.currentPage = response.data.data.current;
            _this.pagination.total = response.data.data.total;
        })
},

切换页码时重新查询数据

//切换当前页
handleCurrentChange(val) {
    this.pagination.currentPage = val
    this.getAll();
},

分页查询小结:

  • 分页时先把分页组件复制过来,然后创建分页需要的值,在分页组件中用我们创建的数据,分页插件只要给了当前页,每页大小,及总条数它会自动计算。
  • 页面改动时会触发handleCurrentChange方法

想了想还是把上面省略的加上吧,做一个完整的分页

<div class="block">
    <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="pagination.currentPage"
            :page-sizes="[5, 10, 20, 30, 40]"
            :page-size="pagination.pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="pagination.total">
    </el-pagination>
</div>
handleSizeChange(val){
    this.pagination.pageSize=val;
    this.getAll();
},

搞定!

七、批量删除

添加每行前面的复选框:并在table头中添加@selection-change="selectChanged"。如下:

<el-table
        :data="userList"
        style="width: 100%"
        @selection-change="selectChanged">
    <el-table-column
            type="selection"
            width="55">
    </el-table-column>

复选框中的值发生改变时会调用刚写的方法,这里val是我们所有勾选的数据,将选择的数据赋给selectData

selectChanged(val) {
    this.selectData = val;
},

data中 selectData

selectData: []

当我们勾选复选框时selectData就已经有了值
选择好要删除的数据,然后点击批量删除按钮,触发delUsers方法

delUsers() {
    this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
    }).then(() => {
        var _this = this;
        var selectUser = this.selectData;
        var ids = [];
        selectUser.forEach(function (index, array) {
            ids[array] = index.id
        })
        this.$http.delete('/user?ids=' + ids)
            .then(function (response) {
                console.log(response);
                _this.$message.success(response.data.msg);
                _this.getAll();
            })
    }).catch(() => {
        this.$message({
            type: 'info',
            message: '已取消删除'
        });
    });
},

完成批量删除!

上述代码中,有一段是遍历数组(将对象数组中的每个对象的id拿出来)。
数组.forEach是遍历数组,function中index是每个对象,array是索引

var ids = [];
selectUser.forEach(function (index, array) {
   	ids[array] = index.id
})

批量删除小结:

  • 批量删除需要导入复选框,并在当前table中添加一个类似监听器的东西,每有复选框发生改变就会调用‘监听器’的方法。方法可以接收参数,参数的值就是所有选择的数据
  • 这里是将数据赋值给自己定义的selectData,然后点击批量删除时,将selectData中的每个id封装为一个数组传到后端进行删除

前端页面展示
在这里插入图片描述
前端整体的代码

<template>
    <div>
        <el-row>
            <el-button type="danger" @click="delUsers">批量删除</el-button>
            <el-button type="success" @click="dialogFormVisible = true">添加</el-button>
        </el-row>
        <el-dialog title="添加用户" :visible.sync="dialogFormVisible">
            <el-form :model="form">
                <el-form-item label="用户名" :label-width="formLabelWidth">
                    <el-input v-model="form.username" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="密码" :label-width="formLabelWidth">
                    <el-input v-model="form.password" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="手机号" :label-width="formLabelWidth">
                    <el-input v-model="form.phone" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="部门编号" :label-width="formLabelWidth">
                    <el-input v-model="form.deptid" autocomplete="off"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="addUser()">确 定</el-button>
            </div>
        </el-dialog>
        <el-dialog title="修改用户" :visible.sync="dialogUpdateForm">
            <el-form :model="form">
                <el-form-item label="用户名" :label-width="formLabelWidth">
                    <el-input v-model="form.username" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="密码" :label-width="formLabelWidth">
                    <el-input v-model="form.password" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="手机号" :label-width="formLabelWidth">
                    <el-input v-model="form.phone" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="部门编号" :label-width="formLabelWidth">
                    <el-input v-model="form.deptid" autocomplete="off"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogUpdateForm=false">取 消</el-button>
                <el-button type="primary" @click="updUser()">确 定</el-button>
            </div>
        </el-dialog>
        <el-table
                :data="userList"
                style="width: 100%"
                @selection-change="selectChanged">
            <el-table-column
                    type="selection"
                    width="55">
            </el-table-column>
            <el-table-column
                    prop="id"
                    label="Id"
                    width="180">
            </el-table-column>
            <el-table-column
                    prop="username"
                    label="用户名"
                    width="180">
            </el-table-column>
            <el-table-column
                    prop="password"
                    label="密码">
            </el-table-column>
            <el-table-column
                    prop="phone"
                    label="手机号">
            </el-table-column>
            <el-table-column
                    prop="avatar"
                    label="头像">
            </el-table-column>
            <el-table-column
                    prop="deptid"
                    label="部门编号">
            </el-table-column>
            <el-table-column
                    prop="createtime"
                    label="创建时间">
            </el-table-column>
            <el-table-column
                    fixed="right"
                    label="操作"
                    width="160">
                <template slot-scope="scope">
                    <el-button @click="openUpdate(scope.row)" type="primary" size="small">修改</el-button>
                    <el-button @click="delUser(scope.row)" type="danger" size="small">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <div class="block">
            <el-pagination
                    @current-change="handleCurrentChange"
                    :current-page="pagination.currentPage"
                    :page-sizes="[10, 20, 30, 40]"
                    :page-size="pagination.pageSize"
                    layout="total, prev, pager, next, jumper"
                    :total="pagination.total">
            </el-pagination>
        </div>

    </div>

</template>

<script>
    export default {
        name: "",
        data() {
            return {
                pagination: {
                    currentPage: 1,
                    pageSize: 5,
                    total: 0
                },
                userList: [],
                dialogFormVisible: false,
                dialogUpdateForm: false,
                form: {
                    username: '',
                    password: '',
                    phone: '',
                    deptid: ''
                },
                formLabelWidth: '120px',
                selectData: []
            };
        },
        created() {//created在模板渲染成html前调用,通常在这里初始化某些属性,然后再渲染视图
            this.getAll();
        },
        methods: {//方法事件处理
            selectChanged(val) {
                this.selectData = val;
            },
            //切换当前页
            handleCurrentChange(val) {
                this.pagination.currentPage = val
                this.getAll();
            },
            getAll() {
                var _this = this;
                this.$http.get('/user/' + _this.pagination.currentPage + '/' + _this.pagination.pageSize)
                    .then(function (response) {
                        _this.userList = response.data.data.records;
                        _this.pagination.pageSize = response.data.data.size;
                        _this.pagination.currentPage = response.data.data.current;
                        _this.pagination.total = response.data.data.total;
                    })
            },
            // getAll() {
            //     var _this = this;
            //     this.$http.get('/user')
            //         .then(function (response) {
            //             _this.userList = response.data.data;
            //         })
            // },
            addUser() {
                var _this = this;
                this.$http.post('/user', _this.form)
                    .then(function (response) {
                        //将form的值设为空,下次再点击添加时就没有上次填写的数据
                        _this.form = "";
                        //关闭对话框
                        _this.dialogFormVisible = false;
                        //重新查询数据
                        _this.getAll();
                        //提示操作信息
                        _this.$message.success(response.data.msg);
                    })
            },
            delUsers() {
                this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    var _this = this;
                    var selectUser = this.selectData;
                    var ids = [];
                    selectUser.forEach(function (index, array) {
                        ids[array] = index.id
                    })
                    this.$http.delete('/user?ids=' + ids)
                        .then(function (response) {
                            console.log(response);
                            _this.$message.success(response.data.msg);
                            _this.getAll();
                        })
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            },
            delUser(row) {
                this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    var _this = this;
                    this.$http.delete('/user/' + row.id)
                        .then(function (response) {
                            _this.$message.success(response.data.msg);
                            _this.getAll();
                        })
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            },
            updUser(row) {
                var _this = this;
                this.$http.put('/user', _this.form)
                    .then(function (response) {
                        _this.dialogUpdateForm = false;
                        _this.$message.success(response.data.msg);
                        _this.getAll();
                    })
            },
            openUpdate(row) {
                this.form = row;
                this.dialogUpdateForm = true;
            }
        },
        components: {//组件注册
        },
    }
</script>

<style scoped>

</style>

Java后端

一、初始化项目

新建springboot项目,导入druid,Lombok,mybatis-plus…

<dependency>
    <groupId>com.baomidou</groupId>
    <artifactId>mybatis-plus-boot-starter</artifactId>
    <version>3.5.2</version>
</dependency>

mybatis-plus设置id策略,改为自增策略

mybatis-plus:
  global-config:
    db-config:
      id-type: auto

二、解决跨域问题

1. 跨域原因

出于浏览器的同源策略限制。同源策略(Same origin policy)是一种约定,它是浏览器最核心也最基本的安全功能,如果缺少了同源策略,则浏览器的正常功能可能都会受到影响。可以说Web是构建在同源策略基础之上的,浏览器只是针对同源策略的一种实现。同源策略会阻止一个域的javascript脚本和另外一个域的内容进行交互。所谓同源(即指在同一个域)就是两个页面具有相同的协议(protocol),主机(host)和端口号(port)。

2. 什么是跨域:

当一个请求url的协议、域名、端口三者之间任意一个与当前页面url不同即为跨域

3. springboot解决跨域

整体解决,加上这组配置所有请求都可以到达

package com.aaa.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 CrossConfig implements WebMvcConfigurer {

    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**")
                .allowedOriginPatterns("*")
                .allowedMethods("GET", "HEAD", "POST", "PUT", "DELETE", "OPTIONS")
                .allowCredentials(true)
                .maxAge(3600)
                .allowedHeaders("*");
    }
}

若想要单独添加可以在类上添加@CrossOrigin注解,只有添加这个注解的才能访问到

@RestController
@RequestMapping("user")
@CrossOrigin
public class UserinfoController extends BaseController{

也可以添加到某个方法上,只有这个方法才能访问到

@CrossOrigin
@GetMapping("{currentPage}/{pageSize}")
public Result getAllPage (@PathVariable Integer currentPage ,@PathVariable Integer pageSize) {
    Page<Userinfo> users = userinfoService.getAllPage(currentPage,pageSize);
    return success(users);
}

三、🌼开启Mybatis-Plus的分页功能

不开启是不能使用分页功能的,就是说开启了下面配置才会在查询时往sql语句中添加limit语句

package com.aaa.config;

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

@Configuration
public class MpConfig {
    @Bean
    public MybatisPlusInterceptor mybatisPlusInterceptor(){
        MybatisPlusInterceptor interceptor = new MybatisPlusInterceptor();
        interceptor.addInnerInterceptor(new PaginationInnerInterceptor());
        return interceptor;
    }
}

四、实体类

package com.aaa.domain;

import lombok.Data;

import java.util.Date;

/**
 * @author : 尚腾飞
 * @version : 1.0
 * @createTime : 2022/10/13 14:12
 * @description :
 */
@Data
public class Userinfo {
    private Integer id;
    private String username;
    private String password;
    private String phone;
    private Integer deptid;
    private String avatar;
    private Date createtime;
}

五、Mapper接口

使用mybatis-plus编写Mapper接口

package com.aaa.mapper;

import com.aaa.domain.Userinfo;
import com.baomidou.mybatisplus.core.mapper.BaseMapper;
import org.apache.ibatis.annotations.Mapper;

/**
 * @author : 尚腾飞
 * @version : 1.0
 * @createTime : 2022/10/13 14:14
 * @description :
 */
@Mapper
public interface UserinfoMapper extends BaseMapper<Userinfo> {
}

六、service

service接口

package com.aaa.service;

import com.aaa.domain.Userinfo;
import com.baomidou.mybatisplus.extension.plugins.pagination.Page;
import com.baomidou.mybatisplus.extension.service.IService;

/**
 * @author : 尚腾飞
 * @version : 1.0
 * @createTime : 2022/10/13 14:14
 * @description :
 */
public interface UserinfoService extends IService<Userinfo> {
    /**
     * 分页查询
     *
     * @param pageSize    每页大小
     * @param currentPage 当前页
     * @return Page<Userinfo>
     */
    Page<Userinfo> getAllPage(Integer currentPage, Integer pageSize);
}

service实现类

package com.aaa.service.impl;

import com.aaa.domain.Userinfo;
import com.aaa.mapper.UserinfoMapper;
import com.aaa.service.UserinfoService;
import com.baomidou.mybatisplus.extension.plugins.pagination.Page;
import com.baomidou.mybatisplus.extension.service.impl.ServiceImpl;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;

/**
 * @author : 尚腾飞(838449693@qq.com)
 * @version : 1.0
 * @createTime : 2022/10/13 14:16
 * @description :
 */
@Service
public class UserinfoServiceImpl extends ServiceImpl<UserinfoMapper, Userinfo> implements UserinfoService {
    @Autowired
    private UserinfoMapper userinfoMapper;
    @Override
    public Page<Userinfo> getAllPage(Integer currentPage,Integer pageSize) {
        Page<Userinfo> page = new Page<>(currentPage,pageSize);
        userinfoMapper.selectPage(page,null);
        return page;
    }
}

七、controller

统一返回结果
Result

package com.aaa.domain;

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

/**
 * @author : 尚腾飞
 * @version : 1.0
 * @createTime : 2022/10/13 14:20
 * @description :
 */
@Data
@AllArgsConstructor
@NoArgsConstructor
public class Result {
    private Integer code;
    private String msg;
    private Object data;
}

BaseController
定义一些常见的返回结果

package com.aaa.controller;

import com.aaa.domain.Result;

/**
 * @author : 尚腾飞
 * @version : 1.0
 * @createTime : 2022/10/13 14:23
 * @description :
 */
public class BaseController {
    //操作成功
    public Result success() {
        return new Result(200, "操作成功", null);
    }
    public Result success(Object data) {
        return new Result(200, "操作成功", data);
    }

    public Result success(String msg) {
        return new Result(200, msg, null);
    }

    public Result success(String msg, Object data) {
        return new Result(200, msg, data);
    }
    //操作成功
    public Result fail() {
        return new Result(500, "操作失败", null);
    }

    public Result fail(String msg) {
        return new Result(500, msg, null);
    }
}

UserinfoController

package com.aaa.controller;

import com.aaa.domain.Result;
import com.aaa.domain.Userinfo;
import com.aaa.service.UserinfoService;
import com.baomidou.mybatisplus.extension.plugins.pagination.Page;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.*;

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

/**
 * @author : 尚腾飞(838449693@qq.com)
 * @version : 1.0
 * @createTime : 2022/10/13 14:19
 * @description :
 */
@RestController
@RequestMapping("user")
public class UserinfoController extends BaseController{
    @Autowired
    private UserinfoService userinfoService;

    @GetMapping
    public Result getAll(){
        List<Userinfo> list = userinfoService.list();
        return success(list);
    }

    @GetMapping("{currentPage}/{pageSize}")
    public Result getAllPage (@PathVariable Integer currentPage ,@PathVariable Integer pageSize) {
        Page<Userinfo> users = userinfoService.getAllPage(currentPage,pageSize);
        return success(users);
    }

    @GetMapping("{id}")
    public Result getUserById(@PathVariable Integer id){
        Userinfo userinfo = userinfoService.getById(id);
        return success(userinfo);
    }

    @PostMapping
    public Result saveUser(@RequestBody Userinfo userinfo) {
        boolean save = userinfoService.save(userinfo);
        if (save){
            return success("添加成功");
        }
        return fail("添加失败");
    }

    @DeleteMapping("{id}")
    public Result delUser(@PathVariable Integer id) {
        boolean del = userinfoService.removeById(id);
        if (del) {
            return success("删除成功");
        }
        return fail("删除失败");
    }

    @DeleteMapping
    public Result delUsers(Integer[] ids) {
        List<Integer> list = new ArrayList<>(Arrays.asList(ids));
        boolean del = userinfoService.removeByIds(list);
        if (del) {
            return success("删除成功");
        }
        return fail("删除失败");
    }

    @PutMapping
    public Result updateUser(@RequestBody Userinfo userinfo) {
        boolean update = userinfoService.updateById(userinfo);
        if (update) {
            return success("修改成功");
        }
        return fail("修改失败");
    }
}
  • 2
    点赞
  • 21
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

打乒乓球只会抽

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值