[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"article-public-z8IN0tX8":3,"public-project-articles-z8IN0tX8":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},1065,"z8IN0tX8",52,"13. 带你实现购物车功能","## SQL\n\n```sql\nCREATE TABLE `cart` (\n  `id` int NOT NULL AUTO_INCREMENT COMMENT '主键ID',\n  `goods_id` int DEFAULT NULL COMMENT '商品ID',\n  `num` int DEFAULT NULL COMMENT '数量',\n  `user_id` int DEFAULT NULL COMMENT '用户ID',\n  PRIMARY KEY (`id`)\n) ENGINE=InnoDB AUTO_INCREMENT=1 DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci COMMENT='购物车信息';\n```\n\n## 开发后端接口\n\nCart.java\n\n```java\npackage com.example.entity;\n\nimport java.math.BigDecimal;\n\npublic class Cart {\n\n    \u002F**主键ID *\u002F\n    private Integer id;\n    \u002F**商品ID *\u002F\n    private Integer goodsId;\n    private String goodsName;\n    private String goodsImg;\n    private BigDecimal goodsPrice;\n    \u002F**数量 *\u002F\n    private Integer num;\n    \u002F**用户ID *\u002F\n    private Integer userId;\n\n    public BigDecimal getGoodsPrice() {\n        return goodsPrice;\n    }\n\n    public void setGoodsPrice(BigDecimal goodsPrice) {\n        this.goodsPrice = goodsPrice;\n    }\n\n    public String getGoodsImg() {\n        return goodsImg;\n    }\n\n    public void setGoodsImg(String goodsImg) {\n        this.goodsImg = goodsImg;\n    }\n\n    public String getGoodsName() {\n        return goodsName;\n    }\n\n    public void setGoodsName(String goodsName) {\n        this.goodsName = goodsName;\n    }\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 getGoodsId() {\n        return goodsId;\n    }\n\n    public void setGoodsId(Integer goodsId) {\n        this.goodsId = goodsId;\n    }\n\n    public Integer getNum() {\n        return num;\n    }\n\n    public void setNum(Integer num) {\n        this.num = num;\n    }\n\n    public Integer getUserId() {\n        return userId;\n    }\n\n    public void setUserId(Integer userId) {\n        this.userId = userId;\n    }\n}\n\n```\n\n\n\nCartMapper.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.CartMapper\">\n\n    \u003Cselect id=\"selectAll\" resultType=\"com.example.entity.Cart\">\n        select cart.*, goods.name as goodsName, goods.img as goodsImg, goods.price as goodsPrice from `cart`\n        left join goods on cart.goods_id = goods.id\n        \u003Cwhere>\n            \u003Cif test=\"userId != null\"> and cart.user_id = #{userId}\u003C\u002Fif>\n        \u003C\u002Fwhere>\n        order by cart.id desc\n    \u003C\u002Fselect>\n\n    \u003Cselect id=\"selectById\" resultType=\"com.example.entity.Cart\">\n        select * from `cart` where id = #{id}\n    \u003C\u002Fselect>\n\n    \u003Cdelete id=\"deleteById\">\n        delete from `cart` where id = #{id}\n    \u003C\u002Fdelete>\n\n    \u003Cinsert id=\"insert\" parameterType=\"com.example.entity.Cart\" useGeneratedKeys=\"true\">\n        insert into `cart`\n        \u003Ctrim prefix=\"(\" suffix=\")\" suffixOverrides=\",\">\n            \u003Cif test=\"id != null\">id,\u003C\u002Fif>\n            \u003Cif test=\"goodsId != null\">goods_id,\u003C\u002Fif>\n            \u003Cif test=\"num != null\">num,\u003C\u002Fif>\n            \u003Cif test=\"userId != null\">user_id,\u003C\u002Fif>\n        \u003C\u002Ftrim>\n        values\n        \u003Ctrim prefix=\"(\" suffix=\")\" suffixOverrides=\",\">\n            \u003Cif test=\"id != null\">#{id},\u003C\u002Fif>\n            \u003Cif test=\"goodsId != null\">#{goodsId},\u003C\u002Fif>\n            \u003Cif test=\"num != null\">#{num},\u003C\u002Fif>\n            \u003Cif test=\"userId != null\">#{userId},\u003C\u002Fif>\n        \u003C\u002Ftrim>\n    \u003C\u002Finsert>\n\n    \u003Cupdate id=\"updateById\" parameterType=\"com.example.entity.Cart\">\n        update `cart`\n        \u003Cset>\n            \u003Cif test=\"id != null\">\n                id = #{id},\n            \u003C\u002Fif>\n            \u003Cif test=\"goodsId != null\">\n                goods_id = #{goodsId},\n            \u003C\u002Fif>\n            \u003Cif test=\"num != null\">\n                num = #{num},\n            \u003C\u002Fif>\n            \u003Cif test=\"userId != null\">\n                user_id = #{userId},\n            \u003C\u002Fif>\n        \u003C\u002Fset>\n        where id = #{id}\n    \u003C\u002Fupdate>\n\n\u003C\u002Fmapper>\n```\n\n## 详情页 addCart\n\n```vue\nconst addCart = () => {\n  request.post('\u002Fcart\u002Fadd', { goodsId: data.id, num: data.num, userId: data.user.id }).then(res => {\n    if (res.code === '200') {\n      ElMessage.success('加入购物车成功')\n    } else {\n      ElMessage.error(res.msg)\n    }\n  })\n}\n```\n\n## 删除或者下架商品需要删除对应购物车的商品 \n\n```java\n\u002F**\n * 删除\n *\u002F\n@Transactional\npublic void deleteById(Integer id) {\n    goodsMapper.deleteById(id);\n    \u002F\u002F 删除购物车的对应的商品\n    cartMapper.deleteByGoodsId(id);\n}\n\n\u002F**\n * 修改\n *\u002F\npublic void updateById(Goods goods) {\n    goodsMapper.updateById(goods);\n    if (goods.getStatus().equals(\"下架\")) {\n        \u002F\u002F 删除购物车的对应的商品\n        cartMapper.deleteByGoodsId(goods.getId());\n    }\n}\n```\n\n## 前端页面\n\nCart.vue\n\n```vue\n\u003Ctemplate>\n  \u003Cdiv class=\"front-container\">\n    \u003Cdiv class=\"card\" style=\"padding: 20px\">\n      \u003Cdiv>\n        \u003Cel-table :data=\"data.tableData\" stripe @selection-change=\"handleSelectionChange\">\n          \u003Cel-table-column type=\"selection\" width=\"55\" \u002F>\n          \u003Cel-table-column label=\"商品图片\">\n            \u003Ctemplate #default=\"scope\">\n              \u003Cimg style=\"width: 50px; height: 50px; display: block\" :src=\"scope.row.goodsImg\" alt=\"\">\n            \u003C\u002Ftemplate>\n          \u003C\u002Fel-table-column>\n          \u003Cel-table-column label=\"商品名称\" prop=\"goodsName\">\u003C\u002Fel-table-column>\n          \u003Cel-table-column label=\"商品单价\">\n            \u003Ctemplate #default=\"scope\">\n              \u003Cb style=\"color: red\">￥{{ scope.row.goodsPrice }}\u003C\u002Fb>\n            \u003C\u002Ftemplate>\n          \u003C\u002Fel-table-column>\n          \u003Cel-table-column label=\"商品数量\">\n            \u003Ctemplate #default=\"scope\">\n              \u003Cel-input-number @change=\"calTotal\" v-model=\"scope.row.num\" :min=\"1\" style=\"width: 150px\">\u003C\u002Fel-input-number>\n            \u003C\u002Ftemplate>\n          \u003C\u002Fel-table-column>\n          \u003Cel-table-column label=\"操作\" align=\"center\" width=\"100\">\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      \u003Cdiv style=\"text-align: right; margin-top: 20px; font-size: 20px\">总价格：\n        \u003Cb style=\"color: red; display: inline-block; min-width: 60px; text-align: left\">{{ data.total }} 元\u003C\u002Fb>\n        \u003Cdiv style=\"margin-top: 10px\">\u003Cel-button @click=\"addOrder\" type=\"danger\">立即下单\u003C\u002Fel-button>\u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n\n\n\n    \u003Cel-dialog title=\"下单信息\" width=\"30%\" 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=\"80px\" style=\"padding-right: 30px; padding-top: 20px\">\n        \u003Cel-form-item label=\"名称\" prop=\"name\">\n          \u003Cel-input v-model=\"data.form.name\" 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=\"save\">保 存\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, 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  total: 0,\n  formVisible: false,\n  form: {},\n  tableData: [],\n  selectedRows: [],\n  rules: {\n    name: [\n      { required: true, message: '请输入名称', trigger: 'blur' },\n    ]\n  }\n})\n\nconst calTotal = () => {\n  data.total = 0\n  \u002F\u002F rows是选中行\n  data.selectedRows.forEach(item => {\n    data.total += item.goodsPrice * item.num\n  })\n  if (data.total > 0) {\n    data.total = data.total.toFixed(2)\n  }\n}\n\nconst handleSelectionChange = (rows) => {\n  data.selectedRows = rows\n  calTotal()\n}\n\n\u002F\u002F 分页查询\nconst load = () => {\n  request.get('\u002Fcart\u002FselectAll', {\n    params: {\n      userId: data.user.id\n    }\n  }).then(res => {\n    data.tableData = res.data\n  })\n}\nload()\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('\u002Fcart\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('\u002Fcart\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('\u002Fcart\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.name = null\n  load()\n}\n\u003C\u002Fscript>\n```\n\n## 我们只查询上架的商品\n\n![](https:\u002F\u002Fcdn.nlark.com\u002Fyuque\u002F0\u002F2025\u002Fpng\u002F751015\u002F1764580004055-aa4d0532-0ca8-464a-abac-aba57d623da5.png)\n\n","coding",1,2461,2078,"2025-12-01 17:16:05","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,90,97,104,111,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. 带小白做毕设课程介绍以及脚手架获取",32065,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":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},1045,"p6yD8ZxS","09. 带你实现商品搜索、商品分类检索功能",3005,2048,"2025-11-25 16:35:45",{"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},1050,"7gHUek7z","10. 带你实现商品详情页功能",2622,2053,"2025-11-26 17:22:20",{"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},1059,"aX7rviTw","11. 带你实现商品收藏功能",2667,2067,"2025-11-28 17:00:21",{"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},1060,"xcmGXr9E","12. 带你开发用户模拟充值功能",2443,2068,"2026-02-02 14:24:37",{"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},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"]