[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"article-public-xve1cq5m":3,"public-project-articles-xve1cq5m":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},21,"xve1cq5m",26,"04. 开发课程管理页面","\n# 小笔记（源码）\n\n```vue\n\u003Ctemplate>\n  \u003Cdiv>\n\n    \u003Cdiv class=\"card\" style=\"margin-bottom: 10px;\">\n      \u003Cel-input style=\"width: 300px; margin-right: 10px\" placeholder=\"请输入关键字查询\">\u003C\u002Fel-input>\n      \u003Cel-button type=\"primary\">查询\u003C\u002Fel-button>\n      \u003Cel-button type=\"info\" style=\"margin: 0 10px\">重置\u003C\u002Fel-button>\n    \u003C\u002Fdiv>\n\n    \u003Cdiv class=\"card\" style=\"margin-bottom: 10px\">\n      \u003Cdiv style=\"margin-bottom: 10px\">\n        \u003Cel-button type=\"primary\" @click=\"handleAdd\">新增\u003C\u002Fel-button>\n      \u003C\u002Fdiv>\n      \u003Cel-table stripe :data=\"data.tableData\">\n        \u003Cel-table-column label=\"名称\" prop=\"name\">\u003C\u002Fel-table-column>\n        \u003Cel-table-column label=\"描述\" prop=\"descr\">\u003C\u002Fel-table-column>\n        \u003Cel-table-column label=\"课时\" prop=\"times\">\u003C\u002Fel-table-column>\n        \u003Cel-table-column label=\"操作\" align=\"center\" width=\"160\">\n          \u003Ctemplate v-slot=\"scope\">\n            \u003Cel-button type=\"primary\" @click=\"handleEdit\">编辑\u003C\u002Fel-button>\n            \u003Cel-button type=\"danger\" @click=\"handleDelete\">删除\u003C\u002Fel-button>\n          \u003C\u002Ftemplate>\n        \u003C\u002Fel-table-column>\n      \u003C\u002Fel-table>\n    \u003C\u002Fdiv>\n\n    \u003Cdiv class=\"card\">\n      \u003Cel-pagination background layout=\"prev, pager, next\" :page-size=\"8\" v-model:current-page=\"data.pageNum\" :total=\"1000\"\u002F>\n    \u003C\u002Fdiv>\n\n    \u003Cel-dialog title=\"信息\" width=\"40%\" v-model=\"data.formVisible\" :close-on-click-modal=\"false\" destroy-on-close>\n      \u003Cel-form :model=\"data.form\" label-width=\"100px\" style=\"padding-right: 50px\">\n        \u003Cel-form-item label=\"名称\" prop=\"name\">\n          \u003Cel-input v-model=\"data.form.name\" autocomplete=\"off\" \u002F>\n        \u003C\u002Fel-form-item>\n        \u003Cel-form-item label=\"描述\" prop=\"descr\">\n          \u003Cel-input v-model=\"data.form.descr\" autocomplete=\"off\" \u002F>\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=\"data.formVisible = false\">保 存\u003C\u002Fel-button>\n      \u003C\u002Fspan>\n      \u003C\u002Ftemplate>\n    \u003C\u002Fel-dialog>\n\n  \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n\n\u003Cscript setup>\nimport request from \"@\u002Futils\u002Frequest\";\nimport {reactive} from \"vue\";\nimport {ElMessageBox} from \"element-plus\";\n\nrequest.get('\u002F').then(res => {\n  console.log(res)\n})\n\nconst data = reactive({\n  pageNum: 1,\n  formVisible: false,\n  form: {},\n  tableData: [\n    {name: '大学英语', descr: '大学英语真有趣', times: '24课时'},\n    {name: '大学英语', descr: '大学英语真有趣', times: '24课时'},\n    {name: '大学英语', descr: '大学英语真有趣', times: '24课时'},\n    {name: '大学英语', descr: '大学英语真有趣', times: '24课时'},\n    {name: '大学英语', descr: '大学英语真有趣', times: '24课时'},\n    {name: '大学英语', descr: '大学英语真有趣', times: '24课时'},\n    {name: '大学英语', descr: '大学英语真有趣', times: '24课时'},\n    {name: '大学英语', descr: '大学英语真有趣', times: '24课时'},\n  ]\n})\n\nconst handleAdd = () => {\n  data.form = {}\n  data.formVisible = true\n}\nconst handleEdit = (row) => {\n  let form = JSON.parse(JSON.stringify(row))\n  data.formVisible = true\n}\nconst handleDelete = (id) => {\n  ElMessageBox.confirm('删除后数据无法恢复，您确定删除吗?', '删除确认', { type: 'warning' }).then(res => {\n    console.log('删除')\n  }).catch(err => {\n    console.error(err)\n  })\n}\n\u003C\u002Fscript>\n```\n\n# 怎么开发\n\n- 理清楚思路，想想课程有哪些属性（名称、编号、简介、课时、任课老师）\n- 设计数据库\n- 开发页面\n- 开发后台接口\n- 前后端数据对接\n- 测试\n\n# 设计数据库\n\n```sql\nCREATE TABLE `course` (\n  `id` int(11) NOT NULL AUTO_INCREMENT COMMENT 'ID',\n  `name` varchar(255) COLLATE utf8mb4_unicode_ci DEFAULT NULL COMMENT '课程名称',\n  `no` varchar(255) COLLATE utf8mb4_unicode_ci DEFAULT NULL COMMENT '课程编号',\n  `descr` varchar(255) COLLATE utf8mb4_unicode_ci DEFAULT NULL COMMENT '课程描述',\n  `times` varchar(255) COLLATE utf8mb4_unicode_ci DEFAULT NULL COMMENT '课时',\n  `teacher` varchar(255) COLLATE utf8mb4_unicode_ci DEFAULT NULL COMMENT '任课老师',\n  PRIMARY KEY (`id`)\n) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci COMMENT='课程信息';\n```\n\n# 页面怎么写\n\n参考官网给的例子\n\n## 表单\n\n[https:\u002F\u002Felement-plus.gitee.io\u002Fzh-CN\u002Fcomponent\u002Fform.html](https:\u002F\u002Felement-plus.gitee.io\u002Fzh-CN\u002Fcomponent\u002Fform.html)\n\n```vue\nel-form :model=\"data.form\" label-width=\"100px\">\n  \u003Cel-form-item label=\"Activity name\">\n  \t\u003Cel-input v-model=\"form.name\" \u002F>\n  \u003C\u002Fel-form-item>\n\u003C\u002Fel-form>\n\nconst data = reactive({\n   form: {}\n})\n```\n\n## 表格\n\n[https:\u002F\u002Felement-plus.gitee.io\u002Fzh-CN\u002Fcomponent\u002Ftable.html](https:\u002F\u002Felement-plus.gitee.io\u002Fzh-CN\u002Fcomponent\u002Ftable.html)\n\n```vue\n\u003Cel-table :data=\"data.tableData\" stripe>\n  \u003Cel-table-column prop=\"name\" label=\"名称\" width=\"180\" \u002F>\n\u003C\u002Fel-table>\n\nconst data = reactive({\n   tableData: []\n})\n```\n\n## 分页\n\n```vue\n\u003Cel-pagination background layout=\"prev, pager, next\" :total=\"1000\" \u002F>\n```\n\n# 后台接口怎么写\n\n增删改查\n\n#\n","coding",1,1907,22,"2024-04-16 02:36:40","2026-05-03 22:49:02","SpringBoot+Vue3的学生成绩管理系统","student-performance",{"project":18,"items":19},{"id":6,"title":15,"slug":16},[20,27,33,38,39,45,51,57,62,68,74,80,86,92,98,104],{"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},18,"7r0zrxqF","01. 学生成绩管理系统介绍",3753,19,"2025-01-09 10:22:30",{"id":25,"uuid":28,"project_id":6,"title":29,"type":9,"status":10,"public_enabled":10,"views":30,"sort":31,"created_at":32,"updated_at":14,"project_title":15,"project_slug":16},"h5U5WN1A","02. 脚手架介绍",3957,20,"2025-01-09 10:22:49",{"id":31,"uuid":34,"project_id":6,"title":35,"type":9,"status":10,"public_enabled":10,"views":36,"sort":4,"created_at":37,"updated_at":14,"project_title":15,"project_slug":16},"aKzqZqzY","03. 实现登录功能",3607,"2024-04-16 02:36:48",{"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":12,"uuid":40,"project_id":6,"title":41,"type":9,"status":10,"public_enabled":10,"views":42,"sort":43,"created_at":44,"updated_at":14,"project_title":15,"project_slug":16},"KUfmmtjB","05. 开发课程分页查询接口",1303,23,"2024-04-16 02:36:36",{"id":43,"uuid":46,"project_id":6,"title":47,"type":9,"status":10,"public_enabled":10,"views":48,"sort":49,"created_at":50,"updated_at":14,"project_title":15,"project_slug":16},"5aLIaQCP","06. 开发课程前后台数据对接",1040,24,"2024-04-16 02:36:32",{"id":49,"uuid":52,"project_id":6,"title":53,"type":9,"status":10,"public_enabled":10,"views":54,"sort":55,"created_at":56,"updated_at":14,"project_title":15,"project_slug":16},"dTwkIyqR","07. 开发课程新增和编辑功能",991,25,"2024-04-16 02:36:27",{"id":55,"uuid":58,"project_id":6,"title":59,"type":9,"status":10,"public_enabled":10,"views":60,"sort":6,"created_at":61,"updated_at":14,"project_title":15,"project_slug":16},"NlyNo5n8","08. 开发课程管理删除功能",667,"2024-04-16 02:36:23",{"id":6,"uuid":63,"project_id":6,"title":64,"type":9,"status":10,"public_enabled":10,"views":65,"sort":66,"created_at":67,"updated_at":14,"project_title":15,"project_slug":16},"dDLZGpA4","09. 开发学生登录功能",1019,27,"2024-04-16 02:36:20",{"id":66,"uuid":69,"project_id":6,"title":70,"type":9,"status":10,"public_enabled":10,"views":71,"sort":72,"created_at":73,"updated_at":14,"project_title":15,"project_slug":16},"5qCBv54l","10. 开发学生注册功能",811,28,"2024-04-16 02:36:15",{"id":72,"uuid":75,"project_id":6,"title":76,"type":9,"status":10,"public_enabled":10,"views":77,"sort":78,"created_at":79,"updated_at":14,"project_title":15,"project_slug":16},"smeYDA8N","11. 开发学生管理功能",1060,29,"2024-04-16 02:36:10",{"id":78,"uuid":81,"project_id":6,"title":82,"type":9,"status":10,"public_enabled":10,"views":83,"sort":84,"created_at":85,"updated_at":14,"project_title":15,"project_slug":16},"eji2Bt8v","12. 开发文件上传下载功能",914,30,"2024-04-16 02:36:07",{"id":84,"uuid":87,"project_id":6,"title":88,"type":9,"status":10,"public_enabled":10,"views":89,"sort":90,"created_at":91,"updated_at":14,"project_title":15,"project_slug":16},"BkumMnOk","13. 开发个人资料功能",980,31,"2024-04-16 02:36:03",{"id":90,"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},"C7ux2BRH","14. 开发学生选课功能",1221,32,"2024-04-16 02:35:58",{"id":96,"uuid":99,"project_id":6,"title":100,"type":9,"status":10,"public_enabled":10,"views":101,"sort":102,"created_at":103,"updated_at":14,"project_title":15,"project_slug":16},"fLHT6xiE","15. 开发成绩管理功能",1253,33,"2024-04-16 02:35:54",{"id":105,"uuid":106,"project_id":6,"title":107,"type":9,"status":10,"public_enabled":10,"views":108,"sort":109,"created_at":110,"updated_at":111,"project_title":15,"project_slug":16},56,"k3gvEqlV","基于SpringBoot+Vue3的学生成绩管理系统资料汇总",355,100,"2024-12-26 16:23:07","2026-05-07 15:36:12.649662+00"]