# vue-shop-project

**Repository Path**: Forevergubei/vue-shop-project

## Basic Information

- **Project Name**: vue-shop-project
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: MulanPSL-2.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2020-05-28
- **Last Updated**: 2021-09-10

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# vue-shop-project

## 安装
> npm install

### 运行
> npm run serve

### 部署
> npm run build

### 运行测试
> npm run test

### Lints和修复文件
> npm run lint

### 注意
1. 完整版本请下载master，及对应后台（node）源码
2. mastermock和master逻辑一样，但是master采用node做后台，mastermock则采用mock做的模拟数据，
3. mastermock只完成了简单的登录，权限路由，整个系统就只有用户管理的用户列表有表格数据，其他均是空的
4. 本项目只是做一个简单的后台管理，您可直接将mastermock、master或其他分支下下来直接使用
5. axios只做了简单封装
6. 在master中axios则在main中，但在mastermock中统一放在了Http.js中
### 内容展示

1. [局部预览](http://forevergubei.gitee.io/vue-shop-project)

2. 登录
<img src="https://s1.ax1x.com/2020/11/11/BjT6YD.png" alt="">

3. 局部内容
<img src="https://s1.ax1x.com/2020/11/11/Bj7AXR.png" alt="">

4. 权限管理
<img src="https://s1.ax1x.com/2020/11/11/Bj7Q9e.png" alt="">

## 分支

1. master----------------------------------主分支 项目完整分支（含node.js）（最新）
2. login----------------------------------登陆 （完成）
3. user----------------------------------用户列表（增/删/改/查）（完成）
4. rights----------------------------------权限管理（完成）
5. goods----------------------------------商品管理（完成）
6. goods_params----------------------------------分类参数（完成）
7. goods_list----------------------------------商品列表（完成）
8. order----------------------------------订单模块（完成）
9. report----------------------------------数据报表（完成）
10. sever-project----------------------------------项目完整分支（含node.js）（最新）
11. init-project----------------------------------项目初始化，除去node.js接口，改mock.js（未完成）
12. mastermock----------------------------------主分支，（mock版本）

## 关于node版本解释

1. [node后台项目](https://gitee.com/Forevergubei/vue-shop-api-server.git)
2. 下载安装PHPstudy（mySQL）,[phpStudy下载](https://www.xp.cn/)
3. 将vue-shop-api-server中db中mydb.sql导入数据库（用户名：mydb，密码：123456）
4. 导入成功后在vue-shop-api-server安装依赖（npm install）
5. 在启动前端项目（vue-shop-project）
  
## 关于好用的mock工具

1. Easy-Mock: 优先考虑（不推荐），但是太坑不是在打不开，就是打不开的路上，本地部署还要配置环境所以果断放弃了
2. [RAP](http://rap2.taobao.org/): 除Easy-Mock可以考虑（推荐2星），来自阿里妈妈，基于mock.js语法规则，mock.js的作者参与开发。界面直接简介明了，生成规则可以可视化编辑。
3. [Nei](https://nei.netease.com/): 除Easy-Mock可以考虑（推荐5星），来自网易，功能也比较全，支持mock.js规则，也可自定义规则。
4. [eolinker](https://www.eolinker.com/): 接口测试、监控、定制高级接口方面比较好，有权限验证等功能，但是开源版已经不维护了，私有化部署需要收费。
5. [易文档](https://easydoc.xyz/): 除Easy-Mock可以考虑（推荐5星,在Nei与它之间徘徊了很久偶然一次Nei打不开了果断换），基本需求可以满足，文档编写比较方便，私有化部署收费。
6. [EasyAPI](https://www.easyapi.com/): 除了接口mock，还有服务市场（天气、城市等等），不能私有化部署。
7. [fastmock](https://www.fastmock.site/#/): 本系统使用，一个脱离原项目的在线Mock平台.本地零开发本地自由配置访问，使用简单，只要熟悉Mock.js，那你就可以轻松模拟各种数据

<!-- https://blog.csdn.net/qq_36237810/article/details/109728540 -->
#### 安装依赖

1. npm install axios --save----------------------------------使用axios来发起ajax请求
2. npm install mockjs --save-dev----------------------------------使用mockjs产生随机数据
3. npm install json5 --save-dev----------------------------------使用json5解决json文件，无法添加注释问题

#### 关于项目目录
1. 在master分支中，项目结构没有做太大改变
2. 在mastermock分支中，做了以下改变
   - 1. 将所有页面放入到vivew中
   - 2. 将所有表格、搜索、面包屑、弹窗、弹窗表单做成了公共组件，在components,分别以Bread_开头，如Bread_Crumb（面包屑）
   - 3. 将全局过滤器，放在了utils/CommonFilter.js中，可根据需要进行修改
   - 4. 将所有的表单验证、表单验证规则、公共方法放在了utils/CommonMethods.js中，可根据需要进行修改
   - 5. Mock内，放的是一些数据处理方式，每个文件代表一个模块相关处理方式
   - 6. 关于数据处理方式、通过Mock在线工具的接口输出原始数据->通过Mock中对应的方法进行处理（增、删、改、查）-> 改变原始数据进行渲染，可参考Mock/UserMock.js
   - 7. 该分支只做了用户管理/用户列表的列表功能、搜索、添加、分页功能,后续会逐步完善整个项目
   - 8. 列表数据除前两个（admin、root）外，其他均为mock随机生成，至此，所有数据操作（增、删、改、查）后不能刷新，因为只是为了做项目展示
   - 9. 因为是项目展示，所以只是用mock做了几个简单的接口逻辑