微信小程序+Java后端：青少年心理健康科普平台搭建全解析

简介：基于微信小程序与java后端的青少年心理健康科普平台毕业设计，适合计算机相关专业毕业设计、课程设计及小程序开发实战练习。项目采用SSM框架与MySQL数据库，借助微信开发者工具构建前后端整体方案，涵盖从注册审核、登录浏览、心理医生展示到在线咨询回复的完整闭环。小程序端包含用户注册与信息提交、管理员审核后登录查看健康知识、咨询医生并接收回复、个人中心修改资料与重新登录；后台端则支持用户管理、健康内容维护、系统设置以及公告推送，便于理解角色权限与数据流转。压缩包含1458个文件，主要类型包括png图片、js逻辑、vue组件、java后端、json配置、wxml与wxss页面文件，另有sql数据库脚本、docx说明文档、mp4演示视频和bat构建脚本，包体大小33.49MB。前置脚本可帮助快速搭建环境，目录结构按前端、后端与文档分离，方便模块化学习。已有269人学习下载，适合希望参考完整心理咨询类小程序前后端实现的开发者。

1. 青少年心理健康科普平台：微信小程序+Java 后端这套毕设到底解决什么问题

“微信小程序+java后端”这个组合在毕业设计里长盛不衰，原因很朴素：小程序解决用户触达，Java 后端解决业务逻辑与数据存储，天生就是前后端分离的结构。青少年心理健康科普平台的具体玩法是，用户打开小程序能看分类科普文章、做心理量表测试、查看测评结果与历史记录，管理员在 Web 端维护内容和题库，顺便看一眼用户增长曲线。它不像商城项目那么卷，但又覆盖了登录鉴权、内容管理、数据统计、题库计分这些高频考察点。适合三类人：准备开题的毕业生、想拿小程序练手 Java 接口的初级开发者，以及需要给学校做一个内部科普入口的老师。

2. 后端搭建与数据库设计：Spring Boot 配 MySQL，先把数据层立住

毕设类项目我一般不建议把后端做得过于“重型”。Spring Boot 2.7.x + MyBatis-Plus + MySQL 8 是这个标题下最常见的可靠组合，因为 MyBatis-Plus 能把单表增删改查压到几乎没有样板代码，而 Spring Boot 内置 Tomcat 和自动配置，省掉了 SSM 时代一大堆 XML。整层后端做下来，你会发现核心工作其实只有三块：表结构设计、登录鉴权、业务接口。先把这三块立住，功能页只是时间问题。

2.1 六张核心表：把用户、内容、量表串成一个闭环

数据库是这个项目的命根子，表没设计好，后面每个接口都在给你上眼药。按“用户—内容—测评”三条线拆，最少要六张表：用户表、文章分类表、文章表、量表表、量表题目表、测评记录表。用户表单独存 openid，文章表挂分类 id，量表题目表用 JSON 存选项和分值，测评记录表存用户每次答题的原始答案和总分。

