[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"article-public-Sle0aiDs":3,"public-project-articles-Sle0aiDs":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},65,"Sle0aiDs",38,"08. 开发管理员管理页面并对接后台接口","\n# 怎么写页面？\n\n利用模板\n\n# 页面结构是什么样子的\n\n- 查询\n- 表格（数据渲染和删除操作）\n- 表单（新增和修改）\n- 数据请求\n\n# 怎么显示页面\n\n配置路由\n配置菜单\n\n# 开始开发\n\n[https:\u002F\u002Felement-plus.gitee.io\u002Fzh-CN\u002Fcomponent\u002Fpagination.html](https:\u002F\u002Felement-plus.gitee.io\u002Fzh-CN\u002Fcomponent\u002Fpagination.html)\n\n```vue\n \u003Cel-pagination background layout=\"prev, pager, next\" @current-change=\"load\" :page-size=\"data.pageSize\" v-model:current-page=\"data.pageNum\" :total=\"data.total\"\u002F>\n```\n\n@current-change 触发翻页效果\n\n学会看网络请求的数据\n![image.png](https:\u002F\u002Fcdn.nlark.com\u002Fyuque\u002F0\u002F2023\u002Fpng\u002F751015\u002F1702133177181-ad4913c3-eeba-4e13-a284-ebe73377c2d9.png#averageHue=%23fdf8f7&clientId=ued49533c-980a-4&from=paste&height=497&id=u5f2c0192&originHeight=621&originWidth=1421&originalType=binary&ratio=1.25&rotation=0&showTitle=false&size=91311&status=done&style=none&taskId=u7a71bbf3-c577-4983-9c26-337d8765893&title=&width=1136.8)\n\n必须写动态sql\n\n```sql\n\u003Cselect id=\"selectAll\" resultType=\"com.example.entity.Admin\">\n    select * from admin\n    \u003Cwhere>\n        \u003Cif test=\"name != null\">\n            name like concat('%', #{name}, '%')\n        \u003C\u002Fif>\n    \u003C\u002Fwhere>\n    order by id desc\n\u003C\u002Fselect>\n```\n\n![image.png](https:\u002F\u002Fcdn.nlark.com\u002Fyuque\u002F0\u002F2023\u002Fpng\u002F751015\u002F1702134486260-93b1e006-9c7d-4b16-b23f-6edbd729e0d1.png#averageHue=%23f9f7f7&clientId=ued49533c-980a-4&from=paste&height=286&id=u55d61f5c&originHeight=357&originWidth=775&originalType=binary&ratio=1.25&rotation=0&showTitle=false&size=17749&status=done&style=none&taskId=u7f4886c3-2426-4826-83d7-b19b3045f87&title=&width=620)\n\n# 新增和删除共用一个函数\n\n```vue\n\u002F\u002F 保存数据\nconst save = () => {\n  request.request({\n    method: data.form.id ? 'PUT' : 'POST',\n    url: data.form.id ? '\u002Fadmin\u002Fupdate' : '\u002Fadmin\u002Fadd',\n    data: data.form\n  }).then(res => {\n    if (res.code === '200') {  \u002F\u002F成功\n      ElMessage.success('操作成功')\n      data.formVisible = false \u002F\u002F 关闭弹窗\n      load()  \u002F\u002F 重新加载表格数据\n    } else {\n      ElMessage.error(res.msg)\n    }\n  })\n}\n```\n\n# 注意删除要二次确认（重点）\n\n```vue\nconst del = (id) => {\n  ElMessageBox.confirm('删除后数据无法恢复，您确认删除吗？', '确认删除', { type: 'warning' }).then(res => {\n    request.delete('\u002Fadmin\u002Fdelete\u002F' + id).then(res => {\n      if (res.code === '200') {  \u002F\u002F成功\n        ElMessage.success('操作成功')\n        load()  \u002F\u002F 重新加载表格数据\n      } else {\n        ElMessage.error(res.msg)\n      }\n    })\n  }).catch(err => {\n    console.log(err)\n  })\n}\n```","coding",1,821,109,"2024-04-16 02:29:13","2026-05-03 22:49:02","SpringBoot3+Vue3的在线点餐系统","online-ordering",{"project":18,"items":19},{"id":6,"title":15,"slug":16},[20,27,34,41,48,55,62,69,70,77,84,91,98,105,112,119],{"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},58,"JOJVoOQd","01. 在线点餐系统介绍",2745,102,"2025-01-09 09:49: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},59,"Tt7tzqbb","02. 脚手架介绍",2364,103,"2025-01-09 09:54:51",{"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},60,"h74qSg8n","03. 开发登录功能",1974,104,"2024-04-16 02:30:00",{"id":42,"uuid":43,"project_id":6,"title":44,"type":9,"status":10,"public_enabled":10,"views":45,"sort":46,"created_at":47,"updated_at":14,"project_title":15,"project_slug":16},61,"uv8MFWZg","04. 开发后台登录接口",1729,105,"2024-04-16 02:29:56",{"id":49,"uuid":50,"project_id":6,"title":51,"type":9,"status":10,"public_enabled":10,"views":52,"sort":53,"created_at":54,"updated_at":14,"project_title":15,"project_slug":16},62,"jd2xjxUG","05. 开发普通用户登录功能",1145,106,"2024-04-16 02:29:27",{"id":56,"uuid":57,"project_id":6,"title":58,"type":9,"status":10,"public_enabled":10,"views":59,"sort":60,"created_at":61,"updated_at":14,"project_title":15,"project_slug":16},63,"TnvWfP4t","06. 开发普通用户注册功能",861,107,"2024-04-16 02:29:23",{"id":63,"uuid":64,"project_id":6,"title":65,"type":9,"status":10,"public_enabled":10,"views":66,"sort":67,"created_at":68,"updated_at":14,"project_title":15,"project_slug":16},64,"j9QNZGZU","07. 开发管理员后台接口",873,108,"2024-04-16 02:29:17",{"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":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},66,"msAf9SFh","09. 开发文件上传功能",659,110,"2024-04-16 02:29:09",{"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},67,"8FBiQ4ue","10. 个人资料管理",736,111,"2024-04-16 02:29:06",{"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},252,"hi7dGSTj","11. 顾客信息管理",643,431,"2024-06-20 15:59:16",{"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},253,"2vquH0pr","12. 餐桌管理",879,432,"2024-06-03 22:12:16",{"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},254,"F8DqfdBe","13. 开发餐品管理功能.",731,433,"2024-06-03 22:12:43",{"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},275,"G20uzwaW","14. 开发在线点餐功能（一）",768,467,"2024-06-27 12:21:02",{"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},276,"0bl3zvbT","15. 开发在线点餐功能（二）",609,468,"2024-06-27 12:21:30",{"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":14,"project_title":15,"project_slug":16},277,"AUgPvs9x","16. 开发在线点餐功能（三）",716,469,"2024-06-27 12:22:01"]