Springboot + vue 实现的简单CRUD

一时失言乱红尘 2022-11-27 12:03 121阅读 0赞

### Springboot + vue 实现的简单CRUD ###

*   *   *  前言
         *  运行截图
         *  UserController
         *  路由
         *  左侧菜单栏
         *  User用户列表
         *  axios获取到的数据
         *  问题

### 前言 ###

*  使用Mybatis-plus 生成重复的代码 [参考][Link 1]
 *  [添加数据封装工具类][Link 2]
 *  [添加fastjson配置、MybatisPlus分页配置、跨域配置][fastjson_MybatisPlus]
 *  [vue-cli的配置参考][vue-cli]

### 运行截图 ###

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMTQ2NjUw_size_16_color_FFFFFF_t_70_pic_center]

### UserController ###

@RestController
    @RequestMapping("/users")
    public class UserController { 
    
        @Resource
        private IUserService userService;
        
    
        /** * 初始化分页信息 */
        private void initPage(Map<String,Object> param){ 
            if(StringUtils.isEmpty(param.get("page"))){ 
                param.put("page", 1);
            }
            if(StringUtils.isEmpty(param.get("limit"))){ 
                param.put("limit", 3);
            }
        }
    
        @GetMapping()
        public Result getList(@RequestParam Map<String,Object> param) { 
            initPage(param);
            int num = Integer.parseInt(param.get("page").toString());
            int limit = Integer.parseInt(param.get("limit").toString());
            QueryWrapper<User> wrapper = new QueryWrapper<User>();
            wrapper.like("username", param.get("username"));
            IPage<User> page = new Page<>(num, limit);//参数一是当前页，参数二是每页个数
            return ResultGenerator.getSuccessResult(userService.page(page, wrapper));
        }
    
        @GetMapping("/{id}")
        public Result getUser(@PathVariable int id) { 
            User user = userService.getById(id);
            if (user == null) return ResultGenerator.getFailResult("","无用户记录");
            return ResultGenerator.getSuccessResult(user);
        }
    
        @PostMapping()
        public Result save(@RequestBody User user){ 
            //System.out.println(user);
            if(userService.save(user)) return ResultGenerator.getSuccessResult("","插入成功");
            return ResultGenerator.getFailResult("","插入失败");
        }
    
        @PutMapping("/{id}")
        public Result update(@RequestBody User user,@PathVariable int id){ 
            user.setId(id);
            //System.out.println(user);
            if(userService.updateById(user)) return ResultGenerator.getSuccessResult("","更新成功");
            return ResultGenerator.getFailResult("","更新失败");
        }
    
        @DeleteMapping("/{id}")
        public Result del(@PathVariable int id) { 
            if(userService.removeById(id)) return ResultGenerator.getSuccessResult("","删除成功");
            return ResultGenerator.getFailResult("","删除失败");
        }
    }

### 路由 ###

*  文件位置`router/index.js`

import Vue from 'vue'
    import VueRouter from 'vue-router'
    // 路由懒加载
    const Home = () => import('../views/Home.vue')
    const Users = () => import('../views/Users.vue')
    
    Vue.use(VueRouter)
    
    const routes = [
      { 
        path: '/',
        redirect: '/home'
      },
      { 
        path: '/home',
        name: 'Home',
        component: Home,
        redirect: '/users',
        children: [
          {  path: '/users', component: Users }
        ]
      }
    ]
    
    const router = new VueRouter({ 
      routes
    })
    
    export default router

### 左侧菜单栏 ###

*  `views/Home.vue`

