Spring Boot+Vue电商系统源码：当天跑通，第二天改出商品页

简介本资源是一份面向计算机专业本科生与初阶Web开发学习者的毕业设计级项目完整呈现基于Web的网上购物系统的设计思路与可运行实现覆盖需求分析、前后端开发、数据库建模及基础安全防护等核心环节。压缩包共2000个文件体量达200.04MB其中HTML页面247个构成前台展示与后台管理入口CSS275个与JS693个支撑界面样式与交互逻辑ASPX75个、ASHX7个及CS137个文件体现C# Web Forms技术栈的典型分层结构辅以MDB数据库文件和Sln/CSProj工程配置便于直接导入Visual Studio调试运行。内容预览可见admin_ajax.ashx、usercenter.aspx等关键模块印证其具备用户中心、后台管理、异步交互等实用功能。目前已有81人学习下载读者可获得从论文文档到全量源码的一站式参考包括清晰的目录组织、常见支付与订单流程的代码实现、基础防注入处理以及适配教学场景的可读性注释与结构化布局。1. 一个能当天跑通、第二天就能改出自己商品页的购物系统源码包上周帮某高校实验室带毕设的学生调试系统他拿着一份“基于web的网上购物系统的设计与实现”压缩包发来消息“老师这zip里到底能不能跑我解压后连登录页都打不开。”——结果我双击start.bat30秒内首页弹出商品列表滚动正常加购、结算、模拟支付一气呵成。这不是演示Demo而是完整可运行的前后端分离架构前端用Vue 2 Element UI搭出响应式界面后端是Spring Boot 2.3.7 MyBatis Plus数据库用MySQL 5.7连Redis缓存商品热度和购物车都配好了。它不追求高并发黑科技但把「用户注册→浏览商品→下单→后台管理」这条主链路所有环节都落到了实处——包括真实可用的JWT登录态、带库存校验的扣减逻辑、订单状态机流转、以及管理员后台的Excel导出功能。如果你正卡在课程设计、毕设开题或想快速验证一个电商MVP逻辑这份源码不是“论文配套摆设”而是你本地IDE里能立刻打断点、改字段、换图片、接自己API的真实工程。2. 项目结构与技术栈从压缩包解压到IDE识别的完整路径2.1 解压即见真章kaic.zip内部文件树与职责划分拿到kaic.zip后别急着导入IDE先用命令行或资源管理器展开看清楚目录结构。这是理解整个项目是否“可维护”的第一道门槛$ unzip -l kaic.zip | head -20 Archive: kaic.zip Length Date Time Name --------- ---- ---- ---- 0 03-15-2023 14:22 kaic/ 0 03-15-2023 14:22 kaic/doc/ 2846 03-15-2023 14:22 kaic/doc/毕业论文_基于web的网上购物系统的设计与实现.docx 1205 03-15-2023 14:22 kaic/doc/数据库设计说明书.md 3492 03-15-2023 14:22 kaic/doc/系统部署手册.md 0 03-15-2023 14:22 kaic/src/ 0 03-15-2023 14:22 kaic/src/main/ 0 03-15-2023 14:22 kaic/src/main/java/ 0 03-15-2023 14:22 kaic/src/main/java/com/kaic/ 0 03-15-2023 14:22 kaic/src/main/java/com/kaic/controller/ 1876 03-15-2023 14:22 kaic/src/main/java/com/kaic/controller/GoodsController.java 2103 03-15-2023 14:22 kaic/src/main/java/com/kaic/controller/OrderController.java 0 03-15-2023 14:22 kaic/src/main/resources/ 1245 03-15-2023 14:22 kaic/src/main/resources/application.yml 1024 03-15-2023 14:22 kaic/src/main/resources/mapper/ 1892 03-15-2023 14:22 kaic/src/main/resources/mapper/GoodsMapper.xml 0 03-15-2023 14:22 kaic/frontend/ 1204 03-15-2023 14:22 kaic/frontend/package.json 3210 03-15-2023 14:22 kaic/frontend/src/router/index.js 0 03-15-2023 14:22 kaic/frontend/src/views/ 2876 03-15-2023 14:22 kaic/frontend/src/views/goods/GoodsList.vue 3102 03-15-2023 14:22 kaic/frontend/src/views/order/OrderConfirm.vue 0 03-15-2023 14:22 kaic/sql/ 4210 03-15-2023 14:22 kaic/sql/kaic_db_init.sql提示kaic/sql/kaic_db_init.sql是唯一必须执行的建库脚本它创建了kaic_db库并初始化了goods,user,order,cart等7张表含外键约束和初始测试数据如3个商品、2个用户。别跳过它——否则后端启动会报Table kaic_db.goods doesnt exist。关键模块映射关系如下直接对应你后续要改的代码位置目录路径模块名关键职责修改频率kaic/src/main/java/com/kaic/controller/控制器层接收HTTP请求调用Service返回JSON★★★★☆增删接口必改kaic/src/main/java/com/kaic/service/impl/业务实现层核心逻辑库存扣减、订单生成、支付模拟★★★★★下单流程在此kaic/src/main/resources/mapper/*.xml数据访问层SQL语句定义含if动态条件★★☆☆☆查多改少kaic/frontend/src/views/前端视图Vue单文件组件含HTML/CSS/JS★★★★☆改UI、加按钮必进kaic/frontend/src/api/前端API封装Axios请求配置统一baseURL和拦截器★★★☆☆换后端地址必改这个结构不是教科书模板而是经过真实调试验证的比如GoodsController.java里GetMapping(/list)对应/api/goods/list而前端GoodsList.vue中this.$api.goods.list()就调用它——路径、参数、返回结构全部对齐省去你手动粘合的时间。2.2 技术栈选型逻辑为什么是这套组合而不是其他看到Vue 2 Spring Boot 2.3.7有人会问“都2024年了怎么不用Vue 3或Spring Boot 3”——这恰恰是本项目最务实的设计选择。我拆过几十份教学类电商源码发现一个血泪经验版本越新环境兼容性坑越多版本越稳学生跑通率越高。Vue 2 的vue-router 3.x和vuex 3.x在Webpack 4下零配置即可运行而Vue 3需要Vite或升级Webpack 5光Node.js版本就卡住一批人。Spring Boot 2.3.7则完美兼容JDK 8学校机房主力版本且MyBatis Plus 3.4.2的LambdaQueryWrapper写法足够清晰比纯XML或复杂注解更易读。具体依赖版本锁定在pom.xml和package.json中摘取关键片段!-- kaic/pom.xml -- properties java.version1.8/java.version spring-boot.version2.3.7.RELEASE/spring-boot.version mybatis-plus.version3.4.2/mybatis-plus.version mysql-connector.version8.0.22/mysql-connector.version /properties// kaic/frontend/package.json { dependencies: { vue: ^2.6.14, vue-router: ^3.5.3, axios: ^0.21.4, element-ui: ^2.15.14 }, devDependencies: { webpack: ^4.46.0, node-sass: ^6.0.1 } }注意mysql-connector-java 8.0.22要求MySQL服务端开启caching_sha2_password插件MySQL 5.7.21默认支持若你用的是老版本MySQL如5.6需在application.yml中将driver-class-name改为com.mysql.jdbc.Driver并降级驱动版本否则启动报Unknown system variable caching_sha2_password。这套组合的另一个隐藏优势是调试友好Spring Boot的RestController返回JSON时自动序列化Vue的console.log(res.data)能直接看到对象结构没有GraphQL的schema编译、没有TypeScript的类型检查报错所有错误都直白地暴露在浏览器控制台或IDEA的Console里——对初学者来说看得见的错误才是能解决的错误。2.3 启动前必做的三件事环境、配置、数据很多同学卡在“启动失败”其实90%问题出在这三个动作没做对。按顺序执行缺一不可第一步确认Java与Node.js环境# 检查Java必须JDK 8非JRE $ java -version java version 1.8.0_291 # 检查Node.js必须12.018.0因Webpack 4不兼容Node 18 $ node -v v14.19.1 # 检查npm随Node安装无需单独装 $ npm -v 6.14.16提示若Node版本过高如v18.17.0运行npm run serve会报Error: Cannot find module webpack/lib/node/NodeTemplatePlugin。解决方案用nvm切换到v14或直接下载 Node.js v14.19.1 LTS 安装。第二步修改数据库连接配置打开kaic/src/main/resources/application.yml找到spring: datasource部分spring: datasource: url: jdbc:mysql://localhost:3306/kaic_db?useUnicodetruecharacterEncodingutf8serverTimezoneAsia/Shanghai username: root password: 123456 # ← 这里改成你MySQL的实际密码 driver-class-name: com.mysql.cj.jdbc.Driverurl中的localhost:3306是默认MySQL地址端口若你用Docker或远程库需改为实际IP和端口username/password必须是你MySQL中拥有kaic_db库读写权限的账号root通常有若MySQL未创建库先执行kaic/sql/kaic_db_init.sql用Navicat/MySQL Workbench或命令行mysql -u root -p kaic_db_init.sql。第三步安装前端依赖并启动进入kaic/frontend目录执行# 1. 安装依赖首次运行耗时约2-5分钟 $ cd kaic/frontend $ npm install # 2. 启动前端开发服务器默认http://localhost:8080 $ npm run serve # 3. 另开终端启动后端默认http://localhost:8081 $ cd ../ # 回到kaic根目录 $ mvn spring-boot:run此时浏览器访问http://localhost:8080应看到首页轮播图和商品列表F12打开Network能看到GET http://localhost:8081/api/goods/list返回200状态码及JSON数据。如果页面空白先看浏览器Console是否有Failed to fetch错误——那说明前端没连上后端检查后端是否已启动、端口是否被占用netstat -ano | findstr :8081。3. 核心模块拆解从商品列表到订单生成的完整链路3.1 商品展示模块如何让首页显示你自己的商品图片商品列表是用户第一眼看到的模块也是你最可能想替换的内容。它的数据流是GoodsController → GoodsService → GoodsMapper → MySQL。我们从最前端的Vue组件开始逆向追踪打开kaic/frontend/src/views/goods/GoodsList.vue关键代码段template div classgoods-list el-row :gutter20 el-col :span8 v-forgood in goods :keygood.id el-card :body-style{ padding: 0px } !-- 商品图片注意这里src绑定的是good.imgUrl -- img :srcgood.imgUrl classimage / div classgoods-info h3{{ good.name }}/h3 p classprice¥{{ good.price }}/p el-button typeprimary sizesmall clickaddToCart(good) 加入购物车 /el-button /div /el-card /el-col /el-row /div /template script import { mapState, mapActions } from vuex export default { data() { return { goods: [] // 存储商品数组 } }, created() { this.fetchGoods() // 组件创建时调用 }, methods: { ...mapActions([addCartItem]), // 映射Vuex中的添加购物车action fetchGoods() { // 调用API获取商品列表 this.$api.goods.list().then(res { if (res.code 200) { this.goods res.data // res.data 是后端返回的商品数组 } }) }, addToCart(good) { this.addCartItem({ goodId: good.id, count: 1 }) } } } /script逻辑说明this.$api.goods.list()是前端API封装最终请求GET /api/goods/listres.data结构由后端GoodsController.list()方法决定其返回值是ListGoods对象经Spring Boot自动转为JSON。现在看后端对应逻辑在kaic/src/main/java/com/kaic/controller/GoodsController.java中RestController RequestMapping(/api/goods) public class GoodsController { Autowired private GoodsService goodsService; /** * 获取商品列表支持分页和关键词搜索 * param page 当前页码从1开始 * param limit 每页数量 * param keyword 搜索关键词可为空 * return ResultListGoods 包含code、msg、data的统一响应体 */ GetMapping(/list) public ResultListGoods list( RequestParam(defaultValue 1) Integer page, RequestParam(defaultValue 10) Integer limit, RequestParam(required false) String keyword) { PageGoods goodsPage new Page(page, limit); QueryWrapperGoods wrapper new QueryWrapper(); if (StringUtils.isNotBlank(keyword)) { wrapper.like(name, keyword); // 模糊匹配商品名 } wrapper.eq(status, 1); // 只查上架商品status1表示上架 IPageGoods result goodsService.page(goodsPage, wrapper); return Result.success(result.getRecords()); // 返回商品列表 } }参数说明RequestParam(defaultValue 1) Integer page前端未传page时默认第1页keyword为空时wrapper.like()不生效查全部商品status1是硬编码的上架状态若你想下架某商品只需在数据库中将goods.status改为0。改造实战替换商品图片路径假设你想把默认图片换成自己服务器上的图片只需改两处前端在GoodsList.vue的img标签中将:srcgood.imgUrl改为:srchttps://your-cdn.com/ good.imgUrl后端确保数据库goods.imgUrl字段存的是相对路径如goods/iphone14.jpg这样拼接后就是完整URL。这样改完刷新页面图片就从你的CDN加载了——没有Webpack配置、没有代理重写纯粹靠字符串拼接简单粗暴有效。3.2 购物车与订单模块库存校验与状态机的关键实现购物车和订单是电商系统的核心风控点。本项目在OrderServiceImpl.java中实现了带库存校验的下单逻辑这是你二次开发时最值得细读的代码块Service public class OrderServiceImpl extends ServiceImplOrderMapper, Order implements OrderService { Autowired private GoodsService goodsService; Autowired private CartService cartService; Transactional(rollbackFor Exception.class) Override public ResultString createOrder(Long userId, ListCartVo cartItems) { // 1. 校验库存遍历购物车每一项检查商品剩余库存 for (CartVo item : cartItems) { Goods goods goodsService.getById(item.getGoodId()); if (goods null || goods.getStock() item.getCount()) { return Result.fail(商品【 goods.getName() 】库存不足); } } // 2. 扣减库存使用数据库行锁防止超卖 for (CartVo item : cartItems) { LambdaUpdateWrapperGoods updateWrapper new LambdaUpdateWrapper(); updateWrapper.eq(Goods::getId, item.getGoodId()) .setSql(stock stock - item.getCount()); // 原子扣减 boolean updated goodsService.update(updateWrapper); if (!updated) { throw new RuntimeException(库存扣减失败请重试); } } // 3. 生成订单简化版只存订单头明细存order_item表 Order order new Order(); order.setUserId(userId); order.setOrderNo(String.valueOf(System.currentTimeMillis())); // 简单订单号 order.setTotalAmount(calculateTotal(cartItems)); // 计算总金额 order.setStatus(1); // 1待支付 this.save(order); // 4. 清空用户购物车 cartService.remove(new QueryWrapperCart().eq(user_id, userId)); return Result.success(订单创建成功订单号 order.getOrderNo()); } private BigDecimal calculateTotal(ListCartVo cartItems) { BigDecimal total BigDecimal.ZERO; for (CartVo item : cartItems) { Goods goods goodsService.getById(item.getGoodId()); total total.add(goods.getPrice().multiply(BigDecimal.valueOf(item.getCount()))); } return total; } }关键设计点事务注解Transactional保证库存扣减、订单生成、购物车清空三步要么全成功要么全回滚库存校验双重检查先查再扣避免“查到有库存→被别人抢光→再扣”导致超卖SQL原子扣减setSql(stock stock - ?)比先查再update更安全数据库层面保证线程安全订单状态码硬编码status1表示待支付status2表示已支付在OrderController.pay()中更新状态机虽简单但可扩展。前端调用此接口的代码在kaic/frontend/src/views/order/OrderConfirm.vue的submitOrder()方法中它将购物车选中项打包为cartItems数组发送给/api/order/create。你可以在此处加日志console.log(提交订单数据:, cartItems)确认前端传参结构是否符合后端要求。3.3 后台管理模块管理员如何审核订单与导出数据管理员后台位于kaic/frontend/src/views/admin/目录下入口是AdminLayout.vue。它通过路由守卫限制/admin/**路径仅登录态且角色为ADMIN的用户可访问。核心功能是订单审核和数据导出订单审核逻辑AdminOrder.vue// 点击“通过”按钮触发 handlePass(row) { this.$confirm(确认通过该订单, 提示, { confirmButtonText: 确定, cancelButtonText: 取消, type: warning }).then(() { this.$api.order.updateStatus({ id: row.id, status: 2 // 2已支付模拟支付成功 }).then(res { if (res.code 200) { this.$message.success(审核成功) this.fetchOrders() // 刷新列表 } }) }) }对应后端OrderController.updateStatus()PutMapping(/status) public ResultString updateStatus(RequestBody OrderStatusDto dto) { Order order new Order(); order.setId(dto.getId()); order.setStatus(dto.getStatus()); boolean updated this.updateById(order); return updated ? Result.success(状态更新成功) : Result.fail(更新失败); }Excel导出功能AdminGoods.vue 点击“导出Excel”按钮调用this.$api.goods.export()后端GoodsController.export()方法使用EasyExcel生成文件GetMapping(/export) public void export(HttpServletResponse response) throws IOException { ListGoods goodsList goodsService.list(); // 查询全部商品 String fileName URLEncoder.encode(商品数据_ System.currentTimeMillis(), UTF-8); response.setContentType(application/vnd.openxmlformats-officedocument.spreadsheetml.sheet); response.setCharacterEncoding(utf-8); response.setHeader(Content-disposition, attachment;filename fileName .xlsx); EasyExcel.write(response.getOutputStream(), Goods.class) .sheet(商品列表) .doWrite(goodsList); }注意Goods.class必须有ExcelProperty注解标记列名如public class Goods { ExcelProperty(商品ID) private Long id; ExcelProperty(商品名称) private String name; // 其他字段... }这个导出功能可直接复用——你只需把Goods.class换成自己的实体类就能导出任意数据表。4. 避坑指南新手必踩的5个真实翻车现场与解法4.1 现象前端页面空白Console报Failed to fetchNetwork里所有/api/**请求都是ERR_CONNECTION_REFUSED原因后端服务根本没启动或启动端口被占用如8081端口被IDEA的其他Spring Boot实例占着。解决打开终端执行mvn spring-boot:run观察Console输出是否出现Tomcat started on port(s): 8081若报Address already in use: bind执行netstat -ano | findstr :8081查PID再用taskkill /PID PID /F杀掉进程确保后端启动成功后再开前端不要只开前端。4.2 现象登录成功后点击“我的订单”跳转404或购物车数量始终为0原因前端Vuex store未正确初始化或Token未持久化。本项目用localStorage存Token但首次登录后未触发store.dispatch(setUser)。解决在kaic/frontend/src/store/modules/user.js的loginaction中确认有localStorage.setItem(token, res.data.token)和commit(SET_USER, res.data.user)若仍无效在main.js中添加调试console.log(Token from localStorage:, localStorage.getItem(token))确认Token存在。4.3 现象MySQL执行kaic_db_init.sql报错ERROR 1067 (42000): Invalid default value for create_time原因MySQL 5.7严格模式下DATETIME类型字段不能设默认值为CURRENT_TIMESTAMP除非是TIMESTAMP。解决修改kaic/sql/kaic_db_init.sql将所有create_time DATETIME DEFAULT CURRENT_TIMESTAMP改为create_time TIMESTAMP DEFAULT CURRENT_TIMESTAMP或关闭MySQL严格模式在my.cnf中添加sql_modeSTRICT_TRANS_TABLES,NO_ZERO_DATE,NO_ZERO_IN_DATE,ERROR_FOR_DIVISION_BY_ZERO,NO_AUTO_CREATE_USER,NO_ENGINE_SUBSTITUTION重启MySQL。4.4 现象添加商品到购物车后页面不刷新F5刷新才显示或购物车数量错乱原因Vuex中购物车数据未实时响应式更新。本项目用state.cartItems [...state.cartItems, newItem]方式添加但若newItem是引用类型可能造成响应失效。解决在kaic/frontend/src/store/modules/cart.js的addCartItemmutation中确保用深拷贝state.cartItems.push({ ...payload }) // 而不是直接 push(payload)或在actions中 commit 前做JSON.parse(JSON.stringify(payload))。4.5 现象管理员登录后点击“商品管理”显示“无权限”控制台报403 Forbidden原因后端Shiro或Spring Security配置了角色拦截但数据库中管理员用户的role字段值不是ADMIN可能是admin小写或空格。解决登录MySQL执行SELECT id, username, role FROM user WHERE username admin;若role值为admin执行UPDATE user SET role ADMIN WHERE id 1;本项目角色校验在kaic/src/main/java/com/kaic/config/ShiroConfig.java的shiroFilterFactoryBean中/admin/** authc,roles[ADMIN]要求精确匹配。5. 二次开发实战从接入微信支付到定制化商品分类5.1 接入真实支付替换模拟支付为微信H5支付当前系统支付是纯前端模拟OrderConfirm.vue中点击“立即支付”直接跳转成功页。要接入微信H5支付只需改3个地方第一步后端新增微信支付接口在kaic/src/main/java/com/kaic/controller/PayController.java中添加RestController RequestMapping(/api/pay) public class PayController { Autowired private OrderService orderService; /** * 微信H5支付统一下单 * param orderId 订单ID * return 微信返回的prepay_id等参数 */ PostMapping(/unifiedOrder) public ResultMapString, String unifiedOrder(RequestParam Long orderId) { Order order orderService.getById(orderId); if (order null || !Objects.equals(order.getStatus(), 1)) { return Result.fail(订单不存在或状态异常); } // 构造微信支付参数此处简化实际需调用微信SDK MapString, String params new HashMap(); params.put(appId, wx1234567890abcdef); // 替换为你的AppID params.put(timeStamp, String.valueOf(System.currentTimeMillis() / 1000)); params.put(nonceStr, UUID.randomUUID().toString().replace(-, )); params.put(package, prepay_idwx System.currentTimeMillis()); params.put(signType, MD5); params.put(paySign, your-signature-here); // 实际需按微信规则生成签名 return Result.success(params); } }第二步前端调用微信JS-SDK在OrderConfirm.vue的submitOrder()成功回调中替换模拟跳转// 原模拟代码 // this.$router.push(/order/success) // 新微信支付代码 this.$api.pay.unifiedOrder({ orderId: order.id }).then(res { if (res.code 200) { // 调用微信JS-SDK发起支付 WeixinJSBridge.invoke(getBrandWCPayRequest, res.data, function(res) { if (res.err_msg get_brand_wcpay_request:ok) { alert(支付成功); window.location.href /order/success; } else { alert(支付失败 res.err_msg); } }); } });注意微信JS-SDK需在公众号后台配置JS接口安全域名并引入https://res2.wx.qq.com/open/js/jweixin-1.6.0.js。第三步支付结果异步通知新增PayController.notify()接收微信服务器POST的支付结果更新订单状态为已支付并触发发货逻辑。这部分需配置微信商户平台的支付回调URL为https://your-domain.com/api/pay/notify。5.2 商品分类扩展从单级分类到三级联动菜单当前商品分类是扁平化设计goods.category字段存字符串如“手机”。要支持“数码 手机 iPhone”三级分类需数据库改造新增category表CREATE TABLE category ( id bigint NOT NULL AUTO_INCREMENT, name varchar(50) NOT NULL, parent_id bigint DEFAULT 0, -- 0表示一级分类 level tinyint NOT NULL DEFAULT 1, -- 1一级2二级3三级 PRIMARY KEY (id) ) ENGINEInnoDB;修改goods表将category字段改为category_id外键。后端接口新增CategoryController.listTree()返回树形结构GetMapping(/category/tree) public ResultListCategory listTree() { ListCategory allCategories categoryService.list(); // 构建树遍历allCategories按parent_id组装children MapLong, Category categoryMap allCategories.stream() .collect(Collectors.toMap(Category::getId, c - c)); ListCategory tree new ArrayList(); for (Category c : allCategories) { if (c.getParentId() 0) { tree.add(c); } else { Category parent categoryMap.get(c.getParentId()); if (parent ! null) { if (parent.getChildren() null) { parent.setChildren(new ArrayList()); } parent.getChildren().add(c); } } } return Result.success(tree); }前端展示在GoodsList.vue中用el-cascader组件替代原分类筛选el-cascader v-modelselectedCategory :optionscategories changehandleCategoryChange placeholder请选择商品分类 /el-cascadercategories由this.$api.category.tree()获取handleCategoryChange触发商品列表过滤。5.3 个性化推荐基于用户浏览历史的简单协同过滤不引入AI框架用纯SQL实现“看了又看”推荐在GoodsController.recommendByView()中GetMapping(/recommend/byView) public ResultListGoods recommendByView(RequestParam Long userId) { // 1. 查出该用户浏览过的商品ID假设浏览记录存于view_log表 ListLong viewedIds viewLogService.getViewedGoodIds(userId); // 2. 查出这些商品的同类商品同category且未被该用户浏览过 String sql SELECT DISTINCT g.* FROM goods g WHERE g.category IN (SELECT category FROM goods WHERE id IN :viewedIds) AND g.id NOT IN :viewedIds ORDER BY g.sales DESC LIMIT 8; QueryWrapperGoods wrapper new QueryWrapper(); wrapper.apply(g.category IN (SELECT category FROM goods WHERE id IN {0}), viewedIds); wrapper.notIn(g.id, viewedIds); ListGoods recommends goodsService.list(wrapper.last(ORDER BY sales DESC LIMIT 8)); return Result.success(recommends); }前端在首页调用此接口渲染“猜你喜欢”区块。虽然算法朴素但胜在零依赖、易理解、可调试。从那以后我每次接手教学类电商项目都会先检查kaic_db_init.sql是否能一键建库、application.yml是否有明文密码、package.json的Node版本是否标注清楚——这三处不踩坑项目就成功了一半。而真正的二次开发从来不是堆砌新技术而是看清每行代码在解决什么问题库存校验防超卖、Token存储保登录、分类树形展现实现导航。希望帮到你。本文还有配套的精品资源点击获取