说明

最基本的 CRUD

后端

import com.baomidou.mybatisplus.toolkit.IdWorker;
import com.github.houbb.privilege.admin.common.dto.BasePageInfo;
import com.github.houbb.privilege.admin.common.dto.BaseResp;
import com.github.houbb.privilege.admin.common.dto.common.CommonPageReq;
import com.github.houbb.privilege.admin.common.util.RespUtil;
import com.github.houbb.privilege.admin.dal.entity.User;
import com.github.houbb.privilege.admin.service.service.UserService;
import org.springframework.web.bind.annotation.PathVariable;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RequestMapping;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.ResponseBody;

/**
 * 
 * 用户表 前端控制器
 * 
 *
 * @author binbin.hou
 * @since 2020-09-18
 */
@Controller
@RequestMapping("/user")
public class UserController {

    private final UserService userService;

    public UserController(UserService userService) {
        this.userService = userService;
    }

    /**
     * 首页
     * @return 首页地址
     * @since 0.0.5
     */
    @RequestMapping("/index")
    public String index() {
        return "user/index";
    }

    @RequestMapping("/add")
    @ResponseBody
    public BaseResp add(@RequestBody final User user) {
        user.setUserId(IdWorker.get32UUID());
        userService.insert(user);

        return RespUtil.success();
    }

    @RequestMapping("/edit")
    @ResponseBody
    public BaseResp edit(final User user) {
        userService.updateById(user);

        return RespUtil.success();
    }

    @RequestMapping("/remove/{id}")
    @ResponseBody
    public BaseResp remove(@PathVariable final Integer id) {
        userService.deleteById(id);

        return RespUtil.success();
    }

    @RequestMapping("/list")
    @ResponseBody
    public BaseResp list(@RequestBody CommonPageReq pageReq) {
        BasePageInfo pageInfo = userService.pageQueryList(pageReq);
        return RespUtil.of(pageInfo);
    }

}

前端

例子

