# vue2-Admin

**Repository Path**: Do__ky/vue2-admin

## Basic Information

- **Project Name**: vue2-Admin
- **Description**: vue2后台管理系统

- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 1
- **Forks**: 0
- **Created**: 2023-03-22
- **Last Updated**: 2024-04-25

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# vue2-admin

> 这是一个极简的 vue admin 管理后台。它只包含了 Element UI & axios & iconfont & permission control & lint，这些搭建后台必要的东西。

## Build Setup

```bash
# 克隆项目
git clone 

# 进入项目目录
cd vue2-admin

# 安装依赖
npm install

# 建议不要直接使用 cnpm 安装以来，会有各种诡异的 bug。可以通过如下操作解决 npm 下载速度慢的问题
npm install --registry=https://registry.npm.taobao.org

# 启动服务
npm run dev
```

浏览器访问 [http://localhost:9528](http://localhost:9528)

## 发布

```bash
# 构建测试环境
npm run build:stage

# 构建生产环境
npm run build:prod
```

## 其它

```bash
# 预览发布环境效果
npm run preview

# 预览发布环境效果 + 静态资源分析
npm run preview -- --report

# 代码格式检查
npm run lint

# 代码格式检查并自动修复
npm run lint -- --fix
```

## 一、开始

### 1. 准备

#### 	1.修改login背景图

​			1.public中创建`static`文件，内部创建`images`存放背景图

​			2.src=>`views`=>login文件style中添加背景图

#### 	2.删除多余文件，修改配置

​			1.views文件夹中只保存login、dashboard、404页面

​			2.删除`router`中index文件中的已删除页面的路由

​			3.只保留api中user文件

​			4.修改`utils`中request：X-Token改为token，拦截器添加条件 res.code!==200

​			5.禁用mock数据，配置代理(proxy)

```js
proxy: {
      '/dev-api': {
        target: 'http://sph-h5-api.atguigu.cn',
        changeOrigin: true,
        pathRewrite: {
          '^/dev-api': ''
        }
      }
    }
```

​			6.将api中user请求改为文档真实接口

#### 3.配置路由

​			1.在views文件中创建`trademark`,`spu`,`attr`,`sku`四个组件

​			2.在router中配置组件的跳转，将Dashboard的title改为中文首页

## 二、品牌管理(trademark)

### 静态布局

1.添加按钮

​	使用组件：`el-button` 设置属性`icon="el-icon-plus"`

2.表格

​	使用`el-table`组件&`el-table-column`组件构建表格

​	在`el-cloumn`操作列添加插槽`编辑`icon属性为`el-icon-edit`、`删除`(`el-icon-delete`)按钮

3.分页器

​	使用`pagination`组件

​	设置属性`layout="prev, pager, next, jumper, ->, sizes, total"`

4.弹出框

​	使用`el-dialog`组件，设置属性默认隐藏

​	在`el-dialog`组件中添加表单组件`el-form`及`el-form-item`

​	继续在`el-form-item`中添加`el-input`输入框组件及`el-upload`图片上传组件

​	最后添加底部插槽slot，添加确定、取消按钮(`el-button`)

5.设置弹出框的显示隐藏

​	在data属性中添加`dialogVisible`默认为false

​	在method方法中定义方法`showDialog()`将data中的`dialogVisible`设置为true

​	将`添加属性`按钮添加单击事件@click为`showDialog`

### 渲染数据

1.api中创建trademark调用request发送请求并声明接口，引入请求、添加、删除方法

2.定义数据：

​	page===>所在页数

​	limit===>展示条数

​	total===>数据总数

​	list:[]===>接收请求获得的数据

​	dialogVisible===>弹框显示隐藏

3.定义请求数据方法`getTrademark`，在挂载时(`onMounted`调用

4.在品牌名称中传入`tmName`，品牌logo中传入`logoUrl`

5.分页器

​	current-page===>页码

​	page-sizes===>分页展示数据条数

​	page-size===>页面展示数据

​	total===>数据总条数

### 自定义校验规则

1.定义品牌名称长度校验规则(2-10位):

```javascript
// 自定义校验规则
    var validateTmName = (rule,value,callback)=>{
      if(value.length < 2 || value.length > 10){
        callback(new Error("品牌名称2-10位"))
      }else {
        callback()
      }
    }
```

2.定义表单校验

```javascript
rules: {
          // 品牌名校验
          tmName:[
            {required: true,message:"请输入品牌名称",trigger:"blur"},
            {validator:validateTmName,trigger:"change"},
          ],
          // logo校验
          logoUrl:[{required:true,message:"请选择品牌图片"}],
        }
```

### 上传图片　

1.定义图片上传前校验方法`boeforeAvatarUpload`，限定图片格式为jpg，限制图片大小为2Mb

2.定义上传成功后返回数据方法`handleAvatarSuccess`，将`action`的值改为真实地址

3.设置img属性添加校验`v-if="tmForm.logoUrl" :src="tmForm.logoUrl"`

### 添加/编辑品牌

1,给`el-form`绑定表单校验规则rules，定义一个对象`tmForm`储存`tmName`和`logoUrl`

2.将el-form表单绑定tmForm进行数据渲染

3.定义添加品牌方法，给dialog中的确定按钮绑定添加品牌方法，请求成功后用`$message`返回提示添加成功信息，再调用请求列表方法重新渲染列表数据，反之提示添加失败。

4.编辑品牌，定义编辑品牌方法，将二次填写表单数据重新储存在tmForm上

### 删除品牌

1.定义删除品牌方法，调用删除品牌`delTrademarkListApi`携带参数id

2.自定义弹框`$confirm`进行二次确认是否删除，点击确定发送请求，成功提示`$message`删除成功

3.操作完成再次调用请求数据列表方法，更新列表数据

## 三、SPU管理

### 准备

1.提前声明好所需要使用的接口函数

- 根据三级分类id请求对应属性列表
- 根据属性id删除对应的属性
- 传递所需数据对属性的添加或修改
- 根据属性id获取对应的属性列表

### 三级分类组件

1.将三级分类组件抽取，放置components中供各页面引入

2.使用`el-form`、`el-form`、`el-select`、`el-option`完成三级分类静态布局

3.定义数据:

​	list1:[]===>一级分类列表

​	list2:[]===>二级分类列表

​	list3:[]===>三级分类列表

​	list:{}储存各级id(category1Id,category2Id,category3Id)

4.定义各级请求数据方法

​	获取一级列表数据后清空二级三级分了数据，然后发请求获取二级分类数据列表

​	获取三级分类列表数据后清空三级分类数据，再请求三级分类数据

​	将获取数据分别储存在对应的list中，最后渲染至对应`el-option`中

5.挂载时调用请求列表1方法

### 列表展示

1.定义方法获取三级分类各级id，获取到category3Id后调用获取列表方法

2.定义获取列表方法携带pages参数设置分页，调用请求方法`reqSpuList`携带参数`page,limit,category3Id`，获取total和records数据

3.获取数据后渲染列表

#### 实现模块的切换

1.定义数据scene:0,  ===0代表列表页，1代表spu模块，2代表sku模块

2. 将列表添加v-show设置scene为0

​	将spu模块添加v-show设置scene为1

​	将sku模块添加v-show设置scene为2

3.分别定义方法更改scene的值展示对应模块

### SPU模块

1.静态布局

### SKU模块

1.静态布局