<template>
      <el-container class="home-container">
        
        <el-header>
          <div>
            <img src="../assets/logo.png" alt />
            <span>后台管理系统</span>
          </div>
          <el-button type="info" @click="logout">退出</el-button>
        </el-header>
        
        <el-container>
          
          <el-aside :width="isCollapse ? '64px' : '200px'">
            <div class="toggle-button" @click="toggleCollapse">|||</div>
            
            <el-menu background-color="#333744" text-color="#fff" active-text-color="#409EFF" unique-opened :collapse="isCollapse" :collapse-transition="false" router :default-active="activePath" >
              
              <el-submenu :index="item.id + ''" v-for="item in menulist" :key="item.id">
                
                <template slot="title">
                  
                  <i :class="iconsObj[item.id]"></i>
                  
                  <span>{
       {item.authName}}</span>
                </template>
    
                
                <el-menu-item :index="'/' + subItem.path" v-for="subItem in item.children" :key="subItem.id" @click="saveNavState('/' + subItem.path)" >
                  <template slot="title">
                    
                    <i class="el-icon-menu"></i>
                    
                    <span>{
       {subItem.authName}}</span>
                  </template>
                </el-menu-item>
              </el-submenu>
            </el-menu>
          </el-aside>
          
          <el-main>
            
            <router-view></router-view>
          </el-main>
        </el-container>
      </el-container>
    </template>
    
    <script> export default { data() { return { // 左侧导航栏菜单数据 可以通过token向服务器获取用户的菜单信息（根据角色权限不同） menulist: [ { id: 125, authName: '用户管理', path: 'users', children: [ { id: 110, authName: '用户列表', path: 'users', children: [], order: null } ], order: 1 } ], // 通过 iconsObj: { 125: 'el-icon-user' }, // 是否折叠 isCollapse: false, // 被激活的链接地址 activePath: '' } }, created() { // this.getMenuList(); 用来获取列表信息 this.activePath = window.sessionStorage.getItem('activePath') }, methods: { // 退出登录 logout() { // window.sessionStorage.clear(); // this.$router.push("/login"); }, // 获取所有的菜单 // async getMenuList() { // }, // 点击按钮，切换菜单的折叠与展开 toggleCollapse() { this.isCollapse = !this.isCollapse }, // 保存链接的激活状态 saveNavState(activePath) { window.sessionStorage.setItem('activePath', activePath) this.activePath = activePath } } } </script>
    
    <style lang="less" scoped> .home-container { height: 100%; } .el-header { background-color: #373d41; display: flex; justify-content: space-between; padding-left: 0; align-items: center; color: #fff; font-size: 20px; > div { display: flex; align-items: center; img { height: 20px; width: 20px; margin-left: 20px; } span { margin-left: 15px; } } } .el-aside { background-color: #333744; .el-menu { border-right: none; } } .el-main { background-color: #eaedf1; } .iconfont { margin-right: 10px; } .toggle-button { background-color: #4a5064; font-size: 10px; line-height: 24px; color: #fff; text-align: center; letter-spacing: 0.2em; cursor: pointer; } </style>

### User用户列表 ###

*  `views/Users.vue`

<template>
      <div>
        
        <el-breadcrumb separator-class="el-icon-arrow-right">
          <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
          <el-breadcrumb-item>用户管理</el-breadcrumb-item>
          <el-breadcrumb-item>用户列表</el-breadcrumb-item>
        </el-breadcrumb>
    
        
        <el-card>
          
          <el-row :gutter="20">
            <el-col :span="8">
              <el-input placeholder="请输入内容" v-model="queryInfo.username" clearable @clear="getUserList">
                <el-button slot="append" icon="el-icon-search" @click="getUserList"></el-button>
              </el-input>
            </el-col>
            <el-col :span="8">
              <el-button type="primary" @click="addDialogVisible = true">添加用户</el-button>
              
            </el-col>
          </el-row>
    
          
          <el-table :data="userlist" border stripe>
            
            <el-table-column type="index"></el-table-column>
            <el-table-column label="姓名" prop="username"></el-table-column>
            <el-table-column label="密码" prop="password"></el-table-column>
            <el-table-column label="性别" prop="sex">
              <template slot-scope="scope">{
       { scope.row.sex | sexTrans }}</template>
            </el-table-column>
            <el-table-column label="birth" prop="birth"></el-table-column>
            <el-table-column label="操作" width="180px">
              <template slot-scope="scope">
                
                <el-tooltip effect="dark" content="编辑用户" placement="top" :enterable="false">
                  <el-button type="primary" icon="el-icon-edit" size="mini" @click="showEditDialog(scope.row.id)" ></el-button>
                </el-tooltip>
                
                <el-button type="danger" icon="el-icon-delete" size="mini" @click="removeUserById(scope.row.id)" ></el-button>
              </template>
            </el-table-column>
          </el-table>
    
          
          <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="queryInfo.page" :page-sizes="[1, 2, 5, 10]" :page-size="queryInfo.limit" layout="total, sizes, prev, pager, next, jumper" :total="total" ></el-pagination>
        </el-card>
    
        
        <el-dialog title="添加用户" :visible.sync="addDialogVisible" width="50%" @close="addDialogClosed">
          
          <el-form :model="addForm" :rules="FormRules" ref="addFormRef" label-width="90px">
            <el-form-item label="用户名" prop="username">
              <el-input v-model="addForm.username"></el-input>
            </el-form-item>
            <el-form-item label="密码" prop="password">
              <el-input v-model="addForm.password" show-password></el-input>
            </el-form-item>
            <el-form-item label="性别" prop="sex">
               <el-radio-group v-model="addForm.sex">
                <el-radio label="M">男</el-radio>
                <el-radio label="F">女</el-radio>
               </el-radio-group>
            </el-form-item>
            <el-form-item label="出生日期" prop="birth">
              <el-date-picker v-model="addForm.birth" type="date" placeholder="选择日期" value-format="yyyy-MM-dd">
              </el-date-picker>
            </el-form-item>
          </el-form>
          
          <span slot="footer" class="dialog-footer">
            <el-button @click="addDialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="addUser">确 定</el-button>
          </span>
        </el-dialog>
    
        
        <el-dialog title="修改用户" :visible.sync="editDialogVisible" width="50%" @close="editDialogClosed">
          <el-form :model="editForm" :rules="FormRules" ref="editFormRef" label-width="70px">
            <el-form-item label="用户名">
              <el-input v-model="editForm.username" disabled></el-input>
            </el-form-item>
            <el-form-item label="密码" prop="password">
              <el-input v-model="editForm.password" show-password></el-input>
            </el-form-item>
            <el-form-item label="性别" prop="sex">
               <el-radio-group v-model="editForm.sex">
                <el-radio label="M">男</el-radio>
                <el-radio label="F">女</el-radio>
               </el-radio-group>
            </el-form-item>
            <el-form-item label="出生日期" prop="birth">
              <el-input v-model="editForm.birth"></el-input>
            </el-form-item>
          </el-form>
          <span slot="footer" class="dialog-footer">
            <el-button @click="editDialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="editUserInfo">确 定</el-button>
          </span>
        </el-dialog>
      </div>
    </template>
    
    <script> export default { data() { return { // 获取用户列表的参数对象 queryInfo: { username: '', // 当前的页数 page: 1, // 当前每页显示多少条数据 limit: 2 }, userlist: [], total: 0, // 控制添加用户对话框的显示与隐藏 addDialogVisible: false, // 添加用户的表单数据 addForm: { username: '', password: '', sex: 'M', birth: '' }, // 添加表单的验证规则对象 FormRules: { username: [ { required: true, message: '请输入用户名', trigger: 'blur' }, { min: 3, max: 10, message: '用户名的长度在3~10个字符之间', trigger: 'blur' } ], password: [ { required: true, message: '请输入密码', trigger: 'blur' }, { min: 6, max: 15, message: '用户名的长度在6~15个字符之间', trigger: 'blur' } ], birth: [ { required: true, message: '请选择出生日期', trigger: 'blur' } ] }, // 控制修改用户对话框的显示与隐藏 editDialogVisible: false, // 查询到的用户信息对象 editForm: { } } }, created() { this.getUserList() }, methods: { async getUserList() { const { data: res } = await this.axios.get('users', { params: this.queryInfo }) if (res.status !== 200) { return this.$message.error('获取用户列表失败！') } this.userlist = res.data.records this.total = parseInt(res.data.total) }, // 监听 limit 改变的事件 handleSizeChange(newSize) { // console.log(newSize) this.queryInfo.limit = newSize this.getUserList() }, // 监听 页码值 改变的事件 handleCurrentChange(newPage) { console.log(newPage) this.queryInfo.page = newPage this.getUserList() }, // 监听添加用户对话框的关闭事件 addDialogClosed() { this.$refs.addFormRef.resetFields() }, // 点击按钮，添加新用户 addUser() { this.$refs.addFormRef.validate(async(valid) => { if (!valid) return // 可以发起添加用户的网络请求 const { data: res } = await this.axios.post('users', this.addForm) if (res.status !== 200) { this.$message.error('添加用户失败！') } this.$message.success('添加用户成功！') // 隐藏添加用户的对话框 this.addDialogVisible = false // 重新获取用户列表数据 this.getUserList() }) }, // 展示编辑用户的对话框 async showEditDialog(id) { // console.log(id) const { data: res } = await this.axios.get('users/' + id) if (res.status !== 200) { return this.$message.error('查询用户信息失败！') } this.editForm = res.data this.editDialogVisible = true }, // 监听修改用户对话框的关闭事件 editDialogClosed() { this.$refs.editFormRef.resetFields() }, // 修改用户信息并提交 editUserInfo() { this.$refs.editFormRef.validate(async(valid) => { if (!valid) return // 发起修改用户信息的数据请求 const { data: res } = await this.axios.put( 'users/' + this.editForm.id, this.editForm ) if (res.status !== 200) { return this.$message.error('更新用户信息失败！') } // 关闭对话框 this.editDialogVisible = false // 刷新数据列表 this.getUserList() // 提示修改成功 this.$message.success('更新用户信息成功！') }) }, // 根据Id删除对应的用户信息 async removeUserById(id) { // 弹框询问用户是否删除数据 const confirmResult = await this.$confirm( '此操作将永久删除该用户, 是否继续?', '提示', { confirmButtonText: '确定', cancelButtonText: '取消', type: 'warning' } ).catch((err) => err) // 如果用户确认删除，则返回值为字符串 confirm // 如果用户取消了删除，则返回值为字符串 cancel // console.log(confirmResult) if (confirmResult !== 'confirm') { return this.$message.info('已取消删除') } const { data: res } = await this.axios.delete('users/' + id) if (res.status !== 200) { return this.$message.error('删除用户失败！') } this.$message.success('删除用户成功！') this.getUserList() } }, filters: { sexTrans: (sex) => (sex === 'M' ? '男' : '女') } } </script>
    
    <style lang="less" scoped> </style>

### axios获取到的数据 ###

*  记录下axios封装使用Springboot使用Mybatis-plus分页获取到数据  
    ![在这里插入图片描述][2020081516541738.png_pic_center]

{ 
    	"data": { 
    		"data": { 
    			"current": "1",
    			"hitCount": false,
    			"optimizeCountSql": true,
    			"orders": [],
    			"pages": "4",
    			"records": [{ 
    				"birth": "2009-06-11",
    				"id": 1,
    				"password": "g9saZ4BJ9Xn",
    				"sex": "M",
    				"username": "ant222"
    			}, { 
    				"birth": "2005-06-23",
    				"id": 2,
    				"password": "QxTltEzxz",
    				"sex": "F",
    				"username": "kboor1"
    			}, { 
    				"birth": "2006-05-16",
    				"id": 3,
    				"password": "5e7TH6lplp",
    				"sex": "F",
    				"username": "llongfield2"
    			}],
    			"searchCount": true,
    			"size": "3",
    			"total": "10"
    		},
    		"msg": "SUCCESS",
    		"status": 200
    	},
    	"status": 200,
    	"statusText": "",
    	"headers": { 
    		"content-length": "568",
    		"content-type": "application/json"
    	},
    	"config": { 
    		"url": "users",
    		"method": "get",
    		"params": { 
    			"query": "",
    			"page": 1,
    			"limit": 2
    		},
    		"headers": { 
    			"Accept": "application/json, text/plain, */*",
    			"Authorization": null
    		},
    		"baseURL": "http://127.0.0.1:8088",
    		"transformRequest": [null],
    		"transformResponse": [null],
    		"timeout": 0,
    		"xsrfCookieName": "XSRF-TOKEN",
    		"xsrfHeaderName": "X-XSRF-TOKEN",
    		"maxContentLength": -1
    	},
    	"request": { }
    }

### 问题 ###

*  `Missing space before function parentheses`
    
     *  这个是ESLint规则 函数与括号之间需要有空格
     *  在·`eslintrc.js`文件的规则`rules`加上 `'space-before-function-paren': ["error", "never"]`
     *  重新启动 `npm run serve`
     *  或者在vscode中安装使用 `ESLint` 自动修复问题
 *  想从浏览器复制对象的数据一般需要转成字符串`console.log(JSON.stringify(data))`

[Link 1]: https://blog.csdn.net/qq_41146650/article/details/107935333
[Link 2]: https://blog.csdn.net/qq_41146650/article/details/108019437
[fastjson_MybatisPlus]: https://blog.csdn.net/qq_41146650/article/details/108019277
[vue-cli]: https://blog.csdn.net/qq_41146650/article/details/108021764
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMTQ2NjUw_size_16_color_FFFFFF_t_70_pic_center]: /images/20221124/7464a43765dc4700972df40dd6f4ae22.png
[2020081516541738.png_pic_center]: /images/20221124/2892e94c0c3c429d9093e59167d7c6df.png