简介一套基于微信小程序与NetCore的多店铺网上购物商城系统毕业设计项目面向需要完整商城解决方案的开发者与高校学生涵盖微信小程序端、管理后台、插件管理及WebApi等核心模块可用于课程设计、毕业设计或商城项目起步参考。资源包共1915个文件约10.34MB以C#源码798个cs、JavaScript脚本180个js、Razor视图148个cshtml、小程序页面42个wxml与42个wxss、JSON配置63个json及动态库27个dll等为主结构覆盖后端逻辑、前端展示与配置管理。随包附带MySQL数据库脚本urshpodb.sql、数据库连接配置dataSettings.json、插件配置文件installedPlugins.json及插件源代码便于按说明直接部署和扩展。目前已有3592人学习适合需要参考真实多店铺商城架构、快速搭建微信小程序商城并进行二次开发的读者。1. 在线网上购物商城系统小程序项目拿到压缩包先分清四块内容这套基于微信小程序的在线网上购物商城系统是毕业设计里最容易“拿到手却跑不起来”的资源类型——它不是纯前端模板而是小程序端、服务端、MySQL 数据库、项目安装使用说明四件套叠在一起。项目覆盖商品分类浏览、搜索、购物车、订单提交、收货地址管理和后台管理几乎对应毕业设计答辩最常被问的六类功能点。很多同学下载后直接进微信开发者工具编译首页能开却登不上、商品查不到问题基本都出在数据库或服务端没起来。下面按我拆同款项目的顺序把模块怎么用、参数怎么配、坑在哪里讲清楚适合拿这套源码做毕设的学生也适合想快速了解商城类小程序工程结构的新手。2. 项目结构与运行链路先拆包再选路别急着编译2.1 解压后的四块内容源码目录、数据库脚本、说明文档、依赖包下载好的压缩包解压后顶层目录通常能分成四块小程序端代码、服务端代码、数据库脚本、安装使用说明文档。虽然不同渠道转发出来的版本命名会有差异但主体结构基本一致。以最常见的原生微信小程序加 Spring Boot 组合为例解压后大概长这样mall-wx/ # 小程序端 app.js app.json pages/ index/ goods/ cart/ order/ user/ utils/ request.js mall-server/ # 服务端 Spring Boot src/main/java/ src/main/resources/ pom.xml mall-db/ mall.sql # 数据库初始化脚本 安装使用说明.md拿到手先在文件管理器里走一圈对照这个结构把每一层认清楚。app.js和app.json是微信小程序的全局入口pages/下每个目录就是一个页面utils/里一般放着请求封装和工具函数服务端这边src/main/java下按 controller、service、mapper 分层src/main/resources里放着application.yml和 Mapper XMLmall.sql是建库建表脚本也是整个项目能不能跑起来的前提。如果压缩包里还有一份说明文档务必先打开它通常会写明 JDK、MySQL、微信开发者工具这几个环境的版本要求以及数据库账号、密码、端口号。同一份压缩包在网盘里被转手很多次之后application.yml里的数据库密码很可能还是原作者本机的说明文档里的信息才对应你手上这份版本。我习惯先把这些信息抄到一个文本文件里当作后续所有配置的基准。文件或目录作用操作优先级pages/小程序各页面业务代码改页面时才动utils/request.js请求封装与 BASE_URL必须改application.yml数据源、端口配置必须改mall.sql建库建表及演示数据必须导入安装使用说明版本与环境要求最先读抄完信息之后再做一件事用记事本打开README或说明文档对比作者写的环境版本和你本机实际版本。最常见的毕业设计后端是 Java Spring BootJDK 版本从 8 到 17 都有版本不匹配时后端启动阶段就会报错而且报错信息经常看不懂。确保这几个版本对得上再进入下一步。2.2 运行链路一次商品列表请求要经过几个环节在线网上购物商城项目的运行链路可以拆成一条直线小程序端发请求 → 服务端接口处理 → MySQL 数据库存取数据。小程序端只负责界面渲染和用户操作真正的业务逻辑在服务端比如登录态校验、库存扣减、订单状态更新数据库端则存着用户、商品、订单、购物车等表。这条链路里最容易忽略的是“小程序端无法直接访问数据库”。很多新手以为在app.js里写一个 MySQL 连接串就能读写数据这在浏览器 Web 项目里也许能跑但在微信小程序里行不通——小程序运行在微信客户端环境没有 MySQL 驱动也不允许直连数据库必须通过服务端提供的 HTTP 接口中转。这也是为什么同款项目里会有一个utils/request.js请求封装文件内部调用wx.request。我一般会把「一次商品列表请求」按环节拆开排查时按顺序从数据库往上走小程序端pages/goods/list.js在onLoad生命周期里调用请求封装里的request.get(/api/goods/list)utils/request.js统一拼接BASE_URL补上token调用wx.request请求到达服务端 Spring Boot 的GoodsController由GetMapping(/api/goods/list)接收Controller 调用 Service 里的业务方法Service 调用 Mapper 执行 SQLMyBatis 把结果映射成对象数据以 JSON 格式返回小程序端页面setData后渲染到商品列表。这个链路里任何一环断了表现都是“前端没数据”但查起来必须分层确认。常见做法是直接在浏览器地址栏访问接口地址或者用命令行工具请求一下curl http://localhost:8080/api/goods/list如果浏览器或 curl 能返回 JSON说明服务端和数据库没问题问题出在小程序端如果连接都建立不了说明服务端或数据库还没起来根本轮不到前端。小程序开发者工具自带的调试器 Network 面板也可以看到每个请求的 URL、状态码和响应体那是排查时最先看的地方。2.3 选型逻辑原生小程序和 Spring Boot 为什么是主流组合网上购物商城类毕业设计最常见的组合是原生微信小程序 Java Spring Boot MySQL也有少数版本用 Node.js 或 PHP 写服务端。这套项目选择原生微信小程序而不是 uni-app一个重要原因是答辩演示场景往往只有微信开发者工具这一套环境原生框架不需要额外安装 HBuilderX也不用处理跨端编译链评审老师现场看的时候容错率更高。原生框架的另一个优势是wx.request、wx.login、wx.setStorage这些 API 都是微信官方能力调试信息在控制台里非常直观。uni-app 虽然也能编译到小程序但多了一层编译真机预览时如果出现样式错乱排查成本会比原生高。对于以“完成度”为主要评分标准的毕业设计来说原生小程序的稳定性就是最大的优势。服务端选 Spring Boot 同样有现实理由它和 MySQL、MyBatis 的搭配在国内课程设计里覆盖率极高网上可查的资料最多遇到问题搜索时命中率远高于小众框架。服务端项目里的pom.xml依赖、application.yml数据源配置、Mapper XML 映射都是可以按固定套路讲清楚的“标准件”。定下这个大方向之后剩下的工作就是按步骤把环境理一遍先建库再改配置最后启动验证。3. 数据库初始化与服务端配置从 SQL 导入到接口可用3.1 初始化数据库导入 mall.sql 并自检核心表使用在线网上购物商城系统导入数据库脚本是第一步也是绝对不能跳的一步。压缩包里的mall.sql通常已经包含建库、建表、插入演示数据的全部语句在 Navicat 或 MySQL 命令行里都能导入。命令行导入方式如下mysql -u root -p -e CREATE DATABASE IF NOT EXISTS mall DEFAULT CHARACTER SET utf8mb4; mysql -u root -p mall mall.sql第一行的CREATE DATABASE只负责建一个空库字符集用utf8mb4而不是utf8因为商城项目里有用户昵称和商品名称还可能包含 emoji 表情utf8mb4才能完整存储。第二行把mall.sql导入到刚建好的mall库里。如果 SQL 文件本身已经写了CREATE DATABASE mall;那第一行可以省略直接mysql -u root -p mall.sql会在脚本里自动完成建库。导入之后不要急着启动后端先用一句 SQL 确认表结构是否完整SELECT table_name FROM information_schema.tables WHERE table_schemamall ORDER BY table_name;商城类项目正常情况下至少要有下面这几张核心表它们的角色各不相同表名作用关键字段user用户信息id, openid, nickname, avatargoods商品信息id, name, price, stock, imagecart购物车记录id, user_id, goods_id, quantityorder订单主表id, order_no, user_id, status, total_amountorder_item订单明细id, order_id, goods_id, quantityaddress收货地址id, user_id, receiver, phone, detail如果表数量对不上或者goods表里没有任何数据说明导入的文件和项目不配套。常见情况是网盘里同时存在新旧两版 SQL导入了旧版导致字段缺失后面的接口一调就报Unknown column。遇到这种情况只能重新对照说明文档找到正确的那份脚本再导一次。3.2 修改数据库连接配置端口、账号、密码、时区一个都不能错数据库就绪后打开服务端目录下的src/main/resources/application.yml找到 spring 数据源配置。这套网上购物商城系统的后端配置基本是同一套写法只是参数值需要改成你自己本机的常见配置如下server: port: 8080 spring: datasource: url: jdbc:mysql://localhost:3306/mall?useUnicodetruecharacterEncodingutf8serverTimezoneAsia/Shanghai username: root password: 123456 driver-class-name: com.mysql.cj.jdbc.Driver这一段里三个参数最容易出问题。第一个是serverTimezoneAsia/ShanghaiMySQL 8 的 JDBC 连接器要求显式指定时区否则后端启动时会直接抛The server time zone value异常第二个是characterEncodingutf8它和数据库的utf8mb4配合保证接口返回的中文不会乱码第三个是password如果源码包作者写的密码和本机 MySQL 不一致日志里会出现Access denied后端直接启动失败。改完后记住server.port的值。如果 8080 被本机其它程序占用可以改成 8081 或其它空闲端口但改完之后小程序端请求地址里的端口也要同步改。我一般会把“端口号、数据库名、账号密码”抄在便签上后面排查问题全靠这一行信息对照。3.3 小程序端接口地址与 AppIDBASE_URL 配置是分水岭服务端配好后接着改小程序端。小程序端不能连数据库只能通过 HTTP 调服务端接口接口地址在源码包里通常集中在utils/request.js里维护。找到BASE_URL那一行改成你本机的服务端地址const BASE_URL http://localhost:8080 const request (url, method GET, data {}) { return new Promise((resolve, reject) { wx.request({ url: BASE_URL url, method: method, data: data, header: { Content-Type: application/json, Authorization: wx.getStorageSync(token) }, success(res) { if (res.data res.data.code 200) { resolve(res.data.data) } else { wx.showToast({ title: res.data.msg || 请求失败, icon: none }) reject(res.data) } }, fail(err) { reject(err) } }) }) }本地调试时localhost没问题但真机预览时手机访问不了电脑的localhost必须改成电脑的局域网 IP比如http://192.168.1.100:8080并且手机和电脑要连同一个 WiFi。另一个容易卡住的点是微信开发者工具默认不允许请求http://明文地址需要在「详情」-「本地设置」里勾选「不校验合法域名、web-view业务域名、TLS 版本以及 HTTPS 证书」否则所有请求都会在控制台报request:fail url not in domain list。header里统一带Authorization是因为后端接口要求登录后携带 token否则返回 401。success回调里判断res.data.code 200对应后端统一返回结构{ code, msg, data }。这两处理解透了登录之后进商品列表才不会出现“401”或“数据解析失败”。AppID 的处理也在这步一起做。在微信开发者工具导入项目时可以直接选择「测试号」也可以修改project.config.json文件里的 appid 字段{ appid: touristappid, projectname: mall-miniprogram }touristappid是微信提供的游客模式标识适合没有注册小程序账号的本地调试。但游客模式下wx.login拿到的 code 是模拟的后端如果接了真实微信接口会返回errcode 40029所以不少同款项目干脆在后端做了模拟登录接口专门应对这种演示环境。3.4 启动后端并用 curl 验证看日志和响应体判断问题在哪配置全部就位后启动服务端。Spring Boot 启动日志里看到Started Application in xx seconds和Tomcat started on port 8080这两行说明后端基本起来了。不要只看控制台没报错就收工要实际请求一次接口验证。在命令行执行curl http://localhost:8080/api/goods/list返回一段包含商品字段的 JSON说明数据库连接、后端路由、请求转发这条链路已经通了返回Connection refused说明后端没启动或端口不是配置的 8080返回一段带SQLException的异常堆栈说明数据库连接或表名有问题回头检查application.yml和导入的 SQL。这一步做完环境搭建才算走完后面进小程序端看效果时遇到问题也容易定位。4. 小程序端核心业务实现登录授权、商品列表与订单支付4.1 登录链路wx.login 拿到的 code 不能直接用登录是所有操作的前提也是同款项目里最容易被一笔带过的地方。微信小程序的登录逻辑不是用wx.login直接拿到用户身份而是拿一个临时code交给后端调用微信接口换openid后端再生成自己的 token 返回。小程序端把 token 存进本地缓存后续请求带在 header 里。典型代码逻辑是wx.login({ success(res) { if (res.code) { wx.request({ url: BASE_URL /api/auth/login, method: POST, data: { code: res.code }, success(res2) { const token res2.data.data.token wx.setStorageSync(token, token) wx.setStorageSync(userInfo, res2.data.data.userInfo) } }) } } })res.code是一次性授权码五分钟左右有效只能使用一次后端拿 code 换 openid 后在user表里查或建用户再签发 token。如果登录失败优先看后端控制台日志里jscode2session返回的errcode常见的是40029意思是 code 无效以及40013意思是 AppID 配置错误。需要特别说明的是为了演示方便有些同款版本把登录做成了“一键模拟登录”——不调微信接口直接往数据库里插一个用户并返回 token用来在没有 AppID 的情况下也能跑通流程。如果你拿到的资源包是这个版本答辩时就不要说它是真实微信登录评审老师追问 openid 获取链路时容易穿帮。我的建议是两套逻辑都保留有 AppID 走真实登录没有 AppID 走模拟登录答辩时按实际环境选择讲哪套。4.2 商品列表与分类从接口数据到页面渲染商品展示是商城项目的门面。首页通常先加载分类列表再按默认分类拉取商品。pages/index/index.js里的典型写法是Page({ data: { categories: [], goodsList: [], currentCategoryId: 0 }, onLoad() { this.loadCategories() }, loadCategories() { getApp().request(/api/category/list).then(categories { this.setData({ categories: categories }) if (categories.length 0) { this.setData({ currentCategoryId: categories[0].id }) this.loadGoods(categories[0].id) } }) }, loadGoods(categoryId) { getApp().request(/api/goods/list?categoryId categoryId) .then(goodsList this.setData({ goodsList: goodsList })) } })这段逻辑的核心是“先加载分类再加载默认分类下的商品”。如果分类有数据但商品列表空白大概率是分类接口和商品接口的参数名对不上比如后端要的是categoryId前端传的是categoryId少个字母或者下划线写法不同。这种问题在控制台里不会显示明显报错只能通过 Network 面板核对实际请求参数。商品卡片里的图片渲染要重点检查goods表的image字段。很多源码包里存的是/upload/goods/1.png这一类的相对路径线上环境能访问但本机没有这些文件时页面就会显示裂图。解决方式是把图片 URL 批量改成可访问的占位图这个动作答辩前一定要做否则演示时一页商品全是裂图第一印象直接崩掉。4.3 购物车与订单提交价格、库存与状态的流转逻辑购物车和订单是商城业务的核心。加入购物车时前端把商品 ID、数量、单价提交后端在cart表里做“同一商品重复加入则数量累加”的判断提交订单前要经过地址选择、商品清单确认、金额重新计算三个步骤金额计算基准必须以后端为准不能信任前端传来的价格这是做交易类项目的基本安全意识。订单提交接口的后端代码大致是这样Transactional public Order createOrder(OrderCreateVO vo, Long userId) { Order order new Order(); order.setUserId(userId); order.setStatus(OrderStatus.UNPAID); order.setTotalAmount(0); for (OrderItemVO item : vo.getItems()) { Goods goods goodsMapper.selectById(item.getGoodsId()); if (goods.getStock() item.getQuantity()) { throw new RuntimeException(库存不足); } goods.setStock(goods.getStock() - item.getQuantity()); goodsMapper.updateById(goods); order.setTotalAmount(order.getTotalAmount() goods.getPrice() * item.getQuantity()); } orderMapper.insert(order); return order; }这段代码有两个值得讲透的点。第一Transactional保证创建订单过程中任何一步失败整个订单和库存扣减一起回滚不会出现“订单建了、库存没扣”的脏数据。第二扣减库存放在创建订单时意味着进入订单结算的商品库存会被提前占住这是商城类后端最常见的模式先锁库存再等支付。4.4 模拟支付与订单状态更新没有商户号也能演示毕业设计一般不接真实微信支付因为微信支付商户号需要营业执照和审核周期很长。同款项目里最常见的处理是“模拟支付”前端提交订单后调用一个支付接口后端把订单状态从“待付款”改成“已付款”。submitOrder() { const orderId this.data.orderId getApp().request(/api/order/pay, POST, { orderId }).then(res { wx.showToast({ title: 支付成功, icon: success }) wx.redirectTo({ url: /pages/order/detail?id orderId }) }) }这块最需要验证的是后端是否真的更新了status字段而不是只返回一个成功提示。有些改过的版本把 pay 接口写成了空实现前端提示成功数据库里订单仍是“未支付”这会导致后续的“待发货”列表和订单详情页状态不一致。验证方法很简单支付完成后查一次order表看status是否从待付款变成了已付款。5. 部署运行避坑五个高频故障的现象、原因与处理记录5.1 开发者工具编译报错找不到 app.json 或页面路径错误现象打开微信开发者工具时提示app.json: 文件未找到或者pages/index/index.json 未找到。原因小程序端目录和服务端目录混在同一个根目录下导入项目时直接选择了压缩包解压后的最外层目录导致开发者工具找不到app.json。解决导入项目时目录必须精确指到包含app.js、app.json、pages/的那一层。如果拿不准先在资源管理器里逐层点进去确认app.json的位置再导入。导入后如果页面路径还是报错打开app.json检查pages数组里的路径是否与实际目录一致源码经过多次转发后偶尔会有页面文件缺失的情况缺哪个补哪个。5.2 请求接口失败404、连接失败或域名校验不通过现象页面一直 loading控制台提示statusCode 404、request:fail或url not in domain list。原因404说明服务端已启动但接口路径不对或者后端压根没起来request:fail说明网络层就不通url not in domain list说明小程序端走了 HTTPS 域名校验而你用的是本机 http 地址。解决先在浏览器访问http://localhost:8080/api/goods/list确认服务端可用。然后核对utils/request.js里的BASE_URL与后端端口是否一致。最后在开发者工具「详情」-「本地设置」里勾选不校验合法域名。真机预览时记得把localhost改成电脑的局域网 IP并保证手机和电脑在同一 WiFi 下。5.3 后端启动报错MySQL 时区异常或拒绝访问现象启动日志出现The server time zone value Öйú±ê׼ʱ¼ä is unrecognized或者Access denied for user rootlocalhost。原因前者是 JDBC 连接 URL 缺了serverTimezone参数MySQL 8 的驱动必须要显式时区后者是application.yml里的账号密码与本机 MySQL 不一致或者 root 账号只允许 localhost 登录。解决在连接 URL 末尾加上serverTimezoneAsia/Shanghai账号密码改成自己本机的值。如果改完还报Access denied用命令行登录 MySQL 执行一下授权命令让本地连接走mysql_native_password认证很多新版 MySQL 8 都要做这一步才能被老版本的连接器直连。5.4 商品列表有数据但图片全部裂图现象接口返回商品记录价格文字正常显示但图片区域全部是破图。原因goods表的image字段存的是/upload/goods/1.png这类本地相对路径本机没有对应的静态资源目录或者图片 URL 指向一个已经失效的旧域名。解决用 SQL 查看image字段的实际内容如果是对应源码里不存在的路径批量替换成可访问的占位图地址。替换时注意图片字段值有两种可能逗号分隔的多图字符串和 JSON 字符串先确认格式再写UPDATE goods SET image ...不要直接从界面手工改十几条数据。5.5 支付后订单状态没变现象前端提示“支付成功”但个人中心的待发货列表里查不到这笔订单。原因后端 pay 接口没有真正写数据库只返回了 success或者订单状态枚举值前后端定义不一致比如后端用字符串PAID前端判断的却是数字1。解决支付后立刻查order表的status字段和后端代码里的状态枚举、前端列表页的过滤条件比对保证用的是同一套枚举定义。这条排查起来不需要改多少代码但最容易在答辩演示时当场翻车一定要提前验证。6. 答辩演示与二次开发把下载的源码讲成自己的项目6.1 数据准备让演示数据看起来像真实商城答辩之前先做一份演示专用数据不要拿 SQL 里默认的两三条测试数据去演示。把goods表里的商品控制在 8 到 12 条保证每个分类都有几件价格设成有零有整的数。再手动把一两件商品库存改成 1UPDATE goods SET stock 1 WHERE id 3;这样演示时可以现场触发“库存不足”提示让评审老师看到异常处理也在考虑范围内这比单纯展示功能多了一个加分点。6.2 讲代码的顺序按用户操作路径讲不要从 Controller 讲起答辩讲代码时不要从后端 Controller 开始按用户操作路径讲更清晰首页打开商品列表 → 点击详情 → 加入购物车 → 提交订单 → 模拟支付 → 查看订单列表。每讲一个环节指出对应的前端页面文件、后端 Service 方法、数据库表字段然后强调你在这个环节里做过的两个改动点。哪怕只是改了图片 URL 处理和BASE_URL配置也要放大了讲因为这些改动说明你不是只拉了一份模板而是真的把环境跑通了一遍。6.3 演示前走查清单出发去答辩前强制过一遍出门前按固定顺序检查微信开发者工具能正常编译 → 后端已启动且控制台无 ERROR → MySQL 服务在运行 → 首页商品图正常显示 → 登录能拿到 token → 下一单并支付 → 个人中心能看到订单。这一套流程走完能规避九成现场事故。如果答辩要用自己的电脑记得把 MySQL 设为开机自启或者提前到教室把环境启动好不要等评委到场后才开始建库。6.4 二次开发方向往订单和售后上扩展最出彩如果还有时间做二次开发优先考虑订单取消、售后申请、商品搜索高亮这三个方向。它们都围绕现有订单和商品模块改动量不大但每加一个功能答辩时就多一个“我独立实现了 XX 功能”的落点。从那以后我每次拿到商城类毕设源码都会强制先走一遍建库、改配置、跑登录、下单一单、查订单状态的链路再谈别的这个习惯帮我避开了绝大多数突发事故。希望帮到你。本文还有配套的精品资源点击获取