简介基于小程序的网上花店微信小程序源代码面向计算机相关专业毕业设计或课程设计场景也适合初级小程序开发者参考。系统按管理员与用户双角色设计管理员可维护用户信息、公告及鲜花数据并与用户留言互动用户端可浏览鲜花、查看公告与管理员回复。资源共1778个文件压缩包约36.23MB核心构成包括Java后端源码137个java、Vue相关前端资源262个vue、小程序页面126个wxml/126个wxss、MySQL数据库SQL文件以及JS/JSON/PNG/SVG等逻辑与图标素材还有md/docx说明文档和install/build/run批处理脚本便于快速启动、打包和部署。环境基于JDK1.8、MySQL5.7、Tomcat7开发工具覆盖Eclipse/IDEA与HBuilderX/微信开发者工具。整体覆盖从数据库建模、后端接口到小程序页面交互的全过程有助于理解花店电商类小程序的项目结构和联调方式。目前已有63人浏览学习作为毕设或课设的对照实现能够节省环境搭建和整体框架设计的时间。1. 网上花店微信小程序源码java 小程序 mysql 三件套双权限直接能跑这套网上花店微信小程序源代码是 java 小程序 mysql 三件套里很典型的毕业设计、课程设计项目。它不是一个只有几个静态页面的演示壳子后端有真实可调用的 Java 接口前端跑在微信开发者工具里数据落在 MySQL5.7 里管理员和用户两个权限各有一套能走通的操作路径——管理员管用户、管公告、管鲜花、回留言用户看花、看公告、看回复。适合三类人马上要交毕设但还在选型的学生要把现成系统快速改造成课程设计的人以及想摸一遍「小程序前端 Java 后端 MySQL」完整数据链路的从业者。下面按我拿到压缩包后实际复现的顺序写环境、导入、踩坑、二次开发都覆盖到。2. 功能拆解管理员与用户的双权限体系是怎么落到代码里的拿到源码先别急着启动先把权限模型读懂。后面所有改动——加字段、加页面、换主题——都建立在对这套双权限结构的理解上。2.1 权限边界两个角色各管哪几块从摘要描述能明确看到系统分成管理员和用户两个入口。管理员侧的核心操作是管理用户基本信息、管理公告信息、管理鲜花信息、与用户进行相互交流也就是回复用户的留言用户侧则是查看鲜花信息、查看公告、查看管理员对自己的回复。这个边界决定了表结构和接口设计用户相关的操作是只读为主管理员相关的操作是增删改查为主。落到代码里常见做法是用户表里放一个role字段区分身份登录时把这个字段带出来前端根据它决定渲染哪些菜单项后端根据它决定放行哪些接口。你不用指望一个「权限框架」这类毕设项目绝大多数走的是最朴素的 if 判断。核心就一句话先登录拿到身份再按身份决定能不能做这件事。// 登录接口返回用户信息时带上 role public class LoginResult { private Integer userId; private String username; private Integer role; // 1 管理员2 普通用户 private String token; // 登录态标识 }这段代码说明登录返回体里必须携带role。小程序端拿到后存到全局变量或 storage切页面时靠它控制按钮和 Tab 的显示。参数里的token是联调时排查问题的关键——如果后端的Interceptor要求每个请求带 token前端漏了就会一直 401。2.2 表结构设计鲜花、公告、用户交流怎么建模摘要里提到的功能点翻译成数据表至少有四张核心表用户表、鲜花表、公告表、留言交流表。具体表名以包内 SQL 为准但字段设计逻辑是通用的我一般会把核心表设计成下面这样。CREATE TABLE t_user ( id int(11) NOT NULL AUTO_INCREMENT, username varchar(50) NOT NULL COMMENT 登录账号, password varchar(100) NOT NULL COMMENT 密码, role tinyint(4) NOT NULL DEFAULT 2 COMMENT 1管理员 2普通用户, nickname varchar(50) DEFAULT NULL COMMENT 昵称, phone varchar(20) DEFAULT NULL COMMENT 联系电话, create_time datetime DEFAULT CURRENT_TIMESTAMP, PRIMARY KEY (id) ) ENGINEInnoDB DEFAULT CHARSETutf8mb4 COMMENT用户表;role字段是整套权限体系的开关默认值设成2是合理的这样注册出来的新用户天然是普通用户不会误拿到管理权限。password字段在真实项目里要加密存储毕设项目很多直接存明文你接手后如果要做答辩演示建议至少用 MD5 加一层不至于被评委一句话问住。CREATE TABLE t_flower ( id int(11) NOT NULL AUTO_INCREMENT, name varchar(100) NOT NULL COMMENT 鲜花名称, category varchar(50) DEFAULT NULL COMMENT 分类花束/盆栽/永生花, price decimal(10,2) DEFAULT NULL COMMENT 价格, stock int(11) DEFAULT 0 COMMENT 库存, cover varchar(255) DEFAULT NULL COMMENT 封面图URL, detail text COMMENT 图文详情, status tinyint(4) DEFAULT 1 COMMENT 0下架 1上架, PRIMARY KEY (id) ) ENGINEInnoDB DEFAULT CHARSETutf8mb4 COMMENT鲜花表;status字段对应管理员「上架/下架」操作用户端查询列表时只查status1的数据这是后台管理和前台展示解耦的关键。二次开发时如果要加「鲜花分类管理」就在category上做文章后面第 5 章会展开讲。CREATE TABLE t_notice ( id int(11) NOT NULL AUTO_INCREMENT, title varchar(100) NOT NULL COMMENT 公告标题, content text COMMENT 公告内容, create_time datetime DEFAULT CURRENT_TIMESTAMP, PRIMARY KEY (id) ) ENGINEInnoDB DEFAULT CHARSETutf8mb4 COMMENT公告表; CREATE TABLE t_message ( id int(11) NOT NULL AUTO_INCREMENT, user_id int(11) NOT NULL COMMENT 留言用户ID, flower_id int(11) DEFAULT NULL COMMENT 关联鲜花可为空, content varchar(500) DEFAULT NULL COMMENT 留言内容, reply varchar(500) DEFAULT NULL COMMENT 管理员回复, reply_time datetime DEFAULT NULL, create_time datetime DEFAULT CURRENT_TIMESTAMP, PRIMARY KEY (id) ) ENGINEInnoDB DEFAULT CHARSETutf8mb4 COMMENT留言交流表;t_message是「用户留言、管理员回复」这个交互场景的载体。reply字段一开始就是空的管理员回复后才写入内容并更新reply_time。用户端查询时既查content也查reply就能实现「查看管理员回复信息」这个功能点。注意flower_id可空——用户可能针对某个花留言也可能只发一句「今天营业吗」设计成可空最省事。2.3 登录态与请求链路从 uni-app 到 Tomcat 这条线看压缩包里的文件名能反推出不少信息。uni-fab.vue.bak说明前端不是原生小程序而是用 uni-app 写的fab是悬浮按钮组件app.07ff6003.css、chunk-vendors.1f0a25b2.css、uniicons.css这些是编译后的样式产物说明包里既有源码也有构建结果main.css.bak和uni-fab.vue.bak是改动前的备份也就是开发者留的「后悔药」。这个判断很重要——后面改样式时你要改的是.vue源文件不是直接改.css编译产物。请求链路是典型的三段式小程序端wx.request发起 HTTP 请求 → Tomcat 里的 Java 后端通过 Controller 接收 → Controller 调 Service 和 Mapper 查 MySQL返回 JSON。登录态这块毕设项目最常见的是用 token 或 session 二选一token 方案更多见因为它不需要后端存 session小程序端每次请求在 header 里带上去就行。// 小程序端封装 wx.request统一带登录态 const request (url, method GET, data {}) { return new Promise((resolve, reject) { wx.request({ url: http://192.168.1.100:8080 url, // baseURL 按实际后端地址改 method: method, data: data, header: { Content-Type: application/json, token: wx.getStorageSync(token) }, success: (res) resolve(res.data), fail: (err) reject(err) }); }); };这里的 baseURL 是本机局域网 IP不是localhost原因在避坑章第 2 条会细说。header 里带token是约定俗成的做法后端拦截器拿到它去查 Redis 或内存里的登录态查到就放行查不到就返回 401。如果你在联调时发现所有接口都报「未登录」十有八九是这行wx.getStorageSync(token)取到的值是空的——登录接口返回后没正确存储。3. 环境搭建与导入JDK1.8 MySQL5.7 Tomcat7 复现四步走这套环境说新不新说旧不旧但版本之间有硬约束。JDK 必须是 1.8数据库建议 MySQL5.7Tomcat 用 7Maven 3.3。为什么这么死板因为项目是基于这些版本编译和联调的你换成 JDK11 或者 MySQL8大概率会在启动阶段就翻车。下面按顺序走完整套导入流程。3.1 版本对齐先列一张对照清单先把工具链对齐这一步能省掉后续 80% 的环境问题。注意如果你机器上同时装了多个 JDK 或 MySQL务必把JAVA_HOME、PATH环境变量指到下面这张表对应的版本。组件版本说明JDK1.8环境变量JAVA_HOME指向 JDK8 安装目录MySQL5.7推荐 5.7.44字符集 utf8mb4端口默认 3306数据库工具Navicat 11用于导入 .sql 文件Maven3.3 或 3.6镜像配阿里云依赖下载快Tomcat7运行后端端口 8080小程序开发工具微信开发者工具 / HBuilderX前端源码用 HBuilderX 打开最稳这里有个细节Maven 3.3 不是硬性要求3.6 也能跑但别用 Maven 4.x它和部分旧插件不兼容。Tomcat 7 对应的是 Java EE 6 规范接口返回的 JSON 解析不会受 servlet 版本影响但如果你手头只有 Tomcat 9启动时大概率会报ClassNotFoundException: javax.servlet...因为 Tomcat 9 已经切到 Jakarta EE 命名空间了。3.2 数据库导入Navicat 11 还原 .sql 文件压缩包里通常带一个.sql文件这是整套系统的数据底座。导入步骤是固定的先建库再导数据最后核对表数量。-- 在 Navicat 查询窗口执行创建数据库字符集必须和原库一致 CREATE DATABASE IF NOT EXISTS flower_shop DEFAULT CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci; USE flower_shop; -- 然后菜单栏选择运行 SQL 文件选中包里的 .sql如果 .sql 文件里已经带了CREATE DATABASE语句你就不用手动建库直接运行整个文件。导入完成后重点核对两件事表数量是不是和功能点对得上用户表、鲜花表、公告表、留言表以及每张表里有没有初始数据。管理员账号通常预置在t_user表里role1那条记录就是。如果初始密码是明文先用 Navicat 记下来答辩时要能当场登录进去。导入时报错最常见的就两类字符集不支持以及认证插件问题。前者把 sql 里的utf8mb4_0900_ai_ci全部替换成utf8mb4_general_ci再导后者就是典型的 MySQL8 和 5.7 混用导致的mysql ssl 连接错误解决办法不是和它较劲而是直接把本地库换成 5.7.44——这也是我在避坑章第 3 条里会展开讲的血泪经验。3.3 后端启动导入 Maven 工程并部署到 Tomcat7后端代码用 eclipse 或 idea 都行但导入方式有区别。eclipse 用Import Maven Existing Maven Projectsidea 用Open直接选 pom.xml 所在目录。导入后先让 Maven 把依赖拉完再看资源文件里的数据库连接配置。# 以常见的 jdbc.properties 为例具体文件以包内为准 jdbc.urljdbc:mysql://localhost:3306/flower_shop?useUnicodetruecharacterEncodingutf8serverTimezoneAsia/Shanghai jdbc.usernameroot jdbc.password123456这份配置必须改成你自己的 MySQL 密码。serverTimezoneAsia/Shanghai是 JDBC8 驱动的要求如果你的驱动版本是 5.x 可以去掉不影响运行。改完配置接下来决定用哪种方式跑后端如果项目是 war 包结构就打成 war 丢进 Tomcat7 的webapps如果是 Spring Boot 内嵌 Tomcat直接用mvn spring-boot:run或 idea 里的 main 方法启动。判断方法很简单——看 pom.xml 里有没有spring-boot-starter-web有就是内嵌方式没有就是外置 Tomcat。启动成功的标志不是「控制台不报错」而是能看到Tomcat started或者Started Application in x.x seconds这行日志。启动后先在浏览器直接访问一个列表接口测试连通性比如http://localhost:8080/api/flower/list能返回 JSON 就说明后端这条链路通了。3.4 小程序端HBuilderX 导入源码并连接本机后端前端部分用 HBuilderX 打开最省事因为它对 uni-app 的支持最完整。打开项目后先找到接口配置的地方——通常在config.js或全局变量文件里把 baseURL 从线上地址换成你本机的局域网 IP。// 全局配置示例本机联调时用局域网IP便于真机预览 const config { baseURL: http://192.168.1.100:8080, // 改成你电脑的局域网IP timeout: 10000 }; export default config;然后在 HBuilderX 里选择「运行到小程序模拟器」它会自动唤起微信开发者工具。微信开发者工具打开后第一件事是去「详情 → 本地设置」勾选「不校验合法域名、web-view业务域名、TLS 版本以及 HTTPS 证书」。否则 wx.request 会被拦截报request:fail 域名不合法。这两个工具之间的编译链路是 HBuilderX 生成 dist 文件 → 微信开发者工具加载 dist所以你在 HBuilderX 里改完代码要重新运行微信开发者工具才会看到最新版本。另外注意小程序顶部导航栏高度这个老问题。不同手机的胶囊按钮位置不一样如果你在页面里做了自定义导航栏要用uni.getSystemInfo拿到状态栏高度做动态适配。这套源码如果是用原生导航栏就不用操心但如果用了uni-fab.vue这类自定义组件就要检查它有没有做适配。4. 避坑记录导入到联调期间我踩过的五个坑环境搭建这一步几乎每个人都有过「照着教程走还翻车」的经历。下面五条是按出现频率排的每一条都是我先给现象、再说原因、最后给解决路径希望能帮你少走弯路。4.1 Tomcat 启动就闪退日志报 UnsupportedClassVersionError现象双击 Tomcat 的 startup.bat窗口一闪而过打开 logs 目录下的日志文件看到UnsupportedClassVersionError或者ClassNotFoundException: javax.servlet.*。原因JAVA_HOME指向了 JDK 11 甚至更高版本。Tomcat 7 是基于 Java 6/7 规范写的JDK 8 是它能稳定运行的上限JDK 11 移除了 Java EE 模块Tomcat 7 直接找不到 servlet 类。解决重新安装 JDK 1.8把JAVA_HOME和PATH都指过去然后在命令行执行java -version确认输出是1.8.x再启动 Tomcat。注意 Windows 下 PATH 里面可能还残留 C 盘的其它 java 路径一并清掉。4.2 微信开发者工具报 request:fail接口全部调不通现象小程序页面能打开但所有列表都是空的控制台报request:fail或errno 600001。后端 Tomcat 日志里看不到任何请求进来。原因两个坑叠在一起。第一个是「不校验合法域名」没勾选wx.request 被安全策略拦了第二个是 baseURL 写的localhost或127.0.0.1这在模拟器里碰巧能通但一上真机就废——手机上的 localhost 是手机自己不是你电脑。解决微信开发者工具里勾选不校验合法域名baseURL 改成电脑的局域网 IP比如192.168.1.100:8080。真机预览时手机和电脑连同一个 WiFi并在电脑防火墙里放行 8080 端口。这个「本机回环地址对真机无效」的认知建议刻进脑子里所有小程序联调都会遇到。4.3 MySQL8 导入 5.7 的 sql报字符集和认证错误现象用 Navicat 运行 sql 文件报错Unknown collation: utf8mb4_0900_ai_ci或者连接时报mysql ssl 连接错误、caching_sha2_password cannot be loaded。原因MySQL 8.0 默认字符集排序规则和 5.7 不一样密码认证插件也从mysql_native_password换成了caching_sha2_password。Navicat 11 对后者支持不好老驱动也认不出新插件。解决最省事的方案是直接把本地数据库重装成 MySQL 5.7推荐 5.7.44。如果不想重装两个补救办法把 sql 文件里所有utf8mb4_0900_ai_ci替换成utf8mb4_general_ci再执行ALTER USER rootlocalhost IDENTIFIED WITH mysql_native_password BY 你的密码;把认证插件降级。从实际经验看补丁打完还得折腾半天不如一步到位装 5.7。4.4 改了样式不生效发现改的是编译产物现象在小程序端改了页面主色或文字大小重新运行后界面纹丝不动或者过一会儿又变回去。原因压缩包里既有源码也有编译产物——app.07ff6003.css、chunk-vendors.1f0a25b2.css是 uni-app 构建后生成的微信开发者工具加载的正是这些 dist 文件不是你的源码。你改了main.css.bak或 dist 里的 css等于改了备份件和输出件源码没动一重新编译就被覆盖。解决统一改源码也就是.vue文件里的style块或 src 目录下的 css。改完在 HBuilderX 里重新运行或重新构建让它重新生成 dist。至于main.css.bak和uni-fab.vue.bak记住它们是改之前的备份是给你反悔用的不是给你改着玩的。4.5 请求 404 或 405URL 对不上现象浏览器直接访问http://localhost:8080/api/flower/list返回 404或者小程序端报 405 Method Not Allowed。原因前端拼接的 URL 和后端RequestMapping里的路径不一致。这种不一致很隐蔽——有时是少了/api前缀有时是后端定义的是PostMapping但前端用 GET 请求。Tomcat 404 通常还是 web.xml 的 servlet-mapping 没覆盖到对应路径405 就纯粹是请求方式对不上。解决打开后端 Controller把每个接口的RequestMapping完整路径抄出来和前端 request 方法里的 url 逐字对比一个斜杠都不能差。然后看后端日志里有没有Request method GET not supported这类提示有就是方法类型对不上把前端 method 改成 POST 或把后端注解换掉。逐字对齐这个动作我每次联调都强制走一遍真能治各种玄学报错。5. 二次开发加字段、列表加载更多和重新构建的完整链路如果只是把项目跑起来那这套源码的价值只发挥了一半。毕设答辩最怕评委问「这个地方怎么改」所以二次开发的链路你必须心里有数。挑三个最常见的改动场景讲透。5.1 从表到接口给鲜花表加「产地」字段要改哪几处需求场景给每束花加一个「产地」属性并在小程序详情页显示出来。这个改动横跨四层顺序是数据库 → 实体类 → SQL 映射 → 前端。-- 第 1 步数据库加字段 ALTER TABLE t_flower ADD COLUMN origin varchar(100) DEFAULT NULL COMMENT 产地 AFTER detail;// 第 2 步实体类加属性以 Flower 实体为例 public class Flower { private Integer id; private String name; private String category; private BigDecimal price; private String origin; // 新增字段对应数据库 origin 列 // getter / setter 略 }如果项目用的是 MyBatisMapper.xml里如果是select *就不用改查询语句但insert和update语句通常写死了字段列表需要把origin加进resultMap、insert和update里。很多人在这一步翻车查询接口返回的 JSON 里没有新字段就是因为实体类加了、resultMap没加。改完之后后端接口返回的 JSON 里自动带上origin小程序端在详情页的模板里直接渲染即可。这个改动链路的核心认知是接口返回的字段受实体类和 resultMap 双重控制不是数据库加了字段接口就自动有。快速验证方法后端启动后直接访问接口看返回 JSON 里有没有origin字段。5.2 小程序端列表加载更多onReachBottom 触底翻页网上花店这种商品列表页数据一多就要分页。这套项目里如果用户端鲜花列表是一次性渲染所有数据体验会很差。你接手后可以把它改成触底加载更多这是小程序面试题里也常考的点。// 页面 JS 核心代码触底加载下一页 data: { page: 1, pageSize: 10, list: [], totalPages: 1, loading: false }, onReachBottom() { if (this.loading) return; // 防止重复请求 if (this.page this.totalPages) { wx.showToast({ title: 没有更多了, icon: none }); return; } this.page 1; this.loadList(); }, async loadList() { this.loading true; const res await request(/api/flower/list?page this.page pageSize this.pageSize); this.setData({ list: this.data.list.concat(res.data.records), totalPages: res.data.totalPages, loading: false }); }逻辑说明onReachBottom是小程序页面滚到底部时的生命周期回调天然适合做翻页。核心是两个判断——当前是否正在请求loading开关以及当前页码是否已到总页数totalPages。page totalPages时 toast 提示并停止请求避免无限请求后端。concat是因为翻页是追加而不是覆盖如果写成this.setData({ list: res.data.records })第二页会把第一页顶掉页面永远只有一页数据。参数说明page从 1 开始pageSize通常定 10 或 15商品图片多的场景建议 10加载速度和用户体验比较均衡。后端要配合返回totalPages字段也就是总页数前端才能判断是否触底。如果你发现后端只返回了total总条数没返回页数前端可以自己算Math.ceil(total / pageSize)一样能实现。5.3 重新构建与打包3-build.bat 到底做了什么压缩包里的1-install.bat、2-run.bat、3-build.bat是作者留的自动化脚本。按命名习惯推断1-install.bat负责初始化环境比如创建数据库、导入 SQL、下载依赖2-run.bat负责启动后端或拉起开发者工具3-build.bat则是重新构建前端产物。批处理文件的核心内容是命令的按序执行常见写法是echo off rem 3-build.bat 示例重新构建 uni-app 前端产物 cd /d %~dp0 npm install npm run build:mp-weixin echo build finished.逻辑说明cd /d %~dp0的作用是切到脚本所在目录不用担心从别的路径运行时找不到文件。npm run build:mp-weixin是 uni-app 项目构建微信小程序产物的标准命令执行完会在dist目录下生成新的编译结果微信开发者工具加载的就是这份新产物。参数说明如果你的前端用了自定义的构建配置build:mp-weixin这个名字要看package.json里 scripts 的定义不同模板叫法可能不同。跑构建之前先npm install否则会因为缺依赖直接报错。构建完成后务必回微信开发者工具里重新编译一次把缓存清了再验证页面。这个脚本对二次开发的意义在于你改完前端代码不用手动折腾构建流程直接双击3-build.bat就行前提是你先把源码里的依赖装齐。6. 十分钟自测清单与答辩演示顺序整套环境搭完、代码能跑之后先别急着截图写论文。按下面这张表自测一遍把每个功能点都点开确认「能用、能连、能查」。检查项预期结果失败时看哪里管理员登录用预置账号登录成功进入管理页t_user 表里 role1 的记录是否存在用户登录新注册账号可登录且只有查看权限后端日志是否 401token 是否写入 storage鲜花列表用户端能展示上架鲜花t_flower 表 status1 的数据是否有封面图公告查看用户端能看到管理员发布公告公告表是否有数据接口路径是否拼对留言与回复用户留言后管理员可回复用户端可见回复t_message 表 reply 字段是否更新下架效果管理员下架鲜花后用户端列表不再显示接口是否按 status 过滤自测时重点走一遍「用户留言 → 管理员回复 → 用户再看」这条闭环因为它是这个系统里最能体现双角色协作的流程也是评委最容易追问的点。答辩演示顺序我建议这样排先以用户身份逛一遍商品列表点进详情下一条留言然后切管理员账号在留言管理里回复刚刚那条留言再新建一条公告然后把某束花下架最后打开 Navicat刷新用户表和留言表让评委看数据真实落库了。这个顺序的逻辑是从前台到后台再到数据库一层层穿透比一上来就讲代码结构有说服力。我记得自己第一次做这种双角色毕设项目时就是没搞懂编译产物和源码的区别改了半天页面不生效最后发现动的是dist下的 css——从那以后我每次拿到一套源码包都强制先按「导库 → 启动后端 → 跑前端 → 再动代码」的顺序完整走一遍确认哪些是源文件、哪些是构建产物才敢开始改动。这套网上花店源码的目录结构不算复杂但该走的步骤一步都别省。希望帮到你。本文还有配套的精品资源点击获取