[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"article-public-6mmUNf9i":3,"public-project-articles-6mmUNf9i":17},{"id":4,"uuid":5,"project_id":6,"title":7,"content":8,"type":9,"status":10,"public_enabled":10,"views":11,"sort":12,"created_at":13,"updated_at":14,"project_title":15,"project_slug":16},1006,"6mmUNf9i",52,"03. 带你开发一个基础的用户管理模块（下）","## Element-Plus 中文网站\n\n[https:\u002F\u002Fdoc-archive.element-plus.org\u002F](https:\u002F\u002Fdoc-archive.element-plus.org\u002F)\n\n## \u003Cfont style=\"color:rgb(31, 31, 31);\">⭐\u003C\u002Ffont>新增数据\n\n### 后端接口实现\n\n新增接口\n\n```java\n\u002F**\n * 新增数据\n * @param user 参数的对象\n *\u002F\n@PostMapping(\"\u002Fadd\")\npublic Result add(@RequestBody User user) {\n    userService.add(user);\n    return Result.success();\n}\n```\n\n新增的业务 Service， 默认账户数据\n\n```java\npublic void add(User user) {\n    String username = user.getUsername();\n    \u002F\u002F 校验账户是否重复\n    User dbUser = userMapper.selectByUsername(username);\n    if (dbUser != null) {\n        throw new CustomException(\"新增失败！账号重复\");\n    }\n    if (StrUtil.isBlank(user.getPassword())) {\n        \u002F\u002F 默认密码\n        user.setPassword(\"123\");\n    }\n    if (StrUtil.isBlank(user.getName())) {\n        \u002F\u002F 默认姓名\n        user.setName(user.getUsername());\n    }\n    user.setRole(\"普通用户\"); \u002F\u002F 默认用户的角色\n    user.setAccount(BigDecimal.ZERO);  \u002F\u002F 默认用户的账户余额\n    userMapper.insert(user);\n}\n```\n\n新增的 sql\n\n```sql\n\u003Cinsert id=\"insert\" parameterType=\"com.example.entity.User\">\n    insert into `user` (username, password, name, avatar, role, account)\n    values (#{username}, #{password}, #{name}, #{avatar}, #{role}, #{account})\n\u003C\u002Finsert>\n```\n\n\n\n新增失败，会返回 500 的 code，同时返回错误信息\n\n![](https:\u002F\u002Fcdn.nlark.com\u002Fyuque\u002F0\u002F2025\u002Fpng\u002F751015\u002F1763020764894-6144e2e1-b38c-4d98-99e0-30f869bce5e3.png)\n\n### 前端页面实现\n\n新增按钮\n\n```vue\n\u003Cdiv style=\"margin-bottom: 10px\">\n  \u003Cel-button @click=\"handleAdd\" type=\"primary\">新增\u003C\u002Fel-button>\n\u003C\u002Fdiv>\n```\n\n新增数据的表单（跟编辑共用）\n\n```vue\n\u003Cel-dialog title=\"用户信息\" v-model=\"data.formVisible\" width=\"30%\" destroy-on-close>\n  \u003Cel-form ref=\"formRef\" :model=\"data.form\" :rules=\"data.rules\" label-width=\"80px\" style=\"padding-right: 30px\">\n    \u003Cel-form-item prop=\"username\" label=\"账号\">\n      \u003Cel-input :disabled=\"data.form.id !== undefined\" v-model=\"data.form.username\" placeholder=\"请输入账号\" autocomplete=\"off\">\u003C\u002Fel-input>\n    \u003C\u002Fel-form-item>\n    \u003Cel-form-item prop=\"name\" label=\"姓名\">\n      \u003Cel-input v-model=\"data.form.name\" placeholder=\"请输入姓名\" autocomplete=\"off\">\u003C\u002Fel-input>\n    \u003C\u002Fel-form-item>\n  \u003C\u002Fel-form>\n  \u003Ctemplate #footer>\n    \u003Cspan class=\"dialog-footer\">\n      \u003Cel-button @click=\"data.formVisible = false\">取 消\u003C\u002Fel-button>\n      \u003Cel-button type=\"primary\" @click=\"save\">确 定\u003C\u002Fel-button>\n    \u003C\u002Fspan>\n  \u003C\u002Ftemplate>\n\u003C\u002Fel-dialog>\n```\n\n新增数据调用接口\n\n```vue\nconst handleAdd = () => {\n  data.form = {}\n  data.formVisible = true\n}\n\n\nconst add = () => {\n  request.post('\u002Fuser\u002Fadd', data.form).then(res => {\n    if (res.code === '200') {\n      ElMessage.success('操作成功')\n      data.formVisible = false\n      load()\n    } else {\n      ElMessage.error(res.msg)\n    }\n  })\n}\n```\n\n## \u003Cfont style=\"color:rgb(31, 31, 31);\">⭐\u003C\u002Ffont>编辑数据\n\n### 后端接口实现\n\ncontroller 接口\n\n```java\n\u002F**\n * 更新数据\n * @param user 参数的对象  编辑后的数据\n *\u002F\n@PutMapping(\"\u002Fupdate\")\npublic Result update(@RequestBody User user) {\n    userService.update(user);\n    return Result.success();\n}\n```\n\nService 方法\n\n```java\npublic void update(User user) {\n    \u002F\u002F user对象里面必须包含ID，否则无法更新数据\n    userMapper.updateById(user);\n}\n```\n\nsql\n\n```xml\n\u003Cupdate id=\"updateById\">\n    update `user` set username = #{username}, password = #{password}, name = #{name}, avatar = #{avatar},\n                      role = #{role}, account = #{account}\n    where id = #{id}\n\u003C\u002Fupdate>\n\n```\n\n### 前端页面实现\n\n表格里面的编辑按钮\n\n```vue\n\u003Cel-table-column label=\"操作\" width=\"180\" fixed=\"right\" >\n  \u003Ctemplate #default=\"scope\">\n    \u003Cel-button type=\"primary\" @click=\"handleEdit(scope.row)\">编辑\u003C\u002Fel-button>\n  \u003C\u002Ftemplate>\n\u003C\u002Fel-table-column>\n\n```\n\n更新数据调用接口\n\n```vue\nconst handleEdit = (row) => {\n  data.form = JSON.parse(JSON.stringify(row))\n  data.formVisible = true\n}\n\nconst update = () => {\n  request.put('\u002Fuser\u002Fupdate', data.form).then(res => {\n    if (res.code === '200') {\n      ElMessage.success('操作成功')\n      data.formVisible = false\n      load()\n    } else {\n      ElMessage.error(res.msg)\n    }\n  })\n}  \n\nconst save = () => {\n  formRef.value.validate((valid) => {\n    if (valid) {  \u002F\u002F 表示表单校验通过\n      data.form.id ? update() : add()\n    }\n  })\n}  \n\n```\n\n## 用户头像上传\n\n文件的下载链接\n\n![](https:\u002F\u002Fcdn.nlark.com\u002Fyuque\u002F0\u002F2025\u002Fpng\u002F751015\u002F1763022559038-44e96883-5345-4131-a9f1-e12ff7db7ddf.png)\n\n\n\n图片上传的表单组件\n\n```vue\n\u003Cel-upload\n    :action=\"baseUrl + '\u002Ffiles\u002Fupload'\"\n    list-type=\"picture\"\n    :on-success=\"handleFileUpload\"\n>\n  \u003Cel-button type=\"primary\">点击上传\u003C\u002Fel-button>\n\u003C\u002Fel-upload>\n\n```\n\n回调函数\n\n```vue\n\u002F\u002F 表单头像上传组件的回调函数  res.data 就是头像的url\nconst handleFileUpload = (res) => {\n  data.form.avatar = res.data\n}\n\n```\n\n## 用户头像展示\n\n```vue\n\u003Cel-table-column prop=\"avatar\" label=\"头像\">\n  \u003Ctemplate #default=\"scope\">\n    \u003Cel-image v-if=\"scope.row.avatar\" style=\"width: 50px; height: 50px; display: block; border-radius: 50%\"\n              :src=\"scope.row.avatar\" :preview-src-list=\"[scope.row.avatar]\" preview-teleported>\u003C\u002Fel-image>\n  \u003C\u002Ftemplate>\n\u003C\u002Fel-table-column>\n\n```\n\n\n\n效果：\n\n![](https:\u002F\u002Fcdn.nlark.com\u002Fyuque\u002F0\u002F2025\u002Fpng\u002F751015\u002F1763023188209-cd308927-e58d-4356-a89b-7009ed0916be.png)\n\n![](https:\u002F\u002Fcdn.nlark.com\u002Fyuque\u002F0\u002F2025\u002Fpng\u002F751015\u002F1763023201254-eaeb8a12-9919-4d4a-bdf9-00494bbaa784.png)\n\n","coding",1,7782,1994,"2025-11-13 16:48:27","2026-05-03 22:49:02","青哥带小白做毕设2026所有资料汇总","qingge-code-2026",{"project":18,"items":19},{"id":6,"title":15,"slug":16},[20,27,34,41,42,49,56,63,70,77,84,91,98,105,112,119,127,134],{"id":21,"uuid":22,"project_id":6,"title":23,"type":9,"status":10,"public_enabled":10,"views":24,"sort":25,"created_at":26,"updated_at":14,"project_title":15,"project_slug":16},993,"mgoFKmGT","00. 带小白做毕设课程介绍以及脚手架获取",32063,1966,"2026-03-29 19:37:39",{"id":28,"uuid":29,"project_id":6,"title":30,"type":9,"status":10,"public_enabled":10,"views":31,"sort":32,"created_at":33,"updated_at":14,"project_title":15,"project_slug":16},998,"1kCk1d2E","01. 导入并运行项目脚手架",14398,1974,"2025-11-11 16:24:50",{"id":35,"uuid":36,"project_id":6,"title":37,"type":9,"status":10,"public_enabled":10,"views":38,"sort":39,"created_at":40,"updated_at":14,"project_title":15,"project_slug":16},1003,"8ZlQ12IX","02. 带你开发一个基础的用户管理模块（上）",12150,1987,"2025-11-12 16:53:01",{"id":4,"uuid":5,"project_id":6,"title":7,"type":9,"status":10,"public_enabled":10,"views":11,"sort":12,"created_at":13,"updated_at":14,"project_title":15,"project_slug":16},{"id":43,"uuid":44,"project_id":6,"title":45,"type":9,"status":10,"public_enabled":10,"views":46,"sort":47,"created_at":48,"updated_at":14,"project_title":15,"project_slug":16},1011,"3XNG04wA","04. 带你开发用户登录、注册、个人信息、修改密码功能",6474,2003,"2025-11-17 17:03:58",{"id":50,"uuid":51,"project_id":6,"title":52,"type":9,"status":10,"public_enabled":10,"views":53,"sort":54,"created_at":55,"updated_at":14,"project_title":15,"project_slug":16},1017,"LnAAYydZ","05. 带你开发商品分类管理功能",5467,2012,"2025-11-24 17:30:23",{"id":57,"uuid":58,"project_id":6,"title":59,"type":9,"status":10,"public_enabled":10,"views":60,"sort":61,"created_at":62,"updated_at":14,"project_title":15,"project_slug":16},1018,"584qohhy","06. 开发商品信息管理功能",4836,2013,"2025-11-24 17:30:12",{"id":64,"uuid":65,"project_id":6,"title":66,"type":9,"status":10,"public_enabled":10,"views":67,"sort":68,"created_at":69,"updated_at":14,"project_title":15,"project_slug":16},1024,"scxsifCZ","07. 开发轮播图信息管理功能",3313,2021,"2025-11-24 17:29:58",{"id":71,"uuid":72,"project_id":6,"title":73,"type":9,"status":10,"public_enabled":10,"views":74,"sort":75,"created_at":76,"updated_at":14,"project_title":15,"project_slug":16},1041,"AjujV8Gq","08. 带你实现前台首页功能",4058,2039,"2025-11-24 17:31:31",{"id":78,"uuid":79,"project_id":6,"title":80,"type":9,"status":10,"public_enabled":10,"views":81,"sort":82,"created_at":83,"updated_at":14,"project_title":15,"project_slug":16},1045,"p6yD8ZxS","09. 带你实现商品搜索、商品分类检索功能",3005,2048,"2025-11-25 16:35:45",{"id":85,"uuid":86,"project_id":6,"title":87,"type":9,"status":10,"public_enabled":10,"views":88,"sort":89,"created_at":90,"updated_at":14,"project_title":15,"project_slug":16},1050,"7gHUek7z","10. 带你实现商品详情页功能",2622,2053,"2025-11-26 17:22:20",{"id":92,"uuid":93,"project_id":6,"title":94,"type":9,"status":10,"public_enabled":10,"views":95,"sort":96,"created_at":97,"updated_at":14,"project_title":15,"project_slug":16},1059,"aX7rviTw","11. 带你实现商品收藏功能",2667,2067,"2025-11-28 17:00:21",{"id":99,"uuid":100,"project_id":6,"title":101,"type":9,"status":10,"public_enabled":10,"views":102,"sort":103,"created_at":104,"updated_at":14,"project_title":15,"project_slug":16},1060,"xcmGXr9E","12. 带你开发用户模拟充值功能",2443,2068,"2026-02-02 14:24:37",{"id":106,"uuid":107,"project_id":6,"title":108,"type":9,"status":10,"public_enabled":10,"views":109,"sort":110,"created_at":111,"updated_at":14,"project_title":15,"project_slug":16},1065,"z8IN0tX8","13. 带你实现购物车功能",2461,2078,"2025-12-01 17:16:05",{"id":113,"uuid":114,"project_id":6,"title":115,"type":9,"status":10,"public_enabled":10,"views":116,"sort":117,"created_at":118,"updated_at":14,"project_title":15,"project_slug":16},1069,"NfBIfhVx","14. 带你实现商品下单功能",3131,2086,"2025-12-02 16:57:21",{"id":120,"uuid":121,"project_id":6,"title":122,"type":9,"status":10,"public_enabled":10,"views":123,"sort":124,"created_at":125,"updated_at":126,"project_title":15,"project_slug":16},1072,"PDQdczrn","14.1 带你实现订单配送功能",2772,2097,"2025-12-03 16:10:40","2026-05-07 15:36:12.649662+00",{"id":128,"uuid":129,"project_id":6,"title":130,"type":9,"status":10,"public_enabled":10,"views":131,"sort":132,"created_at":133,"updated_at":14,"project_title":15,"project_slug":16},1075,"RYH15Bfu","15. 带你实现订单评价功能",2507,2103,"2025-12-04 17:10:47",{"id":135,"uuid":136,"project_id":6,"title":137,"type":9,"status":10,"public_enabled":10,"views":138,"sort":139,"created_at":140,"updated_at":14,"project_title":15,"project_slug":16},1079,"iUdzrNPu","16. 带你实现后台数据统计功能",2991,2107,"2025-12-05 17:37:57"]