简介：这是一套面向高校学生与小程序开发初学者的毕业设计级项目源码，基于微信小程序、NetCore 与 layui 构建多店铺网上购物商城系统，涵盖小程序端、管理后台、插件管理与 WebApi 四大模块，适合需要完整商城案例练手或完成课程设计的开发者。压缩包共 1915 个文件，约 10.34MB，以 798 个 C# 后端源码、180 个 JavaScript 脚本、148 个 cshtml 视图、42 个 wxml 与 42 个 wxss 小程序页面文件为主，另含数据库 SQL、插件源码、配置与静态资源，结构完整。已有 3592 人学习下载。资源提供数据库脚本与连接配置说明、插件加载配置及在线演示地址，读者可据此还原多店铺商城的商品、订单、用户与插件管理流程，理解前后端分离与插件化架构，并借助安装使用说明快速部署调试，是兼顾学习与实战的参考方案。
1. 从零到跑通：微信小程序购物商城到底包含哪些东西
很多同学拿到“基于微信小程序的在线网上购物商城系统”这个题目时，第一反应是打开开发者工具就开始写页面，结果写到购物车就卡住了——商品数据从哪来？订单状态怎么流转？后台管理界面用什么做？其实这类毕业设计项目本质上是一套前后端分离的完整系统，小程序端负责展示和交互，服务端负责业务逻辑和数据持久化，数据库负责存储商品、用户、订单等核心数据。你拿到的源码包通常包含三个部分：小程序前端代码、后端服务代码、以及一份 SQL 数据库文件。安装说明则告诉你如何把这三部分串起来跑通。适合人群很明确：正在做毕业设计的学生、想学小程序全栈开发的初学者、以及需要一套可运行电商 Demo 作为参考的开发者。这一章先帮你把全局图景建立起来，后面再逐层拆解。
2. 技术选型与目录结构：为什么是这套组合而不是别的
2.1 小程序端用原生还是框架
拿到源码后第一件事是看小程序端用的是原生 WXML/WXSS 还是 uni-app、Taro 这类跨端框架。毕业设计项目里，原生写法占多数，原因是调试直观、不依赖额外构建工具，导师看起来也清楚。原生小程序的目录结构一般是这样的：
miniprogram/ ├── pages/ │ ├── index/ # 首页，商品推荐与搜索入口 │ ├── category/ # 分类页，左侧分类右侧商品列表 │ ├── cart/ # 购物车，增删改查与选中结算 │ ├── order/ # 订单列表与详情 │ ├── user/ # 个人中心，地址管理、订单入口 │ └── detail/ # 商品详情页，加入购物车与立即购买 ├── components/ # 自定义组件，如商品卡片、数量选择器 ├── utils/ # 工具函数，如请求封装、价格格式化 ├── app.js # 全局逻辑，登录态管理、购物车数据同步 ├── app.json # 页面注册、tabBar 配置、窗口样式 └── app.wxss # 全局样式如果你拿到的是 uni-app 版本，目录会多出pages.json、manifest.json，代码写在.vue文件里。两种都能用，但原生版本在微信开发者工具里打开就能跑，不需要 npm install 和编译，对毕业设计答辩场景更友好。
2.2 后端选型：Node.js、Java 还是 PHP
毕业设计常见的后端有三种：Node.js + Express/Koa、Java + Spring Boot、PHP + ThinkPHP。从源码包体积和部署难度看，Node.js 最轻量，适合本地快速跑通；Java 代码量大但结构清晰，适合写论文时画架构图；PHP 部署简单但代码风格参差。你拿到源码后先看根目录有没有package.json、pom.xml或composer.json，就能判断后端技术栈。
以 Node.js 为例，典型后端目录如下：
server/ ├── routes/ # 路由定义，如 /api/goods、/api/order ├── controllers/ # 业务逻辑，处理请求参数与返回 ├── models/ # 数据库模型，对应 MySQL 表结构 ├── middlewares/ # 中间件，如 token 校验、日志 ├── config/ # 数据库连接配置、密钥配置 ├── app.js # 入口文件，注册路由与中间件 └── package.json # 依赖清单与启动脚本2.3 数据库表设计：核心五张表就够了
购物商城系统的数据库不需要太复杂，毕业设计层面五张表就能撑起来：
| 表名 | 作用 | 关键字段 |
|---|---|---|
| user | 用户信息 | id, openid, nickname, avatar, phone |
| goods | 商品信息 | id, name, price, stock, category_id, image |
| category | 商品分类 | id, name, sort_order |
| cart | 购物车 | id, user_id, goods_id, quantity, selected |
| order | 订单 | id, user_id, goods_id, quantity, status, address, create_time |
其中order表在真实项目里会拆成订单主表和订单详情表，但毕业设计为了简化，通常一张表搞定。status字段一般用数字表示：0 待付款、1 已付款、2 已发货、3 已完成、4 已取消。
注意：拿到 SQL 文件后不要急着导入，先看编码格式。有些项目用 utf8，有些用 utf8mb4，导入时选错会导致中文乱码。
3. 本地跑通全流程：从导入数据库到小程序真机预览
3.1 数据库导入与后端启动
第一步是把 SQL 文件导入 MySQL。假设你用的是 phpMyAdmin 或 Navicat，新建一个数据库叫shop_db，字符集选utf8mb4，然后导入 SQL 文件。导入完成后检查表是否齐全：
-- 查看所有表 SHOW TABLES; -- 检查商品表是否有数据 SELECT COUNT(*) FROM goods; -- 检查用户表结构 DESC user;如果商品表是空的，说明 SQL 文件只建了表结构没插数据，你需要手动补几条测试数据：
INSERT INTO goods (name, price, stock, category_id, image) VALUES ('测试商品A', 29.90, 100, 1, '/images/goods/a.jpg'), ('测试商品B', 59.90, 50, 1, '/images/goods/b.jpg'), ('测试商品C', 99.00, 30, 2, '/images/goods/c.jpg');接下来启动后端。以 Node.js 为例，先安装依赖再启动：
cd server npm install npm run start启动成功后终端会输出类似Server running on port 3000的信息。如果报错ER_ACCESS_DENIED_ERROR，说明数据库账号密码不对，去config/db.js里改；如果报错ECONNREFUSED，说明 MySQL 服务没启动。
3.2 小程序端配置与请求封装
小程序端需要改两个地方：一是后端接口地址，二是 appid。接口地址通常在utils/request.js或app.js里定义：
// utils/request.js const BASE_URL = 'http://localhost:3000/api'; 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.statusCode === 200) { resolve(res.data); } else { reject(res.data); } }, fail: reject }); }); }; module.exports = request;这段代码封装了wx.request，统一拼接 BASE_URL，自动带上 token，并把回调转成 Promise 方便 async/await 调用。参数说明：url是接口路径，method是请求方法，data是请求体，header里的 Authorization 用于后端校验登录态。
注意：微信开发者工具默认不校验合法域名，但真机预览时必须用 HTTPS 域名。本地调试可以在开发者工具里勾选“不校验合法域名”，真机预览则需要把后端部署到有 HTTPS 的服务器上，或者用内网穿透工具临时映射一个 HTTPS 地址。
3.3 登录态与 openid 获取
小程序登录流程是：前端调用wx.login()拿到 code，传给后端，后端用 code 换 openid 和 session_key，然后生成 token 返回前端。核心代码如下：
// pages/login/login.js Page({ onLogin() { wx.login({ success: async (res) => { if (res.code) { const result = await request('/user/login', 'POST', { code: res.code }); wx.setStorageSync('token', result.token); wx.setStorageSync('userInfo', result.userInfo); wx.switchTab({ url: '/pages/index/index' }); } } }); } });后端收到 code 后，需要调用微信接口换 openid。这里不展开具体请求细节，但你要知道：openid 是用户在小程序里的唯一标识，用来关联数据库里的 user 记录。如果后端返回的 token 为空，检查微信接口调用是否成功，常见原因是 appid 或 secret 填错。
3.4 购物车与订单状态流转
购物车的核心逻辑是：用户点击“加入购物车”时，如果该商品已在购物车中，则数量加一；否则新增一条记录。订单状态流转则是：用户提交订单后状态为 0（待付款），付款后变为 1（已付款），发货后变为 2（已发货），确认收货后变为 3（已完成）。
// 加入购物车 async addToCart(goodsId, quantity = 1) { const cartItem = await request('/cart/find', 'GET', { goodsId }); if (cartItem) { await request('/cart/update', 'PUT', { id: cartItem.id, quantity: cartItem.quantity + quantity }); } else { await request('/cart/add', 'POST', { goodsId, quantity }); } wx.showToast({ title: '已加入购物车' }); }这段代码先查购物车是否已有该商品，有则更新数量，无则新增。参数goodsId是商品 ID，quantity是数量。实际项目中还要考虑库存校验，如果库存不足要提示用户。
4. 避坑指南：毕业设计项目最容易翻车的五个地方
4.1 数据库导入后中文乱码
现象：商品名称显示为问号或乱码。原因：SQL 文件编码与数据库字符集不一致。解决：导入前把数据库字符集设为utf8mb4，导入时选择 UTF-8 编码。如果已经导入，可以执行ALTER TABLE goods CONVERT TO CHARACTER SET utf8mb4;修复。
4.2 小程序请求后端返回 404
现象：前端调用接口提示 404。原因：后端路由没注册，或者 BASE_URL 拼错。解决：先在后端终端看请求日志，确认请求是否到达后端；如果没到达，检查 BASE_URL 是否包含/api前缀；如果到达了但 404，检查路由文件是否在app.js里注册。
4.3 真机预览时图片不显示
现象：开发者工具里图片正常，真机预览时图片裂开。原因：图片路径用了本地路径或 HTTP 地址。解决：把图片放到后端静态目录，用完整 HTTPS 地址引用；或者把图片上传到云存储，数据库里存云存储地址。
4.4 订单状态更新后列表不刷新
现象：付款后订单状态没变。原因：前端没有重新请求订单列表，或者后端更新了数据库但没返回最新数据。解决：在付款成功回调里重新调用订单列表接口；后端更新后返回更新后的订单对象，前端直接替换本地数据。
4.5 购物车数量修改后总价没变
现象：修改购物车商品数量，总价没更新。原因：总价是前端计算的，但修改数量后没有重新计算。解决：把总价计算封装成函数，每次数量变化后调用；或者后端返回购物车列表时带上总价，前端直接展示。
5. 进阶技巧：让毕业设计看起来更专业的三个改动
5.1 用云开发替代自建后端
如果你不想折腾服务器和数据库，微信云开发是一个省事的选择。云开发提供云数据库、云函数、云存储，小程序端直接调用，不需要自己搭后端。改造思路：把utils/request.js里的wx.request换成wx.cloud.callFunction，把后端路由逻辑搬到云函数里，数据库操作换成云数据库 API。这样部署时只需要在开发者工具里点“上传并部署”，不需要买服务器。
5.2 加一个简单的推荐算法
毕业设计如果只做增删改查，答辩时容易被问“创新点在哪”。加一个基于用户行为的简单推荐：记录用户浏览过的商品分类，在首页优先展示同分类商品。实现方式：在user表加一个prefer_category字段，用户每次浏览商品详情时更新该字段，首页查询商品时按该字段排序。
// 记录用户偏好分类 async updatePreferCategory(categoryId) { await request('/user/prefer', 'PUT', { categoryId }); } // 首页获取推荐商品 async getRecommendGoods() { const userInfo = wx.getStorageSync('userInfo'); if (userInfo && userInfo.preferCategory) { return await request('/goods/recommend', 'GET', { categoryId: userInfo.preferCategory }); } return await request('/goods/hot', 'GET'); }这段代码在用户浏览商品时更新偏好分类，首页根据偏好分类获取推荐商品。如果没有偏好记录，则返回热门商品。参数categoryId是分类 ID，后端根据该 ID 查询同分类商品并按销量排序。
5.3 用 ECharts 做数据可视化
后台管理界面如果只有表格，看起来比较单调。可以引入 ECharts 做一个简单的销售趋势图。小程序端用ec-canvas组件，后端提供一个/api/stats/sales接口返回最近七天的订单金额。这样答辩时展示后台，视觉效果会好很多。
| 改动点 | 工作量 | 答辩加分 |
|---|---|---|
| 云开发替代后端 | 中等 | 中 |
| 简单推荐算法 | 低 | 高 |
| ECharts 可视化 | 中等 | 高 |
这三个改动不需要全做，选一个做透就行。我一般建议先做推荐算法，因为代码量少、逻辑清晰、答辩时好讲。云开发虽然省事，但如果你已经跑通了自建后端，再改云开发反而容易出兼容问题。ECharts 适合前端基础好的同学，否则调样式会花很多时间。
提示：不管做哪个改动，都要在论文里写清楚“为什么做这个改动”和“改动前后的对比”，这样才算是完整的工程实践。
希望帮到你。
本文还有配套的精品资源，点击获取