缺陷：关于 rules 的校验暂时都不生效。

    
    用户首页
    
    
    
        .el-footer {
            color: #333;
            text-align: center;
            line-height: 60px;
        }

        .el-aside {
            background-color: #D3DCE6;
            color: #333;
            text-align: center;
            line-height: 200px;
            width: 200px;
        }

        .el-main {
            color: #333;
            text-align: center;
            padding-top: 100px;
            height: 520px;
        }

        #app, html, body, .el-container {
            height: 100%;
        }

        #app {
            margin-left: 300px;
            margin-right: 300px;
        }

        .el-pagination {
            padding-top: 100px;
        }
    



    
        
            
                
                
            

            
                
                    首页
                
                
                    权限管理
                    
                        
                        用户管理
                    
                    
                        
                        角色管理
                    
                    
                        
                        权限管理
                    
                
                
                    审计日志
                    用户操作
                    角色操作
                    权限操作
                
                
                    更多
                    关于我们
                    变更日志
                    版本信息
                
            
        

        

            
                
                    
                
                
                    
                
                
                    
                
                
                    查询
                    重置
                    新增
                
            

            

            
                
                
                
                
                
                
                
                
                
                
                
                
                
                    
                        
                        
                        
                    
                
            

            
            

        

        
        
            由
            privilege-admin
            
            强力支持
        

        
            
                
                    
                
                
                    
                
            
            
                取 消
                确 定
            
        

        
            
                
                    
                
                
                    
                
                
                    
                
                
                    
                
            
            
                取 消
                确 定
            
        
    










    var vm =new Vue({
        el: '#app',
        data: {
            tableData: [],
            page: {
                total: 0,
                pageNum: 1,
                pageSize: 10
            },
            dialogAddVisible: false,
            addRules: {
                userId: [
                    {required: true, message: '请输入用户标识', trigger: 'blur'},
                    {min: 1, max: 32, message: '长度在 1 到 32 个字符', trigger: 'blur'}
                ],
                userName: [
                    {required: true, message: '请输入用户名称', trigger: 'blur'},
                    {min: 1, max: 16, message: '长度在 1 到 16 个字符', trigger: 'blur'}
                ],
                remark: [
                    {min: 0, max: 128, message: '长度在 1 到 128 个字符', trigger: 'blur'}
                ],
            },
            addForm: {
                userName: '',
                remark: ''
            },
            queryForm: {
                userId: '',
                userName: '',
                remark: ''
            },
            dialogEditVisible: false,
            editForm: {
                id: '',
                userId: '',
                userName: '',
                remark: '',
                createTime: ''
            },
            editRules: {}
        },
        mounted () {
            // 接在完成之后，调用初始化方法
            this.init()
        },
        methods: {
            init() {
                // 加载数据
                this.doQuery();
            },
            doQuery() {
                var req = {
                    id: this.queryForm.userId,
                    name: this.queryForm.userName,
                    pageNum: this.page.pageNum,
                    pageSize: this.page.pageSize
                }

                console.log("请求：" + JSON.stringify(req));
                //axios 中的 this 并不指向 vue
                var _this = this;
                axios.post('/user/list', req).then(function (response) {
                    if(response.data.respCode === '0000') {
                        _this.tableData = response.data.list;
                        _this.page.total = response.data.total;
                    } else {
                        ELEMENT.Message.error(response.data.respMessage);
                    }
                }).catch(function (error) {
                    ELEMENT.Message.error("请求失败");
                    console.log(error);
                });
            },
            doClear() {
                this.queryForm.userId = '';
                this.queryForm.userName = '';
                this.queryForm.remark = '';
            },
            handleEdit(row) {
                this.editForm.id = row.id;
                this.editForm.userId = row.userId;
                this.editForm.userName = row.userName;
                this.editForm.remark = row.remark;
                this.editForm.createTime = row.createTime;

                // 显示编辑 form
                this.dialogEditVisible = true;
            },
            handleDelete(row) {
                var id = row.id;
                var _this = this;
                axios.post('/user/remove/' + id).then(function (response) {
                    if(response.data.respCode === '0000') {
                        _this.doQuery();

                        ELEMENT.Message.success("删除成功");
                        visible = false;
                    } else {
                        ELEMENT.Message.error(response.data.respMessage);
                    }
                }).catch(function (error) {
                    ELEMENT.Message.error("删除失败");
                });
            },
            handleRole(row) {
                alert(row.userName);
            },
            handleCurrentChange(val) {
                this.page.pageNum = val;
                this.doQuery();
            },
            closeDialogAddVisible() {
                this.$refs.addForm.resetFields();//element封装的方法,清空模态框的值
                this.dialogAddVisible = false;
            },
            /**
             *确定新增数据
             * @param aaa 表单信息
             */
            saveAddForm(aaa) {
                var _this = this;
                this.$refs[aaa].validate((valid) => {
                    console.log(this.$refs[aaa])
                    if (valid) {
                        var user = {
                            userName: this.addForm.userName,
                            remark: this.addForm.remark
                        }
                        axios.post('/user/add', user).then(function (response) {
                            if(response.data.respCode === '0000') {
                                ELEMENT.Message.success("请求成功");
                                _this.closeDialogAddVisible();
                            } else {
                                ELEMENT.Message.error(response.data.respMessage);
                            }
                        }).catch(function (error) {
                            ELEMENT.Message.error("请求失败");
                            console.log(error);
                        });
                    }
                })
            },
            closeDialogEditVisible() {
                this.$refs.editForm.resetFields();//element封装的方法,清空模态框的值
                this.dialogEditVisible = false;
            },
            saveEditForm(editForm) {
                var user = {
                    id: this.editForm.id,
                    userId: this.editForm.userId,
                    userName: this.editForm.userName,
                    remark: this.editForm.remark
                };
                // 此处使用 qs 序列化，后端不需要使用 @RequestBody 注解。
                var userData = Qs.stringify(user);
                var _this = this;
                axios.post('/user/edit', userData).then(function (response) {
                    if(response.data.respCode === '0000') {
                        ELEMENT.Message.success("请求成功");
                        _this.doQuery();
                        _this.closeDialogEditVisible();
                    } else {
                        ELEMENT.Message.error(response.data.respMessage);
                    }
                }).catch(function (error) {
                    ELEMENT.Message.error("请求失败");
                    console.log(error);
                });
            }
        }
    })