尧图网站建设 
简介这套英语学习交流平台小程序源码采用Java SSM框架SpringSpringMVCMyBatis搭建后台通过浏览器登录进行数据管理并配套微信开发者工具运行的小程序端面向需要完成课程设计、毕业设计或想学习前后端分离开发的学习者。后台以MySQL存储用户、打卡、备忘录、学习计划、学习资源及论坛数据管理员与用户双角色权限划分清晰涵盖每日打卡、备忘录、学习计划、学习资源、收藏与论坛等核心模块便于快速理解业务逻辑并二次扩展。资源包共1219个文件大小约17.07MB包含java后台源码、vue管理端页面、wxml/wxss小程序界面、png/svg图片素材以及sql数据库脚本等目录结构完整可对照学习SSM接口设计与小程序调用的完整链路。目前已有70人学习使用适合具备一定Java基础、希望以实战项目提升全栈开发能力的读者也可作为教学演示或项目参考。1. 一个英语学习交流平台小程序到底拆了什么出来拿到这套英语学习交流平台小程序ssm.zip时第一反应是去核对后端框架选型和前端页面结构。解压后能看到.classpath、org.eclipse.wst.common.component这类 Eclipse 工程描述文件还有main.css.bak、update-password.vue.bak、BreadCrumbs.vue.bak这些备份文件说明这个项目的后台管理端是从 Vue ElementUI 的模板工程改过来的SSM 部分则承担了全部 REST 接口和数据持久化职责。整套系统的定位很清楚微信小程序做 C 端学习工具SSM 后端做管理后台MySQL 存业务数据两个端共用同一套 Java 接口。对于想快速搭一个带论坛、打卡、学习计划的毕业设计或商业原型来说这个结构足够典型也足够拆解。需要先说明一点看这个压缩包的名字就知道它不是一个纯前端的静态页面项目而是把「小程序客户端 Java 后端 数据库初始化脚本」打包在一起的完整工程。下面所有分析和复现步骤都基于这个前提。2. SSM 三层架构从 SpringMVC 请求分发到 MyBatis 数据落库2.1 Spring 容器如何串联 Controller、Service 与 MapperSSM 是 Spring SpringMVC MyBatis 的组合它的核心思路是用 Spring 管理对象生命周期用 SpringMVC 处理 HTTP 请求映射用 MyBatis 把 SQL 和 Java 方法绑定。在spring-mvc.xml里通常能看到context:component-scan base-packagecom.example.controller /它只扫描 Controller 层而applicationContext.xml中的context:component-scan base-packagecom.example.service /和com.example.dao则扫描 Service 和 Mapper 接口。这种分包扫描方式能让 URL 路由和业务逻辑彻底分离。常见的一个误区是把所有类放在同一个包下扫描这样虽然能跑通但事务切面会失控。比如在 Service 层方法上加了Transactional如果 Controller 和 Service 混在一起被扫描Spring AOP 代理依然能生效但连接池的读写分离就难以精准匹配。推荐的做法是把 Mapper 接口单独放在com.example.mapper然后在spring-mybatis.xml里用MapperScannerConfigurer扫描避免手写 DAO 实现类。实际工程里我会把applicationContext.xml的配置拆成三块数据源与连接池、SqlSessionFactoryBean 工厂、事务管理器。核心配置通常长这样bean iddataSource classcom.alibaba.druid.pool.DruidDataSource init-methodinit destroy-methodclose property nameurl valuejdbc:mysql://localhost:3306/english_app?useUnicodetrueamp;characterEncodingutf8 / property nameusername valueroot / property namepassword valueroot / property nameinitialSize value5 / property namemaxActive value20 / /bean bean idsqlSessionFactory classorg.mybatis.spring.SqlSessionFactoryBean property namedataSource refdataSource / property namemapperLocations valueclasspath:mapper/*.xml / /bean bean classorg.mybatis.spring.mapper.MapperScannerConfigurer property namebasePackage valuecom.example.mapper / /bean这段配置的核心逻辑是先定义 Druid 连接池再让 SqlSessionFactory 关联数据源并加载 XML 映射文件最后通过扫描 Mapper 接口生成代理对象。参数方面initialSize5表示启动时预创建 5 个连接maxActive20是最大连接数如果本地开发机器内存不足可以降到 10mapperLocations指向classpath:mapper/*.xml意味着所有 SQL 都散落在 resources/mapper 目录下而不是写在 Java 注解里。若你的项目里 SQL 量少也可以换成注解方式但动态 SQL比如学习资源的多条件筛选用 XML 会好维护得多。2.2 MyBatis 动态 SQL 在后台管理中的实际映射管理员端最常见的需求是用户列表查询按昵称模糊查、按打卡次数排序、分页返回。如果不用 MyBatis 动态 SQL你得写多条 SQL 拼接字符串容易注入且难看。看项目里的用户管理功能Mapper 接口定义和 XML 大致是这样配合的public interface UserMapper { ListUser selectUserPage(Param(nickname) String nickname, Param(offset) int offset, Param(limit) int limit); }select idselectUserPage resultTypecom.example.entity.User SELECT * FROM user where if testnickname ! null and nickname ! AND nickname LIKE CONCAT(%, #{nickname}, %) /if /where ORDER BY daily_check_count DESC LIMIT #{offset}, #{limit} /select这段 SQL 覆盖了后台管理列表页的典型场景。where标签会自动处理多余的 AND 前缀避免空条件时 SQL 语法错误#{}是预编译占位符传参数时会走 PreparedStatement能防注入LIMIT #{offset}, #{limit}是 MySQL 分页写法注意 offset 必须由(pageNum - 1) * pageSize计算后在 Service 层算好再传入。如果在数据量大比如用户表过百万的情况下LIMIT 100000, 20的性能会明显下降此时可以改成WHERE id #{lastId} LIMIT #{limit}的键集分页。2.3 Controller 层返回统一 JSON 结构的约定小程序端和后端交互必须有一个统一的响应结构否则前端判断业务状态会非常痛苦。SSM 项目里常见的做法是定义Result类public class ResultT { private Integer code; private String msg; private T data; public static T ResultT success(T data) { ResultT r new Result(); r.code 200; r.msg success; r.data data; return r; } public static T ResultT error(String msg) { ResultT r new Result(); r.code 500; r.msg msg; return r; } }Controller 里的每个接口返回这个对象SpringMVC 通过ResponseBody自动序列化成 JSON。注意一个问题如果字段值为 null默认序列化也会输出data: null小程序端 wx.request 的 success 回调里要兼容判断。对于日期字段建议在字段上加JsonFormat(pattern yyyy-MM-dd HH:mm:ss, timezone GMT8)不然小程序端会收到一串时间戳数字。3. 小程序端结构页面、组件与 wx.request 请求封装3.1 小程序页面如何承载打卡、备忘录与学习计划微信小程序端的目录结构通常是pages/index、pages/checkin、pages/memo、pages/plan、pages/resource、pages/forum等。每个页面由.wxml、.wxss、.js、.json四个文件组成。这里的「每日打卡」功能一般会设计成用户进入页面时通过onLoad或onShow请求后端接口查询今日是否已打卡如果已打卡则按钮置灰打卡成功后更新打卡天数。举例来说打卡页面的.js核心逻辑Page({ data: { isChecked: false, totalDays: 0 }, onShow() { this.loadCheckStatus(); }, loadCheckStatus() { const token wx.getStorageSync(token); wx.request({ url: http://localhost:8080/api/checkin/today, method: GET, header: { Authorization: token }, success: (res) { if (res.data.code 200) { this.setData({ isChecked: res.data.data.checked, totalDays: res.data.data.totalDays }); } } }); }, doCheckin() { if (this.data.isChecked) return; wx.request({ url: http://localhost:8080/api/checkin, method: POST, header: { Content-Type: application/json }, success: (res) { if (res.data.code 200) { wx.showToast({ title: 打卡成功, icon: success }); this.setData({ isChecked: true, totalDays: this.data.totalDays 1 }); } } }); } });这个逻辑里有几个值得注意的细节。onShow而不是onLoad去加载状态是因为用户可能打卡成功后切到其他页面再返回onShow每次显示都会触发能保证状态同步。header中携带的Authorization字段是后端从请求头取 token 用的注意不要放在data里否则常规的后端拦截器取不到。http://localhost:8080这个地址在微信开发者工具里可以访问但真机预览时必须改成局域网 IP 如http://192.168.1.100:8080并且要在微信公众平台后台配置 request 合法域名。3.2 封装 request 工具避免重复代码如果每个页面都写wx.request代码会冗余且难维护。我一般会在utils/request.js里封装一层这个项目里大概率也有类似的工具。封装的核心逻辑const BASE_URL http://localhost:8080/api; function request(url, method GET, data {}) { return new Promise((resolve, reject) { wx.request({ url: BASE_URL url, method: method, data: data, header: { Content-Type: application/json, Authorization: wx.getStorageSync(token) || }, success: (res) { if (res.statusCode 401) { wx.redirectTo({ url: /pages/login/login }); reject(res); } else if (res.statusCode 200 res.data.code 200) { resolve(res.data.data); } else { wx.showToast({ title: res.data.msg || 请求失败, icon: none }); reject(res); } }, fail: (err) reject(err) }); }); } module.exports { request, BASE_URL };封装之后页面代码从十行wx.request缩到两行。参数上BASE_URL建议单独抽到config.js方便上线时切换环境token 过期返回 401 时跳转登录页这是一般后端配合拦截器返回的状态码。小程序端在做这种封装时需要注意 Promise 化后wx.request的success和fail回调会同时存在不能在高版本基础库中用wx.request的同步返回值必须走回调转 Promise。3.3 动态设置页面标题与顶部导航热词里有「小程序动态设置标题」「修改刚进入的加载页面」这其实是两个不同的需求。设置标题有两种方式静态配置写在页面对应.json文件里{ navigationBarTitleText: 每日打卡, navigationBarBackgroundColor: #4CAF50 }动态设置则调用wx.setNavigationBarTitlewx.setNavigationBarTitle({ title: 学习计划 - 第3周 });这个方法的适用场景是详情页标题跟随数据变化比如用户在论坛帖子列表点击某条帖子进入详情页后把标题设置为帖子的标题。「修改刚进入的加载页面」通常指app.json中的entryPagePath字段它可以指定小程序冷启动时第一个显示的页面比如默认进登录页还是首页{ entryPagePath: pages/index/index, pages: [ pages/index/index, pages/login/login ] }注意entryPagePath的值必须存在于pages列表中否则编译直接报错。还有一点微信开发者工具新版本中app.json里改了entryPagePath后需要重新编译才会生效单纯的「编译」按钮有时候不触发冷启动更新要点「清缓存 → 全部清除」再编译。4. 核心业务模块打卡、学习计划、收藏与论坛的数据表设计4.1 每日打卡的数据模型与防重复逻辑打卡功能看似简单但表结构如果不注意很容易出 bug。常见的设计是checkin_record表核心字段包括id、user_id、checkin_date、create_time并且对(user_id, checkin_date)建立唯一索引CREATE TABLE checkin_record ( id INT NOT NULL AUTO_INCREMENT, user_id INT NOT NULL, checkin_date DATE NOT NULL, create_time DATETIME DEFAULT CURRENT_TIMESTAMP, PRIMARY KEY (id), UNIQUE KEY uk_user_date (user_id, checkin_date) ) ENGINEInnoDB DEFAULT CHARSETutf8mb4;为什么必须加唯一索引而不是靠 Java 代码先SELECT COUNT(*)再INSERT因为两个请求同时打到后端时先查后插会被竞态条件击穿可能产生两条同一天的数据。有了唯一索引第二次 INSERT 会抛出DuplicateKeyException在 Service 层捕获这个异常然后返回「今日已打卡」即可。查询打卡天数的 SQLSELECT COUNT(*) FROM checkin_record WHERE user_id #{userId}如果要显示「连续打卡天数」需要额外按日期排序后判断昨天是否有记录这个计算放在 SQL 里会复杂放在 Java 里循环判断反而简单。可以查出用户所有的打卡日期列表然后从今天往回逐天判断缺失就断。4.2 学习计划的字段设计与状态管理学习计划表通常比打卡表多几个状态字段CREATE TABLE study_plan ( id INT NOT NULL AUTO_INCREMENT, user_id INT NOT NULL, title VARCHAR(100) NOT NULL, plan_content TEXT, plan_date DATE NOT NULL, status TINYINT DEFAULT 0 COMMENT 0-未完成 1-已完成, create_time DATETIME DEFAULT CURRENT_TIMESTAMP, PRIMARY KEY (id) ) ENGINEInnoDB DEFAULT CHARSETutf8mb4;status用 TINYINT 类型存 0 和 1比字符串更省空间、查询更快。管理端的「学习计划管理」实际上就是一个条件分页查询支持按用户、按状态、按日期范围过滤。这里有一个后台管理的通用技巧在 Controller 接收pageNum、pageSize、status等参数然后传给 Service 层组装MapString, Object条件再交给 Mapper 动态 SQL 执行。前端表格展示时用 tag 标签把 0/1 渲染成「未完成 / 已完成」。4.3 学习资源与收藏的表关系设计学习资源表可以放id、title、url、type、cover_url、publish_time收藏表则是一个经典的多对多关系CREATE TABLE favorite ( id INT NOT NULL AUTO_INCREMENT, user_id INT NOT NULL, resource_id INT NOT NULL, create_time DATETIME DEFAULT CURRENT_TIMESTAMP, PRIMARY KEY (id), UNIQUE KEY uk_user_res (user_id, resource_id) ) ENGINEInnoDB DEFAULT CHARSETutf8mb4;用户点击收藏时小程序端 POST/api/favorite后端先判断该用户是否已收藏过没有则插入。点击「我的收藏」则联表查询SELECT r.* FROM resource r INNER JOIN favorite f ON r.id f.resource_id WHERE f.user_id #{userId} ORDER BY f.create_time DESC这里用 INNER JOIN 而不是左连接因为收藏表里只要有记录资源一定存在用 INNER JOIN 可以过滤掉资源被删但收藏记录未清理的情况。4.4 论坛交流的帖子与回复数据结构论坛模块一般至少两张表forum_post和forum_reply。帖子和用户是一对多帖子和回复是一对多。字段设计CREATE TABLE forum_post ( id INT NOT NULL AUTO_INCREMENT, user_id INT NOT NULL, title VARCHAR(200) NOT NULL, content TEXT, view_count INT DEFAULT 0, reply_count INT DEFAULT 0, create_time DATETIME DEFAULT CURRENT_TIMESTAMP, PRIMARY KEY (id) ) ENGINEInnoDB DEFAULT CHARSETutf8mb4;view_count是冗余字段但用来做列表页的浏览数展示很合适不必每次 COUNT 回复表。帖子详情页要同时展示帖子内容和回复列表后台逻辑一般用两个查询先查帖子主记录再查回复集合。如果想一步到位可以写一个自定义 VO 类PostDetailVO里面有帖子字段和ListReply字段Mapper 里用collection标签做嵌套结果映射。要说明的是MySQL 没有像 MongoDB 那样的嵌入式文档靠 MyBatis 只能组装对象所以列表页和详情页拆两个查询通常比强行联表更高效。5. 从压缩包到跑起来工程导入、脚本执行与本地联调5.1 项目导入 Eclipse 与依赖检查压缩包里有.classpath和org.eclipse.wst.common.component文件说明这是一个 Eclipse 的 Dynamic Web Project。导入方式不是直接解压后File → Open Projects from File System因为 Maven 依赖可能还没下载。正确流程是解压到工作目录保持目录结构完整。Eclipse 中File → Import → Existing Maven Projects选择解压后的根目录。等待 Maven 下载依赖主要看pom.xml中的 spring-webmvc、mybatis-spring、druid、mysql-connector-java 等版本是否冲突。配置 Tomcat 8.5 以上运行环境将项目添加到 Server 中启动。如果导入后报ClassNotFound错误先检查maven-dependency-plugin是否把依赖拷贝到WEB-INF/lib。我遇到过比较多的坑是 JDK 版本不匹配SSM 框架用 JDK 1.8 编译的 class 文件如果在 JDK 11 的 Tomcat 上运行反射相关的代码会报IllegalAccessError或NoSuchMethodError。建议用 JDK 1.8。另外web.xml中的url-pattern/api/*/url-pattern决定了所有接口前缀小程序端的 BASE_URL 要注意对齐。5.2 理解三个 bat 脚本的执行顺序压缩包里有1-install.bat、2-run.bat、3-build.bat。常见的执行顺序是先 1 再 23 是可选的打包步骤。1-install.bat一般是 Maven 安装命令echo off call mvn clean install -DskipTests pause-DskipTests跳过单元测试编译阶段能缩短安装时间。2-run.bat一般是用嵌入式的 Tomcat 插件启动echo off call mvn tomcat7:run -Dmaven.tomcat.port8080 pause注意这个命令依赖pom.xml中配置了tomcat7-maven-plugin。如果你的项目同时存在spring-mvc.xml和spring-servlet.xml两套配置文件Tomcat 启动时可能会出现「多个 Servlet 映射到 /*」的警告建议统一用spring-servlet.xml配置DispatcherServlet。3-build.bat通常是打 war 包echo off call mvn clean package -DskipTests pause打完包后在target/目录下找到.war文件可以丢到独立的 Tomcat webapps 下部署。需要注意的是如果开发环境没有配置 Maven 环境变量这些 bat 脚本执行会直接报mvn 不是内部或外部命令需要在系统环境变量的 Path 中加入 Maven 的bin目录。5.3 MySQL 初始化与常见 404、500 排错启动后端之前先确认 MySQL 已创建数据库并执行 SQL 脚本。常见做法是把建库建表语句放在db/english_app.sql中执行命令mysql -u root -p db/english_app.sql导入成功后检查db.properties或jdbc.properties里的连接信息是否与本地一致。启动 Tomcat 后后端接口 404 的排查顺序是先看控制台日志有没有Mapping \...\打印出来再看前端请求的 URL 是否带/api前缀最后看DispatcherServlet的contextConfigLocation是否正确加载了spring-mvc.xml。接口 500 则重点看异常堆栈Invalid bound statement表示 Mapper XML 没扫描到BadSqlGrammarException表示表名或字段名与数据库不一致ClassCastException则多半是实体类字段类型与表字段类型不匹配。真机联调阶段微信开发者工具默认勾选了「不校验合法域名」所以本地用http://localhost:8080调试没问题。但发布上线时小程序必须使用 HTTPS 域名且该域名需要在微信公众平台后台「开发管理 → 开发设置 → 服务器域名」中配置 request 合法域名。如果域名没有备案或证书过期小程序端会在请求发起时直接报url not in domain list。调试时如果想抓包查看小程序和 SSM 接口之间到底传了什么参数可以用 Charles 或 Fiddler 配置 SSL 代理注意在微信开发者工具中关闭「校验合法域名」后抓包工具才能看到 HTTP 明文流量。要是接口返回 401先看登录接口返回的 token 是否正确存到本地 Storage再检查后端拦截器中的 token 校验逻辑是否把携带Authorization头的请求白名单排除在外。最后的建议是如果后台管理页面改完前端代码后浏览器不刷新多半是main.css.bak这类备份文件干扰了静态资源映射检查spring-mvc.xml中mvc:resources mapping/static/** location/static/ /的路径是否与页面引用一致。本文还有配套的精品资源点击获取 SSM+微信小程序英语学习平台：架构拆解与前后端联调实战
简介这套英语学习交流平台小程序源码采用Java SSM框架SpringSpringMVCMyBatis搭建后台通过浏览器登录进行数据管理并配套微信开发者工具运行的小程序端面向需要完成课程设计、毕业设计或想学习前后端分离开发的学习者。后台以MySQL存储用户、打卡、备忘录、学习计划、学习资源及论坛数据管理员与用户双角色权限划分清晰涵盖每日打卡、备忘录、学习计划、学习资源、收藏与论坛等核心模块便于快速理解业务逻辑并二次扩展。资源包共1219个文件大小约17.07MB包含java后台源码、vue管理端页面、wxml/wxss小程序界面、png/svg图片素材以及sql数据库脚本等目录结构完整可对照学习SSM接口设计与小程序调用的完整链路。目前已有70人学习使用适合具备一定Java基础、希望以实战项目提升全栈开发能力的读者也可作为教学演示或项目参考。1. 一个英语学习交流平台小程序到底拆了什么出来拿到这套英语学习交流平台小程序ssm.zip时第一反应是去核对后端框架选型和前端页面结构。解压后能看到.classpath、org.eclipse.wst.common.component这类 Eclipse 工程描述文件还有main.css.bak、update-password.vue.bak、BreadCrumbs.vue.bak这些备份文件说明这个项目的后台管理端是从 Vue ElementUI 的模板工程改过来的SSM 部分则承担了全部 REST 接口和数据持久化职责。整套系统的定位很清楚微信小程序做 C 端学习工具SSM 后端做管理后台MySQL 存业务数据两个端共用同一套 Java 接口。对于想快速搭一个带论坛、打卡、学习计划的毕业设计或商业原型来说这个结构足够典型也足够拆解。需要先说明一点看这个压缩包的名字就知道它不是一个纯前端的静态页面项目而是把「小程序客户端 Java 后端 数据库初始化脚本」打包在一起的完整工程。下面所有分析和复现步骤都基于这个前提。2. SSM 三层架构从 SpringMVC 请求分发到 MyBatis 数据落库2.1 Spring 容器如何串联 Controller、Service 与 MapperSSM 是 Spring SpringMVC MyBatis 的组合它的核心思路是用 Spring 管理对象生命周期用 SpringMVC 处理 HTTP 请求映射用 MyBatis 把 SQL 和 Java 方法绑定。在spring-mvc.xml里通常能看到context:component-scan base-packagecom.example.controller /它只扫描 Controller 层而applicationContext.xml中的context:component-scan base-packagecom.example.service /和com.example.dao则扫描 Service 和 Mapper 接口。这种分包扫描方式能让 URL 路由和业务逻辑彻底分离。常见的一个误区是把所有类放在同一个包下扫描这样虽然能跑通但事务切面会失控。比如在 Service 层方法上加了Transactional如果 Controller 和 Service 混在一起被扫描Spring AOP 代理依然能生效但连接池的读写分离就难以精准匹配。推荐的做法是把 Mapper 接口单独放在com.example.mapper然后在spring-mybatis.xml里用MapperScannerConfigurer扫描避免手写 DAO 实现类。实际工程里我会把applicationContext.xml的配置拆成三块数据源与连接池、SqlSessionFactoryBean 工厂、事务管理器。核心配置通常长这样bean iddataSource classcom.alibaba.druid.pool.DruidDataSource init-methodinit destroy-methodclose property nameurl valuejdbc:mysql://localhost:3306/english_app?useUnicodetrueamp;characterEncodingutf8 / property nameusername valueroot / property namepassword valueroot / property nameinitialSize value5 / property namemaxActive value20 / /bean bean idsqlSessionFactory classorg.mybatis.spring.SqlSessionFactoryBean property namedataSource refdataSource / property namemapperLocations valueclasspath:mapper/*.xml / /bean bean classorg.mybatis.spring.mapper.MapperScannerConfigurer property namebasePackage valuecom.example.mapper / /bean这段配置的核心逻辑是先定义 Druid 连接池再让 SqlSessionFactory 关联数据源并加载 XML 映射文件最后通过扫描 Mapper 接口生成代理对象。参数方面initialSize5表示启动时预创建 5 个连接maxActive20是最大连接数如果本地开发机器内存不足可以降到 10mapperLocations指向classpath:mapper/*.xml意味着所有 SQL 都散落在 resources/mapper 目录下而不是写在 Java 注解里。若你的项目里 SQL 量少也可以换成注解方式但动态 SQL比如学习资源的多条件筛选用 XML 会好维护得多。2.2 MyBatis 动态 SQL 在后台管理中的实际映射管理员端最常见的需求是用户列表查询按昵称模糊查、按打卡次数排序、分页返回。如果不用 MyBatis 动态 SQL你得写多条 SQL 拼接字符串容易注入且难看。看项目里的用户管理功能Mapper 接口定义和 XML 大致是这样配合的public interface UserMapper { ListUser selectUserPage(Param(nickname) String nickname, Param(offset) int offset, Param(limit) int limit); }select idselectUserPage resultTypecom.example.entity.User SELECT * FROM user where if testnickname ! null and nickname ! AND nickname LIKE CONCAT(%, #{nickname}, %) /if /where ORDER BY daily_check_count DESC LIMIT #{offset}, #{limit} /select这段 SQL 覆盖了后台管理列表页的典型场景。where标签会自动处理多余的 AND 前缀避免空条件时 SQL 语法错误#{}是预编译占位符传参数时会走 PreparedStatement能防注入LIMIT #{offset}, #{limit}是 MySQL 分页写法注意 offset 必须由(pageNum - 1) * pageSize计算后在 Service 层算好再传入。如果在数据量大比如用户表过百万的情况下LIMIT 100000, 20的性能会明显下降此时可以改成WHERE id #{lastId} LIMIT #{limit}的键集分页。2.3 Controller 层返回统一 JSON 结构的约定小程序端和后端交互必须有一个统一的响应结构否则前端判断业务状态会非常痛苦。SSM 项目里常见的做法是定义Result类public class ResultT { private Integer code; private String msg; private T data; public static T ResultT success(T data) { ResultT r new Result(); r.code 200; r.msg success; r.data data; return r; } public static T ResultT error(String msg) { ResultT r new Result(); r.code 500; r.msg msg; return r; } }Controller 里的每个接口返回这个对象SpringMVC 通过ResponseBody自动序列化成 JSON。注意一个问题如果字段值为 null默认序列化也会输出data: null小程序端 wx.request 的 success 回调里要兼容判断。对于日期字段建议在字段上加JsonFormat(pattern yyyy-MM-dd HH:mm:ss, timezone GMT8)不然小程序端会收到一串时间戳数字。3. 小程序端结构页面、组件与 wx.request 请求封装3.1 小程序页面如何承载打卡、备忘录与学习计划微信小程序端的目录结构通常是pages/index、pages/checkin、pages/memo、pages/plan、pages/resource、pages/forum等。每个页面由.wxml、.wxss、.js、.json四个文件组成。这里的「每日打卡」功能一般会设计成用户进入页面时通过onLoad或onShow请求后端接口查询今日是否已打卡如果已打卡则按钮置灰打卡成功后更新打卡天数。举例来说打卡页面的.js核心逻辑Page({ data: { isChecked: false, totalDays: 0 }, onShow() { this.loadCheckStatus(); }, loadCheckStatus() { const token wx.getStorageSync(token); wx.request({ url: http://localhost:8080/api/checkin/today, method: GET, header: { Authorization: token }, success: (res) { if (res.data.code 200) { this.setData({ isChecked: res.data.data.checked, totalDays: res.data.data.totalDays }); } } }); }, doCheckin() { if (this.data.isChecked) return; wx.request({ url: http://localhost:8080/api/checkin, method: POST, header: { Content-Type: application/json }, success: (res) { if (res.data.code 200) { wx.showToast({ title: 打卡成功, icon: success }); this.setData({ isChecked: true, totalDays: this.data.totalDays 1 }); } } }); } });这个逻辑里有几个值得注意的细节。onShow而不是onLoad去加载状态是因为用户可能打卡成功后切到其他页面再返回onShow每次显示都会触发能保证状态同步。header中携带的Authorization字段是后端从请求头取 token 用的注意不要放在data里否则常规的后端拦截器取不到。http://localhost:8080这个地址在微信开发者工具里可以访问但真机预览时必须改成局域网 IP 如http://192.168.1.100:8080并且要在微信公众平台后台配置 request 合法域名。3.2 封装 request 工具避免重复代码如果每个页面都写wx.request代码会冗余且难维护。我一般会在utils/request.js里封装一层这个项目里大概率也有类似的工具。封装的核心逻辑const BASE_URL http://localhost:8080/api; function request(url, method GET, data {}) { return new Promise((resolve, reject) { wx.request({ url: BASE_URL url, method: method, data: data, header: { Content-Type: application/json, Authorization: wx.getStorageSync(token) || }, success: (res) { if (res.statusCode 401) { wx.redirectTo({ url: /pages/login/login }); reject(res); } else if (res.statusCode 200 res.data.code 200) { resolve(res.data.data); } else { wx.showToast({ title: res.data.msg || 请求失败, icon: none }); reject(res); } }, fail: (err) reject(err) }); }); } module.exports { request, BASE_URL };封装之后页面代码从十行wx.request缩到两行。参数上BASE_URL建议单独抽到config.js方便上线时切换环境token 过期返回 401 时跳转登录页这是一般后端配合拦截器返回的状态码。小程序端在做这种封装时需要注意 Promise 化后wx.request的success和fail回调会同时存在不能在高版本基础库中用wx.request的同步返回值必须走回调转 Promise。3.3 动态设置页面标题与顶部导航热词里有「小程序动态设置标题」「修改刚进入的加载页面」这其实是两个不同的需求。设置标题有两种方式静态配置写在页面对应.json文件里{ navigationBarTitleText: 每日打卡, navigationBarBackgroundColor: #4CAF50 }动态设置则调用wx.setNavigationBarTitlewx.setNavigationBarTitle({ title: 学习计划 - 第3周 });这个方法的适用场景是详情页标题跟随数据变化比如用户在论坛帖子列表点击某条帖子进入详情页后把标题设置为帖子的标题。「修改刚进入的加载页面」通常指app.json中的entryPagePath字段它可以指定小程序冷启动时第一个显示的页面比如默认进登录页还是首页{ entryPagePath: pages/index/index, pages: [ pages/index/index, pages/login/login ] }注意entryPagePath的值必须存在于pages列表中否则编译直接报错。还有一点微信开发者工具新版本中app.json里改了entryPagePath后需要重新编译才会生效单纯的「编译」按钮有时候不触发冷启动更新要点「清缓存 → 全部清除」再编译。4. 核心业务模块打卡、学习计划、收藏与论坛的数据表设计4.1 每日打卡的数据模型与防重复逻辑打卡功能看似简单但表结构如果不注意很容易出 bug。常见的设计是checkin_record表核心字段包括id、user_id、checkin_date、create_time并且对(user_id, checkin_date)建立唯一索引CREATE TABLE checkin_record ( id INT NOT NULL AUTO_INCREMENT, user_id INT NOT NULL, checkin_date DATE NOT NULL, create_time DATETIME DEFAULT CURRENT_TIMESTAMP, PRIMARY KEY (id), UNIQUE KEY uk_user_date (user_id, checkin_date) ) ENGINEInnoDB DEFAULT CHARSETutf8mb4;为什么必须加唯一索引而不是靠 Java 代码先SELECT COUNT(*)再INSERT因为两个请求同时打到后端时先查后插会被竞态条件击穿可能产生两条同一天的数据。有了唯一索引第二次 INSERT 会抛出DuplicateKeyException在 Service 层捕获这个异常然后返回「今日已打卡」即可。查询打卡天数的 SQLSELECT COUNT(*) FROM checkin_record WHERE user_id #{userId}如果要显示「连续打卡天数」需要额外按日期排序后判断昨天是否有记录这个计算放在 SQL 里会复杂放在 Java 里循环判断反而简单。可以查出用户所有的打卡日期列表然后从今天往回逐天判断缺失就断。4.2 学习计划的字段设计与状态管理学习计划表通常比打卡表多几个状态字段CREATE TABLE study_plan ( id INT NOT NULL AUTO_INCREMENT, user_id INT NOT NULL, title VARCHAR(100) NOT NULL, plan_content TEXT, plan_date DATE NOT NULL, status TINYINT DEFAULT 0 COMMENT 0-未完成 1-已完成, create_time DATETIME DEFAULT CURRENT_TIMESTAMP, PRIMARY KEY (id) ) ENGINEInnoDB DEFAULT CHARSETutf8mb4;status用 TINYINT 类型存 0 和 1比字符串更省空间、查询更快。管理端的「学习计划管理」实际上就是一个条件分页查询支持按用户、按状态、按日期范围过滤。这里有一个后台管理的通用技巧在 Controller 接收pageNum、pageSize、status等参数然后传给 Service 层组装MapString, Object条件再交给 Mapper 动态 SQL 执行。前端表格展示时用 tag 标签把 0/1 渲染成「未完成 / 已完成」。4.3 学习资源与收藏的表关系设计学习资源表可以放id、title、url、type、cover_url、publish_time收藏表则是一个经典的多对多关系CREATE TABLE favorite ( id INT NOT NULL AUTO_INCREMENT, user_id INT NOT NULL, resource_id INT NOT NULL, create_time DATETIME DEFAULT CURRENT_TIMESTAMP, PRIMARY KEY (id), UNIQUE KEY uk_user_res (user_id, resource_id) ) ENGINEInnoDB DEFAULT CHARSETutf8mb4;用户点击收藏时小程序端 POST/api/favorite后端先判断该用户是否已收藏过没有则插入。点击「我的收藏」则联表查询SELECT r.* FROM resource r INNER JOIN favorite f ON r.id f.resource_id WHERE f.user_id #{userId} ORDER BY f.create_time DESC这里用 INNER JOIN 而不是左连接因为收藏表里只要有记录资源一定存在用 INNER JOIN 可以过滤掉资源被删但收藏记录未清理的情况。4.4 论坛交流的帖子与回复数据结构论坛模块一般至少两张表forum_post和forum_reply。帖子和用户是一对多帖子和回复是一对多。字段设计CREATE TABLE forum_post ( id INT NOT NULL AUTO_INCREMENT, user_id INT NOT NULL, title VARCHAR(200) NOT NULL, content TEXT, view_count INT DEFAULT 0, reply_count INT DEFAULT 0, create_time DATETIME DEFAULT CURRENT_TIMESTAMP, PRIMARY KEY (id) ) ENGINEInnoDB DEFAULT CHARSETutf8mb4;view_count是冗余字段但用来做列表页的浏览数展示很合适不必每次 COUNT 回复表。帖子详情页要同时展示帖子内容和回复列表后台逻辑一般用两个查询先查帖子主记录再查回复集合。如果想一步到位可以写一个自定义 VO 类PostDetailVO里面有帖子字段和ListReply字段Mapper 里用collection标签做嵌套结果映射。要说明的是MySQL 没有像 MongoDB 那样的嵌入式文档靠 MyBatis 只能组装对象所以列表页和详情页拆两个查询通常比强行联表更高效。5. 从压缩包到跑起来工程导入、脚本执行与本地联调5.1 项目导入 Eclipse 与依赖检查压缩包里有.classpath和org.eclipse.wst.common.component文件说明这是一个 Eclipse 的 Dynamic Web Project。导入方式不是直接解压后File → Open Projects from File System因为 Maven 依赖可能还没下载。正确流程是解压到工作目录保持目录结构完整。Eclipse 中File → Import → Existing Maven Projects选择解压后的根目录。等待 Maven 下载依赖主要看pom.xml中的 spring-webmvc、mybatis-spring、druid、mysql-connector-java 等版本是否冲突。配置 Tomcat 8.5 以上运行环境将项目添加到 Server 中启动。如果导入后报ClassNotFound错误先检查maven-dependency-plugin是否把依赖拷贝到WEB-INF/lib。我遇到过比较多的坑是 JDK 版本不匹配SSM 框架用 JDK 1.8 编译的 class 文件如果在 JDK 11 的 Tomcat 上运行反射相关的代码会报IllegalAccessError或NoSuchMethodError。建议用 JDK 1.8。另外web.xml中的url-pattern/api/*/url-pattern决定了所有接口前缀小程序端的 BASE_URL 要注意对齐。5.2 理解三个 bat 脚本的执行顺序压缩包里有1-install.bat、2-run.bat、3-build.bat。常见的执行顺序是先 1 再 23 是可选的打包步骤。1-install.bat一般是 Maven 安装命令echo off call mvn clean install -DskipTests pause-DskipTests跳过单元测试编译阶段能缩短安装时间。2-run.bat一般是用嵌入式的 Tomcat 插件启动echo off call mvn tomcat7:run -Dmaven.tomcat.port8080 pause注意这个命令依赖pom.xml中配置了tomcat7-maven-plugin。如果你的项目同时存在spring-mvc.xml和spring-servlet.xml两套配置文件Tomcat 启动时可能会出现「多个 Servlet 映射到 /*」的警告建议统一用spring-servlet.xml配置DispatcherServlet。3-build.bat通常是打 war 包echo off call mvn clean package -DskipTests pause打完包后在target/目录下找到.war文件可以丢到独立的 Tomcat webapps 下部署。需要注意的是如果开发环境没有配置 Maven 环境变量这些 bat 脚本执行会直接报mvn 不是内部或外部命令需要在系统环境变量的 Path 中加入 Maven 的bin目录。5.3 MySQL 初始化与常见 404、500 排错启动后端之前先确认 MySQL 已创建数据库并执行 SQL 脚本。常见做法是把建库建表语句放在db/english_app.sql中执行命令mysql -u root -p db/english_app.sql导入成功后检查db.properties或jdbc.properties里的连接信息是否与本地一致。启动 Tomcat 后后端接口 404 的排查顺序是先看控制台日志有没有Mapping \...\打印出来再看前端请求的 URL 是否带/api前缀最后看DispatcherServlet的contextConfigLocation是否正确加载了spring-mvc.xml。接口 500 则重点看异常堆栈Invalid bound statement表示 Mapper XML 没扫描到BadSqlGrammarException表示表名或字段名与数据库不一致ClassCastException则多半是实体类字段类型与表字段类型不匹配。真机联调阶段微信开发者工具默认勾选了「不校验合法域名」所以本地用http://localhost:8080调试没问题。但发布上线时小程序必须使用 HTTPS 域名且该域名需要在微信公众平台后台「开发管理 → 开发设置 → 服务器域名」中配置 request 合法域名。如果域名没有备案或证书过期小程序端会在请求发起时直接报url not in domain list。调试时如果想抓包查看小程序和 SSM 接口之间到底传了什么参数可以用 Charles 或 Fiddler 配置 SSL 代理注意在微信开发者工具中关闭「校验合法域名」后抓包工具才能看到 HTTP 明文流量。要是接口返回 401先看登录接口返回的 token 是否正确存到本地 Storage再检查后端拦截器中的 token 校验逻辑是否把携带Authorization头的请求白名单排除在外。最后的建议是如果后台管理页面改完前端代码后浏览器不刷新多半是main.css.bak这类备份文件干扰了静态资源映射检查spring-mvc.xml中mvc:resources mapping/static/** location/static/ /的路径是否与页面引用一致。本文还有配套的精品资源点击获取