做毕设带练这些年凡是看到“中国剪纸微信小程序SSM”这种组合我都愿意多聊几句。原因很朴素它把非遗文化传播和Java全栈开发揉在了一起技术上不是最难但胜在业务闭环完整、文化调性足放在答辩现场也绝对不冷场。这个项目具体是什么一句话讲清楚——前端是微信小程序用户端用来浏览剪纸作品、按分类检索、看文化资讯、收藏喜欢的作品后端基于SSM框架SpringSpringMVCMyBatis提供数据接口和管理后台管理员可以维护作品、分类、资讯和用户。适合毕业设计、课程设计也适合刚学完Java Web想系统走一遍完整项目流程的初学者。这篇文章不是课堂讲义是我实际调试这个选题时沉淀下来的拆解和排坑记录。我会从需求定位讲到数据库设计从接口约定讲到真机部署尽量做到“照着做就能跑通”。1. 项目整体拆解这个“剪纸小程序”到底做了什么1.1 需求定位不只是“网站换皮”很多学生拿到这类题目第一反应是“不就是做个信息展示吗”然后照着网上商城项目改改页面就交差。这是大忌。这个项目的核心不是“展示”而是“文化传播信息化管理”双轨并行。中国剪纸是国家级非物质文化遗产用户的诉求不只是“看到一张剪纸图”而是“知道这张剪纸是什么、有什么寓意、属于哪个流派、怎么制作”。所以业务设计上作品详情页必须承载文化介绍、工艺特点、分类归属这些信息而不是简单放一张大图。从功能边界看一个完整的用户端应该包括首页轮播图、剪纸分类导航、作品列表瀑布流图文卡片、关键词搜索、作品详情图文混排文化背景、资讯公告、微信授权登录、作品收藏。管理端则覆盖管理员登录、作品增删改查、分类管理、资讯管理、用户管理。这个闭环的好处是前端用户行为和后台数据维护一一对应答辩时说“我的系统是一个可运营的文化展示平台”底气才足。1.2 SSM小程序为什么这种前后端组合是“黄金搭档”先说SSM为什么到今天还有生命力。Spring负责Bean管理和事务控制SpringMVC负责请求路由和参数绑定MyBatis负责SQL操作这套组合在Java Web岗位面试里依然是高频考点。做这个项目等于把面试常问的IOC、AOP、依赖注入、动态代理、SQL映射全部实战了一遍老师问起来你答得出底层原理比用现成脚手架糊弄强太多。再配合微信小程序当客户端好处更明显。小程序原生语法WXML/WXSS/JS上手门槛低写起来和Vue很像但不用折腾webpack、node_modules这些工程化配置用户侧则完全免安装扫码即用非常贴合非遗文化“轻量传播”的场景。前后端职责边界非常清楚小程序只负责渲染和交互SSM后端只负责数据校验、存储和下发。联调阶段只要把接口文档定死前后端可以并行开发效率翻倍。1.3 功能边界与业务闭环首期版本我建议按下面的清单做既保证工作量又不至于失控用户端首页轮播、分类导航、作品瀑布流、关键词模糊搜索、作品详情、文化资讯列表、微信登录、收藏/取消收藏、我的收藏页管理端管理员账号密码登录、作品管理新增、编辑、下架、删除、分类管理、资讯管理、用户列表这里有个容易被追问的坑加不加商城加不加微信支付我的建议是首期做“收藏资讯”就好不要碰支付。微信支付需要企业主体和小程序商户号个人开发者根本走不通就算接入第三方支付也会把权限校验、订单状态、退款逻辑全卷进来半个月都做不完。收藏功能既能体现用户体系的价值又能围绕“我的”页面做出个人中心感性价比高得多。2. 前后端交互架构小程序怎么和SSM后端“对话”2.1 小程序端请求模型与接口约定小程序端所有网络请求走wx.request和后端通信时统一用JSON格式。为了保证接口清晰最好约定一个返回结构后端所有Controller都按这个结构输出{ code: 200, message: success, data: {} }前端封装一个request.js工具函数统一处理Token注入、状态码判断、错误提示。写好这一个文件后面每个页面都能少写几十行重复代码。典型接口约定可以这样设计功能接口路径请求方式说明获取轮播图/api/carousel/listGET返回首页轮播数据分页获取作品/api/works/listGET参数categoryId、page、size搜索作品/api/works/searchGET参数keyword作品详情/api/works/detail/{id}GET返回图文详情微信登录/api/user/loginPOST参数code、nickname、avatar收藏/取消收藏/api/favorite/togglePOST参数workId我的收藏列表/api/favorite/listGET参数page、size管理员登录/api/admin/loginPOST参数username、password一个小细节路径前缀统一加/api方便Nginx做反向代理时按前缀转发也方便管理端区分普通接口和后台接口。2.2 登录态设计wx.login、code2session与token登录是微信小程序项目里最容易卡壳的地方很多新手不知道wx.login拿到的code不能直接用。标准流程是这样小程序端调wx.login()拿到临时code把code传给后端后端拿着code去请求微信的jscode2session接口换回openid和session_key再用openid去用户表里查人查到了就正常登录查不到就自动注册一个新用户最后后端生成一个token返回给小程序端小程序存进wx.setStorageSync(token, token)后续每个请求都带上。这里有两个关键点。第一openid不能直接当业务主键暴露给前端否则别人抓包就能看到用户唯一标识非常不安全。正确的做法是openid只存在数据库里对外只返回token。第二token的生成可以用UUID也可以引入JWT毕设场景下直接用UUIDRedis存过期时间最省事但如果你没有Redis环境就在数据库里建一张token表字段包含token、userId、expireTime登录时插入、校验时查询效果也够用。有同学会问能不能顺便把用户手机号也获取了这里要注意小程序获取手机号需要企业主体的小程序个人开发者调用时基本返回报错。所以个人主体项目老老实实做“微信昵称头像openid”登录就好别在手机号上浪费时间。2.3 数据表设计的几个关键点数据库是这个项目的骨架表设计合理后面代码能少踩一半坑。核心表可以按下面这些字段来建用户表userid、openid、nickname、avatar、phone、create_time分类表categoryid、name、sort作品表workid、category_id、title、cover、detail_images、intro、content、views、create_time资讯表newsid、title、cover、content、create_time收藏表favoriteid、user_id、work_id、create_time管理员表adminid、username、password有几点设计理由值得说清楚。第一work表的detail_images字段用逗号分隔或JSON字符串存多张图这样小程序端一次请求就能拿到全部图片地址不用额外联表查图片表。第二category_id关联分类时MyBatis里建议只存ID查询时left join取分类名称不要做太深的对象嵌套。第三favorite表一定要给user_id和work_id加联合唯一索引防止用户狂点收藏时产生重复数据。另外所有时间字段用datetime内容字段用text图片路径用varchar(500)字符集统一utf8mb4。这里千万不要偷懒只建utf8因为用户昵称里经常有emoji只有utf8mb4能存得下来。3. 核心功能实现细节与实操要点3.1 作品展示模块瀑布流与图片懒加载首页是用户的第一印象剪纸作品用瀑布流展示非常出效果。小程序原生没有内置Masonry组件最简单可靠的方案是维护左右两列数组每次拿一条作品数据比较两侧累计高度把新数据塞进较矮的那一列。JS核心逻辑大概是Page({ data: { leftList: [], rightList: [], leftHeight: 0, rightHeight: 0, page: 1 }, appendWorks(works) { // 为每条作品动态计算一个估算高度 works.forEach(item { // 假设封面宽高比已知估算高度 const height 200 / (item.coverWidth / item.coverHeight); if (this.data.leftHeight this.data.rightHeight) { this.setData({ leftList: [...this.data.leftList, item], leftHeight: this.data.leftHeight height }); } else { this.setData({ rightList: [...this.data.rightList, item], rightHeight: this.data.rightHeight height }); } }); } });图片懒加载直接用image lazy-load{{true}}这是小程序原生支持的属性能减少首屏渲染负担。还有一个容易忽略的点image组件必须动态绑定高度否则所有图片都是一个默认高度瀑布流根本没有错落感。后端返回作品数据时最好把封面图的宽高比一起返回前端根据宽高比计算占位高度这样页面基本不会抖动。3.2 剪纸分类检索与模糊搜索分类导航点击后传categoryId给后端后端Mapper做个where category_id #{categoryId}就完事逻辑不复杂。真正容易踩坑的是模糊搜索的SQL写法。很多新手会写成select idsearch resultTypeWork SELECT * FROM work WHERE title LIKE %${keyword}% /select这是典型的SQL注入写法用${}直接拼字符串一旦keyword里出现引号就会出问题。正确的做法是用#{}配合CONCATselect idsearch resultTypeWork SELECT * FROM work WHERE title LIKE CONCAT(%, #{keyword}, %) /select分页这块如果集成PageHelper只要在查询前调用PageHelper.startPage(page, size)紧接着的第一次查询会被自动分页。要特别注意startPage之后如果业务方法里有多个查询分页只作用于第一个查询所以少在Service里堆无关查询。3.3 详情页与富文本渲染详情页要承载的内容比较多作品大图、名称、分类、文化背景、工艺特色。后端的content字段如果保存的是HTML片段小程序端直接用rich-text组件绑定nodes就能渲染。这里有一个非常常见的问题富文本里插入的图片默认按原尺寸显示一张宽1000px的剪纸图会把手机屏幕撑爆。解决思路是在后端内容入库或接口返回时统一处理img标签加上stylemax-width:100%;height:auto;。我通常写一个工具方法对富文本字符串做正则替换一劳永逸。详情页还有个提升体验的小功能点击图片全屏预览。用wx.previewImage传入当前图片URL和全部图片列表几行代码就能实现但答辩时提到“我考虑了图片浏览体验”老师印象分会好很多。3.4 后台管理模块SSM的Controller-Service-Mapper三层调用管理后台是整个SSM框架的主场。Controller接收参数和做基础校验Service集中管业务逻辑Mapper专心处理SQL三层职责清晰后续出问题也好定位。以新增作品为例Controller层只做几件事接收表单参数、调用Service、返回统一结果RestController RequestMapping(/api/admin/works) public class AdminWorkController { Autowired private WorkService workService; PostMapping(/add) public Result addWork(RequestBody Work work) { workService.addWork(work); return Result.success(); } }Service层负责处理图片归档、数据完整性校验、最终落库Service public class WorkServiceImpl implements WorkService { Autowired private WorkMapper workMapper; Override Transactional(rollbackFor Exception.class) public void addWork(Work work) { // 校验分类是否存在、标题是否为空 workMapper.insert(work); } }这里必须强调两点。第一事务要加在Service层不要加在Controller层。Spring声明式事务基于AOP代理Controller层的方法一般不是代理目标加了也白加。第二Mapper接口的SQL尽量用注解或XML里的#{}占位符不要用${}拼字符串这是防SQL注入的底线。管理端上传图片用MultipartFile接收保存到服务器本地目录后返回访问路径。要注意的是图片路径不能直接写成C:/xxx之类的绝对路径否则前端访问不到。Tomcat里要配置虚拟目录映射或者在后端加一个静态资源处理器把本地图片目录映射成/upload/**访问路径。4. 实操部署与踩坑记录4.1 环境准备与版本选择环境版本这块我给的标准配置是JDK 8 Tomcat 8.5/9.0 Maven MySQL 5.7或8.0。JDK 8对SSM的兼容性最好网上资料也最全JDK 11或17虽然能跑但老项目切过去容易在CGLIB代理、Tomcat版本上出幺蛾子毕设没必要冒险。MySQL 8.0用户要注意JDBC驱动类名要写com.mysql.cj.jdbc.Driver连接串必须带上serverTimezoneAsia/Shanghai不然会出现时区报错。Spring版本建议直接用5.x顺手把SpringMVC也提到5.x避免老版本在Java编译级别上的兼容问题。前端这边微信开发者工具用稳定版就行。正式开发时建议注册一个小程序测试号拿到AppID方便真机预览如果嫌麻烦工具自带的“测试号”模式也能在模拟器里开发调试只是没法扫码真机看效果。4.2 小程序合法域名与HTTPS配置本地开发阶段小程序请求http://localhost:8080时开发者工具会报“不在以下合法域名列表中”。解决办法是用开发者工具右上角“详情-本地设置”勾选“不校验合法域名、web-view业务域名、TLS版本以及HTTPS证书”这样本地调试就能直接访问。但真机预览完全不是这回事。手机端小程序要求所有请求域名必须是HTTPS而且要在微信公众平台后台配置为request合法域名。个人开发者的标准做法是买一台云服务器备案一个域名申请一张免费SSL证书比如Lets Encrypt用Nginx做反向代理把443端口的请求转发到后端Tomcat的8080端口。这段部署流程写进项目文档里会很加分因为老师看到的不只是“能跑”而是“知道如何上生产”。不过要注意AppSecret这类敏感信息绝对不要写在前端代码或提交进Git仓库里后端配置通过环境变量注入更安全。4.3 真机调试与本地联调整个联调流程建议按这个顺序走先启动MySQL并导入项目SQL文件再修改后端数据库配置启动Tomcat确认接口能通最后打开微信开发者工具在本地配置里关掉域名校验用http://localhost:8080访问接口调试。本地联调经常遇到几个报错。第一个是request:fail多数情况下是后端还没启动、网络代理问题或者后端接口压根没监听。第二个是404检查接口路径和Controller里的RequestMapping是否一致特别是注意有没有遗漏/api前缀。第三个是跨域问题SSM项目可以在SpringMVC配置里加一个CorsFilter或者在Controller上加CrossOrigin小程序端不存在浏览器同源策略限制但如果是H5预览就必须处理跨域。开发完一定要用真机扫体验版二维码实测。模拟器里看不出问题真机一跑各种性能短板全暴露——图片加载慢、页面滚动卡顿、富文本图片撑破布局这些问题都是模拟器表现正常、真机原形毕露。4.4 数据库初始化与中文乱码处理数据库初始化就一句话库表字符集全部用utf8mb4别用utf8。原因前面说过用户昵称里的emoji只有utf8mb4能存。中文乱码要重点关注三个位置JDBC连接串加上useUnicodetruecharacterEncodingutf8SpringMVC返回JSON乱码在spring-mvc.xml里配置StringHttpMessageConverter强制UTF-8编码Tomcat处理GET请求参数乱码在server.xml的Connector上配置URIEncodingUTF-8我一般会在SpringMVC配置里写一个统一的消息转换器把所有返回数据固定为UTF-8。这样一次配置整个项目的JSON输出都不会再出现中文变成???的问题。5. 常见问题排查与优化建议5.1 常见问题速查表把项目开发过程中容易踩的坑整理成表格方便你排查问题现象可能原因处理方式小程序请求后端直接404接口前缀不一致拦截器把请求拦截了核对路径检查拦截器放行规则登录成功但后续请求401token没有拼到请求头里在request.js统一加Authorization头用户头像图片显示不出来图片地址是相对路径前端拼接错误后端返回全路径或前端统一拼接baseUrl首页能加载但分类点击无反应事件绑定没传categoryId检查>