[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"article-public-G20uzwaW":3,"public-project-articles-G20uzwaW":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},275,"G20uzwaW",38,"14. 开发在线点餐功能（一）","普通用户可见菜单和管理员区分开\n![image.png](https:\u002F\u002Fcdn.nlark.com\u002Fyuque\u002F0\u002F2024\u002Fpng\u002F751015\u002F1719451661157-27ee104f-04e4-459b-b6fa-9c7c51612283.png#averageHue=%237a6a46&clientId=u5d177e24-6c08-4&from=paste&height=584&id=u3782725f&originHeight=730&originWidth=1774&originalType=binary&ratio=1.25&rotation=0&showTitle=false&size=156808&status=done&style=none&taskId=u7507d7d3-bbe9-4b5e-a0bf-c056977de62&title=&width=1419.2)\n\n## 展示所有的餐品\n\n通过调用后端的接口拿到餐品的数据，然后进行渲染\n404说明每调用成功，没找到这个接口\n![image.png](https:\u002F\u002Fcdn.nlark.com\u002Fyuque\u002F0\u002F2024\u002Fpng\u002F751015\u002F1719451894161-69eefd2d-1028-4f4a-b01c-06a8834f201e.png#averageHue=%23fcfafa&clientId=u5d177e24-6c08-4&from=paste&height=197&id=uaf7fc187&originHeight=246&originWidth=1420&originalType=binary&ratio=1.25&rotation=0&showTitle=false&size=10848&status=done&style=none&taskId=u308b2af3-6646-41ab-8c40-45f96369638&title=&width=1136)\n![image.png](https:\u002F\u002Fcdn.nlark.com\u002Fyuque\u002F0\u002F2024\u002Fpng\u002F751015\u002F1719451943951-06f98b24-2c05-4f92-b59c-6d542cd274fc.png#averageHue=%23f7f5f5&clientId=u5d177e24-6c08-4&from=paste&height=121&id=AN41l&originHeight=151&originWidth=401&originalType=binary&ratio=1.25&rotation=0&showTitle=false&size=7335&status=done&style=none&taskId=ue5b54be9-dd28-408c-b9b1-57107c07ca9&title=&width=320.8)\n问题的根源是你的url写错了 \n\n> **404**是一个极其简单的 极其容易出现的问题，但是它不是什么大问题，它的解决方法也很简单，只要你的url写对了，后台有这个接口，并且可以访问，它就不会出现什么问题\n\n\n## 宝贵的经验\n\n拥有这个经验，就不用再百度了\n\n```css\n.line1 {\n    overflow: hidden; \u002F* 确保超出容器的文本被裁剪 *\u002F\n    white-space: nowrap; \u002F* 确保文本在一行内显示 *\u002F\n    text-overflow: ellipsis; \u002F* 使用省略号表示文本超出 *\u002F\n}\n\n.line2 {\n    display: -webkit-box;\n    -webkit-line-clamp: 2;\n    -webkit-box-orient: vertical;\n    overflow: hidden; \u002F* 确保超出容器的文本被裁剪 *\u002F\n    text-overflow: ellipsis; \u002F* 使用省略号表示文本超出 *\u002F\n}\n```\n\n来个**花里胡哨的绿**\n![image.png](https:\u002F\u002Fcdn.nlark.com\u002Fyuque\u002F0\u002F2024\u002Fpng\u002F751015\u002F1719453174646-bb7f0b0a-9758-46ae-a525-d3140e076953.png#averageHue=%23939d42&clientId=u5d177e24-6c08-4&from=paste&height=406&id=u617e0ada&originHeight=507&originWidth=1496&originalType=binary&ratio=1.25&rotation=0&showTitle=false&size=888880&status=done&style=none&taskId=u5a8b79de-92bd-42b5-8fe5-3573afd57e6&title=&width=1196.8)\n\n```css\n\u003Cel-tooltip :content=\"item.descr\" placement=\"bottom\" effect=\"customized\">\n  \u003Cdiv style=\"margin: 5px; color: #666\" class=\"line1\">{{ item.descr }}\u003C\u002Fdiv>\n\u003C\u002Fel-tooltip>\n\n\u003Cstyle>\n.el-popper.is-customized {\n  \u002F* Set padding to ensure the height is 32px *\u002F\n  padding: 6px 12px;\n  background: linear-gradient(90deg, rgb(159, 229, 151), rgb(204, 229, 129));\n}\n\n.el-popper.is-customized .el-popper__arrow::before {\n  background: linear-gradient(45deg, #b2e68d, #bce689);\n  right: 0;\n}\n\u003C\u002Fstyle>\n```\n\n本节课完成内容\n![image.png](https:\u002F\u002Fcdn.nlark.com\u002Fyuque\u002F0\u002F2024\u002Fpng\u002F751015\u002F1719453534892-d9fb9451-5b99-4c30-a873-e8a1f7dba35e.png#averageHue=%237f8d29&clientId=u5d177e24-6c08-4&from=paste&height=704&id=u774b8b87&originHeight=880&originWidth=1920&originalType=binary&ratio=1.25&rotation=0&showTitle=false&size=909737&status=done&style=none&taskId=ued5862b1-bc0c-46c7-946d-fec2d22991f&title=&width=1536)\n\n## 本节课代码\n\n```vue\n\u003Ctemplate>\n  \u003Cdiv>\n    \u003Cdiv class=\"card\" style=\"margin-bottom: 5px\">\n      \u003Cdiv v-if=\"data.table.no\">\n        \u003Cdiv style=\"display: flex; align-items: center\">\n          \u003Cdiv style=\"flex: 1\">\n            \u003Cspan style=\"margin-right: 10px\">餐桌号：{{ data.table.no }}  开始点餐\u003C\u002Fspan>\n            \u003Cel-button type=\"primary\" plain>已点餐品\u003C\u002Fel-button>\n          \u003C\u002Fdiv>\n          \u003Cel-button type=\"primary\" @click=\"removeOrder\">退桌\u003C\u002Fel-button>\n        \u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n      \u003Cdiv style=\"color:#666;\" v-else>\n        您还未选餐桌，请先 \u003Ca href=\"\u002Fhome\">选择餐桌\u003C\u002Fa> 再点餐\n      \u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n\n    \u003C!-- 展示餐品-->\n    \u003Cel-row :gutter=\"10\">\n      \u003Cel-col :span=\"6\" v-for=\"item in data.foodsList\" :key=\"item.id\">\n        \u003Cdiv class=\"card\">\n          \u003Cimg :src=\"item.img\" alt=\"\" style=\"width: 100%; height: 280px\">\n          \u003Cdiv style=\"margin: 5px; color: #000; font-size: 18px\">{{ item.name }}\u003C\u002Fdiv>\n          \u003Cdiv style=\"margin: 5px; color: #666\">\n            \u003Cel-tooltip :content=\"item.descr\" placement=\"bottom\" effect=\"customized\" v-if=\"item.descr.length >= 20\">\n              \u003Cdiv class=\"line1\">{{ item.descr }}\u003C\u002Fdiv>\n            \u003C\u002Fel-tooltip>\n            \u003Cdiv v-else>{{ item.descr }}\u003C\u002Fdiv>\n          \u003C\u002Fdiv>\n          \u003Cdiv style=\"margin: 10px 0; text-align: right\">\n            \u003Cel-input-number :min=\"1\" v-model=\"item.num\" style=\"margin-right: 5px\">\u003C\u002Fel-input-number>\n            \u003Cel-button type=\"primary\">点餐\u003C\u002Fel-button>\n          \u003C\u002Fdiv>\n        \u003C\u002Fdiv>\n      \u003C\u002Fel-col>\n    \u003C\u002Fel-row>\n\n  \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n\n\u003Cscript setup>\nimport {reactive} from \"vue\";\nimport request from \"@\u002Futils\u002Frequest\";\nimport router from \"@\u002Frouter\";\nimport {ElMessage} from \"element-plus\";\n\nconst data = reactive({\n  table: {},\n  user: JSON.parse(localStorage.getItem('canteen-user') || '{}'),\n  foodsList: []\n})\n\nconst loadTable = () => {\n  request.get('\u002Ftables\u002FselectByUserId\u002F' + data.user.id).then(res => {\n    data.table = res.data || {}\n  })\n}\nloadTable()\n\nconst removeOrder = () => {\n  request.put('\u002Ftables\u002FremoveOrder', data.table).then(res => {\n    if (res.code === '200') {\n      ElMessage.success('退桌成功')\n      loadTable()\n    } else {\n      ElMessage.error(res.msg)\n    }\n  })\n}\n\nconst loadFoods = () => {\n  request.get('\u002Ffoods\u002FselectAll').then(res => {\n    data.foodsList = res.data || []\n    data.foodsList.forEach(item => item.num = 1)\n  })\n}\nloadFoods()\n\u003C\u002Fscript>\n\n\u003Cstyle>\n.el-popper.is-customized {\n  \u002F* Set padding to ensure the height is 32px *\u002F\n  padding: 6px 12px;\n  background: linear-gradient(90deg, rgb(159, 229, 151), rgb(204, 229, 129));\n}\n\n.el-popper.is-customized .el-popper__arrow::before {\n  background: linear-gradient(45deg, #b2e68d, #bce689);\n  right: 0;\n}\n\u003C\u002Fstyle>\n```","coding",1,768,467,"2024-06-27 12:21:02","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,76,83,90,97,104,111,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":70,"uuid":71,"project_id":6,"title":72,"type":9,"status":10,"public_enabled":10,"views":73,"sort":74,"created_at":75,"updated_at":14,"project_title":15,"project_slug":16},65,"Sle0aiDs","08. 开发管理员管理页面并对接后台接口",821,109,"2024-04-16 02:29:13",{"id":77,"uuid":78,"project_id":6,"title":79,"type":9,"status":10,"public_enabled":10,"views":80,"sort":81,"created_at":82,"updated_at":14,"project_title":15,"project_slug":16},66,"msAf9SFh","09. 开发文件上传功能",659,110,"2024-04-16 02:29:09",{"id":84,"uuid":85,"project_id":6,"title":86,"type":9,"status":10,"public_enabled":10,"views":87,"sort":88,"created_at":89,"updated_at":14,"project_title":15,"project_slug":16},67,"8FBiQ4ue","10. 个人资料管理",736,111,"2024-04-16 02:29:06",{"id":91,"uuid":92,"project_id":6,"title":93,"type":9,"status":10,"public_enabled":10,"views":94,"sort":95,"created_at":96,"updated_at":14,"project_title":15,"project_slug":16},252,"hi7dGSTj","11. 顾客信息管理",643,431,"2024-06-20 15:59:16",{"id":98,"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},253,"2vquH0pr","12. 餐桌管理",879,432,"2024-06-03 22:12:16",{"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":14,"project_title":15,"project_slug":16},254,"F8DqfdBe","13. 开发餐品管理功能.",731,433,"2024-06-03 22:12:43",{"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":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"]