简介这份资源是面向高校计算机相关专业学生的完整毕业设计项目包主题为基于JavaSSMMySQL微信小程序的中国剪纸小程序适合作为高分毕设、课程设计或期末大作业直接使用。压缩包共815个文件约22.02MB涵盖106个Java后端源码、136个Vue前端组件、32个wxml与33个wxss小程序页面样式、123张png与32张jpg界面素材以及1个sql数据库脚本、3份doc论文文档和1份pptx答辩材料另附bat启动脚本与yml配置文件前后端代码与数据库脚本齐全。项目采用IDEA与微信开发者工具开发MySQL 5.7以上配合Maven部署功能完善、界面美观、操作简便涵盖剪纸艺术内容展示与后台管理模块。目前已有88人学习下载。资源经过导师指导并通过评审代码严格调试可稳定运行下载即用无需修改能帮助读者快速理解SSM整合与小程序开发流程节省选题与搭建环境的时间。1. 从一张红纸到一套可运行系统中国剪纸微信小程序到底在做什么打开手机相册很多人会发现一个尴尬的事实拍了几十张剪纸作品的照片却从来没有整理过。剪纸这门手艺在民间流传了几百年但到了移动互联网时代它的传播方式还停留在朋友圈九宫格和短视频随手拍。这个标题指向的项目本质上就是给剪纸内容做一个正经的移动端容器——用 Java 做后端、SSM 做业务层、MySQL 存数据、微信小程序做前端展示。它解决的不是“剪纸好不好看”的问题而是“剪纸内容怎么被系统化管理、被用户方便地浏览和检索”的问题。适合谁看正在做毕业设计、需要一套完整可跑通的 Java 小程序全栈项目的人想学 SSM 框架但苦于没有真实业务场景练手的人以及需要快速搭出一个内容展示类小程序骨架的开发者。这套组合不新鲜但剪纸这个题材给了它一个具体的业务外壳让增删改查不再是抽象练习。2. 技术选型不是拍脑袋SSM MySQL 微信小程序为什么能凑成一桌2.1 后端为什么是 SSM 而不是 Spring BootSSM 是 Spring Spring MVC MyBatis 的缩写这套组合在国内高校和中小型项目里存活了很长时间。它的核心分工很清晰Spring 管对象的创建和依赖注入Spring MVC 管请求的路由和响应MyBatis 管数据库的映射和 SQL 执行。和 Spring Boot 相比SSM 的配置确实更繁琐需要手动写 web.xml、spring-mvc.xml、applicationContext.xml 这些文件但它的好处是每一层都暴露在外面你能清楚看到请求从进入 Tomcat 到返回 JSON 的完整链路。对于毕业设计这类需要“讲清楚原理”的场景SSM 反而比 Spring Boot 更合适因为答辩老师会问你“拦截器怎么配的”“事务在哪里开的”Spring Boot 自动配置把这些都藏起来了SSM 则逼着你把每个环节都写出来。我一般会建议如果你的项目周期在两个月以内且需要展示对 Java Web 完整流程的理解SSM 是稳妥选择如果追求开发效率、不想碰 XML那就直接上 Spring Boot但标题锁定了 SSM我们就按 SSM 的路径走。2.2 MySQL 在剪纸小程序里存什么剪纸小程序的数据模型不复杂但有几个关键表必须设计好。用户表存微信 openid、昵称、头像、注册时间剪纸作品表存标题、图片路径、分类标签、上传者、点赞数、发布时间分类表存剪纸的类别比如“窗花”“门笺”“团花”“鞋样”收藏表存用户和作品的关联评论表存评论内容和层级关系。这里有一个容易翻车的地方图片不要直接存进 MySQL 的 BLOB 字段。我见过有人把剪纸图片转成二进制塞进数据库结果数据库体积暴涨查询速度断崖式下降。正确做法是把图片上传到服务器文件系统或对象存储数据库只存相对路径或 URL。表结构设计时作品表的分类字段用 category_id 关联分类表而不是直接存中文分类名这样后期改分类名称时不用批量更新作品表。2.3 微信小程序端的技术边界微信小程序用 WXML WXSS JavaScript 开发和标准 Web 开发最大的区别在于没有 DOM 操作不能直接操作页面节点网络请求必须走 wx.request且域名需要在小程序后台配置合法域名本地存储用 wx.setStorageSync 而不是 localStorage。剪纸小程序的核心页面包括首页作品流、分类筛选页、作品详情页、上传页、个人中心页。首页作品流用 scroll-view 或页面滚动配合 onReachBottom 实现分页加载每页加载 10 到 20 条。作品详情页需要展示大图、标题、描述、点赞按钮和评论列表。上传页要调用 wx.chooseImage 选图再用 wx.uploadFile 上传到后端接口。这里有一个细节wx.uploadFile 的 name 属性必须和后端 MultipartFile 的参数名一致否则后端收不到文件这个坑后面会细说。3. 把后端跑起来SSM 三层架构的落地步骤与关键配置3.1 数据库建表与初始化数据先建库建表。数据库名用paper_cut字符集用 utf8mb4排序规则用 utf8mb4_general_ci。下面是最小可用的建表 SQL包含用户、作品、分类三张核心表。-- 创建数据库 CREATE DATABASE paper_cut DEFAULT CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci; USE paper_cut; -- 用户表 CREATE TABLE t_user ( id INT PRIMARY KEY AUTO_INCREMENT, openid VARCHAR(64) NOT NULL UNIQUE COMMENT 微信openid, nickname VARCHAR(64) DEFAULT 剪纸爱好者, avatar_url VARCHAR(255) DEFAULT , create_time DATETIME DEFAULT CURRENT_TIMESTAMP ) ENGINEInnoDB DEFAULT CHARSETutf8mb4; -- 分类表 CREATE TABLE t_category ( id INT PRIMARY KEY AUTO_INCREMENT, name VARCHAR(32) NOT NULL COMMENT 分类名称, sort_order INT DEFAULT 0 ) ENGINEInnoDB DEFAULT CHARSETutf8mb4; -- 作品表 CREATE TABLE t_work ( id INT PRIMARY KEY AUTO_INCREMENT, title VARCHAR(128) NOT NULL, description TEXT, image_url VARCHAR(255) NOT NULL, category_id INT, user_id INT, like_count INT DEFAULT 0, create_time DATETIME DEFAULT CURRENT_TIMESTAMP, FOREIGN KEY (category_id) REFERENCES t_category(id), FOREIGN KEY (user_id) REFERENCES t_user(id) ) ENGINEInnoDB DEFAULT CHARSETutf8mb4; -- 初始化分类数据 INSERT INTO t_category (name, sort_order) VALUES (窗花, 1), (门笺, 2), (团花, 3), (鞋样, 4);建表时注意外键约束在毕业设计里可以加但生产环境一般不用物理外键改用应用层保证一致性。初始化数据至少给四个分类这样前端筛选页不会空着。作品表里的 image_url 存相对路径比如/upload/2025/01/abc.jpg前端拼接域名后展示。3.2 MyBatis 映射文件与 DAO 层写法MyBatis 的核心是 Mapper 接口和 XML 映射文件的对应关系。以作品表为例Mapper 接口定义方法XML 写 SQL。下面是一个分页查询作品的典型写法。// WorkMapper.java public interface WorkMapper { ListWork selectByPage(Param(categoryId) Integer categoryId, Param(offset) Integer offset, Param(limit) Integer limit); int countByCategory(Param(categoryId) Integer categoryId); int insertWork(Work work); int updateLikeCount(Param(id) Integer id); }!-- WorkMapper.xml -- mapper namespacecom.papercut.mapper.WorkMapper select idselectByPage resultTypecom.papercut.entity.Work SELECT w.*, c.name AS categoryName, u.nickname AS userName FROM t_work w LEFT JOIN t_category c ON w.category_id c.id LEFT JOIN t_user u ON w.user_id u.id where if testcategoryId ! null w.category_id #{categoryId} /if /where ORDER BY w.create_time DESC LIMIT #{offset}, #{limit} /select select idcountByCategory resultTypeint SELECT COUNT(*) FROM t_work where if testcategoryId ! null category_id #{categoryId} /if /where /select insert idinsertWork useGeneratedKeystrue keyPropertyid INSERT INTO t_work (title, description, image_url, category_id, user_id) VALUES (#{title}, #{description}, #{imageUrl}, #{categoryId}, #{userId}) /insert update idupdateLikeCount UPDATE t_work SET like_count like_count 1 WHERE id #{id} /update /mapper这里有几个参数要盯住offset的计算方式是(pageNum - 1) * pageSizepageNum 从 1 开始limit是每页条数建议 10 到 20太大前端渲染卡太小用户翻页烦。useGeneratedKeystrue和keyPropertyid配合使用插入后能把自增主键回填到实体对象里后面如果要用这个 id 做关联插入就靠它。where标签会自动处理第一个条件前的 AND避免手写WHERE 11这种土办法。3.3 Spring MVC 控制器与统一返回格式Controller 层负责接收请求、调用 Service、返回 JSON。建议定义一个统一返回类Result包含 code、msg、data 三个字段前端只认这一种结构省得每个接口写一套解析逻辑。RestController RequestMapping(/api/work) public class WorkController { Autowired private WorkService workService; GetMapping(/list) public Result list(RequestParam(defaultValue 1) Integer page, RequestParam(defaultValue 10) Integer size, RequestParam(required false) Integer categoryId) { int offset (page - 1) * size; ListWork works workService.getWorks(categoryId, offset, size); int total workService.countWorks(categoryId); MapString, Object data new HashMap(); data.put(list, works); data.put(total, total); data.put(page, page); return Result.success(data); } PostMapping(/upload) public Result upload(RequestParam(file) MultipartFile file, RequestParam(title) String title, RequestParam(categoryId) Integer categoryId, RequestParam(userId) Integer userId) { // 文件保存逻辑省略核心是拿到相对路径 String imageUrl fileService.save(file); Work work new Work(); work.setTitle(title); work.setImageUrl(imageUrl); work.setCategoryId(categoryId); work.setUserId(userId); workService.addWork(work); return Result.success(work.getId()); } }RequestParam(file)里的 file 必须和前端wx.uploadFile的 name 参数完全一致大小写敏感。defaultValue给分页参数兜底防止前端不传导致空指针。返回的 data 里带上 total前端才能算总页数。上传接口里文件保存后返回相对路径不要返回绝对路径否则换服务器后所有图片链接全废。4. 小程序端从登录到上传微信生态里的几个硬骨头4.1 微信登录换取 openid 的完整链路微信小程序的登录不是账号密码而是wx.login拿到临时 code后端用 code appid secret 去微信服务器换 openid 和 session_key。这个流程必须后端做因为 secret 不能放在小程序端。// 小程序端 app.js 或登录页 wx.login({ success: (res) { if (res.code) { wx.request({ url: https://你的域名/api/user/login, method: POST, data: { code: res.code }, success: (resp) { if (resp.data.code 200) { wx.setStorageSync(userId, resp.data.data.userId); wx.setStorageSync(openid, resp.data.data.openid); } } }); } } });后端收到 code 后用 HttpClient 请求微信接口https://api.weixin.qq.com/sns/jscode2session参数包括 appid、secret、js_code、grant_typeauthorization_code。返回的 openid 是用户唯一标识存进 t_user 表。如果 openid 已存在就返回已有 userId不存在就新建用户。注意 session_key 不要下发给前端它只在后端用于解密手机号等敏感数据。4.2 图片上传与 wx.uploadFile 的对接细节小程序上传图片用wx.uploadFile它和wx.request的区别是支持 multipart/form-data 格式。下面是一个完整的上传函数。// 上传剪纸作品 function uploadWork(filePath, title, categoryId, userId) { wx.uploadFile({ url: https://你的域名/api/work/upload, filePath: filePath, name: file, // 必须和后端 RequestParam(file) 一致 formData: { title: title, categoryId: categoryId, userId: userId }, success: (res) { // res.data 是字符串需要 JSON.parse const data JSON.parse(res.data); if (data.code 200) { wx.showToast({ title: 上传成功, icon: success }); } }, fail: (err) { console.error(上传失败, err); } }); }name: file这个参数是血泪教训很多人写成name: image或者name: upload后端就报Required request part file is not present。formData里的字段会作为普通表单字段传给后端后端用RequestParam接收。res.data在小程序里是字符串不是对象必须JSON.parse一次这个坑几乎每个新手都会踩。4.3 作品列表分页与下拉刷新首页作品流需要支持下拉刷新和上拉加载。下拉刷新用onPullDownRefresh上拉加载用onReachBottom。核心是维护 page 和 hasMore 两个变量。Page({ data: { works: [], page: 1, hasMore: true, categoryId: null }, onLoad() { this.loadWorks(); }, onPullDownRefresh() { this.setData({ page: 1, works: [], hasMore: true }); this.loadWorks(() wx.stopPullDownRefresh()); }, onReachBottom() { if (this.data.hasMore) { this.setData({ page: this.data.page 1 }); this.loadWorks(); } }, loadWorks(callback) { wx.request({ url: https://你的域名/api/work/list, data: { page: this.data.page, size: 10, categoryId: this.data.categoryId }, success: (res) { const list res.data.data.list; const total res.data.data.total; const newWorks this.data.page 1 ? list : this.data.works.concat(list); this.setData({ works: newWorks, hasMore: newWorks.length total }); if (callback) callback(); } }); } });hasMore的判断逻辑是newWorks.length total当已加载数量等于总数时停止上拉加载。onReachBottom里先加 page 再请求请求成功后用concat追加数据。下拉刷新时要把 page 重置为 1、works 清空、hasMore 恢复为 true否则会出现数据重复或加载不出来的情况。5. 避坑与排查这套组合最容易翻车的五个地方5.1 小程序请求域名未配置导致所有接口 404现象开发者工具里请求正常真机预览时所有接口报错提示“不在以下 request 合法域名列表中”。原因微信小程序要求所有网络请求的域名必须在小程序管理后台的“开发设置”里配置且必须是 HTTPS。解决登录小程序后台在“开发管理”-“开发设置”-“服务器域名”里添加 request 合法域名和 uploadFile 合法域名。开发阶段可以在开发者工具里勾选“不校验合法域名”但上线前必须配好。5.2 MyBatis 查询返回字段为 null 的映射问题现象数据库里有数据但查询出来的实体对象某些字段是 null。原因数据库字段名是下划线命名如image_url实体类属性是驼峰命名如imageUrlMyBatis 默认不会自动转换。解决在 MyBatis 配置文件里开启mapUnderscoreToCamelCasetrue或者在 SQL 里用AS起别名。推荐开启自动转换一劳永逸。5.3 图片上传后前端显示裂图现象上传成功数据库里也有路径但小程序里图片显示不出来。原因后端返回的是相对路径前端直接把这个路径赋给image src缺少域名前缀。解决前端在拿到 imageUrl 后拼接完整域名比如https://你的域名 imageUrl。或者后端直接返回完整 URL但这样换域名时要改数据不推荐。5.4 分页查询第二页数据重复现象上拉加载第二页时出现了第一页已经展示过的作品。原因排序字段create_time精度不够同一秒内插入的多条数据顺序不稳定MySQL 分页时可能重复。解决在 ORDER BY 里加一个唯一字段做次级排序比如ORDER BY create_time DESC, id DESC。这样即使时间相同id 也能保证顺序唯一。5.5 微信登录 code 重复使用导致 40163 错误现象后端调用微信接口换 openid 时返回errcode: 40163提示 code 已被使用。原因wx.login拿到的 code 只能使用一次如果前端重复提交同一个 code或者后端重试机制用了同一个 code就会报这个错。解决每次登录都重新调用wx.login获取新 code后端不要缓存 code。如果登录失败前端重新走一遍wx.login流程。6. 让剪纸小程序更像一个产品三个进阶技巧与验证方法6.1 用本地缓存减少重复请求剪纸小程序的分类数据变化频率极低没必要每次打开首页都请求一次。可以在onLoad里先读缓存缓存没有再去请求。onLoad() { const cachedCategories wx.getStorageSync(categories); if (cachedCategories) { this.setData({ categories: cachedCategories }); } else { wx.request({ url: https://你的域名/api/category/list, success: (res) { this.setData({ categories: res.data.data }); wx.setStorageSync(categories, res.data.data); } }); } this.loadWorks(); }缓存策略要设过期时间比如 24 小时。可以在存缓存时同时存一个时间戳读取时判断是否过期。这样既减少了请求又不会让用户看到过时的分类。6.2 点赞功能的防重复提交点赞按钮如果不做防抖用户快速点击会触发多次请求导致点赞数虚高。前端可以用一个isLiking标志位控制后端用 Redis 或数据库唯一索引做最终兜底。onLike(e) { if (this.data.isLiking) return; this.setData({ isLiking: true }); wx.request({ url: https://你的域名/api/work/like, method: POST, data: { workId: e.currentTarget.dataset.id, userId: wx.getStorageSync(userId) }, complete: () { setTimeout(() this.setData({ isLiking: false }), 1000); } }); }后端在点赞表上建(user_id, work_id)的唯一索引重复插入会报错捕获后返回“已点赞”即可。这样即使前端防抖失效数据也不会错。6.3 验证整套系统是否跑通的检查清单检查项验证方法预期结果数据库连接启动 Tomcat 看日志无 SQLException登录接口小程序端调用 wx.login返回 userId 和 openid作品列表首页下拉刷新显示 10 条作品图片上传选图后上传数据库新增记录图片可访问分类筛选点击分类标签列表只显示该分类作品点赞功能连续点击点赞按钮点赞数只加 1这套检查清单我每次交付前都会跑一遍尤其是图片上传和分类筛选这两个环节涉及前后端联调最容易出问题。跑通之后整个项目的核心链路就闭环了。做毕业设计那会儿我最大的教训是不要等到所有功能写完再联调每写完一个接口就用 Postman 测一次每写完一个页面就在真机上点一次。问题越早暴露修复成本越低。希望帮到你。本文还有配套的精品资源点击获取