尧图网站建设 
简介基于微信小程序的校园二手物品交易平台设计源码是一套适合课程设计、毕业设计及小程序开发进阶的前后端完整项目。系统以Java和JavaScript为主要开发语言基于微信小程序构建用户端界面并通过HTML、CSS完成页面布局与视觉呈现整体采用模块化设计便于二次开发与功能迭代。压缩包共包含398个文件大小18.57MB其中82个Java文件实现后端服务59个JS文件处理交互逻辑28个WXML/WXSS/JSON文件构成小程序页面结构、样式与配置另有大量GIF演示图、HTML页面及样式资源可帮助快速了解界面效果与运行方式。该项目已有412人学习下载读者可获得包含前后端代码、SQL脚本及静态资源在内的完整源码对理解校园二手交易场景下的用户发布、信息检索、登录管理等功能设计有直接参考价值也适合作为入门移动端全栈开发的项目范例。1. 校园二手交易小程序这套源码解决的不只是“发商品”很多同学找我聊校园二手需求时第一句话都是“我想搭一个微信小程序源码级别的二手交易平台”。真做起来才发现难点根本不在页面而在后端接口和商品状态流转从在售到已预订、再到已售出每一步都牵扯到数据一致性。这套基于微信小程序的校园二手物品交易平台设计源码用 Java 写后端、JavaScript 写小程序端逻辑共 399 个文件、含 82 个 Java 文件交付的是一套可以直接导入微信开发者工具和 IDEA 的完整工程不是那种只能看不能跑的演示页。适合三类人拿它做 Java 课程设计或毕设的学生、想给校园社团快速搭交易平台的技术负责人以及想系统学小程序加 Java 前后端协作的开发者。2. 技术栈与工程结构先看懂模块边界再动手2.1 选型理由为什么是“小程序 Java”而不是纯 Web校园二手交易的使用场景集中在微信里买家看到同学转发的小程序卡片点进来就能用比让用户装一个 App 或者打开浏览器输入网址都要顺。小程序端天然带了微信登录体系虽然源码里也可以用账号密码登录但微信授权登录对校园用户来说几乎零学习成本。后端选 Java 并不是因为它比别的语言高级而是因为校园项目里课程设计、毕设答辩普遍认 Java 这套技术栈代码分层清晰、资料多、出问题容易搜。这套源码的 Java 端是典型的 Controller-Service-Mapper 三层组织不管底层用的 Spring Boot 还是 SSM分层思路是通用的。模块化的好处在二次开发时体现得很明显改商品发布逻辑不用碰用户模块加一个积分功能也不影响交易主链路。2.2 399 个文件拆解前后端资源与目录分工从文件数量看82 个 Java 文件占大头说明后端业务不是空壳75 个 GIF 文件最初让我有点意外点开之后发现大部分是用在空状态、加载动画和引导页上的素材。Java 文件集中在后端业务的 Controller、Service、Mapper 和实体类里GIF 素材则分布在小程序端和后台管理页。文件类型数量参考对应模块Java 文件82后端接口、业务逻辑、数据访问GIF 文件75小程序引导图、加载动画、空状态JS / CSS 文件数十个小程序页面逻辑、后台管理页面样式HTML 文件若干后台管理端页面XML / properties少量配置文件、MyBatis 映射比较关键的是项目正文里出现的 layui.css、layer.css、laydate.css、login.css 这几个文件。layui 是典型的后台管理端 UI 框架说明这个系统不只是有小程序端还带了一个 Web 管理后台用于管理员审核商品、管理用户、查看订单。login.css 对应后台登录页laydate.css 是日期选择器常用于统计和订单筛选。还有 iconfont.eot 字体文件和 code.css 代码高亮样式这些都是后台页面的配套资源。2.3 从资源文件反推后台管理端登录、审核、统计如果你拿到源码第一时间不知道该从哪看起我的习惯是先找后台管理入口。看到这些 CSS 文件就能判断后台登录页、商品审核列表和用户管理页面都应该存在。一般这种校园二手平台的管理后台至少包含三个功能商品审核用户发布商品后管理员确认是否符合校园交易规则用户管理处理违规账号、查看用户信用记录订单与统计查看成交记录按学院或分类统计交易热度这套源码里后台管理端的页面是用传统 HTML 加 layui 渲染的数据通过 Ajax 调用后端接口获取。相比现在流行前后端分离的 Vue 项目layui 这种模式更直观改起来不需要构建工具对课程设计来说反而省事。3. 从源码到运行开发者工具、数据库与启动顺序3.1 小程序端导入微信开发者工具AppID 与目录选择第一步打开微信开发者工具选择“导入项目”目录选中源码里的小程序端文件夹。注意不要选整个工程根目录否则开发者工具会把后端的 Java 文件也扫进去编译速度变慢还容易报错。{ description: 校园二手交易小程序, setting: { urlCheck: false, es6: true, postcss: true, minified: true }, compileType: miniprogram, appid: touristappid }这段是 project.config.json 里最常用的几个字段。urlCheck 必须设为 false否则开发阶段请求本地 Java 接口时会因为域名校验失败被拦截。appid 可以先用测试号等以后上线再换成自己注册的小程序 AppID。刚导入时如果没有显示页面检查一下 project.config.json 里的 miniprogramRoot 是否指向了包含 app.json 的那一层。导入成功后打开 app.json能看到页面注册列表。一般会有 index首页、category分类、publish发布、message消息、mine个人中心这几个 tab 页。确认页面能预览后再进入下一步。3.2 后端 Java 工程导入 IDEAJDK、依赖与数据库初始化后端工程用 IDEA 导入时选择 Maven 或直接打开源码根目录等依赖下载完成后看右侧 Maven 面板是否有红色报错。JDK 版本建议用 1.8很多课程设计源码在 JDK 11 以上会出一些奇怪的兼容问题比如 java.xml.bind 包找不到。jdbc.drivercom.mysql.jdbc.Driver jdbc.urljdbc:mysql://localhost:3306/school_trade?useUnicodetruecharacterEncodingutf8 jdbc.usernameroot jdbc.password123456数据库配置在 resources 下的 properties 或 yml 文件里。jdbc.url 里的 characterEncodingutf8 一定不能删否则中文商品描述存进数据库后全是问号。数据库账号密码改成你本地的实际配置。接下来在 Navicat 或命令行里执行源码附带的 SQL 脚本通常叫 school_trade.sql 或者 init.sql。执行完会生成用户表、商品表、订单表、分类表等。如果脚本执行中途报错多半是数据库版本问题MySQL 5.7 跑绝大多数课程设计脚本都没问题但 MySQL 8.0 需要手动把驱动换成 mysql-connector-java 8.x 版本对应的驱动类名也要改成 com.mysql.cj.jdbc.Driver。3.3 接口联调登录态、商品列表与加载更多后端启动成功、小程序端也打开之后最需要确认的是接口能不能通。打开小程序工具里的“调试器 - Network”面板点击首页看看请求返回什么状态码。一个典型请求长这样wx.request({ url: http://localhost:8080/api/goods/list, data: { page: 1, size: 10, categoryId: 0 }, header: { token: wx.getStorageSync(token) }, success(res) { if (res.data.code 0) { this.setData({ goodsList: res.data.data.list }); } } });url 指向本地 Java 服务这里有个最常见的坑微信开发者工具里 localhost 有时候指向的是手机而不是电脑建议直接换成电脑的局域网 IP比如 http://192.168.1.100:8080。data 里的 page 和 size 是分页参数后面的 getGoodsList 接口会按这两个字段做 MySQL 的 limit 查询。header 里的 token 是用户登录后返回的凭证后端通过它判断当前身份。登录态的联调建议在小程序里先走一遍微信授权登录流程。如果登录失败先看后端控制台有没有打印异常再确认数据库用户表是否允许 openid 字段为空。很多课程设计源码在本地测试时会允许 mock 登录也就是不调微信接口、直接给一个默认用户 token方便开发。4. 二次开发实战把“发布商品”流程改造成自己的4.1 发布页面前端表单校验与图片选择发布商品是二手交易平台的核心入口前端页面一般包括商品标题、描述、价格、分类、图片、联系方式这几个字段。多数源码里的发布页会用表单加多张图片上传组件图片先传到服务器拿到 URL 后再跟表单一起提交而不是把图片二进制直接塞进商品接口。Page({ data: { categoryList: [], formData: { title: , price: , description: }, imageUrls: [] }, chooseImages() { wx.chooseMedia({ count: 6, mediaType: [image], success: (res) { this.uploadImage(res.tempFiles[0].tempFilePath); } }); }, uploadImage(filePath) { wx.uploadFile({ url: http://192.168.1.100:8080/api/upload, filePath: filePath, name: file, success: (res) { const data JSON.parse(res.data); this.setData({ imageUrls: this.data.imageUrls.concat(data.data.url) }); } }); } });chooseMedia 一次最多选 6 张这是微信小程序对图片数量的限制。注意 uploadFile 的 name 参数必须和后端接口的 MultipartFile 接收参数名一致源码里如果接收字段是 file前端传 file 就对上了。上传成功后返回的 URL 存进 imageUrls最终提交表单时拼进商品数据。参数说明count 控制图片数量校园二手商品建议 3 到 6 张uploadFile 的 url 是后端上传接口必须和源码里 Controller 的 RequestMapping 完全一致少一个斜杠都会报 404。上传接口返回的数据结构建议先看后端代码再写前端解析。4.2 后端发布接口调用链Controller 到 Service 再到 Mapper后端处理发布请求的链路一般是 Controller 接收参数Service 做业务校验Mapper 操作数据库。理解这条链路能快速定位问题请求到不了数据库先查 Controller数据校验不通过先查 Service 的 if 判断。RestController RequestMapping(/api/goods) public class GoodsController { Autowired private GoodsService goodsService; PostMapping(/publish) public Result publish(RequestBody Goods goods, RequestHeader(token) String token) { Integer userId goodsService.getUserIdByToken(token); if (userId null) { return Result.error(401, 登录已过期); } goods.setUserId(userId); goods.setStatus(0); return goodsService.publish(goods); } }pRequestBody 把前端的 JSON 转成 Goods 对象RequestHeader 从请求头里取 token。这里强调一个设计习惯商品状态 status 不要在 Controller 里由前端传而是后端自己赋初始值 0也就是“待审核”。如果前端能直接传 status用户就可以构造请求绕过审核把违禁商品直接标记为在售这是安全漏洞。Service 层做的事一般包括验证分类是否存在、价格是否大于 0、标题长度是否合法。价格字段要注意数据库里用的是 decimal 还是 int如果源码里用 int 存价格前端传的金额要换算成分否则会出现 9.9 变成 99 或者 9 的坑。4.3 商品状态流转在售、已预订、已售出的边界校园二手交易和普通电商最大的区别在于状态管理。普通商品只有上架和下架二手交易多了“预订”和“线下交易完成”两个环节状态流转直接决定页面展示和用户操作。状态值状态含义允许的操作0待审核管理员可审核通过或驳回1在售买家可下单预订卖家可下架2已预订卖家可确认成交买家可取消预订3已售出不可购买和预订商品归档4已下架卖家可重新上架这个状态设计在源码里通常用一个 int 字段实现数据量不大时没必要用复杂状态机。常见写法是二开时加一个 OrderService订单表里存 goodsId 和 buyerId商品状态变化时在 Service 层做事务控制Transactional public void confirmSale(Integer orderId, Integer operatorId) { Order order orderMapper.selectById(orderId); Goods goods goodsMapper.selectById(order.getGoodsId()); if (!goods.getUserId().equals(operatorId)) { throw new BusinessException(只有卖家本人可以确认成交); } goods.setStatus(3); goodsMapper.update(goods); orderMapper.updateOrderStatus(orderId, 2); }Transactional 保证商品状态和订单状态同时更新否则会出现订单显示已完成、商品还在售的脏数据。confirmSale 里先查订单再查商品然后做归属校验这个顺序不要反反了可能出现先改状态后报错导致状态被回滚的情况。5. 避坑与常见问题我拆这套源码时踩过的五个坑5.1 IDEA 编译大量报错提示“程序包 javax.servlet 不存在”现象导入后端工程后很多 Java 文件下方画红波浪线编译提示找不到 javax.servlet.http.HttpServletRequest。原因这套源码是 Java Web 项目依赖 Tomcat 提供的 servlet-api。直接用 IDEA 的 Java 运行方式启动没有关联 Web 容器自然找不到这些包。解决如果源码是 Maven 工程在 pom.xml 里加上 servlet-api 依赖scope 设为 provided如果是普通 Web 工程配置 IDEA 的 Artifacts 和 Tomcat Server用 Tomcat 启动而不要直接运行 main 方法。5.2 小程序请求本地接口一直报“url not in domain list”现象wx.request 的 success 回调不执行控制台报错说请求地址不在合法域名列表里。原因微信开发者工具默认校验小程序 request 接口的域名必须是 HTTPS 且在小程序后台完成配置。本地调试跑的是 http 加局域网 IP自然过不了校验。解决开发阶段在详情里勾上“不校验合法域名、web-view业务域名、TLS 版本以及 HTTPS 证书”也就是把 project.config.json 里的 urlCheck 改为 false。上线前必须买 HTTPS 域名并在小程序后台把接口域名加到白名单。5.3 商品图片上传成功后重启服务图片全部丢失现象上传图片时能正常访问但 Tomcat 重启后图片变成 404。原因很多课程设计源码把上传文件保存在项目部署目录内部比如 target/classes/static/upload。重启时部署目录被重新生成文件就被清掉了。解决把上传路径改成服务器绝对路径比如 D:/school_trade_upload并在 Web 配置里把该目录映射成静态资源访问路径。源码里如果写死了相对路径优先改成绝对路径。5.4 数据库里中文商品描述变成“????”现象前端录入“九成新自行车”后查数据库存的是“??????”。原因JDBC 连接串缺少 characterEncodingutf8或者创建数据库时默认字符集不是 utf8mb4MySQL 把中文内容按照 latin1 处理导致乱码。解决连接串加上 useUnicodetruecharacterEncodingutf8再把数据库和表的字符集改成 utf8mb4。已经乱掉的历史数据只能清掉重新导入这是血泪经验建库之前先确认字符集。5.5 商品列表下拉加载更多时一次发起了两次请求现象页面滑动到底部Network 面板里同时出现两条相同的请求。原因页面同时使用了小程序页面的 onReachBottom 事件和 scroll-view 组件的 bindscrolltolower 回调两个都触发了加载更多逻辑。解决二选一。如果列表用的是页面滚动就只用 onReachBottom如果用 scroll-view 做局部滚动就只在 bindscrolltolower 里触发。再加一个 isLoading 标识请求期间把开关置 true防止重复请求。6. 上线前必做的三件事把演示项目变成可维护的产品6.1 用拦截器统一处理登录校验课程设计源码里的登录校验通常散在各个 Controller 方法里每个方法都写一遍 token 判断。上线前我会把这些重复代码抽到一个拦截器里让 Spring 在进入 Controller 之前统一检查public class LoginInterceptor implements HandlerInterceptor { Override public boolean preHandle(HttpServletRequest request, HttpServletResponse response, Object handler) throws Exception { String token request.getHeader(token); if (token null || RedisUtil.get(token) null) { response.setStatus(401); return false; } return true; } }这段代码把登录态校验收敛到一个地方后续加新接口时只要配置好拦截路径不用担心漏写校验。token 对应的用户信息也可以放进 ThreadLocal方便后续接口直接取当前用户而不是每次再从数据库查。6.2 商品图片从本地路径迁到对象存储本地路径存图片只适合课程设计演示。上线后图片会越存越多单机磁盘迟早不够而且清理日志时容易误删。常见做法是把上传接口改成直传对象存储前端拿到 URL 后先让用户预览确认无误再随表单提交。数据库里只存 URL 字符串不存文件流。我在拆这套源码时当时图省事没做这一步结果毕设答辩前磁盘被之前测试的图片塞满服务直接起不来只能手工清理。从那以后我每次接手带文件上传的项目都强制先看一眼上传路径是绝对路径还是部署目录内路径再做功能改造。6.3 维护一份接口自测清单写接口的时候顺手记一份自测清单比上线后到处点页面高效得多。比如发布接口要验证未登录时返回 401、商品标题为空返回参数错误、价格填负数返回校验提示、图片超 6 张给前端明确报错。这样的表格不需要多复杂重点是每次改动后按清单过一遍把最容易被改坏的状态流转逻辑守住。这套源码我前后拆过三遍最大的感受是校园二手交易平台的技术难点不在写页面而在把用户、商品、订单三个核心模块的状态理清楚。希望这份拆解能帮你少走弯路希望帮到你。本文还有配套的精品资源点击获取 校园二手交易小程序源码拆解：Java后端与微信小程序联调实战
简介基于微信小程序的校园二手物品交易平台设计源码是一套适合课程设计、毕业设计及小程序开发进阶的前后端完整项目。系统以Java和JavaScript为主要开发语言基于微信小程序构建用户端界面并通过HTML、CSS完成页面布局与视觉呈现整体采用模块化设计便于二次开发与功能迭代。压缩包共包含398个文件大小18.57MB其中82个Java文件实现后端服务59个JS文件处理交互逻辑28个WXML/WXSS/JSON文件构成小程序页面结构、样式与配置另有大量GIF演示图、HTML页面及样式资源可帮助快速了解界面效果与运行方式。该项目已有412人学习下载读者可获得包含前后端代码、SQL脚本及静态资源在内的完整源码对理解校园二手交易场景下的用户发布、信息检索、登录管理等功能设计有直接参考价值也适合作为入门移动端全栈开发的项目范例。1. 校园二手交易小程序这套源码解决的不只是“发商品”很多同学找我聊校园二手需求时第一句话都是“我想搭一个微信小程序源码级别的二手交易平台”。真做起来才发现难点根本不在页面而在后端接口和商品状态流转从在售到已预订、再到已售出每一步都牵扯到数据一致性。这套基于微信小程序的校园二手物品交易平台设计源码用 Java 写后端、JavaScript 写小程序端逻辑共 399 个文件、含 82 个 Java 文件交付的是一套可以直接导入微信开发者工具和 IDEA 的完整工程不是那种只能看不能跑的演示页。适合三类人拿它做 Java 课程设计或毕设的学生、想给校园社团快速搭交易平台的技术负责人以及想系统学小程序加 Java 前后端协作的开发者。2. 技术栈与工程结构先看懂模块边界再动手2.1 选型理由为什么是“小程序 Java”而不是纯 Web校园二手交易的使用场景集中在微信里买家看到同学转发的小程序卡片点进来就能用比让用户装一个 App 或者打开浏览器输入网址都要顺。小程序端天然带了微信登录体系虽然源码里也可以用账号密码登录但微信授权登录对校园用户来说几乎零学习成本。后端选 Java 并不是因为它比别的语言高级而是因为校园项目里课程设计、毕设答辩普遍认 Java 这套技术栈代码分层清晰、资料多、出问题容易搜。这套源码的 Java 端是典型的 Controller-Service-Mapper 三层组织不管底层用的 Spring Boot 还是 SSM分层思路是通用的。模块化的好处在二次开发时体现得很明显改商品发布逻辑不用碰用户模块加一个积分功能也不影响交易主链路。2.2 399 个文件拆解前后端资源与目录分工从文件数量看82 个 Java 文件占大头说明后端业务不是空壳75 个 GIF 文件最初让我有点意外点开之后发现大部分是用在空状态、加载动画和引导页上的素材。Java 文件集中在后端业务的 Controller、Service、Mapper 和实体类里GIF 素材则分布在小程序端和后台管理页。文件类型数量参考对应模块Java 文件82后端接口、业务逻辑、数据访问GIF 文件75小程序引导图、加载动画、空状态JS / CSS 文件数十个小程序页面逻辑、后台管理页面样式HTML 文件若干后台管理端页面XML / properties少量配置文件、MyBatis 映射比较关键的是项目正文里出现的 layui.css、layer.css、laydate.css、login.css 这几个文件。layui 是典型的后台管理端 UI 框架说明这个系统不只是有小程序端还带了一个 Web 管理后台用于管理员审核商品、管理用户、查看订单。login.css 对应后台登录页laydate.css 是日期选择器常用于统计和订单筛选。还有 iconfont.eot 字体文件和 code.css 代码高亮样式这些都是后台页面的配套资源。2.3 从资源文件反推后台管理端登录、审核、统计如果你拿到源码第一时间不知道该从哪看起我的习惯是先找后台管理入口。看到这些 CSS 文件就能判断后台登录页、商品审核列表和用户管理页面都应该存在。一般这种校园二手平台的管理后台至少包含三个功能商品审核用户发布商品后管理员确认是否符合校园交易规则用户管理处理违规账号、查看用户信用记录订单与统计查看成交记录按学院或分类统计交易热度这套源码里后台管理端的页面是用传统 HTML 加 layui 渲染的数据通过 Ajax 调用后端接口获取。相比现在流行前后端分离的 Vue 项目layui 这种模式更直观改起来不需要构建工具对课程设计来说反而省事。3. 从源码到运行开发者工具、数据库与启动顺序3.1 小程序端导入微信开发者工具AppID 与目录选择第一步打开微信开发者工具选择“导入项目”目录选中源码里的小程序端文件夹。注意不要选整个工程根目录否则开发者工具会把后端的 Java 文件也扫进去编译速度变慢还容易报错。{ description: 校园二手交易小程序, setting: { urlCheck: false, es6: true, postcss: true, minified: true }, compileType: miniprogram, appid: touristappid }这段是 project.config.json 里最常用的几个字段。urlCheck 必须设为 false否则开发阶段请求本地 Java 接口时会因为域名校验失败被拦截。appid 可以先用测试号等以后上线再换成自己注册的小程序 AppID。刚导入时如果没有显示页面检查一下 project.config.json 里的 miniprogramRoot 是否指向了包含 app.json 的那一层。导入成功后打开 app.json能看到页面注册列表。一般会有 index首页、category分类、publish发布、message消息、mine个人中心这几个 tab 页。确认页面能预览后再进入下一步。3.2 后端 Java 工程导入 IDEAJDK、依赖与数据库初始化后端工程用 IDEA 导入时选择 Maven 或直接打开源码根目录等依赖下载完成后看右侧 Maven 面板是否有红色报错。JDK 版本建议用 1.8很多课程设计源码在 JDK 11 以上会出一些奇怪的兼容问题比如 java.xml.bind 包找不到。jdbc.drivercom.mysql.jdbc.Driver jdbc.urljdbc:mysql://localhost:3306/school_trade?useUnicodetruecharacterEncodingutf8 jdbc.usernameroot jdbc.password123456数据库配置在 resources 下的 properties 或 yml 文件里。jdbc.url 里的 characterEncodingutf8 一定不能删否则中文商品描述存进数据库后全是问号。数据库账号密码改成你本地的实际配置。接下来在 Navicat 或命令行里执行源码附带的 SQL 脚本通常叫 school_trade.sql 或者 init.sql。执行完会生成用户表、商品表、订单表、分类表等。如果脚本执行中途报错多半是数据库版本问题MySQL 5.7 跑绝大多数课程设计脚本都没问题但 MySQL 8.0 需要手动把驱动换成 mysql-connector-java 8.x 版本对应的驱动类名也要改成 com.mysql.cj.jdbc.Driver。3.3 接口联调登录态、商品列表与加载更多后端启动成功、小程序端也打开之后最需要确认的是接口能不能通。打开小程序工具里的“调试器 - Network”面板点击首页看看请求返回什么状态码。一个典型请求长这样wx.request({ url: http://localhost:8080/api/goods/list, data: { page: 1, size: 10, categoryId: 0 }, header: { token: wx.getStorageSync(token) }, success(res) { if (res.data.code 0) { this.setData({ goodsList: res.data.data.list }); } } });url 指向本地 Java 服务这里有个最常见的坑微信开发者工具里 localhost 有时候指向的是手机而不是电脑建议直接换成电脑的局域网 IP比如 http://192.168.1.100:8080。data 里的 page 和 size 是分页参数后面的 getGoodsList 接口会按这两个字段做 MySQL 的 limit 查询。header 里的 token 是用户登录后返回的凭证后端通过它判断当前身份。登录态的联调建议在小程序里先走一遍微信授权登录流程。如果登录失败先看后端控制台有没有打印异常再确认数据库用户表是否允许 openid 字段为空。很多课程设计源码在本地测试时会允许 mock 登录也就是不调微信接口、直接给一个默认用户 token方便开发。4. 二次开发实战把“发布商品”流程改造成自己的4.1 发布页面前端表单校验与图片选择发布商品是二手交易平台的核心入口前端页面一般包括商品标题、描述、价格、分类、图片、联系方式这几个字段。多数源码里的发布页会用表单加多张图片上传组件图片先传到服务器拿到 URL 后再跟表单一起提交而不是把图片二进制直接塞进商品接口。Page({ data: { categoryList: [], formData: { title: , price: , description: }, imageUrls: [] }, chooseImages() { wx.chooseMedia({ count: 6, mediaType: [image], success: (res) { this.uploadImage(res.tempFiles[0].tempFilePath); } }); }, uploadImage(filePath) { wx.uploadFile({ url: http://192.168.1.100:8080/api/upload, filePath: filePath, name: file, success: (res) { const data JSON.parse(res.data); this.setData({ imageUrls: this.data.imageUrls.concat(data.data.url) }); } }); } });chooseMedia 一次最多选 6 张这是微信小程序对图片数量的限制。注意 uploadFile 的 name 参数必须和后端接口的 MultipartFile 接收参数名一致源码里如果接收字段是 file前端传 file 就对上了。上传成功后返回的 URL 存进 imageUrls最终提交表单时拼进商品数据。参数说明count 控制图片数量校园二手商品建议 3 到 6 张uploadFile 的 url 是后端上传接口必须和源码里 Controller 的 RequestMapping 完全一致少一个斜杠都会报 404。上传接口返回的数据结构建议先看后端代码再写前端解析。4.2 后端发布接口调用链Controller 到 Service 再到 Mapper后端处理发布请求的链路一般是 Controller 接收参数Service 做业务校验Mapper 操作数据库。理解这条链路能快速定位问题请求到不了数据库先查 Controller数据校验不通过先查 Service 的 if 判断。RestController RequestMapping(/api/goods) public class GoodsController { Autowired private GoodsService goodsService; PostMapping(/publish) public Result publish(RequestBody Goods goods, RequestHeader(token) String token) { Integer userId goodsService.getUserIdByToken(token); if (userId null) { return Result.error(401, 登录已过期); } goods.setUserId(userId); goods.setStatus(0); return goodsService.publish(goods); } }pRequestBody 把前端的 JSON 转成 Goods 对象RequestHeader 从请求头里取 token。这里强调一个设计习惯商品状态 status 不要在 Controller 里由前端传而是后端自己赋初始值 0也就是“待审核”。如果前端能直接传 status用户就可以构造请求绕过审核把违禁商品直接标记为在售这是安全漏洞。Service 层做的事一般包括验证分类是否存在、价格是否大于 0、标题长度是否合法。价格字段要注意数据库里用的是 decimal 还是 int如果源码里用 int 存价格前端传的金额要换算成分否则会出现 9.9 变成 99 或者 9 的坑。4.3 商品状态流转在售、已预订、已售出的边界校园二手交易和普通电商最大的区别在于状态管理。普通商品只有上架和下架二手交易多了“预订”和“线下交易完成”两个环节状态流转直接决定页面展示和用户操作。状态值状态含义允许的操作0待审核管理员可审核通过或驳回1在售买家可下单预订卖家可下架2已预订卖家可确认成交买家可取消预订3已售出不可购买和预订商品归档4已下架卖家可重新上架这个状态设计在源码里通常用一个 int 字段实现数据量不大时没必要用复杂状态机。常见写法是二开时加一个 OrderService订单表里存 goodsId 和 buyerId商品状态变化时在 Service 层做事务控制Transactional public void confirmSale(Integer orderId, Integer operatorId) { Order order orderMapper.selectById(orderId); Goods goods goodsMapper.selectById(order.getGoodsId()); if (!goods.getUserId().equals(operatorId)) { throw new BusinessException(只有卖家本人可以确认成交); } goods.setStatus(3); goodsMapper.update(goods); orderMapper.updateOrderStatus(orderId, 2); }Transactional 保证商品状态和订单状态同时更新否则会出现订单显示已完成、商品还在售的脏数据。confirmSale 里先查订单再查商品然后做归属校验这个顺序不要反反了可能出现先改状态后报错导致状态被回滚的情况。5. 避坑与常见问题我拆这套源码时踩过的五个坑5.1 IDEA 编译大量报错提示“程序包 javax.servlet 不存在”现象导入后端工程后很多 Java 文件下方画红波浪线编译提示找不到 javax.servlet.http.HttpServletRequest。原因这套源码是 Java Web 项目依赖 Tomcat 提供的 servlet-api。直接用 IDEA 的 Java 运行方式启动没有关联 Web 容器自然找不到这些包。解决如果源码是 Maven 工程在 pom.xml 里加上 servlet-api 依赖scope 设为 provided如果是普通 Web 工程配置 IDEA 的 Artifacts 和 Tomcat Server用 Tomcat 启动而不要直接运行 main 方法。5.2 小程序请求本地接口一直报“url not in domain list”现象wx.request 的 success 回调不执行控制台报错说请求地址不在合法域名列表里。原因微信开发者工具默认校验小程序 request 接口的域名必须是 HTTPS 且在小程序后台完成配置。本地调试跑的是 http 加局域网 IP自然过不了校验。解决开发阶段在详情里勾上“不校验合法域名、web-view业务域名、TLS 版本以及 HTTPS 证书”也就是把 project.config.json 里的 urlCheck 改为 false。上线前必须买 HTTPS 域名并在小程序后台把接口域名加到白名单。5.3 商品图片上传成功后重启服务图片全部丢失现象上传图片时能正常访问但 Tomcat 重启后图片变成 404。原因很多课程设计源码把上传文件保存在项目部署目录内部比如 target/classes/static/upload。重启时部署目录被重新生成文件就被清掉了。解决把上传路径改成服务器绝对路径比如 D:/school_trade_upload并在 Web 配置里把该目录映射成静态资源访问路径。源码里如果写死了相对路径优先改成绝对路径。5.4 数据库里中文商品描述变成“????”现象前端录入“九成新自行车”后查数据库存的是“??????”。原因JDBC 连接串缺少 characterEncodingutf8或者创建数据库时默认字符集不是 utf8mb4MySQL 把中文内容按照 latin1 处理导致乱码。解决连接串加上 useUnicodetruecharacterEncodingutf8再把数据库和表的字符集改成 utf8mb4。已经乱掉的历史数据只能清掉重新导入这是血泪经验建库之前先确认字符集。5.5 商品列表下拉加载更多时一次发起了两次请求现象页面滑动到底部Network 面板里同时出现两条相同的请求。原因页面同时使用了小程序页面的 onReachBottom 事件和 scroll-view 组件的 bindscrolltolower 回调两个都触发了加载更多逻辑。解决二选一。如果列表用的是页面滚动就只用 onReachBottom如果用 scroll-view 做局部滚动就只在 bindscrolltolower 里触发。再加一个 isLoading 标识请求期间把开关置 true防止重复请求。6. 上线前必做的三件事把演示项目变成可维护的产品6.1 用拦截器统一处理登录校验课程设计源码里的登录校验通常散在各个 Controller 方法里每个方法都写一遍 token 判断。上线前我会把这些重复代码抽到一个拦截器里让 Spring 在进入 Controller 之前统一检查public class LoginInterceptor implements HandlerInterceptor { Override public boolean preHandle(HttpServletRequest request, HttpServletResponse response, Object handler) throws Exception { String token request.getHeader(token); if (token null || RedisUtil.get(token) null) { response.setStatus(401); return false; } return true; } }这段代码把登录态校验收敛到一个地方后续加新接口时只要配置好拦截路径不用担心漏写校验。token 对应的用户信息也可以放进 ThreadLocal方便后续接口直接取当前用户而不是每次再从数据库查。6.2 商品图片从本地路径迁到对象存储本地路径存图片只适合课程设计演示。上线后图片会越存越多单机磁盘迟早不够而且清理日志时容易误删。常见做法是把上传接口改成直传对象存储前端拿到 URL 后先让用户预览确认无误再随表单提交。数据库里只存 URL 字符串不存文件流。我在拆这套源码时当时图省事没做这一步结果毕设答辩前磁盘被之前测试的图片塞满服务直接起不来只能手工清理。从那以后我每次接手带文件上传的项目都强制先看一眼上传路径是绝对路径还是部署目录内路径再做功能改造。6.3 维护一份接口自测清单写接口的时候顺手记一份自测清单比上线后到处点页面高效得多。比如发布接口要验证未登录时返回 401、商品标题为空返回参数错误、价格填负数返回校验提示、图片超 6 张给前端明确报错。这样的表格不需要多复杂重点是每次改动后按清单过一遍把最容易被改坏的状态流转逻辑守住。这套源码我前后拆过三遍最大的感受是校园二手交易平台的技术难点不在写页面而在把用户、商品、订单三个核心模块的状态理清楚。希望这份拆解能帮你少走弯路希望帮到你。本文还有配套的精品资源点击获取