简介网上花店微信小程序完整毕业设计源码面向小程序开发、Java后端以及毕业设计、课程设计学习者后台实现管理员与用户双角色管理员可管理用户、公告与鲜花信息能够回复用户并与用户相互交流用户端可浏览鲜花、查看公告及管理员回复前后端业务链路完整。项目配有完整前后端源码与数据库SQL文件并给出Java、JDK1.8、MySQL5.7、Maven3.3、Tomcat7及HBuilderX/微信开发者工具等环境说明可直接用于课题演示、运行调试与二次开发。压缩包共1778个文件约36.19MB主要文件类型包括vue、js、wxml、wxss等小程序前端页面与交互逻辑java后端服务代码json配置png、svg、jpg图片素材以及md、sql等说明文档与数据库脚本覆盖从界面展示到接口实现的完整开发链路目录结构清晰方便按模块检索学习。已有95人学习下载适合需要快速理解电商类小程序权限设计、前后端数据交互及整体项目搭建的读者。1. 网上花店小程序毕设源码不是玩具项目而是一套能跑通的前后端闭环每年毕业设计季微信小程序类的题目都会被反复翻牌网上花店更是经典中的经典。但多数人下载完源码后卡在同一个地方前端小程序能打开后端Java工程却起不来数据库灌不进去最后只能对着报错干瞪眼。这套网上花店小程序源码值得拆是因为它不是那种只有一个页面的静态Demo——它包含管理员和用户两个完整权限端管理员能管用户、管公告、管鲜花信息、回复用户提问用户能浏览鲜花、看公告、查回复是一套能真正交差的Java后端配合微信小程序前端的毕业设计完整源码。我按实际部署顺序把这套资源拆一遍从HBuilderX导入小程序工程到MySQL 5.7建库导数据再到Tomcat 7把后端接口跑起来最后讲几个我反复踩过的坑。内容适合两类人一类是拿它做Java毕业设计、需要快速把环境跑通再改需求的学生另一类是课程设计想找一个双角色闭环案例做参考的开发者。下面直接进入正题。2. 小程序端拆解HBuilderX 导入、页面结构与双角色登录逻辑2.1 为什么这套前端选了 uniapp 而不是原生小程序拿到压缩包解压后第一眼看到的不是app.js、app.json这种原生微信小程序文件而是main.css.bak、uni-fab.vue.bak这类文件同时目录里有uni.scss、manifest.json、pages.json等。从工程结构就能判断这套前端是用 uniapp 写的而不是原生小程序。选择 uniapp 不是巧合。对于毕业设计场景uniapp 的核心优势是“写一套代码同时能编译到微信小程序、H5 和 App”而且语法基于 Vue会 Vue 的人上手几乎零成本。更关键的是HBuilderX 内置了微信小程序编译和自动上传功能调试时可以直接唤起微信开发者工具省去了手动配置一堆编译脚本的麻烦。相较之下原生小程序虽然运行时更轻但所有页面、组件都要手写工期长对毕设来说性价比不高。回到这套资源本身pages目录下能看到的页面结构大致分成两块用户端的index首页鲜花列表、category分类、cart购物车、user个人中心以及管理端的admin相关页面。因为main.css.bak是备份文件真正加载的样式是main.css首次打开若发现样式错乱先检查是不是误改了.bak后缀文件。2.2 从零导入HBuilderX 配置微信开发者工具路径把前端跑起来的第一步不是改代码而是把编译工具链打通。我一般习惯用 HBuilderX 3.x 版本导入前先确认微信开发者工具已经安装并且登录了同一个微信账号否则编译后无法自动预览。操作步骤如下打开 HBuilderX选择“文件 → 导入 → 从本地目录导入”选中解压出来的前端工程文件夹。点击菜单栏“运行 → 运行到小程序模拟器 → 微信开发者工具”。首次运行会弹出提示要求配置微信开发者工具的安装路径在 HBuilderX 的“运行设置”里找到“微信开发者工具路径”填入本机安装目录例如C:\Program Files (x86)\Tencent\微信web开发者工具\cli.bat。编译完成后HBuilderX 会自动拉起微信开发者工具并打开项目。如果第 4 步没有自动拉起大概率是路径配置错误手动在微信开发者工具里导入工程目录下的unpackage/dist/dev/mp-weixin文件夹即可这个目录是 HBuilderX 编译后生成的微信小程序产物导入后就能看到完整页面。提示不要在微信开发者工具里直接导入源码根目录必须导入mp-weixin这个编译产物目录否则会报“app.json 未找到”。2.3 小程序端项目结构与核心页面逻辑编译成功后微信开发者工具的模拟器里会显示花店首页。此时先别急着点页面花两分钟把pages.json打开这个文件相当于小程序的“路由总表”里面定义了每个页面路径和窗口样式。{ pages: [ { path: pages/index/index, style: { navigationBarTitleText: 网上花店 } }, { path: pages/category/category, style: { navigationBarTitleText: 鲜花分类 } }, { path: pages/cart/cart, style: { navigationBarTitleText: 购物车 } }, { path: pages/user/user, style: { navigationBarTitleText: 个人中心 } } ], globalStyle: { navigationBarTextStyle: black, navigationBarTitleText: 网上花店, navigationBarBackgroundColor: #FFFFFF, backgroundColor: #F5F5F5 } }这段配置的逻辑很简单pages数组里的第一项就是小程序的启动页这里设置为pages/index/index所以首页是花店商品列表globalStyle是全局窗口样式统一了导航栏颜色和背景色。修改导航栏标题时直接改navigationBarTitleText即可不用动每个页面的内部代码。再看首页的数据来源。打开pages/index/index.vue核心代码通常长这样export default { data() { return { flowerList: [], loading: false }; }, onLoad() { this.getFlowerList(); }, methods: { async getFlowerList() { this.loading true; // 这里实际项目中会调用 uni.request 请求后端接口 // 当前是模拟数据便于前端独立调试 this.flowerList [ { id: 1, name: 红玫瑰, price: 99, image: /static/img/rose.jpg }, { id: 2, name: 向日葵, price: 69, image: /static/img/sunflower.jpg } ]; this.loading false; } } };这段代码的逻辑是页面加载时触发onLoad生命周期调用getFlowerList方法拉取鲜花列表loading控制加载状态数据渲染到view v-foritem in flowerList列表中。参数id是鲜花的唯一标识详情页跳转时会把id通过 URL 带过去price是展示价格注意这里的数据类型是数字如果后端返回字符串 99前端要做一次Number()转换否则部分 Android 机型上价格显示会异常。2.4 双角色入口管理员和用户的登录分流设计这套源码的角色权限不是写在某个页面的if判断里而是通过登录接口返回的role字段区分。用户端登录后跳转首页管理员登录后跳转管理页。async handleLogin() { const res await uni.request({ url: http://localhost:8080/flower/user/login, method: POST, data: { username: this.username, password: this.password } }); if (res.data.code 200) { uni.setStorageSync(token, res.data.token); uni.setStorageSync(userInfo, res.data.userInfo); if (res.data.userInfo.role admin) { uni.switchTab({ url: /pages/admin/admin }); } else { uni.switchTab({ url: /pages/index/index }); } } else { uni.showToast({ title: res.data.msg, icon: none }); } }逻辑说明登录接口返回code200表示成功同时把token和userInfo存入本地缓存后续所有需要鉴权的请求都会带上这个token。role字段是角色标识admin走管理端 tab否则走用户端 tab。参数res.data.code是后端约定的状态码res.data.token是登录凭证res.data.userInfo.role是角色字段。注意uni.switchTab只能跳转到pages.json中配置了tabBar的页面如果管理页不在 tabBar 列表里需要改用uni.navigateTo跳转否则会报错。3. Java 后端与数据库落地JDK1.8 MySQL5.7 Tomcat7 联调实录3.1 技术栈版本为什么卡得这么死这套资源后端的技术栈是 Java JDK1.8 MySQL5.7 Tomcat7 Maven3.3配套数据库工具是 Navicat11开发工具支持 eclipse 和 idea。很多人问为什么不用更新的版本原因是毕业设计项目普遍基于 SSMSpring SpringMVC MyBatis框架或 Servlet JSP 的老组合这类框架对高版本 JDK 的兼容性并不好。具体来说JDK 1.8 是最后一个能“无痛”运行老版本 Tomcat 的 JDK。如果你用 JDK 11 或 JDK 17 去跑 Tomcat7启动时大概率会报java.lang.NoClassDefFoundError: javax.annotation.Resource因为高版本 JDK 把javax.annotation模块移除了。同理MySQL 5.7 是兼容性最稳的版本MySQL 8.0 虽然也能用但连接驱动和SSL配置的默认行为变了老代码里未配置 SSL 的jdbc连接串会直接抛异常。所以环境版本不建议随手升级先跑通再谈优化。3.2 数据库导入Navicat 与命令行两种路径数据库文件在压缩包里通常是.sql后缀用 Navicat11 导入最简单。打开 Navicat新建连接默认用户名root密码看压缩包说明或jdbc.properties配置新建数据库flower_shop字符集选utf8然后右键数据库选择“运行 SQL 文件”选中.sql文件执行即可。没有 Navicat 的用命令行也一样mysql -uroot -p123456 -e CREATE DATABASE flower_shop DEFAULT CHARACTER SET utf8 COLLATE utf8_general_ci; mysql -uroot -p123456 flower_shop flower_shop.sql参数说明-uroot -p123456是数据库账号密码按你实际的密码修改CREATE DATABASE语句指定了字符集utf8排序规则utf8_general_ci这一步很关键如果建库时用默认的latin1后面查询中文会出现乱码第二条命令把 SQL 文件内容导入flower_shop库。如果 SQL 文件路径含中文或空格建议先用cd切到文件所在目录再执行。导入成功后重点看三张核心表t_user用户表、t_flower鲜花表、t_notice公告表。在 Navicat 里打开t_user应该能看到管理员账号和测试用户账号默认密码一般是 MD5 加密后的密文。需要改密码时直接执行UPDATE t_user SET password MD5(123456) WHERE username admin;这里用的是 MySQL 内置的MD5函数因为后端登录校验也走 MD5所以这里不能用明文。username字段是登录账号password字段是加密后的密码串两条缺一不可。3.3 后端工程导入与 jdbc 配置修改打开 eclipse 或 idea选择“导入 Maven 项目”选中后端源码目录。首次导入会下载依赖因为这是一个 Maven 聚合工程pom.xml里已经声明了 Spring、MyBatis、Jackson 等依赖。下载慢的可以用阿里云镜像在settings.xml里加一段mirror配置。项目导入后最需要修改的文件是数据库连接配置通常在src/main/resources下的jdbc.properties或db.propertiesjdbc.drivercom.mysql.jdbc.Driver jdbc.urljdbc:mysql://localhost:3306/flower_shop?useUnicodetruecharacterEncodingutf8useSSLfalse jdbc.usernameroot jdbc.password123456逻辑说明jdbc.url里的localhost:3306是数据库地址和端口flower_shop是数据库名useUnicodetruecharacterEncodingutf8强制使用 UTF-8 编码传输数据解决中文乱码useSSLfalse是关闭 SSL 加密。这里的jdbc.username和jdbc.password必须和 MySQL 实际账号一致否则后面启动时会报Access denied for user。如果你用的是 MySQL 8.0还需要把jdbc.driver改成com.mysql.cj.jdbc.Driver同时引入mysql-connector-java8.x 版本的依赖。但前面说过这套毕设资源按 MySQL 5.7 配置是最稳的不建议折腾版本升级。3.4 部署到 Tomcat7 并启动从网页端验证后端存活后端工程本质上是一个 Web 应用最后要打成war包放到 Tomcat 的webapps目录下或者直接在 idea 里配置 Tomcat 运行。我习惯用 idea 的 Tomcat 集成方式配置步骤是点击 Run → Edit Configurations → 添加 Tomcat Server → Local。在 Deployment 标签页添加 Artifact选择war exploded类型。Application context 填/flower这样访问路径就是http://localhost:8080/flower。启动前确认 JRE 选的是 JDK1.8Server 端口没有冲突。启动后观察 Console 日志出现Info: Server startup in xxx ms字样说明启动成功。此时在浏览器访问http://localhost:8080/flower/user/list如果能看到 JSON 格式的用户列表数据说明后端和数据库已经连通。这一步务必在联调小程序之前完成否则小程序里报的错你会分不清是后端没起还是路径写错。注意Tomcat7 默认不支持 HTTP 的 PATCH 方法如果前端用了uni.request的method: PATCH去更新数据Tomcat7 会直接返回 405。这套资源的接口设计成 POST 和 GET没有这个问题但你自己加需求时要注意。4. 避坑排查从接口 404 到中文乱码的 5 条血泪记录4.1 微信开发者工具里请求失败不是代码错了是域名校验没关现象小程序模拟器里所有uni.request请求都报request:fail但浏览器访问同一个后端地址却正常。原因微信小程序要求所有网络请求必须走 HTTPS并且域名需要在小程序后台配置白名单。本地开发时没有 HTTPS微信开发者工具默认拦截了 HTTP 请求。解决在微信开发者工具右上角点击“详情 → 本地设置”勾选“不校验合法域名、web-view业务域名、TLS 版本以及 HTTPS 证书”。本地调试完可以关掉但毕设演示阶段保持勾选即可。4.2 Tomcat 起来后接口 404项目路径上下文不一致现象后端启动无报错但小程序请求http://localhost:8080/flower/user/login返回 404浏览器访问也 404。原因部署时的 Application context 不是/flower或者后端controller的RequestMapping路径和前端请求路径对不上。最常见的情况是 idea 部署时默认 context 是/war包名_war_exploded。解决在 Tomcat 配置的 Deployment 页面把 Application context 改成/flower同时打开后端源码里的LoginController核对类上的RequestMapping注解确保前端请求的路径和后端映射一致。前端代码里所有url都要以/flower开头不能多写也不能少写。4.3 MySQL 连接报 Access deniedNavicat 能连但 Java 连不上现象Navicat11 用 root 账号能正常连 MySQL但启动 Tomcat 时日志报Access denied for user rootlocalhost (using password: YES)。原因Navicat 连接用的密码和后端jdbc.properties里写的密码不一致。这类毕设源码压缩包里的默认密码经常是root或123456但你自己装 MySQL 时设置的密码可能不同。解决用 Navicat 执行ALTER USER rootlocalhost IDENTIFIED BY 123456;修改 root 密码并同步修改jdbc.properties。注意 MySQL 5.7 的root默认认证插件是mysql_native_password如果要改成caching_sha2_password老版驱动会连接失败保持默认即可。4.4 中文乱码页面显示问号或乱码符号现象登录后用户昵称、鲜花名称在页面上显示成???或乱码。原因数据库表的字符集不是utf8或者 JDBC 连接串没有加characterEncodingutf8也可能是c3p0连接池初始参数里漏了编码配置。这套资源建库时如果直接用默认字符集多半是latin1。解决建库时指定DEFAULT CHARACTER SET utf8如果表已经建好执行ALTER TABLE t_flower CONVERT TO CHARACTER SET utf8;。同时确保jdbc.properties里有characterEncodingutf8。改完重启 Tomcat页面刷新即可恢复。4.5 图片裂开鲜花图片路径指向本地磁盘现象小程序首页能显示鲜花名称和价格但所有图片都是破图。原因后端返回的图片地址是类似D:/upload/rose.jpg的本地磁盘路径微信开发者工具无法访问电脑本地文件。解决三个粗暴但有效的方案一是把图片放到小程序项目的static/img/目录下后端返回相对路径前端拼接成/static/img/rose.jpg二是把图片放到 Tomcat 的webapps/ROOT/upload/目录访问路径改为http://localhost:8080/upload/rose.jpg三是如果图片本来就在压缩包里直接复制到小程序static目录最省事。毕设答辩场景下推荐第三种不依赖后端跑起来也能展示。5. 进阶验证自己动手把接口联调跑通并确认角色权限边界走到这一步前后端基本是通的但你需要证明这套资源不是“只能看不能改”。我会把小程序里的模拟数据替换成真实的后端请求并验证管理员和用户的权限边界。第一个动手点把首页getFlowerList里的模拟数据替换成uni.request请求。后端FlowerController里有个getList接口返回的是 JSON 数组前端拿到后赋值给flowerList即可。替换完记得把price字段用Number()转换一次因为 JSON 里返回的可能是字符串不转换会导致价格排序错乱。第二个验证点管理员权限。打开管理端页面尝试执行“删除鲜花”操作前端会调用DELETE /flower/delete?idxx后端Interceptor会拦截请求并校验请求头里的token对应的用户是否role admin。你在小程序里用普通用户登录后手动调这个接口如果返回 403说明权限校验生效如果返回成功说明拦截器没拦那就在后端WebConfig里把excludePathPatterns检查一遍看是否把管理接口误放行了。第三个习惯性动作检查token失效机制。很多毕设源码在token过期后不做任何处理前端会一直拿着旧 token 请求直到后端报 500。我会在封装好的request工具里加一个响应拦截逻辑当后端返回code 401时清空本地缓存并跳转登录页。代码长这样const request (url, method, data) { return new Promise((resolve, reject) { uni.request({ url: http://localhost:8080/flower${url}, method: method || GET, data: data || {}, header: { token: uni.getStorageSync(token) || }, success: (res) { if (res.data.code 401) { uni.clearStorageSync(); uni.navigateTo({ url: /pages/login/login }); reject(new Error(登录已过期)); } else { resolve(res.data); } }, fail: (err) reject(err) }); }); };逻辑说明这个封装统一了请求前缀/flower、请求头里的token注入、以及 401 状态跳转。以后所有页面调接口都走request(/user/login, POST, {username, password})不需要每个页面重复写uni.request。参数res.data.code 401是后端约定的登录失效状态码uni.clearStorageSync()清空的是token和userInfo缓存跳转的是登录页路径按你的实际页面路径调整。从那以后我每次拿到毕设源码都会先花十分钟做这两件事把前端模拟数据换成真实接口再用普通用户身份去调管理接口验证权限。这两步过了整套资源才算真正跑通后面改成花鸟市场、宠物店、书店都只是换数据表和字段名的事。希望帮到你。本文还有配套的精品资源点击获取