这次我们来看一个基于 Node.js 和 Vue.js 的甜品网上商城系统这是一个典型的 2026 届计算机毕业设计项目。对于即将毕业的同学来说一个功能完整、技术栈主流、能跑通前后端、能部署上线的项目是毕业设计和求职简历上的硬通货。这个项目就提供了这样一个完整的解决方案。这个项目的核心价值在于它不是一个简单的 Demo而是一个具备完整业务流程的电商系统。它涵盖了用户从浏览商品、加入购物车、下单支付到后台管理的全链路功能。技术栈上后端采用 Node.js通常是 Express 或 Koa 框架前端采用 Vue.js 全家桶Vue 2/3, Vue Router, Vuex/Pinia, Element UI/Vant数据库使用 MySQL。这套组合是目前企业级应用和毕业设计中最常见、最稳妥的选择之一学习资源丰富社区活跃遇到问题容易找到解决方案。本文将带你从零开始把这个“甜品网上商城系统”跑起来。我们会重点关注几个毕业设计中的核心痛点环境如何快速搭建、前后端如何联调、数据库如何设计与初始化、核心功能模块如何验证以及最终如何部署上线。无论你是想直接复用这个项目还是想学习其架构设计这篇文章都能提供一条清晰的实操路径。1. 核心能力速览在动手之前我们先快速了解这个项目的整体轮廓和关键信息。能力项说明项目类型全栈 Web 应用毕业设计/课程设计技术栈后端Node.js Express/Koa前端Vue.js 相关生态数据库MySQL核心功能用户注册登录、商品展示与搜索、购物车管理、订单流程、后台管理商品/订单/用户管理部署方式开发环境本地运行生产环境可部署至云服务器如使用 Nginx PM2硬件门槛极低。普通笔记本电脑即可无需独立显卡。主要依赖 Node.js 运行环境和 MySQL 服务。启动方式前后端分离启动后端通过npm start或node app.js前端通过npm run serve开发或npm run build构建。是否支持 API是。后端提供完整的 RESTful API 接口供前端调用。是否支持“批量任务”间接支持。后台管理模块通常包含批量操作如批量上架商品、批量发货可通过前端界面或直接操作数据库实现。适合场景计算机相关专业毕业设计、课程设计、全栈技能学习、个人项目练手、小型电商系统原型开发。2. 适用场景与使用边界这个项目适合谁计算机专业毕业生急需一个功能完整、技术栈不过时、文档齐全的毕业设计项目。全栈学习入门者想通过一个真实项目学习 Node.js Vue.js MySQL 如何协同工作。需要快速原型验证的开发者需要一个基础的电商系统框架进行二次开发。它能解决什么问题毕业设计选题与实现提供一个可直接运行、功能齐全的系统避免从零造轮子的时间消耗。全栈技术实践完整展示用户认证、数据交互、状态管理、路由控制、数据库操作等核心开发环节。代码结构与架构参考学习如何组织前后端分离项目的目录结构、模块划分和 API 设计。不适合什么场景高并发电商平台此项目为教学和毕业设计级别未针对高并发、分布式、微服务等复杂场景进行优化。直接商用需要在此基础上进行大量的安全性加固如支付接口、风控、性能优化、UI/UX 重构和合规性改造。替代系统学习如果你希望深入学习 Java/Spring Boot 或 Python/Django 等后端技术栈此项目不适用。版权与合规提醒代码使用作为毕业设计参考或学习用途请遵守项目源码如果提供的开源协议如 MIT、GPL合理引用并注明来源。数据与素材项目中使用的商品图片、描述等数据若用于公开演示或部署请确保拥有版权或使用授权避免侵权风险。支付功能如果项目集成了支付接口如支付宝、微信支付沙箱请仅在测试环境下使用正式上线需申请企业级接口并完成合规配置。3. 环境准备与前置条件在运行项目之前需要确保你的开发环境已经就绪。以下是必需的软件和工具清单。操作系统Windows 10/11, macOS, 或 Linux (如 Ubuntu) 均可。本文以 Windows 环境为例其他系统命令略有不同。Node.js 环境这是后端运行和前端构建的基础。建议使用 LTS长期支持版本。检查安装打开终端CMD 或 PowerShell输入node -v和npm -v应显示版本号。安装/升级若未安装前往 Node.js 官网 下载安装包。推荐使用nvm(Node Version Manager) 管理多个 Node 版本这在处理不同项目时非常有用。版本建议Node.js 16.x, 18.x 或 20.x 的 LTS 版本。避免使用过新或过旧的版本。Vue.js 开发环境前端部分需要 Vue CLI 或 Vite。安装 Vue CLI (可选用于旧版 Vue 2 项目)npm install -g vue/cli创建 Vite 项目 (用于新版 Vue 3 项目)npm create vuelatest但本项目通常已包含完整前端代码无需新建。MySQL 数据库用于存储用户、商品、订单等所有数据。安装从 MySQL 官网 下载社区版安装包或使用集成环境如 XAMPP、phpStudy内含 MySQL。版本建议MySQL 5.7 或 8.0。确保服务启动安装后MySQL 服务应设置为自动启动并能通过命令行或图形化工具如 MySQL Workbench、Navicat连接。代码编辑器/IDE推荐使用 Visual Studio Code并安装相关插件如 Vetur/Volar、ESLint、Prettier、MySQL 管理插件。项目源码获取“甜品网上商城系统”的源代码。这可能是一个压缩包或一个 Git 仓库地址。请将其解压或克隆到本地目录例如D:\Projects\dessert-shop。4. 安装部署与启动方式假设你已经拿到了项目源码目录结构通常如下dessert-shop/ ├── backend/ # Node.js 后端项目 │ ├── package.json │ ├── app.js 或 server.js │ └── ... ├── frontend/ # Vue.js 前端项目 │ ├── package.json │ ├── vue.config.js │ └── ... └── database/ # 数据库SQL脚本 └── init.sql4.1 后端服务启动步骤 1安装后端依赖进入后端目录安装项目所需的所有 npm 包。cd backend npm install如果网络较慢可以使用淘宝镜像npm install --registryhttps://registry.npmmirror.com步骤 2配置数据库连接在后端项目中找到数据库配置文件通常是config.js、.env或app.js中的一部分。你需要修改其中的连接信息匹配你的本地 MySQL 设置。// 示例 config.js 内容 module.exports { database: { host: localhost, // 数据库主机本地一般为127.0.0.1或localhost port: 3306, // MySQL 默认端口 user: root, // 你的数据库用户名 password: your_password, // 你的数据库密码 database: dessert_shop // 将要创建的数据库名 } };步骤 3初始化数据库使用 MySQL 客户端命令行或图形工具登录。创建一个新的数据库名称与配置文件中一致如dessert_shop。CREATE DATABASE IF NOT EXISTS dessert_shop DEFAULT CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci;执行项目提供的database/init.sql脚本文件。这个脚本会创建所有必要的表users, products, orders, cart_items等并可能插入一些测试数据。# 使用命令行导入在包含 init.sql 的目录下执行 mysql -u root -p dessert_shop init.sql步骤 4启动后端服务在backend目录下运行启动命令。具体命令需查看package.json中的scripts字段。# 常见启动命令 npm start # 或 node app.js # 或开发模式支持热重载 npm run dev启动成功后终端会显示监听端口例如Server is running on port 3000。请记下这个端口号如 3000前端将需要连接它。4.2 前端项目启动步骤 1安装前端依赖进入前端目录安装依赖。cd frontend npm install步骤 2配置 API 代理关键步骤在开发环境下前端运行在独立的端口如8080而后端在另一个端口如3000。为了避开浏览器的跨域限制需要在 Vue 项目中配置代理将 API 请求转发到后端。 找到frontend/vue.config.js文件如果没有则创建添加以下配置module.exports { devServer: { proxy: { /api: { // 假设你的后端 API 都以 /api 开头 target: http://localhost:3000, // 后端服务地址和端口 changeOrigin: true, pathRewrite: { ^/api: // 重写路径去掉 /api 前缀根据实际后端路由调整 } } } } };如果项目使用 Vite配置在vite.config.js中使用server.proxy选项。步骤 3启动前端开发服务器npm run serve # 对于使用 Vite 的项目可能是 npm run dev启动成功后终端会给出访问地址通常是http://localhost:8080。用浏览器打开这个地址你应该能看到商城的首页。5. 功能测试与效果验证系统启动后我们需要逐一验证核心功能是否正常。这是毕业设计答辩和项目演示的关键。5.1 用户模块测试测试目的验证用户注册、登录、登出及会话保持功能。操作步骤访问http://localhost:8080。点击“注册”填写用户名、邮箱、密码等信息并提交。检查数据库users表是否新增一条记录密码应为加密后的哈希值。使用刚注册的账号登录。登录后页面应显示用户名或跳转到首页并且刷新页面后登录状态依然保持。点击“登出”应成功退出并跳转到登录页。预期结果能顺利完成注册、登录、状态保持和登出流程。常见失败原因注册时邮箱已存在检查数据库唯一约束。登录失败检查密码加密/验证逻辑。登录状态不保持检查前端是否正确存储了 token如 JWT以及每次请求是否携带了 token。5.2 商品浏览与搜索测试测试目的验证商品列表展示、详情查看和搜索功能。操作步骤在首页或商品列表页查看商品是否正常加载并显示图片、名称、价格。点击某个商品进入详情页查看详细信息是否完整。在搜索框输入关键词如“蛋糕”查看返回结果是否准确。预期结果商品数据从后端 API 获取并正确渲染搜索功能能过滤出相关商品。常见失败原因商品图片不显示检查图片路径是相对路径还是绝对 URL以及后端静态资源服务是否配置正确。搜索无结果检查后端搜索 API 的 SQL 查询逻辑或 Elasticsearch 集成如果用了。5.3 购物车功能测试测试目的验证商品加入购物车、修改数量、移除商品的功能。操作步骤登录一个用户账号。在商品详情页点击“加入购物车”。进入购物车页面检查刚加入的商品是否存在。修改商品数量如从1改为2检查总价是否实时更新。点击“删除”或勾选商品后点击“删除选中”商品应从购物车消失。预期结果购物车数据应与用户绑定操作实时同步到后端并正确计算总价。常见失败原因未登录用户无法加购检查前端路由守卫和 API 权限验证。数量修改后总价计算错误检查前端计算逻辑或后端 API 返回的数据。5.4 下单与支付流程测试测试目的验证完整的下单流程包括生成订单、选择地址、模拟支付。操作步骤在购物车中选择商品点击“去结算”。填写或选择收货地址。选择支付方式通常为“模拟支付”或“支付宝沙箱”。提交订单生成订单号。在“我的订单”页面查看刚下的订单状态应为“待付款”或“已支付”如果是模拟支付。检查数据库orders表和order_items表是否生成了对应记录。预期结果能成功创建订单订单状态流转正确相关数据表记录完整。常见失败原因库存不足下单前应检查库存并在下单成功后扣减库存。支付回调失败如果集成了第三方支付需确保回调地址可被外部访问本地开发需用内网穿透工具如 ngrok。5.5 后台管理功能测试测试目的验证管理员对商品、订单、用户的管理能力。操作步骤通常有一个独立的后台管理入口如http://localhost:8080/admin或用管理员账号登录后切换。登录后台可能需要特定的管理员账号查看init.sql或数据库。在“商品管理”页面尝试添加一个新商品上传图片、填写信息。在“订单管理”页面查看所有订单并尝试修改某个订单的状态如从“已发货”改为“已完成”。在“用户管理”页面查看用户列表。预期结果管理员能对核心数据进行增删改查操作并且操作结果能即时反映在前台。常见失败原因权限不足检查后台路由和 API 的权限中间件。图片上传失败检查后端文件上传接口的配置和存储路径权限。6. 接口 API 与批量任务6.1 后端 API 接口调用示例理解后端 API 是二次开发和调试的基础。你可以使用 Postman 或直接在代码中调用。获取商品列表 (GET)curl -X GET http://localhost:3000/api/products?page1limit10用户登录 (POST)curl -X POST http://localhost:3000/api/user/login \ -H Content-Type: application/json \ -d {username:testuser, password:123456}Python 调用示例 (使用 requests 库)import requests import json # 1. 登录获取 token login_url http://localhost:3000/api/user/login login_data {username: testuser, password: 123456} login_resp requests.post(login_url, jsonlogin_data) token login_resp.json().get(data).get(token) # 根据实际返回结构调整 # 2. 携带 token 请求受保护接口如获取用户信息 headers {Authorization: fBearer {token}} user_info_url http://localhost:3000/api/user/info user_resp requests.get(user_info_url, headersheaders) print(user_resp.json())6.2 后台批量任务处理虽然项目本身可能没有独立的批量任务队列系统但后台管理功能中常常隐含着批量操作的需求可以通过编写脚本或扩展后台功能来实现。场景批量上架/下架商品前端实现在后台商品管理列表增加“全选”复选框和“批量上架”、“批量下架”按钮。前端将选中的商品ID数组发送到后端。后端 API设计一个接收商品ID数组和目标状态的接口。// 示例 Express 路由 router.post(/api/admin/products/batch-update, authMiddleware, adminMiddleware, async (req, res) { const { productIds, status } req.body; // status: 1上架0下架 try { await Product.update({ status }, { where: { id: productIds } }); res.json({ code: 200, message: 批量更新成功 }); } catch (error) { res.status(500).json({ code: 500, message: 更新失败 }); } });数据库直接操作应急或初始化如果需要一次性修改大量数据可以编写并执行 SQL 脚本。-- 将所有分类ID为3的商品价格提高10% UPDATE products SET price price * 1.1 WHERE category_id 3;7. 资源占用与性能观察作为一个 Node.js Vue.js 的 Web 应用其资源消耗主要在开发时的构建过程和生产运行时的 Node 服务与数据库。内存占用Node.js 后端服务在开发模式下根据项目复杂度和并发量通常占用 100MB - 500MB 内存。MySQL 服务默认配置下约占 200MB - 400MB 内存。前端开发服务器占用较少。CPU 占用在正常请求处理下CPU 占用率很低。但在执行npm run build进行前端项目打包时CPU 使用率会短暂飙升这是正常的。磁盘空间项目源码、Node_modules 依赖包和数据库文件总共约占用 500MB - 1GB 空间。网络端口后端服务占用一个端口如 3000前端开发服务器占用一个端口如 8080MySQL 占用 3306。确保这些端口没有被其他程序占用。性能观察方法系统任务管理器观察 Node 进程和 MySQL 进程的内存和 CPU 使用情况。浏览器开发者工具使用 Network 面板查看前端 API 请求的响应时间定位慢接口。数据库慢查询日志在 MySQL 配置中开启慢查询日志分析执行缓慢的 SQL 语句并进行优化如添加索引。如何降低资源占用开发完成后可以关闭前端开发服务器 (npm run serve)仅运行后端和生产环境构建的前端静态文件。优化前端打包使用代码分割、懒加载、压缩图片等手段减小 bundle 体积。优化数据库为常用查询字段添加索引避免SELECT *合理设计表结构。8. 常见问题与排查方法在部署和运行过程中你可能会遇到以下问题。这里提供通用的排查思路。问题现象可能原因排查方式解决方案前端页面无法访问 (localhost:8080)1. 前端服务未启动成功。2. 端口被占用。1. 检查终端是否有错误信息。2. 运行netstat -ano | findstr :8080(Win) 或lsof -i:8080(Mac/Linux) 查看端口占用。1. 根据终端错误修复依赖或配置问题。2. 杀死占用进程或修改vue.config.js中的devServer.port。前端页面能打开但数据加载失败 (API 错误)1. 后端服务未启动。2. 代理配置错误。3. 后端 API 路由不存在。1. 检查后端服务终端是否运行。2. 检查浏览器 Network 面板看 API 请求是否被代理到正确的后端地址和端口。3. 直接访问后端 API 地址 (如http://localhost:3000/api/products) 测试。1. 启动后端服务。2. 修正vue.config.js中的proxy配置。3. 检查后端路由定义和控制器代码。npm install失败1. 网络问题。2. Node.js 版本不兼容。3. 系统权限不足。1. 查看报错信息是否网络超时。2. 检查package.json中的engines字段。3. 在非管理员目录下尝试。1. 使用淘宝镜像或设置代理。2. 使用 nvm 切换 Node 版本。3. 避免在系统目录安装或使用管理员权限运行。数据库连接失败1. MySQL 服务未启动。2. 连接配置主机、端口、用户名、密码错误。3. 数据库不存在。1. 检查 MySQL 服务状态。2. 使用 MySQL 客户端工具测试连接。3. 检查后端配置文件的数据库名是否正确。1. 启动 MySQL 服务。2. 修正后端配置文件。3. 创建指定的数据库。执行 SQL 脚本报错1. SQL 语法错误。2. 表已存在冲突。3. 字符集不匹配。1. 查看具体的错误行和错误信息。2. 检查init.sql中是否有DROP TABLE IF EXISTS语句。1. 根据错误信息修正 SQL。2. 可以先手动删除旧数据库再执行脚本。3. 确保数据库和表的字符集为utf8mb4。图片上传失败1. 前端未正确传递文件。2. 后端上传目录权限不足。3. 文件大小超过限制。1. 检查浏览器 Network 面板查看上传请求的 FormData。2. 检查后端代码中指定的上传目录是否存在且有写权限。3. 查看后端代码或中间件如multer的文件大小限制配置。1. 确保前端使用FormData格式上传。2. 创建目录并赋予写权限。3. 调整后端文件大小限制配置。登录成功但状态不保持1. Token 未正确存储。2. 前端请求未携带 Token。3. Token 验证失败或过期。1. 检查登录成功后后端返回的 token 是否被前端保存localStorage/sessionStorage/Cookie。2. 检查后续请求的 Headers 中是否有Authorization字段。3. 检查后端 token 验证中间件。1. 确保登录后保存 token。2. 使用 axios 拦截器全局添加 token 到请求头。3. 检查 token 生成和验证的密钥是否一致以及过期时间设置。9. 最佳实践与使用建议为了让这个毕业设计项目更完善、更专业你可以遵循以下建议代码版本管理立即使用 Git 进行版本控制。在项目根目录执行git init创建.gitignore文件忽略node_modules和构建输出目录并提交初始代码。这能让你安心地尝试修改和重构。环境配置分离不要将数据库密码等敏感信息硬编码在代码中。使用.env文件管理环境变量并在代码中通过process.env读取。将.env加入.gitignore。# .env 文件示例 DB_HOSTlocalhost DB_USERroot DB_PASSWORDyour_secure_password DB_NAMEdessert_shop JWT_SECRETyour_jwt_secret_keyAPI 文档为你的后端 API 编写简单的文档可以使用apidoc或swagger自动生成说明每个接口的 URL、方法、参数和返回值。这对答辩展示和后续维护非常有帮助。前端优化路由懒加载在 Vue Router 配置中使用() import(...)语法分割代码包加快首屏加载。组件化将可复用的 UI 部分如商品卡片、分页器抽离成组件。状态管理对于跨多个组件共享的状态如用户信息、购物车使用 Vuex 或 Pinia 进行集中管理。后端优化输入验证对所有用户输入注册信息、搜索关键词、订单数据进行严格的验证和清理防止 SQL 注入和 XSS 攻击。错误处理使用统一的错误处理中间件返回结构化的错误信息而不是暴露服务器内部细节。日志记录记录重要的操作日志如用户登录、下单和错误日志便于排查问题。部署上线构建前端运行npm run build将生成的dist文件夹内容部署到 Nginx 或对象存储如阿里云 OSS。部署后端使用PM2等进程管理工具来守护你的 Node.js 应用实现开机自启和故障重启。配置域名与 HTTPS为你的服务器绑定域名并申请 SSL 证书启用 HTTPS提升安全性。合规与授权项目中使用到的任何第三方资源如图标、字体、测试用的商品图片请确保其许可证允许在毕业设计或公开项目中免费使用。在项目 README 中注明来源。10. 总结与下一步这个“甜品网上商城系统”项目提供了一个非常扎实的 Node.js Vue.js 全栈实践样板。通过完成从环境搭建、功能测试到部署上线的全过程你不仅能得到一个可以演示的毕业设计作品更能深入理解现代 Web 应用前后端分离的开发模式、数据流转和工程化部署。最值得尝试的扩展方向引入 TypeScript将后端 Express 或前端 Vue 组件逐步迁移到 TypeScript提升代码的健壮性和可维护性。集成真正的支付在充分理解沙箱环境的基础上尝试申请并接入支付宝或微信支付的正式商户接口需企业资质个人可研究流程。增加数据分析看板在后台管理中加入基于 ECharts 的数据可视化看板展示销售额、用户增长、热销商品等数据。实现简单的推荐系统根据用户的浏览和购买记录在首页实现一个“猜你喜欢”的推荐模块。容器化部署学习使用 Docker 和 Docker Compose将 MySQL、Node.js 后端、Nginx 前端打包成容器实现一键部署。最先应该验证的功能无疑是用户登录和商品浏览下单这个核心链路。只要这条主流程跑通项目就成功了一大半。最容易踩的坑环境配置和跨域问题。严格按照本文的步骤检查 Node 版本、MySQL 服务状态以及前端代理配置能解决 80% 的启动问题。建议将本文作为一份操作手册收藏在搭建和调试过程中按图索骥。遇到具体报错时善用搜索引擎结合错误信息精准查找你一定能成功让这个甜品商城在本地和云端“营业”。