★ FEATURED ARTICLE 简介网上花店微信小程序完整源码基于Java后端与小程序前端实现数据存储采用MySQL面向毕业设计或课程设计场景适合具备一定Java基础、希望快速打通前后端关卡的开发者。系统内置管理员与用户双角色管理员可维护用户信息、公告与鲜花内容并能与用户互动交流用户端可浏览鲜花、公告并查看管理员回复功能边界清晰。压缩包内共1778个文件大小约36.23MB以Vue、JS、Java、JSON及图片资源等类型为主覆盖后端Java工程、小程序前端页面、数据库SQL脚本并搭配环境说明与启动批处理文件可适配JDK1.8、MySQL5.7、Tomcat7及微信开发者工具。目前已有63人学习下载。源码完整且能直接运行从页面调用、后端处理到数据表结构均有迹可循便于拆解小程序商城类项目的基础实现同时预留扩展空间可在此基础上增加订单、支付或营销模块适合作为课程设计与毕业设计的起点。1. 基于小程序的网上花店微信小程序这套 Java小程序MySQL 毕设包到底能用来做什么如果你是正在做毕业设计、课程设计或者想快速搞一个能演示、能答辩、能改改就能商用的微信小程序项目这个标题里的压缩包十有八九会在你的收藏夹里躺过一阵。它本质上是一个典型的前后端分离学生项目前端是微信小程序用户端负责浏览花束、加购物车、下单后端是 Java常见的是 Spring Boot MyBatis提供接口MySQL 存商品、订单、用户等数据LW 部分一般是论文/设计文档用来凑齐毕设的文字工作量。这类项目最大的价值是把一条完整业务链路摆在了你面前从微信小程序的首页轮播、分类列表、商品详情到购物车结算、订单状态流转再到后端的接口、数据库的设计你不需要从零造轮子而是顺着源码去理解电商小程序是怎么搭出来的。它的坑也很典型MySQL 连接不上、小程序真机预览连不到本地 Java 服务、图片路径 404、订单状态对不上——这些坑几乎会出现在每一个类似的毕设项目中遇到过一遍之后你再去接任何小程序项目都会心里有底。这篇笔记我按怎么跑起来 → 后端怎么连 → 数据库怎么建 → 前端怎么调 → 出问题怎么查 → 怎么拿去演示的顺序写适合刚拿到源码想两天内跑通的人也适合想把这套项目改造成自己毕设的人。你不需要有很深的 Java 功底但最好装好了 JDK 8、Maven、MySQL 5.7/8.0 和微信开发者工具。下面直接开始。2. 先把项目跑起来导入小程序前端、启动 Java 后端、改掉 3 个必改配置2.1 拿到压缩包后先别急着解压先看清目录结构里有什么正常这类毕设包解压后会有几个平级目录一个小程序前端目录名字经常是miniprogram或flower-shop一个 Java 后端目录常见flower_shop_boot或server一个数据库 SQL 文件.sql还有一份 LW 文档目录。这些目录不是随便放的前端和后端通过 HTTP 接口通信MySQL 是两者之间的公共数据层。我一般会先打开后端目录里的src/main/resources/application.yml或.properties把端口、数据库账号密码、日志级别这三项看清楚。默认端口常见是8080数据库用户名密码可能是root / root或root / 123456如果和你本机不一致后面启动后端必挂。另外注意后端项目的pom.xml里 Java 版本如果是 Spring Boot 2.xJDK 8 或者 11 都行如果是 Spring Boot 3.x必须 JDK 17 以上。很多同学卡在启动失败不是代码问题是 JDK 版本不对。2.2 导入微信小程序前端开发者工具里的两个关键勾选打开微信开发者工具选择导入项目目录选到小程序前端那一层必须是有app.js、app.json的那一层。AppID 可以先选测试号等后面要真机预览时再换成你自己的。导入后第一件事不是点编译而是点右上角详情里的本地设置勾选不校验合法域名、web-view业务域名、TLS 版本以及 HTTPS 证书。这一项不勾小程序去请求http://localhost:8080或http://192.168.x.x:8080会被拦截页面会一直转圈控制台报request:fail或者url not in domain list。我见过很多人在这一步卡了半小时以为是接口写错了其实是开发工具默认不允许访问 HTTP 域名。这个勾选只对开发工具有效真机预览时同样要在手机端打开调试模式才能访问内网后端。修改前端的接口地址也是这一阶段的核心。打开utils/request.js或app.js找到类似baseUrl: http://localhost:8080的配置改成你电脑的局域网 IP比如http://192.168.1.100:8080。这样做的原因后面专门讲但现在你先把本地跑通localhost就行。2.3 启动 Java 后端Maven 拉依赖、改数据源、看启动日志后端用 IDEA 打开社区版也行但要有 Lombok 插件不然编译报错等 Maven 自动下载依赖。如果下载慢检查 Maven 仓库镜像阿里云镜像一般能解决。启动前先把application.yml里的 MySQL 地址改对格式常见是server: port: 8080 spring: datasource: url: jdbc:mysql://localhost:3306/flower_shop?useUnicodetruecharacterEncodingutf8useSSLfalseserverTimezoneAsia/Shanghai username: root password: root driver-class-name: com.mysql.cj.jdbc.Driver mybatis: mapper-locations: classpath:mapper/*.xml configuration: map-underscore-to-camel-case: true这段配置里url有几个关键点flower_shop是数据库名要先在 MySQL 里建好useSSLfalse是为了避免 MySQL 8.0 默认的 SSL 连接警告如果你用的是 MySQL 5.7不加这行也可以serverTimezoneAsia/Shanghai不写的话时间字段可能比正常时间差 8 个小时。driver-class-name如果是com.mysql.jdbc.Driver但你的 MySQL 连接包是 8.x必须改成com.mysql.cj.jdbc.Driver否则启动直接报ClassNotFoundException。启动方式可以直接运行带main方法的启动类或者在项目根目录执行mvn spring-boot:run。启动成功的标志是控制台出现Started Application in X seconds以及 Tomcat 端口号。这时候你先别急着打开小程序先在浏览器访问一下http://localhost:8080/api/products或类似的路由能返回 JSON 就说明后端和数据库已经通了。如果你不确定有哪些接口看后端 controller 包里的RequestMapping路径。2.4 三个必改配置清单结合上面的流程我把每次拿这类项目最容易翻车的配置点列一份清单你按顺序查一遍基本能避免 80% 的启动问题配置项常见错误正确做法MySQL 版本与驱动用 MySQL 8.0 却配 5.x 驱动8.x 用com.mysql.cj.jdbc.Driver并加useSSLfalse数据库名连接串里的库名还没建先执行 SQL 文件建库建表再启动后端小程序 baseUrl写死localhost真机连不上局域网调试用http://192.168.x.x:8080并在工具里勾选不校验域名JDK 版本Spring Boot 3 项目用 JDK 8升级 JDK 17或换用源码里的旧版本分支端口占用8080被其他程序占用改server.port比如8081同时改小程序端地址这些配置十分钟内能改完但确实是最常见的翻车点。我自己的习惯是先把后端启动起来确认接口有响应再去碰小程序这样排查问题时能分清是前端问题还是后端问题不会两头猜。3. MySQL 数据库从建库到初始化花店项目的表结构和数据填充一次搞清3.1 为什么这类项目必须用 MySQL而不是 SQLite 或文件存储花店小程序涉及商品、用户、订单、购物车、轮播图等实体这些实体之间有明确的外键关系比如订单里有用户 ID 和商品 ID购物车要按用户分组。MySQL 是这类毕设的标准选择不只是因为标题写了 MySQL更因为它的事务能力能保证下单时扣库存和生成订单要么都成功要么都失败。SQLite 在本地开发虽然方便但你用到LEFT JOIN多表查询时性能和语义都不如 MySQL 直观。另外Java 后端里用的 MyBatis 或 MyBatis-Plus 自带分页插件和 XML 映射和 MySQL 的语法配合很熟练。你后面如果想改成 PostgreSQL需要换掉不少 SQL 方言写法但这不是毕设项目该干的事。所以拿到这个项目包你先老老实实把 MySQL 装好把.sql文件导进去这是成本最低的路。3.2 安装 MySQL 并导入源码 SQL 文件的操作步骤如果你机器上还没有 MySQL建议直接装 MySQL 5.7.44 或 8.0 的社区版。5.7 的安装教程网上非常多核心点就三个一是安装时选 UTF-8 字符集二是一定要记住 root 密码三是 Windows 上用net start mysql验证服务启动了。如果你用的是 macOS 或 Linux用 Homebrew 或 apt 装完还要注意 MySQL 的 socket 路径。装好之后打开命令行客户端或 Navicat执行以下命令创建数据库CREATE DATABASE IF NOT EXISTS flower_shop DEFAULT CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci; USE flower_shop; SOURCE /你的完整路径/flower_shop.sql;utf8mb4必须用因为旧版utf8存不了 emoji而小程序里用户昵称经常带 emoji。SOURCE是 MySQL 命令行导入 SQL 文件的方式比复制粘贴好能保证多语句执行顺序正确。如果你用的是 Navicat直接右键数据库运行 SQL 文件即可。导入完成后你可以先查一下表数量USE flower_shop; SHOW TABLES;正常会看到user用户、product商品、product_category分类、cart购物车、orders订单、order_detail订单明细、banner轮播图这些表。如果少了表多半是 SQL 文件里建表语句被分号截断了或者你导入时没选对数据库。3.3 核心表结构和字段边界看懂表才能改功能花店这种项目核心是商品和订单我把最常见的表结构拆开讲。product表一般有id、name、price、original_price、image、stock、category_id、description、status等字段。这里有两个需要注意的地方price经常用DECIMAL(10,2)而不是DOUBLE因为浮点计算会出精度问题比如 0.1 加 0.2 不等于 0.3image字段存的是相对路径或完整 URL如果存的是images/rose.jpg这种前端拼接地址时漏了域名图片就显示不出来。orders表是关键中的关键字段一般有order_no订单号、user_id、total_price、status、create_time、pay_time等。status常用0待支付、1已支付、2已发货、3已完成、4已取消。你要改业务逻辑比如增加退款中状态就必须在前后端和数据库三处同步改别只改前端按钮文案。订单明细表和商品表的关系是order_detail.product_id指向product.id这样设计是因为订单生成后商品价格可能变动所以明细表里要冗余一份商品快照的名称和价格不能在查询订单时再去 join 商品表拿现值否则用户看到的历史订单价格会随商品价格变化这是电商系统的基本规矩。3.4 数据库连接参数里的隐藏坑SSL、时区和连接池回到后端配置useSSLfalse这个参数在 MySQL 8.0 里几乎必加。如果你不写MySQL 8.0 默认开启 SSL会在启动日志里报一串SSL connection error: unknown error警告虽然不影响运行但很吓人而且某些旧版本驱动会直接连接失败。我见过有人被这个警告误导去改了 SSL 证书最后发现把useSSLfalse加上就干净了。serverTimezoneAsia/Shanghai也建议写上特别是在国内服务器上。MySQL 驱动版本不同默认时区可能被识别成 UTC导致create_time查询出来比本地时间差 8 小时小程序端展示的订单时间就错了。这不是 bug是时区问题别去代码里8在连接串上统一指定时区才是正解。连接池参数一般藏在application.yml里比如initial-size、max-active、max-wait。如果是毕设项目保持默认即可但你如果要压测或者演示时同时很多人访问可以把max-active调到 20max-wait调到 5000 毫秒避免并发高峰时拿不到连接。这些参数改完记得重启后端改配置不生效是最常见的我明明改了为什么没用。4. 小程序端与 Java 接口联调请求封装、登录态、商品列表和下单全链路4.1 小程序请求封装别在每个页面都写 wx.request大多数同类毕设的前端代码里会把wx.request包在utils/request.js里统一处理基础 URL、请求头、登录 token 和错误提示。如果没有封装页面里到处是裸的wx.request你改一个 baseUrl 得全项目替换那维护起来就是灾难。我建议你先看源码里有没有这个文件没有就自己写一个后面所有接口都走它。请求封装的核心是返回值统一处理。你期望后端返回的格式一般是{ code: 0, msg: success, data: {...} }这是前后端约定。小程序端在拿到响应后先判断code等于 0 才往下走否则直接 toast 报错。封装代码大概长这样// utils/request.js const BASE_URL http://localhost:8080/api; function request(path, method, data) { return new Promise((resolve, reject) { wx.request({ url: BASE_URL path, method: method || GET, data: data || {}, header: { Content-Type: application/json, token: wx.getStorageSync(token) }, success(res) { if (res.data.code 0) { resolve(res.data.data); } else { wx.showToast({ title: res.data.msg, icon: none }); reject(res.data); } }, fail(err) { wx.showToast({ title: 网络请求失败, icon: none }); reject(err); } }); }); } module.exports { request, BASE_URL };这里把BASE_URL单独提出来后面真机调试时只改这一个地方。token从本地缓存取如果没有登录过就是空字符串后端需要匿名接口做兼容比如轮播图接口就不需要 token。注意fail分支里的 toast 要简洁因为真机网络出错时用户需要明确提示而不是页面静默转圈。4.2 登录态处理wx.login 换 token还是直接传 openid花店小程序的登录逻辑有几种写法。标准的做法是前端调用wx.login拿到临时code发给后端的/api/auth/login后端拿着 code 去微信接口换 openid再生成自己的 token 返回。但很多毕设项目省掉了微信接口而是直接在小程序端用wx.getUserProfile拿头像昵称加上一个假的 openid 或者设备唯一标识拼一个用户对象传给后端。这两种方式在毕设里都能跑通区别在于前者更接近真实上线后者省去了申请小程序 AppSecret 的麻烦。如果你想在演示时不用登录就能看商品后端接口就把token设成可空如果要看购物车和订单用户必须登录。我建议你把登录流程固定在app.js的onLaunch里这样用户一进小程序就静默登录在页面里不需要再调一遍。登录接口的代码大致是PostMapping(/api/auth/login) public Result login(RequestBody LoginRequest loginRequest) { String openid loginRequest.getOpenid(); User user userMapper.findByOpenid(openid); if (user null) { user new User(); user.setOpenid(openid); user.setNickname(loginRequest.getNickname()); userMapper.insert(user); } String token UUID.randomUUID().toString().replace(-, ); user.setToken(token); userMapper.updateToken(token, user.getId()); return Result.success(token); }这段代码的逻辑是查不到就注册查得到就更新 token。token 直接用 UUID 生成简单够用正式项目会用 JWT但毕设里存数据库表字段的方式更直观答辩时也容易讲清楚。注意这里userMapper的方法在 XML 里要有对应的 SQL如果你改字段名比如从openid改成open_id一定要同步改 XML 里的#{openid}。4.3 商品列表的加载更多分页参数和后端 PageHelper花店首页的商品列表一般不会一次全查出来常见做法是页面上保留一个上拉加载更多触底时请求下一页热词里经常提到的微信小程序页面列表加载更多就是这个东西。前端用onReachBottom生命周期触发下一页后端用 PageHelper 或手写LIMIT分页。小程序端的列表容器一般长这样// pages/index/index.js let currentPage 1; const pageSize 10; let noMore false; Page({ data: { products: [], loading: false }, onLoad() { this.loadProducts(true); }, onReachBottom() { if (!this.data.loading !noMore) { this.loadProducts(false); } }, async loadProducts(reset) { if (this.data.loading) return; this.setData({ loading: true }); if (reset) { currentPage 1; noMore false; } const list await request(/products?page currentPage size pageSize, GET); this.setData({ products: reset ? list : this.data.products.concat(list), loading: false }); if (list.length pageSize) { noMore true; } else { currentPage 1; } } });这里的关键是reset参数下拉刷新时传true重置页面和数据触底加载时传false追加数据。noMore标志位防止已经没数据了还在不停发请求。后端的接口要支持page和size参数返回的是一个数组。如果返回的是{ list: [], total: 100 }结构前端取数的地方也要对应改。后端用 PageHelper 时注意第几页从 1 开始前端传 1后端PageHelper.startPage(page, size)即可。4.4 下单流程从购物车到订单的后端事务和前端状态同步花店的购物车转订单是核心场景流程是用户勾选购物车条目 → 点击结算 → 创建订单 → 扣库存 → 返回订单号 → 跳转支付页面。这个流程里最怕的是订单创建了但库存没扣或库存扣了但订单没生成所以后端要用事务把这些操作包起来。在 Spring Boot 里就是给createOrder方法加Transactional注解。我见过一些毕设代码没有事务下单接口只插入订单不管库存结果商品卖超了。你要在答辩时圆这个场最好理解事务的ACID并能在源码里指出来。下单接口的参数一般是一个用户 ID 和购物车 ID 列表后端先查商品价格计算总价插入订单主表再插入订单明细表最后扣减商品库存。任何一步失败事务回滚前端收到错误提示购物车不会消失。前端提交后要处理的是订单状态刷新创建成功后不能默认支付成功要跳到支付页面支付页可以做成模拟支付点按钮后调一个/api/pay接口把订单状态改成已支付。这里要注意小程序端支付必须要微信支付商户号毕设里模拟支付是常态但你得在答辩时解释清楚真实场景是调wx.requestPayment而这里为了演示简化了。5. 避坑清单花店小程序从能启动到能演示的 5 个高频故障下面这 5 个问题是我基于同类项目经验整理的排查顺序按出现概率从高到低排列。每个问题都按现象 → 原因 → 解决来写你可以直接当查错手册用。5.1 MySQL 连接报错SSL connection error或者Public Key Retrieval is not allowed现象后端启动时控制台一大串红字包含SSL connection error或者连接池初始化失败。原因MySQL 8.0 默认使用caching_sha2_password认证并且服务端默认开启 SSL。你用的 JDBC 驱动版本较老或者连接串里没有指定allowPublicKeyRetrievaltrue就会在连接阶段失败。解决把数据源 URL 改完整写成jdbc:mysql://localhost:3306/flower_shop?useUnicodetruecharacterEncodingutf8useSSLfalseallowPublicKeyRetrievaltrueserverTimezoneAsia/Shanghai。allowPublicKeyRetrievaltrue是 MySQL 8.0 连本机时常需要的参数加上之后重启后端问题就没了。5.2 小程序页面一直转圈控制台报request:fail或url not in domain list现象首页商品列表加载不出来转圈几秒后提示网络请求失败。开发者工具控制台能看到request:fail。原因默认情况下微信小程序只能请求已配置合法域名的 HTTPS 接口。你本地开发用的是http://localhost当然不在白名单里。解决开发阶段在微信开发者工具的详情 → 本地设置里勾选不校验合法域名、web-view业务域名、TLS 版本以及 HTTPS 证书。如果你在真机预览也要在手机上打开调试模式。还有一个冷门坑某些基础库版本里勾选不校验域名后要重新编译才生效记得点一下编译按钮。5.3 真机预览连不上本地后端but 开发者工具一切正常现象小程序在开发者工具里很流畅但手机上打开后商品列表空白接口全部失败。原因手机访问localhost指的是手机自己不是你的电脑。开发工具能通是因为它运行在你的电脑上真机不行。解决把前端BASE_URL改成电脑的局域网 IP比如http://192.168.1.100:8080/api。同时保证手机和电脑在同一个 WiFi 下并关闭电脑防火墙对 8080 端口的拦截。Windows 上可以用允许应用通过防火墙来放行 Java 进程或者临时关闭防火墙测试。另外提醒一句电脑的 IP 地址在命令行里用ipconfigWindows或ifconfigmacOS/Linux查。5.4 商品图片不显示控制台显示图片 404 或空白现象商品列表能请求下来但图片位置是灰块。点开图片地址在浏览器里访问要么 404要么路径不对。原因数据库里image字段存的是相对路径比如images/rose.jpg而前端直接src{{item.image}}于是小程序尝试访问http://localhost:8080/api/image/...但静态资源实际在机器的其他目录或者后端没有配置静态资源映射。解决先看后端有没有把上传目录或图片目录映射成静态资源路径。Spring Boot 里常见配置是spring: web: resources: static-locations: file:/path/to/images/,classpath:/static/如果只是毕设你可以把图片放到小程序项目的assets目录下然后把数据库里的路径改成/assets/rose.jpg用本地图片绕过后端。这样虽然不规范但演示时最省事。如果你想让后端出图就把localhost:8080拼到图片地址前面写成{{BASE_URL}} item.image。5.5 下单后订单状态没变或者购物车数量不对现象点击结算后提示成功但订单列表里看不到新订单或者购物车里的商品数量显示异常。原因订单列表页的查询条件没传对比如只查了已支付而新订单是待支付购物车数量变化是因为后端在创建购物车条目时没有去重而是每次添加都插入一条新记录。解决先看后端订单列表接口是否支持按状态筛选前端传参时带上当前选中状态。购物车的去重逻辑一般是在insert之前先查该用户、该商品是否已有记录有则update quantity没有才insert。你可以用 SQL 验证SELECT user_id, product_id, quantity FROM cart WHERE user_id 1;如果同一个用户和商品有多条记录说明源码没做查重需要你在 mapper 的 XML 里加一段SELECT COUNT(*)判断。5.6 补充顶部导航栏高度适配问题热词里常看到微信小程序顶部导航栏高度这个在花店项目里也常见比如自定义导航栏时。如果你没有做自定义导航栏用的是系统原生导航栏这个问题可以忽略。但如果你用了自定义导航栏要计算状态栏高度非 iPhone 是 20iPhone X 以上是 44。小程序里可以用wx.getSystemInfoSync().statusBarHeight来获取。如果你不想踩这个坑我的建议是第一版先用系统导航栏把商品详情页和下单页跑通最后有余力再上自定义导航栏。自定义导航栏的成本不止高度还要适配胶囊按钮位置纯样式问题会消耗大量时间不值当。6. 最后一招把毕设变成一个能上手演示的作品真机预览与后端部署的验证方法项目本地跑通只能算完成一半真正能在答辩或给老师演示时撑住场面的是手机真机上的完整流程。我用这一类项目做验收时永远按一条主链路走打开小程序 → 首页看到轮播图和商品列表 → 点击商品进详情 → 加入购物车 → 去结算 → 模拟支付 → 在订单列表中看到订单状态变化。这条链路每通过一步就在纸上打一个勾任何一步断了优先查那一步的network请求和控制台报错。如果手机和电脑在同一个局域网最快的方式是小程序端BASE_URL改成电脑 IP然后手机微信里打开开发者工具预览生成的二维码。这时要注意手机杀掉小程序再重新进入因为wx.request的BASE_URL如果变了旧的小程序实例可能还缓存着老地址。如果改了不生效在手机微信小程序列表里删除后重新扫码。如果想更进一步把后端部署到一台云服务器你需要处理数据库连接、安全组端口和静态资源路径。数据库一定不要用空格密码连接串里的特殊字符会坑你比如密码含或#URL 就要做编码。部署完成后用curl -X GET http://你的服务器IP:8080/api/products验证接口通不通再让小程序端BASE_URL指向公网地址。我自己的习惯是每次改完配置先用开发者工具把主链路跑通再换真机跑一遍最后才动部署。不要上来就搞反向代理和 HTTPS微信小程序正式上线确实要求 HTTPS但演示场景下内网 HTTP 完全够用。你要做的事是让评委看到这个系统能正常用而不是看到这个系统配置了最全的中间件。关于调试charles抓包工具确实能看小程序请求但对于这个项目来说开发者工具自带的 Network 面板已经够用。你只需要关心四个维度请求 URL、请求方式、响应状态码、响应 Data。如果响应code不是 0去看后端日志对应的方法抛出什么异常多数是 SQL 语句错误或者参数没对上。我见过最搞笑的一次是前端把page参数拼成了pageNo后端不识别默认返回第一页导致怎么滑都加载不出新数据——这种问题一抓包就现形完全不用靠猜。这套项目能带给你的不是一个能交差的毕设这么简单而是让你经历一次完整的电商小程序前后端协作。你把它调通一遍后再去接微信小程序相关的项目像列表加载更多、登录鉴权、订单状态流转这些套路都会变成顺手的东西。花店项目虽然小巧但该有的骨头都有。希望这篇笔记能帮你少走几步冤枉路把源码包变成你自己的作品。本文还有配套的精品资源点击获取
阅读完成 · 觉得有帮助？
调试口保护)