CREATE TABLE user_info ( id BIGINT AUTO_INCREMENT PRIMARY KEY, openid VARCHAR(64) NOT NULL UNIQUE COMMENT '微信openid', nickname VARCHAR(64) DEFAULT '' COMMENT '昵称', avatar VARCHAR(255) DEFAULT '' COMMENT '头像URL', phone VARCHAR(20) DEFAULT '' COMMENT '手机号', status TINYINT DEFAULT 1 COMMENT '1正常 0禁用', create_time DATETIME DEFAULT CURRENT_TIMESTAMP, update_time DATETIME DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP ) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COMMENT='用户表'; CREATE TABLE article ( id BIGINT AUTO_INCREMENT PRIMARY KEY, category_id BIGINT NOT NULL COMMENT '分类id', title VARCHAR(200) NOT NULL COMMENT '标题', summary VARCHAR(500) DEFAULT '' COMMENT '摘要', content MEDIUMTEXT COMMENT '文章正文', cover_image VARCHAR(255) DEFAULT '' COMMENT '封面图URL', read_count INT DEFAULT 0 COMMENT '阅读数', status TINYINT DEFAULT 1 COMMENT '1发布 0下架', create_time DATETIME DEFAULT CURRENT_TIMESTAMP, INDEX idx_category (category_id) ) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COMMENT='科普文章表'; CREATE TABLE assessment ( id BIGINT AUTO_INCREMENT PRIMARY KEY, title VARCHAR(200) NOT NULL COMMENT '量表名称', description TEXT COMMENT '量表说明', status TINYINT DEFAULT 1 COMMENT '1启用 0停用', create_time DATETIME DEFAULT CURRENT_TIMESTAMP ) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COMMENT='量表表'; CREATE TABLE assessment_question ( id BIGINT AUTO_INCREMENT PRIMARY KEY, assessment_id BIGINT NOT NULL COMMENT '所属量表id', question_text VARCHAR(500) NOT NULL COMMENT '题干', options_json TEXT NOT NULL COMMENT '选项JSON，如[{"label":"A","text":"非常符合","score":2}]', sort_order INT DEFAULT 0 COMMENT '题目顺序', INDEX idx_assessment (assessment_id) ) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COMMENT='量表题目表';

这里有两个容易被新手忽略的点。openid 字段必须加 UNIQUE，因为微信用户唯一标识就是它，不加的话高并发下同一用户可能被插出两行记录。文章表不直接存分类名称而是存 category_id，是为了以后改分类名不用一条条 UPDATE 文章，这是典型的关系建模习惯，答辩时老师一问就能答上。

2.2 Spring Boot 项目骨架：依赖、配置文件与连接池参数

后端使用 Maven 工程，核心依赖只有三个：spring-boot-starter-web、mybatis-plus-boot-starter、mysql-connector-j。不需要额外引数据库连接池，Spring Boot 2.x 默认用 HikariCP，它的性能和稳定性对毕设流量完全够用。

<parent> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-parent</artifactId> <version>2.7.18</version> </parent> <dependencies> <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-web</artifactId> </dependency> <dependency> <groupId>com.baomidou</groupId> <artifactId>mybatis-plus-boot-starter</artifactId> <version>3.5.3.1</version> </dependency> <dependency> <groupId>com.mysql</groupId> <artifactId>mysql-connector-j</artifactId> <scope>runtime</scope> </dependency> </dependencies>

application.yml 里的重点是数据源 URL 参数，MySQL 8 写不好这几个参数会直接启动失败：

server: port: 8080 spring: datasource: url: jdbc:mysql://localhost:3306/mental_health?useUnicode=true&characterEncoding=utf8&serverTimezone=Asia/Shanghai&useSSL=false&allowPublicKeyRetrieval=true username: root password: 123456 driver-class-name: com.mysql.cj.jdbc.Driver servlet: multipart: max-file-size: 10MB mybatis-plus: configuration: log-impl: org.apache.ibatis.logging.stdout.StdOutImpl global-config: db-config: logic-delete-field: deleted

serverTimezone=Asia/Shanghai解决 MySQL 8 默认时区与本地环境不符导致的 “The server time zone value” 报错；useSSL=false关闭 SSL 握手，本地开发没必要开；allowPublicKeyRetrieval=true是为解决 MySQL 8 的 caching_sha2_password 认证插件带来的连接失败。这三个参数不是玄学，是 MySQL 8 连接绕不开的三个坎。

2.3 登录接口：用 wx.login 换 openid，别自己做一套账号密码体系

青少年心理科普平台的用户端是微信小程序，微信已经帮你解决了“他是谁”的问题，后端不需要再设计注册登录页。流程是：小程序调用 wx.login 拿到临时 code，把 code 发给后端，后端拿 code 去微信的 jscode2session 接口换 openid，然后在 user_info 表里按 openid 查找，找不到就创建一条新用户，最后返回一个 token。

