[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"article-public-nGHKfpf4":3,"public-project-articles-nGHKfpf4":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},1107,"nGHKfpf4",54,"08. 开发用户端物品展示功能","给物品加上分类 ID\n\n![](https:\u002F\u002Fcdn.nlark.com\u002Fyuque\u002F0\u002F2025\u002Fpng\u002F751015\u002F1765787101509-a6622686-6aa0-4c3a-bf67-7057d79da9b9.png)\n\n## 新增物品加上分类 ID\n\n```vue\n\u003Cel-form-item label=\"分类\" prop=\"name\">\n  \u003Cel-select v-model=\"data.form.categoryId\">\n    \u003Cel-option v-for=\"item in data.categoryList\" :key=\"item.id\" :label=\"item.name\" :value=\"item.id\">\u003C\u002Fel-option>\n  \u003C\u002Fel-select>\n\u003C\u002Fel-form-item>\n```\n\n## 物品查询加上 status 条件 以及分类的连表查询\n\n```sql\n\u003Cselect id=\"selectAll\" resultType=\"com.example.entity.Items\">\n    select items.*, user.name as userName, category.name as categoryName from `items`\n    left join user on items.user_id = user.id\n    left join category on items.category_id = category.id\n    \u003Cwhere>\n        \u003Cif test=\"name != null\"> and items.name like concat('%', #{name}, '%')\u003C\u002Fif>\n        \u003Cif test=\"userId != null\"> and items.user_id = #{userId}\u003C\u002Fif>\n        \u003Cif test=\"status != null\"> and items.status = #{status}\u003C\u002Fif>\n        \u003Cif test=\"categoryId != null\"> and items.category_id = #{categoryId}\u003C\u002Fif>\n        \u003Cif test=\"checkStatus != null\"> and items.check_status = #{checkStatus}\u003C\u002Fif>\n    \u003C\u002Fwhere>\n    order by items.id desc\n\u003C\u002Fselect>\n```\n\n  \n\n## 物品修改的接口\n\n![](https:\u002F\u002Fcdn.nlark.com\u002Fyuque\u002F0\u002F2025\u002Fpng\u002F751015\u002F1765789723809-397a7543-ed90-43e4-b03c-c23291417d8f.png)  \n\n## 本节课的前端代码 ItemsView.vue\n\n```vue\n\u003Ctemplate>\n  \u003Cdiv>\n    \u003Cdiv class=\"card\" style=\"margin-bottom: 10px\">\n      \u003Cel-button @click=\"changeCategoryItem(null)\" :type=\"data.categoryId === null ? 'primary' : 'default'\">全部\u003C\u002Fel-button>\n      \u003Cel-button @click=\"changeCategoryItem(item.id)\" :type=\"data.categoryId === item.id ? 'primary' : 'default'\" v-for=\"item in data.categoryList\" :key=\"item.id\">{{ item.name }}\u003C\u002Fel-button>\n    \u003C\u002Fdiv>\n\n    \u003Cdiv v-if=\"data.total > 0\">\n      \u003Cel-row :gutter=\"10\">\n       \u003Cel-col :span=\"6\" v-for=\"item in data.tableData\" :key=\"item.id\">\n         \u003Cdiv class=\"card\" style=\"padding: 0\">\n           \u003Cimg :src=\"item.img\" alt=\"\" style=\"width: 100%; height:350px; display: block; border-radius: 5px 5px 0 0\">\n           \u003Cdiv style=\"padding: 10px\">\n             \u003Cdiv style=\"margin: 10px 0; font-size: 20px; font-weight: 400\">物品：{{ item.name }}\u003C\u002Fdiv>\n             \u003Cdiv class=\"ellipsis2\" style=\"margin: 10px 0; text-align: justify; color: #666;\" >\u003Cspan style=\"color: #333\">描述信息：\u003C\u002Fspan>{{ item.description }}\u003C\u002Fdiv>\n             \u003Cdiv class=\"ellipsis2\" style=\"margin: 10px 0; text-align: justify; color: #666;\" >\u003Cspan style=\"color: #333\">交换条件：\u003C\u002Fspan>{{ item.requirement }}\u003C\u002Fdiv>\n             \u003Cdiv style=\"margin: 10px 0; display: flex; color: #666\">\n               \u003Cdiv style=\"flex: 1\">\u003Cspan style=\"color: #333\">上传人：\u003C\u002Fspan>{{item.userName}}\u003C\u002Fdiv>\n               \u003Cdiv>\u003Cspan style=\"color: #333\">上传时间：\u003C\u002Fspan>{{ item.time }}\u003C\u002Fdiv>\n             \u003C\u002Fdiv>\n             \u003Cdiv style=\"text-align: right\">\n               \u003Cel-button type=\"primary\" :disabled=\"item.userId === data.user.id\">申请交换\u003C\u002Fel-button>\n             \u003C\u002Fdiv>\n           \u003C\u002Fdiv>\n         \u003C\u002Fdiv>\n       \u003C\u002Fel-col>\n      \u003C\u002Fel-row>\n    \u003C\u002Fdiv>\n\n    \u003Cdiv v-else>\n      \u003Cdiv class=\"card\" style=\"padding: 50px; display: flex; justify-content: center; align-items: center; font-size: 20px; color: #666\">暂无物品...\u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n\n\u003Cscript setup>\nimport { reactive } from \"vue\";\nimport request from \"@\u002Futils\u002Frequest\";\nimport {ElMessage} from \"element-plus\";\n\nconst data = reactive({\n  user: JSON.parse(localStorage.getItem('system-user') || '{}'),\n  categoryList: [],\n  categoryId: null,  \u002F\u002F 当前选中的分类ID\n  pageNum: 1,\n  pageSize: 10,\n  total: 0,\n  tableData: [],\n})\n\n\u002F\u002F 查询分类数据\nrequest.get('\u002Fcategory\u002FselectAll').then(res => {\n  data.categoryList = res.data\n})\n\nconst changeCategoryItem = (categoryId) => {\n  data.categoryId = categoryId\n  load()\n}\n\n\u002F\u002F 分页查询\nconst load = () => {\n  request.get('\u002Fitems\u002FselectPage', {\n    params: {\n      pageNum: data.pageNum,\n      pageSize: data.pageSize,\n      status: true,\n      checkStatus: '通过',\n      categoryId: data.categoryId\n    }\n  }).then(res => {\n    if (res.code === '500') {\n      ElMessage.error(res.msg)\n      return\n    }\n    data.tableData = res.data?.list\n    data.total = res.data?.total\n  })\n}\nload()\n\u003C\u002Fscript>\n\n\u003Cstyle>\n.ellipsis2 {\n  word-break: break-all;\n  text-overflow: ellipsis;\n  display: -webkit-box;\n  -webkit-box-orient: vertical;\n  -webkit-line-clamp: 1; \u002F* 超出几行省略 *\u002F\n  overflow: hidden;\n}\n\u003C\u002Fstyle>\n```\n\n","coding",1,329,2162,"2025-12-15 17:27:07","2026-05-03 22:49:02","基于SpringBoot3+Vue3的校园物品分享系统","campus-item-sharing",{"project":18,"items":19},{"id":6,"title":15,"slug":16},[20,27,34,41,48,56,63,70,71,78,85,92,99],{"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},1085,"bKvz3GMB","01. 校园物品分享系统介绍",1584,2118,"2026-04-01 22:12:21",{"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},1086,"G7CRiFiL","02. 导入并运行项目脚手架",670,2119,"2025-12-09 16:59:49",{"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},1087,"pgDLuOpz","03. 开发普通用户信息管理功能",544,2121,"2025-12-09 16:59:38",{"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},1090,"2l7FVzgx","04. 开发普通用户登录、注册、个人信息、修改密码功能",365,2131,"2025-12-10 16:11:48",{"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":55,"project_title":15,"project_slug":16},1091,"l5SB4JYK","05. 开发系统公告管理功能",417,2132,"2025-12-10 16:12:08","2026-05-07 15:36:12.649662+00",{"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},1098,"mXLOXdBC","06. 开发物品分类信息管理功能",297,2143,"2025-12-11 16:37:57",{"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},1099,"nj87VT4L","07. 开发物品信息管理功能",406,2144,"2025-12-11 16:38:16",{"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":72,"uuid":73,"project_id":6,"title":74,"type":9,"status":10,"public_enabled":10,"views":75,"sort":76,"created_at":77,"updated_at":14,"project_title":15,"project_slug":16},1123,"A6caJxFd","09. 开发物品申请交换功能",322,2196,"2025-12-19 16:16:03",{"id":79,"uuid":80,"project_id":6,"title":81,"type":9,"status":10,"public_enabled":10,"views":82,"sort":83,"created_at":84,"updated_at":14,"project_title":15,"project_slug":16},1135,"s5I1gomY","10. 开发物品收藏功能",285,2223,"2025-12-23 17:38:15",{"id":86,"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},1159,"qadunvVA","11. 开发论坛帖子管理功能",263,2266,"2025-12-30 16:08:47",{"id":93,"uuid":94,"project_id":6,"title":95,"type":9,"status":10,"public_enabled":10,"views":96,"sort":97,"created_at":98,"updated_at":14,"project_title":15,"project_slug":16},1202,"CpPqHdiT","12. 开发论坛帖子展示功能",220,2339,"2026-01-19 17:04:21",{"id":100,"uuid":101,"project_id":6,"title":102,"type":9,"status":10,"public_enabled":10,"views":103,"sort":104,"created_at":105,"updated_at":14,"project_title":15,"project_slug":16},1203,"7YABYvbd","13. 开发论坛帖子点赞和评论功能",239,2340,"2026-01-19 17:04:37"]