[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"article-public-p6yD8ZxS":3,"public-project-articles-p6yD8ZxS":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},1045,"p6yD8ZxS",52,"09. 带你实现商品搜索、商品分类检索功能","## 去除 URL 参数 JS 方法\n\n```vue\nconst clearPathParam = () => {\n  let url = location.href\n  url = url.replace(\u002F(\\?|#)[^'\"]*\u002F, '');           \u002F\u002F去除参数\n  window.history.pushState({},0, url);\n}\n```\n\n## 前台框架 Front.vue\n\n```vue\n\u003Ctemplate>\n  \u003Cdiv>\n    \u003Cdiv style=\"height: 60px; background-color: #2e3143; display: flex; align-items: center;\">\n      \u003Cdiv style=\"width: 20%\">\n        \u003Cdiv style=\"padding-left: 20px; display: flex; align-items: center\">\n          \u003Cimg src=\"@\u002Fassets\u002Fimgs\u002Flogo.png\" alt=\"\" style=\"width: 40px\">\n          \u003Cdiv style=\"font-weight: bold; font-size: 24px; margin-left: 5px; color: #fff\">校园小卖部\u003C\u002Fdiv>\n        \u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n      \u003Cdiv style=\"width: 60%; height: 60px; display: flex; align-items: center\">\n        \u003Cdiv style=\"flex: 1\">\n          \u003Cel-menu router :default-active=\"router.currentRoute.value.path\" style=\"background-color: #2e3143;\" ellipsis mode=\"horizontal\">\n            \u003Cel-menu-item index=\"\u002Ffront\u002Fhome\">首页\u003C\u002Fel-menu-item>\n            \u003Cel-menu-item index=\"\u002Ffront\u002Fgoods\">精选商品\u003C\u002Fel-menu-item>\n          \u003C\u002Fel-menu>\n        \u003C\u002Fdiv>\n        \u003Cdiv style=\"width: fit-content\" v-if=\"router.currentRoute.value.path !== '\u002Ffront\u002Fgoods'\">\n          \u003Cel-input @keyup.enter=\"search\" prefix-icon=\"Search\" style=\"width: 300px; height: 40px\" v-model=\"data.goodsName\" placeholder=\"请输入商品名称查询\">\u003C\u002Fel-input>\n        \u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n      \u003Cdiv style=\"width: 20%; text-align: right; padding-right: 10px;\">\n        \u003Cel-dropdown>\n          \u003Cdiv style=\"display: flex; align-items: center;\">\n            \u003Cimg style=\"width: 40px; height: 40px; border-radius: 50%\" :src=\"data.user.avatar || 'https:\u002F\u002Fcube.elemecdn.com\u002F3\u002F7c\u002F3ea6beec64369c2642b92c6726f1epng.png'\" alt=\"\">\n            \u003Cspan style=\"color: #fff; margin-left: 5px\">{{ data.user.name || '代码小白' }}\u003C\u002Fspan>\n          \u003C\u002Fdiv>\n          \u003Ctemplate #dropdown>\n            \u003Cel-dropdown-menu>\n              \u003Cel-dropdown-item @click.native=\"router.push('\u002Ffront\u002Fperson')\">个人信息\u003C\u002Fel-dropdown-item>\n              \u003Cel-dropdown-item @click.native=\"router.push('\u002Ffront\u002Fpassword')\">修改密码\u003C\u002Fel-dropdown-item>\n              \u003Cel-dropdown-item @click.native=\"logout\">退出登录\u003C\u002Fel-dropdown-item>\n            \u003C\u002Fel-dropdown-menu>\n          \u003C\u002Ftemplate>\n        \u003C\u002Fel-dropdown>\n\n      \u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n\n    \u003Cdiv style=\"background-color: #f0f2ff\">\n      \u003Crouter-view @updateUser=\"updateUser\" \u002F>\n    \u003C\u002Fdiv>\n\n    \u003CFooter \u002F>\n\n  \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n\n\u003Cscript setup>\nimport { reactive } from \"vue\";\nimport router from \"@\u002Frouter\";\nimport {ElMessage} from \"element-plus\";\nimport Footer from \"@\u002Fcomponents\u002FFooter.vue\";\n\nconst data = reactive({\n  user: JSON.parse(localStorage.getItem('system-user') || '{}'),\n  goodsName: null\n})\n\nconst search = () => {\n  if (data.goodsName) {\n    router.push('\u002Ffront\u002Fgoods?name=' + data.goodsName)\n    data.goodsName = null\n  }\n}\n\nif (!data.user?.id) {\n  ElMessage.error('请登录！')\n  router.push('\u002Flogin')\n}\n\nconst logout = () => {\n  localStorage.removeItem('system-user')\n  router.push('\u002Flogin')\n  ElMessage.success('退出成功')\n}\n\n\u002F\u002F 更新Front里面的user对象为最新值\nconst updateUser = () => {\n  data.user = JSON.parse(localStorage.getItem('system-user') || '{}')\n}\n\u003C\u002Fscript>\n\n\u003Cstyle>\n.el-tooltip__trigger {\n  cursor: pointer;\n  outline: none !important;\n}\n.el-menu--horizontal .el-menu-item{\n  color: white;\n}\n.el-menu--horizontal {\n  border: none !important;\n}\n.el-menu--horizontal .el-menu-item {\n  border: none;\n  height: 60px;\n}\n.el-menu--horizontal .el-menu-item.is-active {\n  border: none;\n  color: white !important;\n  background-color: #0c9c7a !important;\n}\n.el-menu--horizontal .el-menu-item:not(.is-active):hover {\n  color: white;\n  background-color: #8db6ab !important;\n}\n\u003C\u002Fstyle>\n```\n\n## 前台商品列表页面 Goods.vue\n\n```vue\n\u003Ctemplate>\n  \u003Cdiv class=\"front-container\">\n    \u003Cdiv style=\"display: flex; grid-gap: 20px; margin-bottom: 20px\">\n      \u003Cdiv style=\"flex: 1; display: flex; align-items: center; grid-gap: 20px\">\n        \u003Cdiv :class=\"{'active': null === data.categoryId }\" @click=\"loadByCategory(null)\"\n             style=\"font-size: 16px; cursor: pointer; padding-bottom: 5px;\">全部\u003C\u002Fdiv>\n        \u003Cdiv :class=\"{'active': item.id === data.categoryId }\" @click=\"loadByCategory(item.id)\"\n             style=\"font-size: 16px; cursor: pointer; padding-bottom: 5px;\"\n             v-for=\"item in data.categoryList\" :key=\"item.id\">{{ item.name }}\u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n      \u003Cdiv>\n        \u003Cel-input clearable @clear=\"load\" style=\"height: 40px; width: 300px\" v-model=\"data.name\" placeholder=\"请输入商品名称搜索\">\u003C\u002Fel-input>\n        \u003Cel-button @click=\"load\" type=\"primary\" style=\"height: 40px; margin-left: 5px\">搜 索\u003C\u002Fel-button>\n      \u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n    \u003Cdiv v-if=\"data.total > 0\">\n      \u003Cel-row :gutter=\"20\">\n        \u003Cel-col :span=\"6\" v-for=\"item in data.tableData\" :key=\"item.id\">\n          \u003Cdiv @click=\"router.push('\u002Ffront\u002FgoodsDetail?id=' + item.id)\" class=\"card goods-item\"\n               style=\"width: 100%; padding: 0; border-radius: 5px; margin-bottom: 20px\">\n            \u003Cimg :src=\"item.img\" alt=\"\" style=\"width: 100%; height: 260px; border-radius: 5px 5px 0 0\">\n            \u003Cdiv style=\"padding: 5px\">\n              \u003Cdiv class=\"line1\" style=\"font-size: 18px; margin-bottom: 5px\">{{ item.name }}\u003C\u002Fdiv>\n              \u003Cdiv>\n                \u003Cspan style=\"color: red\">￥\u003C\u002Fspan>\u003Cb style=\"color: red; font-size: 20px\">{{ item.price }}\u003C\u002Fb>\n                \u003Cspan style=\"margin-left: 10px; color: #666\">销量：{{ item.saleCount }}\u003C\u002Fspan>\n              \u003C\u002Fdiv>\n            \u003C\u002Fdiv>\n          \u003C\u002Fdiv>\n        \u003C\u002Fel-col>\n      \u003C\u002Fel-row>\n\n      \u003Cdiv v-if=\"data.total > 0\">\n        \u003Cel-pagination style=\"background-color: white; width: fit-content; padding: 5px 10px; border-radius: 5px\" @current-change=\"load\" layout=\"total, prev, pager, next\" v-model:page-size=\"data.pageSize\" v-model:current-page=\"data.pageNum\" :total=\"data.total\"\u002F>\n      \u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n    \u003Cdiv v-else style=\"padding: 50px; text-align: center; color: #666\">暂无数据...\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n\n\u003Cscript setup>\nimport { reactive } from \"vue\";\nimport router from \"@\u002Frouter\";\nimport request from \"@\u002Futils\u002Frequest\";\n\nconst data = reactive({\n  name: router.currentRoute.value.query.name,\n  tableData: [],\n  pageNum: 1,\n  pageSize: 8,\n  total: 0,\n  categoryId: null,\n  categoryList: []\n})\n\nconst loadByCategory = (categoryId) => {\n  data.categoryId = categoryId\n  load()\n}\n\n\u002F\u002F 分页查询\nconst load = () => {\n  request.get('\u002Fgoods\u002FselectPage', {\n    params: {\n      pageNum: data.pageNum,\n      pageSize: data.pageSize,\n      name: data.name,\n      categoryId: data.categoryId\n    }\n  }).then(res => {\n    data.tableData = res.data?.list\n    data.total = res.data?.total\n  })\n}\nload()\n\nconst loadCategory = () => {\n  request.get('\u002Fcategory\u002FselectAll').then(res => {\n    data.categoryList = res.data\n  })\n}\nloadCategory()\n\nconst clearPathParam = () => {\n  let url = location.href\n  url = url.replace(\u002F(\\?|#)[^'\"]*\u002F, '');           \u002F\u002F去除参数\n  window.history.pushState({},0, url);\n}\nclearPathParam()\n\u003C\u002Fscript>\n\n\u003Cstyle scoped>\n.active {\n  font-weight: bold;\n  color: #0c9c7a;\n  border-bottom: 2px solid #0c9c7a;\n}\n.goods-item {\n  cursor: pointer;\n  transition: all 0.5s;\n}\n.goods-item:hover {\n  transform: scale(1.05);\n}\n\u003C\u002Fstyle>\n```\n\n","coding",1,3005,2048,"2025-11-25 16:35:45","2026-05-03 22:49:02","青哥带小白做毕设2026所有资料汇总","qingge-code-2026",{"project":18,"items":19},{"id":6,"title":15,"slug":16},[20,27,34,41,48,55,62,69,76,83,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":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},1006,"6mmUNf9i","03. 带你开发一个基础的用户管理模块（下）",7782,1994,"2025-11-13 16:48:27",{"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},1011,"3XNG04wA","04. 带你开发用户登录、注册、个人信息、修改密码功能",6474,2003,"2025-11-17 17:03:58",{"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},1017,"LnAAYydZ","05. 带你开发商品分类管理功能",5467,2012,"2025-11-24 17:30: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},1018,"584qohhy","06. 开发商品信息管理功能",4836,2013,"2025-11-24 17:30:12",{"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},1024,"scxsifCZ","07. 开发轮播图信息管理功能",3313,2021,"2025-11-24 17:29:58",{"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},1041,"AjujV8Gq","08. 带你实现前台首页功能",4058,2039,"2025-11-24 17:31:31",{"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":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"]