@RestController @RequestMapping("/api/auth") public class AuthController { @Autowired private UserService userService; @PostMapping("/login") public Result login(@RequestBody LoginRequest req) { // 1. 用 code 换 openid，调用微信官方接口 String openid = wxService.getOpenid(req.getCode()); if (openid == null) { return Result.error("登录失败，code无效"); } // 2. 查库或建新用户 UserInfo user = userService.findOrCreate(openid); // 3. 生成登录 token，这里用 UUID 就够了，毕设不必上 JWT String token = userService.createToken(user.getId()); return Result.ok().put("token", token).put("user", user); } }

这段逻辑里最容易被忽略的是wxService.getOpenid内部调用的是https://api.weixin.qq.com/sns/jscode2session，需要 GET 方式拼接 appid、secret、code 三个参数。appid 和 secret 要放在后端配置里，绝不能写在小程序端代码中。微信返回的 openid 是用户在这个小程序下的唯一身份，同一用户在不同小程序里 openid 不同，所以它天然适合做主键。

3. 微信小程序端：从启动到看到内容，把请求链路走通

小程序端我习惯用原生语言写而不是 uni-app，原因有两个：毕设体量通常只有二三个页面，原生足够；评委想看的是你对微信小程序生命周期、事件绑定、组件通信的掌握程度，原生代码最直观。功能页按用户路径拆：启动登录、文章列表、文章详情、答题页、结果页、个人中心。这一段只覆盖“登录 + 内容展示”的完整链路。

3.1 请求封装：全局 token、统一错误提示、避免回调地狱

小程序的 wx.request 是回调式的，用 Promise 包一层之后，所有接口调用都变得规整，也方便统一处理 401 跳登录。

// utils/request.js const BASE_URL = 'http://localhost:8080/api'; function request(path, method, data) { return new Promise((resolve, reject) => { wx.request({ url: BASE_URL + path, method, data, header: { 'Content-Type': 'application/json', 'Authorization': wx.getStorageSync('token') || '' }, success(res) { if (res.statusCode === 200 && res.data.code === 0) { resolve(res.data.data); } else if (res.statusCode === 401) { wx.reLaunch({ url: '/pages/index/index' }); } else { wx.showToast({ title: res.data.msg || '请求失败', icon: 'none' }); reject(res.data); } }, fail(err) { wx.showToast({ title: '网络异常', icon: 'none' }); reject(err); } }); }); } module.exports = { get: (path) => request(path, 'GET'), post: (path, data) => request(path, 'POST', data) };

BASE_URL 是开发期最折磨人的一个点。开发者工具里勾选“不校验合法域名”后，填http://localhost:8080没问题，但真机调试时 localhost 指向手机自己，必须改成电脑的局域网 IP，比如http://192.168.1.101:8080。线上发布则必须换成已备案并配置好 SSL 证书的 HTTPS 域名，还得在小程序后台的“request 合法域名”里登记。

3.2 wx.login 只在 App onLaunch 调一次，别在每个页面重复触发

新手最容易犯的错是每个页面 onLoad 都调 wx.login，结果后端收到一堆过期 code。正确的做法是在 App 启动时检查本地有没有 token，没有才走登录流程。

// app.js App({ onLaunch() { const token = wx.getStorageSync('token'); if (token) return; wx.login({ success: async (res) => { if (!res.code) { console.error('wx.login failed', res); return; } try { const { post } = require('./utils/request'); const data = await post('/auth/login', { code: res.code }); wx.setStorageSync('token', data.token); wx.setStorageSync('user', data.user); } catch (e) { console.error('login error', e); } } }); } });

这里有一个常见坑：微信的 code 有效期只有五分钟，且只能用一次。如果用户停留时间过长后 token 过期，前端拿旧 code 去换 openid，后端会报40001 invalid code。处理方式是让后端返回 401，前端捕获后先清除本地 token，再重新调 wx.login 换新 code，而不是在原页面反复重试同一个 code。

3.3 文章列表与详情：分页、加载态、图片懒加载

内容列表页要做三件事：分页加载避免一次拿全部数据、onReachBottom 触底翻页、图片懒加载省流量。分页参数统一用 page 和 size，后端返回的 records 直接拼到列表尾部。

// pages/article/list.js Page({ data: { list: [], page: 1, size: 10, loading: false, hasMore: true }, onLoad() { this.loadList(); }, async loadList() { if (this.data.loading || !this.data.hasMore) return; this.setData({ loading: true }); try { const { get } = require('../../utils/request'); const records = await get(`/article/list?page=${this.data.page}&size=${this.data.size}`); if (records.length < this.data.size) { this.setData({ hasMore: false }); } this.setData({ list: this.data.list.concat(records), page: this.data.page + 1, loading: false }); } catch (e) { this.setData({ loading: false }); } }, onReachBottom() { this.loadList(); } });

对应 WXML 里的渲染层，注意 wx:key 必须绑定唯一 id，否则列表 item 复用会错乱；图片加lazy-load="true"属性，滚动到可视区域才加载，体感会顺滑很多。

<view class="article-card" wx:for="{{list}}" wx:key="id" bindtap="goDetail">goDetail(e) { const id = e.currentTarget.dataset.id; wx.navigateTo({ url: `/pages/article/detail?id=${id}` }); }

详情页在 onLoad 的 options 参数里直接拿到 id，再调用/article/detail/${id}接口渲染全文。这个模式简单可靠，也是微信小程序中最常规的页面通信方式。

4. 心理测试模块：量表、计分、结果，三种实现方式怎么选

心理测试是整个项目的差异化功能，也是答辩时最容易出彩的地方。它的技术核心是“量表—题目—选项—分值”的数据建模，以及不同量表的计分规则。毕业设计阶段不需要做复杂的常模对照，能完成“按选项累分 → 按区间出结论 → 保存历史记录”就算合格。具体实现上有三种常见路子，我按推荐程度排序。

4.1 量表数据结构：选项分值放哪，决定了计分逻辑写在哪

三种实现方式：

推荐的还是“后端计分”。原因是毕设答辩时，老师大概率会问“计分规则改了怎么办”，如果你答“前端重新发版”，印象分会打折；答“后端改配置，小程序无感”，立刻能聊下去。具体做法是 options_json 里的每个选项带上 score，用户提交的是选项 label 列表，后端逐题匹配分值累加。

4.2 后端计分接口：一次请求完成计分、结论、入库

后端接收的参数是一个量表 id 加答案列表，答案里记录题目 id 和选项 label。这样做的边界清晰：前端不信任任何分值，只看最后返回的结论。

@RestController @RequestMapping("/api/assessment") public class AssessmentController { @Autowired private AssessmentService assessmentService; @PostMapping("/submit") public Result submit(@RequestBody SubmitRecordRequest req) { // 1. 按量表id查出全部题目及其选项分值 // 2. 遍历用户答案，逐题累加分数 // 3. 根据总分落入哪个区间，生成结论文案 AssessmentRecord record = assessmentService.submit(req.getAssessmentId(), req.getAnswers()); return Result.ok().put("record", record); } }

public class SubmitRecordRequest { private Long assessmentId; private List<AnswerDetail> answers; } public class AnswerDetail { private Long questionId; private String label; // 用户选的选项label，如 "A" }

submit 方法内部要做三件事：校验量表是否启用、逐题算分、生成区间结论。结论文案建议在量表表里预留一个 result_rule 字段存 JSON，例如[{"min":0,"max":9,"text":"轻度...","suggestion":"..."}]，这样每个量表可以自定义自己的结论规则，不用为每个量表写一套 if-else。到这里你会发现问题回到了最朴素的一句话：所谓业务接口，就是把一个现实流程拆成读库、计算、写库三步。

4.3 前端答题页：单选框、进度条、答案暂存

前端答题页的组件选择很简单，直接用微信自带的radio-group，一次只展示一道题，切题时把上一题答案暂存在本地数组里，最后一题点“提交”才走接口。

<!-- pages/assessment/detail.wxml --> <view class="progress">第 {{currentIndex + 1}} / {{total}} 题</view> <view class="question">{{currentQuestion.questionText}}</view> <radio-group bindchange="onOptionChange"> <label class="option-item" wx:for="{{currentQuestion.options}}" wx:key="label"> <radio value="{{item.label}}" checked="{{selectedLabel === item.label}}" /> <text>{{item.label}}. {{item.text}}</text> </label> </radio-group> <view class="btn-group"> <button wx:if="{{currentIndex > 0}}" bindtap="prevQuestion">上一题</button> <button wx:if="{{currentIndex < total - 1}}" bindtap="nextQuestion">下一题</button> <button wx:if="{{currentIndex === total - 1}}" bindtap="submitAnswer">提交</button> </view>

// pages/assessment/detail.js Page({ data: { assessmentId: null, questions: [], currentIndex: 0, currentQuestion: null, selectedLabel: '', answers: [] }, onLoad(options) { this.setData({ assessmentId: options.id }); this.loadQuestions(options.id); }, async loadQuestions(id) { const { get } = require('../../utils/request'); const questions = await get(`/assessment/questions?id=${id}`); this.setData({ questions, currentQuestion: questions[0] }); }, onOptionChange(e) { this.setData({ selectedLabel: e.detail.value }); }, nextQuestion() { // 把当前题的答案存进 answers 数组 const { currentIndex, currentQuestion, selectedLabel, answers, questions } = this.data; answers.push({ questionId: currentQuestion.id, label: selectedLabel }); const nextIndex = currentIndex + 1; this.setData({ currentIndex: nextIndex, currentQuestion: questions[nextIndex], selectedLabel: '' }); } });

这段代码里有个调优细节：不要把整个 questions 数组和 answers 数组都塞进 data。data 里只放当前题目 currentQuestion 和当前选中项，剩下放不下的大数组用this.answers、this.questions挂在 Page 实例上。因为 setData 每次都会把数据传到渲染层做 diff，大数组反复 setData 是答题页卡顿的元凶，这也是小程序性能优化的常见考点。

5. 避坑与排查：这个项目最容易翻车的 5 个真实场景

这一章不是从文档里抄来的，全是做小程序卡过壳、被老师问住过的现场。按现象、原因、解决三步说清楚，每一条都能直接对号入座。

5.1 开发者工具里一切正常，真机一打开就白屏

现象：模拟器上列表、详情、答题都没问题，用预览二维码在手机上看，所有请求全部失败，页面白屏。

原因：微信真机对 wx.request 的域名有强校验，开发者工具默认不校验，但真机会拦下所有非 https 域名请求。很多同学用http://localhost:8080做接口地址，模拟器能用，真机上 localhost 指向手机自身，端口根本不存在。

解决：开发调试阶段用真机时，把 BASE_URL 改成电脑的局域网 IP，并且确保手机和电脑在同一 WiFi 下；在开发者工具“详情—本地设置”勾选“不校验合法域名”。线上发布则必须准备好 HTTPS 域名，并在 mp 后台配置 request 合法域名。

5.2 登录偶发报错 invalid code，用户表里出现重复记录

现象：第一次登录成功，退出再登录偶尔报40001 invalid code，或者数据库里同一用户出现了两条记录。

原因：code 只能用一次且有效期五分钟。有些页面在 onShow 里也调用了 wx.login，导致同一个 code 被后端消费两次；如果没在 user_info.openid 上建 UNIQUE 索引，并发请求下可能插入重复用户。

解决：后端在 jscode2session 返回失败时，把错误码和 openid 一起写日志，前端只在 onLaunch 调一次 wx.login；给 openid 加上 UNIQUE 约束，并在 findOrCreate 方法里用先查后插并捕获冲突异常，保证幂等。

5.3 MySQL 8 启动报 Communications link failure 或 timezone 错误

现象：后端一启动就报Communications link failure，或者The server time zone value '�й���ʱ��'，数据库连不上。

原因：MySQL 8 的驱动要求显式指定时区，而且默认认证插件 caching_sha2_password 在部分环境需要额外参数。这个问题在新电脑上尤其常见，因为 MySQL 8 默认配置和 5.7 完全不同。

解决：jdbc URL 加serverTimezone=Asia/Shanghai&useSSL=false&allowPublicKeyRetrieval=true，并确认 MySQL 服务确实在运行、密码正确。改完重启后端如果还报错，优先看堆栈是驱动连接超时还是认证失败，两类问题的排查方向完全不同。

5.4 上传的封面图后端一重启就 404

现象：管理员在后台上传了文章封面图，当时能访问；后端服务重启后图片全部 404。

原因：很多教程把上传目录写在项目内部，比如src/main/resources/static/upload/，运行时文件写进了 target 目录或工作目录，一重新打包或重启就清空。

解决：把上传路径配置成外部绝对路径，比如/data/mental-health/upload/，在 application.yml 里用upload.dir配置，再用一个 WebMvcConfigurer 把这个路径映射到/upload/**。部署时把这个目录单独挂载出来，重启也不丢。

5.5 答辩被问“量表是哪来的”，直接卡住

现象：用了网上流传的 SDS、SAS 等知名量表，老师问量表的中文化授权、常模来源，答不上来。

原因：心理健康领域有不少量表是受版权保护的，网上流传的版本未必能自由用于商业或公开项目。毕设虽然以教学为主，但照搬知名量表在答辩中很容易被追问。

解决：题库自己编或者使用已进入公共领域的条目，在量表说明页面明确写“测评结果仅供参考，不构成医学诊断”。这样既规避了版权风险，又体现了对专业边界的尊重，反而是答辩加分项。

6. 从能跑到能答辩：演示视频、说明文档和答辩演示的三个收尾动作

6.1 演示视频按“用户路径”录，不要录成截屏轮播

演示视频是这个交付物里最直观的“门面”。常见做法是先用录屏工具完整录一遍小程序操作，再补一段后端接口返回数据的画面。录制前写好脚本：启动小程序→自动登录→看文章列表→进文章详情→返回→进心理测试→答完全部题目→查看结果→查看历史记录。每个步骤停留两到三秒，鼠标操作不要晃。后端部分用 Postman 展示登录、提交测评、查询记录三个接口的请求与响应，让老师看到数据确实落了库。

6.2 说明文档按四个章节写，重点放数据库设计和接口清单

毕业设计说明文档不要写成流水账，我建议按这样组织：需求分析（背景、用例图、可行性）、概要设计（技术架构、数据库 ER 图、表结构说明）、详细设计（每个模块的时序图、核心接口定义）、测试与部署（功能测试用例、部署步骤）。接口清单用表格列出路径、请求方式、参数、返回值，老师扫一眼就能知道你做了多少工作量。

6.3 答辩演示按三段式，先讲问题再做功能最后展示数据

答辩时最忌讳照着文档从头念。我自己的习惯是先讲清楚“青少年心理健康科普”这个选题为什么值得做，即用户有需求、内容有专业边界、系统要解决管理与触达问题；然后现场演示小程序端从登录到测评完整路径，指到每个页面时说一句对应后端哪个接口；最后打开数据库或者管理端，展示测试记录表和统计结果，证明数据是真实流通的。这套“场景—功能—数据”的路径讲下来，基本能在五分钟内把项目的完整性说透。演示前把 WiFi、开发者工具、后端服务、数据库四个环境全部重启一遍，是我吃过亏换来的习惯，真机预览和模拟器永远不完全一样。希望帮到你。

本文还有配套的精品资源，点击获取