# vue_shop

**Repository Path**: ztt20001001/vue_shop

## Basic Information

- **Project Name**: vue_shop
- **Description**: 该项目是基于前后端分离的开发模式，基于Vue技术栈的SPA单页面项目，后端主要操作数据库并向前端暴露一些API接口，前端主要负责绘制页面同时，利用ajax调用后端提供的接口，具体实现功能有：用户管理、权限管理、商品管理、订单管理以及销售数据统计
- **Primary Language**: JavaScript
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 1
- **Forks**: 0
- **Created**: 2022-07-27
- **Last Updated**: 2022-08-09

## Categories & Tags

**Categories**: Uncategorized

**Tags**: Vue, JavaScript, HTML, CSS, 后台管理系统

## README

# 柚城后台管理系统

#### 介绍
该项目是基于前后端分离的开发模式，基于Vue技术栈的SPA单页面项目，后端主要操作数据库并向前端暴露一些API接口，前端主要负责绘制页面同时，利用Ajax调用后端提供的接口具体实现功能有：用户管理、权限管理、商品管理、订单管理以及销售数据统计
#### 技术栈
vue+vue-router+element-ui前端组件库+axios发起网络数据请求+echarts绘制相关的图形报表+MySQL+NodeJs


#### 页面展示
登录页面：（默认账户密码：账户：admin 密码：123456）
![登录](%E9%A1%B9%E7%9B%AE%E9%A1%B5%E9%9D%A2%E5%B1%95%E7%A4%BA/%E7%99%BB%E5%BD%95.png)

欢迎页面：
![欢迎](%E9%A1%B9%E7%9B%AE%E9%A1%B5%E9%9D%A2%E5%B1%95%E7%A4%BA/%E6%AC%A2%E8%BF%8E.png)

用户列表：（包括添加，删除，修改功能，分配角色（默认为超级管理员且不可删除））
![用户列表](%E9%A1%B9%E7%9B%AE%E9%A1%B5%E9%9D%A2%E5%B1%95%E7%A4%BA/%E7%94%A8%E6%88%B7%E5%88%97%E8%A1%A8.png)

权限管理：（权限列表，角色列表）
![角色列表](%E9%A1%B9%E7%9B%AE%E9%A1%B5%E9%9D%A2%E5%B1%95%E7%A4%BA/%E8%A7%92%E8%89%B2%E5%88%97%E8%A1%A8.png)

![权限列表](%E9%A1%B9%E7%9B%AE%E9%A1%B5%E9%9D%A2%E5%B1%95%E7%A4%BA/%E6%9D%83%E9%99%90%E5%88%97%E8%A1%A8.png)

商品管理：（商品列表，分类参数，商品分类）
![商品列表](%E9%A1%B9%E7%9B%AE%E9%A1%B5%E9%9D%A2%E5%B1%95%E7%A4%BA/%E5%95%86%E5%93%81%E5%88%97%E8%A1%A8.png)

添加商品：
![输入图片说明](%E9%A1%B9%E7%9B%AE%E9%A1%B5%E9%9D%A2%E5%B1%95%E7%A4%BA/%E6%B7%BB%E5%8A%A0%E5%95%86%E5%93%81.png)

![分类参数](%E9%A1%B9%E7%9B%AE%E9%A1%B5%E9%9D%A2%E5%B1%95%E7%A4%BA/%E5%88%86%E7%B1%BB%E5%8F%82%E6%95%B0.png)

![商品分类](%E9%A1%B9%E7%9B%AE%E9%A1%B5%E9%9D%A2%E5%B1%95%E7%A4%BA/%E5%95%86%E5%93%81%E5%88%86%E7%B1%BB.png)

订单管理
![订单列表](%E9%A1%B9%E7%9B%AE%E9%A1%B5%E9%9D%A2%E5%B1%95%E7%A4%BA/%E8%AE%A2%E5%8D%95%E5%88%97%E8%A1%A8.png)

物流信息（接口暂时请求不到）：
![物流进度](%E9%A1%B9%E7%9B%AE%E9%A1%B5%E9%9D%A2%E5%B1%95%E7%A4%BA/%E7%89%A9%E6%B5%81%E8%BF%9B%E5%BA%A6.png)

数据分析：
![数据报表](%E9%A1%B9%E7%9B%AE%E9%A1%B5%E9%9D%A2%E5%B1%95%E7%A4%BA/%E6%95%B0%E6%8D%AE%E6%8A%A5%E8%A1%A8.png)


#### 使用说明

1. 环境：VScode Nodejs，导入项目后（看是否有node_modules文件夹），若没有在终端运行 npm i
2.  在创建的vue项目目录下运行cmd 输入 vue ui即可打开可视化工具
插件：
![所需插件](%E9%A1%B9%E7%9B%AE%E9%A1%B5%E9%9D%A2%E5%B1%95%E7%A4%BA/%E6%8F%92%E4%BB%B6.png)
依赖：
![依赖](%E9%A1%B9%E7%9B%AE%E9%A1%B5%E9%9D%A2%E5%B1%95%E7%A4%BA/%E4%BE%9D%E8%B5%96.png)
3.  服务器启动(需要mysql数据库，数据库文件在db文件夹下)，进入服务器目录 运行cmd 输入 node ./app.js
成功界面：
![服务器启动成功界面](%E9%A1%B9%E7%9B%AE%E9%A1%B5%E9%9D%A2%E5%B1%95%E7%A4%BA/%E6%9C%8D%E5%8A%A1%E5%99%A8%E5%90%AF%E5%8A%A8%E6%88%90%E5%8A%9F%E7%95%8C%E9%9D%A2.png)