十年匠心定制 · 商业建站与技术教学双线并行 咨询热线:400-886-1026 service@lmnt.cn
ARTICLE DETAIL

资讯详情

深耕网站建设与运营推广的一线实战洞察。

微信小程序+Java SSM后台:青少年心理健康科普平台的用户体系与咨询模块设计

微信小程序+Java SSM后台:青少年心理健康科普平台的用户体系与咨询模块设计 简介面向计算机相关专业毕业设计场景这份青少年心理健康科普平台微信小程序项目完整涵盖小程序端与基于Java SSM框架的后台管理端实现用户注册验证、健康知识浏览、心理医生咨询与回复、公告发布等功能适用于需要完成前后台联调与MySQL数据交互的本科或专科毕设选题。资源共1452个文件其中包含320个png图片、207个js逻辑文件、162个svg图标、152个vue页面、144个java后台代码、113个json配置等整体约67.88MBrar压缩包内目录结构清晰便于按模块检索。已有401人学习下载。压缩包内除源码外还提供说明文档、操作演示录像mp4、数据库SQL脚本、启动安装批处理脚本1-install.bat、2-run.bat、3-build.bat及项目配置备份几乎覆盖从环境部署、数据库初始化到功能演示的完整流程可以直接在此基础上进行二次开发或用于毕业设计答辩参考。1. 青少年心理健康科普平台为什么小程序端要配一套Java SSM后台青少年心理健康这个选题在小程序生态里很容易做成一个纯前端展示页调几个接口把文章列表拉下来就完事。但这类毕业设计真正的扣分点往往不在页面而在「有没有一套完整的用户生命周期」——注册、审核、登录、咨询、回复、公告推送每一步都要落库、都要有状态流转。这套项目把微信小程序端和 Java SSM MySQL 后台放在一起本质上是在模拟一个真实的内容咨询类产品C 端用户看到的是小程序管理端看到的是后台管理系统两边共用同一套数据库和接口。适合用来做毕业设计或课程项目的人参考尤其是你需要展示「前后端分离但不脱离业务」的开发能力时这套拆解能帮你把答辩时的技术点讲清楚。2. 小程序端与 SSM 后台的账户体系设计注册、管理员验证、登录态青少年心理健康科普平台的第一道坎不是页面布局而是用户身份怎么在小程序和 Java 后台之间对齐。小程序端没有传统网页的 session 机制wx.login 拿到的 code 只能换 openid不能直接当业务账号用。所以这里采用「先注册、后审核、再登录」的流程意味着用户表里必须有一个状态字段来标注账号是否通过管理员验证。2.1 注册接口设计与字段校验用户在小程序端填写基本信息提交到 SSM 后台的注册接口。常见做法是设计一张t_user表字段包括user_id、username、password、real_name、age、gender、phone、status、create_time。其中password不要存明文使用 MD5 加盐或 BCrypt 处理。虽然 SSM 项目里很多人直接明文存储但答辩时面试官问一句「密码怎么保护的」如果你能答出加密和校验流程会明显不一样。小程序端注册页核心代码// pages/register/register.js register() { const { username, password, confirmPassword, realName, age } this.data; if (!username || !password || !confirmPassword) { wx.showToast({ title: 请填写完整信息, icon: none }); return; } if (password ! confirmPassword) { wx.showToast({ title: 两次密码不一致, icon: none }); return; } wx.request({ url: http://localhost:8080/api/user/register, method: POST, data: { username, password, realName, age, phone: this.data.phone, gender: this.data.gender }, success: (res) { if (res.data.code 200) { wx.showToast({ title: 注册成功等待管理员审核 }); setTimeout(() wx.navigateBack(), 1500); } else { wx.showToast({ title: res.data.msg, icon: none }); } } }); }这段代码里值得注意的点wx.request的url在开发阶段直接指向本机localhost:8080但微信开发者工具默认不允许访问局域网 IP需要在「详情-本地设置」里勾选「不校验合法域名」。data里没有传status因为新用户默认值为 0表示待审核这个状态由后台在处理注册逻辑时写入。2.2 管理员审核与状态字段后台管理员登录后在用户管理列表里可以看到所有status 0的注册申请。审核通过的操作本质是执行一条 UPDATE 语句把status从 0 改成 1。这个逻辑放在 SSM 的 Service 层Controller 只接收用户 ID// UserController.java Controller RequestMapping(/admin/user) public class UserController { Autowired private UserService userService; RequestMapping(/audit) ResponseBody public Result audit(RequestParam Integer userId, RequestParam Integer status) { // status: 1通过 2拒绝 User user userService.findById(userId); if (user null) { return Result.error(用户不存在); } user.setStatus(status); userService.update(user); return Result.success(); } }这里没有用RequestBody而是RequestParam是因为后台管理端用的是传统表单提交这样对接更简单。Result是统一返回对象包含code、msg、data三个字段小程序端收到后直接判断code是否为 200。2.3 wx.login 与登录态保持审核通过后用户在小程序端输入用户名密码登录。SSM 后台校验成功后返回一个 token小程序端把 token 存到wx.setStorageSync后续所有需要身份的接口都在请求头里带token。这里不强制依赖微信的wx.login换 openid因为业务系统本身有自己的账号体系。// pages/login/login.js login() { const { username, password } this.data; wx.request({ url: http://localhost:8080/api/user/login, method: POST, data: { username, password }, success: (res) { if (res.data.code 200) { wx.setStorageSync(token, res.data.data.token); wx.setStorageSync(userInfo, res.data.data.user); wx.switchTab({ url: /pages/index/index }); } else { wx.showToast({ title: 账号或密码错误或账号未审核, icon: none }); } } }); }token 生成可以直接用 UUID也可以引入 JWT。SSM 项目里建议用 JWT因为答辩时可以讲无状态认证还能把用户 ID 和角色编码进 token 里。拦截器里校验 token 的过期时间和签名如果校验失败返回 401小程序端在响应拦截里统一跳到登录页。状态值含义用户可操作0待审核不可登录1正常可登录、查看知识、咨询医生2已拒绝不可登录需重新注册3已禁用不可登录后台可强制退出注意status 2和status 3在登录接口里都要被拦截不能只判断用户名密码是否正确。我一般会在校验密码后加一句if (user.getStatus() ! 1) return Result.error(账号状态异常)避免用户误以为密码错了。3. 健康知识库与心理医生咨询表结构设计到双向通信平台的核心内容有两块心理健康科普知识和心理医生咨询。前者是静态内容展示后者是带状态的交互流程。这两块功能如果只做「列表-详情」和「提交-展示」难度不高但一旦涉及分类筛选、咨询状态流转、医生端回复就需要把表结构和接口设计先想清楚。3.1 健康知识分类表与列表接口健康知识建议设计两张表t_health_category分类表和t_health_article文章表。分类表字段为category_id、category_name、sort_order。文章表字段为article_id、category_id、title、content、cover_url、publish_time、views。小程序首页展示分类 tab点击分类后请求对应分类下的文章列表。MySQL 建表语句CREATE TABLE t_health_category ( category_id INT NOT NULL AUTO_INCREMENT, category_name VARCHAR(50) NOT NULL, sort_order INT DEFAULT 0, PRIMARY KEY (category_id) ) ENGINEInnoDB DEFAULT CHARSETutf8mb4; CREATE TABLE t_health_article ( article_id INT NOT NULL AUTO_INCREMENT, category_id INT NOT NULL, title VARCHAR(200) NOT NULL, content TEXT, cover_url VARCHAR(255), publish_time DATETIME, views INT DEFAULT 0, PRIMARY KEY (article_id), KEY idx_category (category_id) ) ENGINEInnoDB DEFAULT CHARSETutf8mb4;这里把category_id建了索引是因为首页查询会频繁按分类过滤。publish_time用DATETIME而不是TIMESTAMP避免 2038 年问题也方便管理端在表单里直接用datetime-local控件回填。小程序端请求文章列表时每次加载 10 条带lastId或pageNum做分页。// ArticleController.java RequestMapping(/list) ResponseBody public Result list(RequestParam(required false) Integer categoryId, RequestParam(defaultValue 1) Integer pageNum, RequestParam(defaultValue 10) Integer pageSize) { PageHelper.startPage(pageNum, pageSize); ArticleQuery query new ArticleQuery(); query.setCategoryId(categoryId); ListArticle list articleService.listByCondition(query); PageInfoArticle pageInfo new PageInfo(list); // 这里只返回必要字段content 不放入列表接口 return Result.success(pageInfo); }注意列表接口不要把content全文返回否则首屏加载会消耗大量流量。我一般会用SELECT article_id, title, cover_url, publish_time, views FROM ...手动指定列详情接口再查全文。3.2 医生信息展示与咨询消息表心理医生在首页展示点进医生详情后可以发起咨询。医生表t_doctor字段包括doctor_id、name、avatar、title职称、intro、good_at擅长方向。咨询表t_consult字段为consult_id、user_id、doctor_id、content、reply、status、create_time、reply_time。status字段是咨询流程的核心0待医生回复1医生已回复2用户已关闭小程序端提交咨询submitConsult() { const { doctorId, content } this.data; if (!content.trim()) { wx.showToast({ title: 请输入咨询内容, icon: none }); return; } wx.request({ url: http://localhost:8080/api/consult/add, method: POST, header: { token: wx.getStorageSync(token) }, data: { doctorId, content }, success: (res) { if (res.data.code 200) { wx.showToast({ title: 提交成功等待医生回复 }); this.setData({ content: }); } } }); }这里有一个容易忽略的坑header里传 token 时key 名称要和后台拦截器取的一致。如果后台用request.getHeader(token)小程序端就必须写token不能写成Authorization否则拦截器会直接放行或报空指针。建议前后端约定统一的 header 名称比如X-Token。3.3 医生端回复与小程序端刷新医生端不是独立 App而是后台管理系统里的一个角色。管理员可以把t_user里的用户设置为role doctor医生登录后台后进入「咨询管理」菜单看到所有status 0的咨询列表点击后填写回复内容。回复更新逻辑// ConsultController.java RequestMapping(/reply) ResponseBody public Result reply(RequestParam Integer consultId, RequestParam String reply) { Consult consult consultService.findById(consultId); if (consult null || consult.getStatus() ! 0) { return Result.error(咨询不存在或已被处理); } consult.setReply(reply); consult.setStatus(1); consult.setReplyTime(new Date()); consultService.update(consult); return Result.success(); }校验status ! 0是典型的并发场景防护如果两个医生同时打开同一条咨询后提交的人这里会拿到错误提示。小程序端查看回复的方式有两种一是进入咨询记录页面时重新请求详情列表二是下拉刷新时重新拉取。不需要做 WebSocket 推送因为毕业设计里轮询或手动刷新已经能完整表达业务。我一般会在咨询列表页的onShow里重新加载数据而不是在onLoad里加载一次。原因是用户从详情页返回列表页时小程序会触发onShow如果只写onLoad刚提交的咨询或医生刚回复的内容不会刷新出来。4. 后台管理端的公告推送与用户管理从表单提交到小程序展示后台管理端用的是 Java SSM JSP 或 Thymeleaf 模板这套项目里保留了.vue.bak和.css.bak文件说明开发过程中曾经尝试过 Vue 重构但最终交付版还是以服务端渲染为主。后台的核心功能有三个管理员登录与权限拦截、用户管理、公告发布。4.1 管理员登录与权限拦截管理员表可以复用t_user表加role字段也可以单独建t_admin表。如果复用注意role字段取值建议用字符串admin、doctor不要用数字 1、2因为迁移到其他系统时字符串语义更清晰。登录成功后把管理员 ID 和 role 放进 session。拦截器实现public class LoginInterceptor implements HandlerInterceptor { Override public boolean preHandle(HttpServletRequest request, HttpServletResponse response, Object handler) throws Exception { HttpSession session request.getSession(); Object admin session.getAttribute(adminInfo); if (admin null) { // 未登录重定向到登录页 response.sendRedirect(request.getContextPath() /admin/login); return false; } return true; } }登录接口里要区分用户角色如果普通用户尝试登录后台直接拒绝。不要只靠前端隐藏菜单来控制权限因为后台接口一旦被人猜到 URL没有拦截器保护就会被越权访问。4.2 公告发布与小程序端展示公告功能是管理端发布消息小程序端在首页或者我的页面展示。表结构t_notice字段为notice_id、title、content、create_time、is_top。管理端发布公告后小程序端调接口获取公告列表。// NoticeController.java RequestMapping(/latest) ResponseBody public Result latest() { ListNotice list noticeService.findLatest(5); return Result.success(list); }小程序端在首页的onLoad里请求这个接口把公告标题渲染成一个可横向滑动的公告栏。这里有一个性能细节公告接口不需要每次都全量查询可以在 SQL 里按create_time DESC LIMIT 5只拿最新五条。发布公告时管理端表单里有一个「是否置顶」的复选框对应is_top字段。排序时用ORDER BY is_top DESC, create_time DESC这样置顶公告始终排在最上面。4.3 用户列表与禁用操作后台的用户管理页面需要展示所有用户并且支持按状态筛选。用户列表页面建议实现三个功能搜索按用户名或手机号、审核、禁用/启用。禁用操作不是删除记录而是把status改成 3小程序端登录时校验status不等于 1 就提示账号异常。// admin/user/list 部分 HTMLThymeleaf table classtable table-bordered thead tr thID/th th用户名/th th状态/th th操作/th /tr /thead tbody tr th:eachu : ${pageInfo.list} td th:text${u.userId}/td td th:text${u.username}/td td th:text${u.status 0 ? 待审核 : (u.status 1 ? 正常 : 禁用)}/td td a th:href{/admin/user/audit(userId${u.userId},status1)} th:if${u.status 0}通过/a a th:href{/admin/user/audit(userId${u.userId},status3)} th:if${u.status 1}禁用/a /td /tr /tbody /table这里用 GET 请求做审核操作只是为了演示方便。生产环境里应该用 POST 或 POST表单避免重复提交。后台页面里所有涉及状态变更的操作都要在操作成功后跳回列表页否则刷新页面会重复提交。5. 部署与录像复现从 bat 脚本到微信开发者工具调试的五个检查点项目压缩包里带了1-install.bat、2-run.bat、3-build.bat三个脚本这是典型的 Windows 环境一键启动方案。在答辩或验收前建议按下面五个顺序检查能减少大半运行环境问题。检查点 1MySQL 版本与编码。SSM 项目默认使用 MySQL 5.7 或 8.0。导入数据库脚本时注意检查脚本文件头的CHARACTER SET是否和实际数据库一致。如果出现中文乱码在连接字符串里追加?useUnicodetruecharacterEncodingutf8。检查点 2端口冲突。后台默认跑在 8080 端口微信开发者工具的url必须和后台实际端口一致。如果 8080 被占用优先改后台 Tomcat 端口而不是改小程序代码因为改前端代码要重新编译。检查点 3本地设置里的域名校验。微信开发者工具默认不允许访问http://localhost在「详情-本地设置」勾选「不校验合法域名」。如果你的演示录像里省掉这一步换一台电脑录制时很可能请求直接失败。检查点 4token 存储与清理。调试多次登录后wx.getStorageSync(token)可能是旧值。建议在登录接口成功回调里重新写入 token退出登录时调用wx.removeStorageSync(token)。检查点 5文件后缀 .bak 的处理。项目里保留了main.css.bak、update-password.vue.bak等文件这些文件不会影响运行但如果你用 IDE 打开整个目录可能会出现重复文件提示。建议直接忽略不要删因为在答辩展示时如果提到项目开发过程中尝试过 Vue 单页改造这些文件可以作为佐证。整个项目跑通后演示录像建议这样录制先启动后台管理端登录发布公告并审核一个测试用户再打开小程序注册新账号、等待审核登录后浏览健康知识选择医生提交咨询切回管理端以医生角色回复切回小程序查看回复。这个顺序能把注册、审核、登录、内容浏览、咨询、回复、公告展示七个核心模块串成一条业务闭环答辩时也更容易讲清楚数据流转。本文还有配套的精品资源点击获取
返回列表