天天商城是一个前后端分离的 B2C 电子商务系统,采用 Vue 3 + Node.js (Express) + MySQL 技术栈实现。系统分为两个使用端:
系统采用前后端分离架构,前端通过 Axios 调用后端 RESTful 接口,后端通过 MySQL 连接池访问数据库。
1. 环境要求
| 组件 |
版本要求 |
备注 |
| Node.js |
≥ 14.x |
前后端均依赖,建议 16 LTS |
| npm |
≥ 6.x |
随 Node.js 安装 |
| MySQL |
≥ 5.7(推荐 8.0.11) |
数据库 nodeshop,编码 GB2312 |
| 浏览器 |
Chrome / Edge 现代版本 |
前端使用 ES2020+ 语法 |
操作系统的开发者建议使用 Windows 10/11 或 Linux,生产环境推荐 Linux(Ubuntu 20.04+ / CentOS 7+)。
2. 数据库部署
2.1 创建数据库
登录 MySQL 后执行:
CREATE DATABASE nodeshop DEFAULT CHARACTER SET gb2312 COLLATE gb2312_chinese_ci;
2.2 导入表结构与数据
项目根目录提供两个 SQL 脚本:
1. 技术栈总览
| 层 |
技术 |
版本 |
用途 |
| 前端框架 |
Vue.js |
^3.2.25 |
渐进式 JS 框架,使用 <script setup> 组合式 API |
| 构建工具 |
Vite |
^2.9.9 |
前端开发服务器与生产构建 |
| 路由 |
Vue Router |
^4.0.16 |
前端 SPA 路由(createWebHistory) |
| UI 组件库 |
Element Plus |
^2.2.8 |
后台及前台 UI 组件,中文语言包 zhCn |
| 图标 |
@element-plus/icons-vue |
^2.0.6 |
菜单与按钮图标 |
| HTTP 客户端 |
Axios |
^0.27.2 |
调用后端 RESTful 接口 |
| 数据可视化 |
ECharts |
^6.0.0 |
数据大屏图表 |
| 后端运行时 |
Node.js |
≥ 14 |
JavaScript 服务端运行时 |
| Web 框架 |
Express |
~4.16.1 |
HTTP 服务与路由 |
| 数据库驱动 |
mysql |
^2.18.1 |
MySQL 连接池 |
| 文件上传 |
Multer |
^2.1.1 |
multipart/form-data 文件上传 |
| 跨域 |
cors |
^2.8.5 |
CORS 中间件 |
| 开发热重载 |
nodemon |
^3.0.1 |
后端代码变更自动重启 |
| 数据库 |
MySQL |
8.0.11(兼容 5.7+) |
关系型数据库,库名 nodeshop,编码 GB231
2
|