[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"article-public-s5I1gomY":3,"public-project-articles-s5I1gomY":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},1135,"s5I1gomY",54,"10. 开发物品收藏功能","## JS 去除页面的参数\n\n![](https:\u002F\u002Fcdn.nlark.com\u002Fyuque\u002F0\u002F2025\u002Fpng\u002F751015\u002F1766476054903-b365355a-18c6-4532-b57b-a6d98c8575a4.png)\n\n```javascript\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## SQL\n\n```sql\nCREATE TABLE `collect` (\n  `id` int NOT NULL AUTO_INCREMENT COMMENT 'ID',\n  `item_id` int DEFAULT NULL COMMENT '物品',\n  `user_id` int DEFAULT NULL COMMENT '收藏人',\n  `time` 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\nCollect.java\n\n```java\npackage com.example.entity;\n\npublic class Collect {\n\n    \u002F**ID *\u002F\n    private Integer id;\n    \u002F**物品 *\u002F\n    private Integer itemId;\n    private String itemName;\n    \u002F**收藏人 *\u002F\n    private Integer userId;\n    private String userName;\n    \u002F**时间 *\u002F\n    private String time;\n\n    public Integer getId() {\n        return id;\n    }\n\n    public void setId(Integer id) {\n        this.id = id;\n    }\n\n    public Integer getItemId() {\n        return itemId;\n    }\n\n    public void setItemId(Integer itemId) {\n        this.itemId = itemId;\n    }\n\n    public String getItemName() {\n        return itemName;\n    }\n\n    public void setItemName(String itemName) {\n        this.itemName = itemName;\n    }\n\n    public Integer getUserId() {\n        return userId;\n    }\n\n    public void setUserId(Integer userId) {\n        this.userId = userId;\n    }\n\n    public String getUserName() {\n        return userName;\n    }\n\n    public void setUserName(String userName) {\n        this.userName = userName;\n    }\n\n    public String getTime() {\n        return time;\n    }\n\n    public void setTime(String time) {\n        this.time = time;\n    }\n}\n\n```\n\n\n\nCollectMapper.xml\n\n```xml\n\u003C?xml version=\"1.0\" encoding=\"UTF-8\"?>\n\u003C!DOCTYPE mapper\n        PUBLIC \"-\u002F\u002Fmybatis.org\u002F\u002FDTD Mapper 3.0\u002F\u002FEN\"\n        \"http:\u002F\u002Fmybatis.org\u002Fdtd\u002Fmybatis-3-mapper.dtd\">\n\u003Cmapper namespace=\"com.example.mapper.CollectMapper\">\n\n    \u003Cselect id=\"selectAll\" resultType=\"com.example.entity.Collect\">\n        select collect.*, items.name as itemName, user.name as userName from `collect`\n        left join items on collect.item_id = items.id\n        left join user on collect.user_id = user.id\n        \u003Cwhere>\n            \u003Cif test=\"itemName != null\"> and items.name like concat('%', #{itemName}, '%')\u003C\u002Fif>\n            \u003Cif test=\"userId != null\"> and collect.user_id = #{userId}\u003C\u002Fif>\n        \u003C\u002Fwhere>\n        order by collect.id desc\n    \u003C\u002Fselect>\n\n    \u003Cinsert id=\"insert\" parameterType=\"com.example.entity.Collect\" useGeneratedKeys=\"true\">\n        insert into `collect`\n        \u003Ctrim prefix=\"(\" suffix=\")\" suffixOverrides=\",\">\n            \u003Cif test=\"id != null\">id,\u003C\u002Fif>\n            \u003Cif test=\"itemId != null\">item_id,\u003C\u002Fif>\n            \u003Cif test=\"userId != null\">user_id,\u003C\u002Fif>\n            \u003Cif test=\"time != null\">time,\u003C\u002Fif>\n        \u003C\u002Ftrim>\n        values\n        \u003Ctrim prefix=\"(\" suffix=\")\" suffixOverrides=\",\">\n            \u003Cif test=\"id != null\">#{id},\u003C\u002Fif>\n            \u003Cif test=\"itemId != null\">#{itemId},\u003C\u002Fif>\n            \u003Cif test=\"userId != null\">#{userId},\u003C\u002Fif>\n            \u003Cif test=\"time != null\">#{time},\u003C\u002Fif>\n        \u003C\u002Ftrim>\n    \u003C\u002Finsert>\n\n    \u003Cupdate id=\"updateById\" parameterType=\"com.example.entity.Collect\">\n        update `collect`\n        \u003Cset>\n            \u003Cif test=\"id != null\">\n                id = #{id},\n            \u003C\u002Fif>\n            \u003Cif test=\"itemId != null\">\n                item_id = #{itemId},\n            \u003C\u002Fif>\n            \u003Cif test=\"userId != null\">\n                user_id = #{userId},\n            \u003C\u002Fif>\n            \u003Cif test=\"time != null\">\n                time = #{time},\n            \u003C\u002Fif>\n        \u003C\u002Fset>\n        where id = #{id}\n    \u003C\u002Fupdate>\n\n\u003C\u002Fmapper>\n```\n\n\n\n## 物品的分页查询\n\n```java\n\u002F**\n     * 分页查询\n     *\u002F\n    public PageInfo\u003CItems> selectPage(Items items, Integer loginUserId, Integer pageNum, Integer pageSize) {\n        PageHelper.startPage(pageNum, pageSize);\n        List\u003CItems> list = itemsMapper.selectAll(items);\n        if (loginUserId != null) {\n            for (Items item : list) {\n                \u002F\u002F 设置当前用户的收藏ID  获取用户收藏的信息\n                Collect collect = collectMapper.selectByItemIdAndUserId(item.getId(), loginUserId);\n                if (collect != null) {\n                    item.setCollectId(collect.getId());\n                }\n            }\n        }\n        return PageInfo.of(list);\n    }\n```\n\n```java\n@Select(\"select * from `collect` where item_id = #{itemId} and user_id = #{userId}\")\nCollect selectByItemIdAndUserId(@Param(\"itemId\") Integer itemId, @Param(\"userId\") Integer userId);\n\n```\n\n## 开发前端页面\n\n### ItemsViews.vue\n\n```vue\n\u003Ctemplate>\n  \u003Cdiv>\n    \u003Cdiv class=\"card\" style=\"margin-bottom: 10px; display: flex; align-items: center\">\n      \u003Cdiv style=\"flex: 1\">\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      \u003Cdiv>\n        \u003Cel-input clearable @clear=\"load\" @keyup.enter=\"load\" style=\"width: 300px\" v-model=\"data.name\" placeholder=\"请输入物品名称\">\u003C\u002Fel-input>\n        \u003Cel-button @click=\"load\" type=\"primary\" style=\"margin-left: 5px\">搜索\u003C\u002Fel-button>\n      \u003C\u002Fdiv>\n\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; display: flex; align-items: center; grid-gap: 10px\">\n               \u003Cdiv style=\"flex: 1; font-size: 20px; font-weight: 400\">物品：{{ item.name }}\u003C\u002Fdiv>\n               \u003Cel-button @click=\"addCollect(item.id)\" v-if=\"!item.collectId\" size=\"small\" type=\"warning\">收藏\u003C\u002Fel-button>\n               \u003Cel-button @click=\"removeCollect(item)\" v-else size=\"small\" type=\"info\">取消收藏\u003C\u002Fel-button>\n             \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 @click=\"handleCharge(item)\" 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\n    \u003Cel-dialog title=\"申请信息\" width=\"40%\" v-model=\"data.formVisible\" :close-on-click-modal=\"false\" destroy-on-close>\n      \u003Cel-form ref=\"formRef\" :model=\"data.form\" :rules=\"data.rules\" label-width=\"100px\" style=\"padding-right: 50px\">\n        \u003Cdiv style=\"padding-left: 30px; margin-bottom: 20px; color: #1890ff\">当前申请交换：\u003Cb>{{ data.form.itemName }}\u003C\u002Fb>\u003C\u002Fdiv>\n        \u003Cel-form-item label=\"交换物品\" prop=\"content\">\n          \u003Cel-input placeholder=\"请输入您提供的交换物品\" v-model=\"data.form.content\" autocomplete=\"off\" \u002F>\n        \u003C\u002Fel-form-item>\n        \u003Cel-form-item label=\"交换理由\" prop=\"remark\">\n          \u003Cel-input type=\"textarea\" :rows=\"3\" maxlength=\"200\" placeholder=\"请输入交换理由\" v-model=\"data.form.remark\" 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=\"saveCharge\">保 存\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 { reactive, ref } from \"vue\";\nimport request from \"@\u002Futils\u002Frequest\";\nimport {ElMessage} from \"element-plus\";\nimport router from \"@\u002Frouter\";\n\nconst formRef = ref()\nconst data = reactive({\n  user: JSON.parse(localStorage.getItem('system-user') || '{}'),\n  categoryList: [],\n  categoryId: null,  \u002F\u002F 当前选中的分类ID\n  name: router.currentRoute.value.query.name || null,\n  pageNum: 1,\n  pageSize: 10,\n  total: 0,\n  tableData: [],\n  form: {},\n  rules: {\n    content: [\n      { required: true, message: '请输入交换物品', trigger: 'blur' }\n    ],\n  }\n})\n\nconst addCollect = (itemId) => {\n  request.post('\u002Fcollect\u002Fadd', { itemId: itemId, userId: data.user.id }).then(res => {\n    if (res.code === '200') {\n      load()\n      ElMessage.success('操作成功')\n    } else {\n      ElMessage.error(res.msg)\n    }\n  })\n}\n\nconst removeCollect = (item) => {\n  request.delete('\u002Fcollect\u002Fdelete\u002F' + item.collectId).then(res => {\n    if (res.code === '200') {\n      load()\n      ElMessage.success('操作成功')\n    } else {\n      ElMessage.error(res.msg)\n    }\n  })\n}\n\nconst handleCharge = (item) => {\n  data.formVisible = true\n  data.form = { itemName: item.name, itemId: item.id, itemUserid: item.userId }\n}\n\nconst saveCharge = () => {\n  formRef.value.validate(valid => {\n    if (valid) {\n      data.form.userId = data.user.id\n      request.post('\u002Fcharge\u002Fadd', data.form).then(res => {\n        if (res.code === '200') {\n          load()\n          ElMessage.success('操作成功')\n          data.formVisible = false\n        } else {\n          ElMessage.error(res.msg)\n        }\n      })\n    }\n  })\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      name: data.name,\n      loginUserId: data.user.id,  \u002F\u002F 当前登录的用户ID\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\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>\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### Collect.vue\n\n```vue\n\u003Ctemplate>\n  \u003Cdiv>\n\n    \u003Cdiv class=\"card\" style=\"margin-bottom: 5px;\">\n      \u003Cel-input v-model=\"data.itemName\" style=\"width: 300px; margin-right: 10px\" placeholder=\"请输入物品名称查询\">\u003C\u002Fel-input>\n      \u003Cel-button type=\"primary\" @click=\"load\">查询\u003C\u002Fel-button>\n      \u003Cel-button type=\"info\" style=\"margin: 0 10px\" @click=\"reset\">重置\u003C\u002Fel-button>\n    \u003C\u002Fdiv>\n\n    \u003Cdiv class=\"card\" style=\"margin-bottom: 5px\">\n      \u003Cel-table :data=\"data.tableData\" stripe>\n        \u003Cel-table-column prop=\"itemName\" label=\"物品\">\u003C\u002Fel-table-column>\n        \u003Cel-table-column prop=\"userName\" label=\"收藏人\">\u003C\u002Fel-table-column>\n        \u003Cel-table-column prop=\"time\" label=\"时间\">\u003C\u002Fel-table-column>\n        \u003Cel-table-column label=\"操作\" align=\"center\" width=\"160\">\n          \u003Ctemplate #default=\"scope\">\n            \u003Cel-button type=\"danger\" @click=\"handleDelete(scope.row.id)\">删除\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 @current-change=\"load\" background 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\n  \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n\n\u003Cscript setup>\nimport request from \"@\u002Futils\u002Frequest\";\nimport {reactive, ref} from \"vue\";\nimport {ElMessageBox, ElMessage} from \"element-plus\";\n\nconst formRef = ref()\nconst data = reactive({\n  user: JSON.parse(localStorage.getItem('system-user') || '{}'),\n  pageNum: 1,\n  pageSize: 10,\n  total: 0,\n  formVisible: false,\n  form: {},\n  tableData: [],\n  itemName: null,\n})\n\n\u002F\u002F 分页查询\nconst load = () => {\n  request.get('\u002Fcollect\u002FselectPage', {\n    params: {\n      pageNum: data.pageNum,\n      pageSize: data.pageSize,\n      itemName: data.itemName\n    }\n  }).then(res => {\n    data.tableData = res.data?.list\n    data.total = res.data?.total\n  })\n}\n\n\u002F\u002F 新增\nconst handleAdd = () => {\n  data.form = {}\n  data.formVisible = true\n}\n\n\u002F\u002F 编辑\nconst handleEdit = (row) => {\n  data.form = JSON.parse(JSON.stringify(row))\n  data.formVisible = true\n}\n\n\u002F\u002F 新增保存\nconst add = () => {\n  request.post('\u002Fcollect\u002Fadd', data.form).then(res => {\n    if (res.code === '200') {\n      load()\n      ElMessage.success('操作成功')\n      data.formVisible = false\n    } else {\n      ElMessage.error(res.msg)\n    }\n  })\n}\n\n\u002F\u002F 编辑保存\nconst update = () => {\n  request.put('\u002Fcollect\u002Fupdate', data.form).then(res => {\n    if (res.code === '200') {\n      load()\n      ElMessage.success('操作成功')\n      data.formVisible = false\n    } else {\n      ElMessage.error(res.msg)\n    }\n  })\n}\n\n\u002F\u002F 弹窗保存\nconst save = () => {\n  formRef.value.validate(valid => {\n    if (valid) {\n      \u002F\u002F data.form有id就是更新，没有就是新增\n      data.form.id ? update() : add()\n    }\n  })\n}\n\n\u002F\u002F 删除\nconst handleDelete = (id) => {\n  ElMessageBox.confirm('删除后数据无法恢复，您确定删除吗?', '删除确认', { type: 'warning' }).then(res => {\n    request.delete('\u002Fcollect\u002Fdelete\u002F' + id).then(res => {\n      if (res.code === '200') {\n        load()\n        ElMessage.success('操作成功')\n      } else {\n        ElMessage.error(res.msg)\n      }\n    })\n  }).catch(err => {})\n}\n\n\u002F\u002F 重置\nconst reset = () => {\n  data.itemName = null\n  load()\n}\n\nload()\n\u003C\u002Fscript>\n```\n\n\n\n### UserCollect.vue\n\n```vue\n\u003Ctemplate>\n  \u003Cdiv>\n\n    \u003Cdiv class=\"card\" style=\"margin-bottom: 5px;\">\n      \u003Cel-input v-model=\"data.itemName\" style=\"width: 300px; margin-right: 10px\" placeholder=\"请输入物品名称查询\">\u003C\u002Fel-input>\n      \u003Cel-button type=\"primary\" @click=\"load\">查询\u003C\u002Fel-button>\n      \u003Cel-button type=\"info\" style=\"margin: 0 10px\" @click=\"reset\">重置\u003C\u002Fel-button>\n    \u003C\u002Fdiv>\n\n    \u003Cdiv class=\"card\" style=\"margin-bottom: 5px\">\n      \u003Cel-table :data=\"data.tableData\" stripe>\n        \u003Cel-table-column prop=\"itemName\" label=\"物品\">\n          \u003Ctemplate #default=\"scope\">\n            \u003Cspan @click=\"goToItem(scope.row.itemName)\" style=\"color: #1967e3; cursor: pointer\">{{ scope.row.itemName }}\u003C\u002Fspan>\n          \u003C\u002Ftemplate>\n        \u003C\u002Fel-table-column>\n        \u003Cel-table-column prop=\"userName\" label=\"收藏人\">\u003C\u002Fel-table-column>\n        \u003Cel-table-column prop=\"time\" label=\"时间\">\u003C\u002Fel-table-column>\n        \u003Cel-table-column label=\"操作\" align=\"center\" width=\"160\">\n          \u003Ctemplate #default=\"scope\">\n            \u003Cel-button type=\"danger\" @click=\"handleDelete(scope.row.id)\">删除\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 @current-change=\"load\" background 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\n  \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n\n\u003Cscript setup>\nimport request from \"@\u002Futils\u002Frequest\";\nimport {reactive, ref} from \"vue\";\nimport {ElMessageBox, ElMessage} from \"element-plus\";\nimport router from \"@\u002Frouter\";\n\nconst formRef = ref()\nconst data = reactive({\n  user: JSON.parse(localStorage.getItem('system-user') || '{}'),\n  pageNum: 1,\n  pageSize: 10,\n  total: 0,\n  formVisible: false,\n  form: {},\n  tableData: [],\n  itemName: null,\n})\n\nconst goToItem = (itemName) => {\n  router.push('\u002Fmanager\u002FitemsView?name=' + itemName)\n}\n\n\u002F\u002F 分页查询\nconst load = () => {\n  request.get('\u002Fcollect\u002FselectPage', {\n    params: {\n      pageNum: data.pageNum,\n      pageSize: data.pageSize,\n      itemName: data.itemName,\n      userId: data.user.id\n    }\n  }).then(res => {\n    data.tableData = res.data?.list\n    data.total = res.data?.total\n  })\n}\n\n\u002F\u002F 新增\nconst handleAdd = () => {\n  data.form = {}\n  data.formVisible = true\n}\n\n\u002F\u002F 编辑\nconst handleEdit = (row) => {\n  data.form = JSON.parse(JSON.stringify(row))\n  data.formVisible = true\n}\n\n\u002F\u002F 新增保存\nconst add = () => {\n  request.post('\u002Fcollect\u002Fadd', data.form).then(res => {\n    if (res.code === '200') {\n      load()\n      ElMessage.success('操作成功')\n      data.formVisible = false\n    } else {\n      ElMessage.error(res.msg)\n    }\n  })\n}\n\n\u002F\u002F 编辑保存\nconst update = () => {\n  request.put('\u002Fcollect\u002Fupdate', data.form).then(res => {\n    if (res.code === '200') {\n      load()\n      ElMessage.success('操作成功')\n      data.formVisible = false\n    } else {\n      ElMessage.error(res.msg)\n    }\n  })\n}\n\n\u002F\u002F 弹窗保存\nconst save = () => {\n  formRef.value.validate(valid => {\n    if (valid) {\n      \u002F\u002F data.form有id就是更新，没有就是新增\n      data.form.id ? update() : add()\n    }\n  })\n}\n\n\u002F\u002F 删除\nconst handleDelete = (id) => {\n  ElMessageBox.confirm('删除后数据无法恢复，您确定删除吗?', '删除确认', { type: 'warning' }).then(res => {\n    request.delete('\u002Fcollect\u002Fdelete\u002F' + id).then(res => {\n      if (res.code === '200') {\n        load()\n        ElMessage.success('操作成功')\n      } else {\n        ElMessage.error(res.msg)\n      }\n    })\n  }).catch(err => {})\n}\n\n\u002F\u002F 重置\nconst reset = () => {\n  data.itemName = null\n  load()\n}\n\nload()\n\u003C\u002Fscript>\n\n```\n\n","coding",1,285,2223,"2025-12-23 17:38:15","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,77,84,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":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},1107,"nGHKfpf4","08. 开发用户端物品展示功能",329,2162,"2025-12-15 17:27:07",{"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},1123,"A6caJxFd","09. 开发物品申请交换功能",322,2196,"2025-12-19 16:16:03",{"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":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"]