# vue_shop

**Repository Path**: CodingGorit/vue_shop

## Basic Information

- **Project Name**: vue_shop
- **Description**: 电商后台管理系统开发，Vue + Expresss + MySQL 构建，非常适合用来学习 Vue
- **Primary Language**: JavaScript
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 5
- **Forks**: 0
- **Created**: 2020-05-04
- **Last Updated**: 2026-02-06

## Categories & Tags

**Categories**: Uncategorized

**Tags**: Vue

## README

# Vue Shop - 电商后台管理系统

基于 Vue.js + Node.js + MySQL 开发的电商后台管理系统。

## 项目简介

本项目是一个前后端分离的电商后台管理系统。前端采用 Vue.js 技术栈，后端采用 Node.js (Express) + MySQL。系统包含用户管理、权限管理、商品管理、订单管理、数据统计等功能模块。

项目演示地址：[项目地址](http://www.gorit.cn:3030)

### 测试账号
- 用户名：test / admin
- 密码：123456

## 技术栈

### 前端
- Vue.js (^2.6.11)
- Vue Router
- Element-UI
- Axios
- ECharts
- Vue-Quill-Editor
- NProgress
- Less

### 后端
- Node.js
- Express
- MySQL
- ORM
- Passport
- JsonWebToken

## 功能模块

- 用户管理：用户列表、添加、修改、删除、分配角色
- 权限管理：角色列表、权限列表、分配权限
- 商品管理：商品列表、添加、分类、参数
- 订单管理：订单列表、物流进度
- 数据统计：ECharts 数据报表

## 项目结构

```
vue_shop/
├── API 服务器/          # 后端 API 服务代码
│   ├── vue_api_server/ # Express 服务器源码
│   └── readme.md       # 后端说明
├── db/                 # 数据库 SQL 脚本
├── public/             # 静态资源
├── src/                # 前端源码
│   ├── assets/         # 资源文件
│   ├── components/     # Vue 组件
│   ├── plugins/        # 插件配置
│   ├── router/         # 路由配置
│   ├── App.vue         # 根组件
│   └── main-dev.js     # 入口文件
├── package.json        # 前端依赖配置
└── README.md           # 项目说明
```

## 快速开始

### 1. 环境准备
- Node.js
- MySQL

### 2. 数据库配置
1. 创建数据库（如 `vue_shop`）。
2. 导入 `db/test.sql` 文件到数据库中。
3. 修改后端数据库配置：
	 打开 `API 服务器/vue_api_server/config/default.json`，修改数据库连接信息（host, user, password, database）。
	 示例：
	 ```json
	 {
		 "db_config": {
			 "protocol": "mysql",
			 "host": "127.0.0.1",
			 "database": "vue_shop",
			 "user": "root",
			 "password": "root",
			 "port": 3306
		 }
	 }
	 ```

### 3. 后端启动
```bash
cd "API 服务器/vue_api_server"
npm install
node app.js
```
后端服务默认运行在 `127.0.0.1:8888`。

### 4. 前端启动
```bash
# 回到项目根目录
npm install
npm run serve
```
前端项目默认运行在 `http://localhost:8080`。

## License
MIT
- **MySQL**: 数据库
- **ORM**: 数据库 ORM 框架
- **Passport**: 认证中间件
- **JsonWebToken**: JWT 登录凭证

## 功能模块

- **用户管理**: 用户列表、添加用户、修改用户、删除用户、分配角色。
- **权限管理**: 角色列表、权限列表、分配权限。
- **商品管理**: 商品列表、添加商品、商品分类、分类参数。
- **订单管理**: 订单列表、物流进度查看。
- **数据统计**: 基于 ECharts 的数据报表。

## 项目结构

```
vue_shop/
├── API 服务器/          # 后端 API 服务代码
│   ├── vue_api_server/ # Express 服务器源码
│   └── readme.md       # 后端说明
├── db/                 # 数据库 SQL 脚本
├── public/             # 静态资源
├── src/                # 前端源码
│   ├── assets/         # 资源文件
│   ├── components/     # Vue 组件
│   ├── plugins/        # 插件配置
│   ├── router/         # 路由配置
│   ├── App.vue         # 根组件
│   └── main-dev.js     # 入口文件
├── package.json        # 前端依赖配置
└── README.md           # 项目说明
```

## 快速开始

### 1. 环境准备
- Node.js
- MySQL

### 2. 数据库配置
1. 创建数据库（例如 `mydb`）。
2. 导入 `db/mydb.sql` 文件到数据库中。
3. 修改后端数据库配置：
   打开 `API 服务器/vue_api_server/config/default.json`，修改数据库连接信息（host, user, password, database）。

### 3. 后端启动
```bash
cd "API 服务器/vue_api_server"
npm install
node app.js
```
后端服务默认运行在 `127.0.0.1:8888`。

### 4. 前端启动
```bash
# 回到项目根目录
npm install
npm run serve
```
前端项目默认运行在 `http://localhost:8080`。

## License
MIT