# sph-administration

**Repository Path**: ouzai-zai/sph-administration

## Basic Information

- **Project Name**: sph-administration
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2021-12-16
- **Last Updated**: 2021-12-25

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 后台管理项目

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

## Buid Setup

```bash
# 克隆项目
git clone https://github.com/PanJiaChen/vue-admin-template.git

# 进入项目目录
cd vue-admin-template

# 安装依赖
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 preview

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

# 代码格式检查
npm run lint

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

更多信息请参考 [使用文档](https://panjiachen.github.io/vue-element-admin-site/zh/)



## 一、什么是后台管理系统

> 注意：前端领域中，开发后台管理系统，并非是Java、PHP等后台语言项目

后台管理系统：可以让用户通过一个可视化工具，实现对数据库的增删改查操作，而需要注意的是，根据不同角色（例如：老板、员工）看到的，操作的内容是不同的

模板地址：`https://github.com/PanJiaChen/vue-admin-template`

后台管理项目API接口在线文档：http://39.98.123.211:8216/swagger-ui.html#/

## 二、模板介绍

- build ---->
  - index.js  weback配置文件【很少修改】
- mock ----> mock数据文件夹【模拟一些假数据】
- node_modules ----> 项目依赖的模块
- public ----> ico图标，静态页面，public 文件夹里经常放置一些静态资源，在项目打包的时候webpack不会编译这个文件夹，原封不动打包到 dist 文件夹中
- src ----> 源代码
  - api：涉及请求相关
  - assets：放置静态资源（一般是共享的资源），放在 assets 的文件夹，webpack打包时会进行编译
  - components：一般放置非路由组件，或者全局组件
  - icon：这个文件夹放置svg矢量图
  - layout：放置一些组件与混入
  - router：路由相关
  - store：vuex相关
  - style：样式相关
  - utils：request.js 是 axios 二次封装的文件
  - views：放置路由组件
- App.vue ----> 根组件
- main.js ----> 入口文件
- permission.js ----> 导航守卫相关
- settings.js ----> 项目配置文件
- .env.development ----> webpack可以检测到是开发环境
- .env.production ----> webpack可以检测到是生产环境
- .env.development ----> webpack可以检测到是测试环境

## 三、完成登录业务

**找到 src > views > login > index.vue 文件**

首先   修改登录页的静态，将英文的地方改成中文![image-20211216200838116](README.assets/image-20211216200838116.png)![image-20211216201021473](README.assets/image-20211216201021473.png)

修改背景图![image-20211216201057190](README.assets/image-20211216201057190.png)

然后找到登录按钮对应的点击事件 `@click.native.prevent="handleLogin"`

![image-20211216201607850](README.assets/image-20211216201607850.png)

然后**找到 src > store > modules > user.js 文件**，这里是vuex存储数据的地方，找到 action 下的 login 方法，因为当时还没有async -- await，所以用的是then -> catch。

把它改成async -- await 的写法

![image-20211216202253715](README.assets/image-20211216202253715.png)

然后找到 src > api > user.js

修改aip，因为初始都是用的mock的假数据，换成真实数据

![image-20211216202841180](README.assets/image-20211216202841180.png)![image-20211216202900334](README.assets/image-20211216202900334.png)

然后找到 src > utlis > request.js   修改二次封装的axios

修改请求拦截器的token字段，这个值是后台商量好的

![image-20211216203301231](README.assets/image-20211216203301231.png)

修改响应拦截器，有的后台返回的成功数据不一定是20000 res.code !== 200

![image-20211216203551975](README.assets/image-20211216203551975.png)这时候去点击登录是会报错的，因为换成真实接口之后需要解决代理跨域问题

![image-20211216203733118](README.assets/image-20211216203733118.png)

所以找到根目录下的 vue.config.js，找到devserver属性，target：为服务器，

也可以找到webpack官方API `https://webpack.docschina.org/configuration/dev-server/#devserverproxy`

![image-20211216203929463](README.assets/image-20211216203929463.png)



## 四、退出登录业务

找到 src > layout > components > Navbar.vue，把不需要的 a 标签删掉

![image-20211216225336247](README.assets/image-20211216225336247.png)

## 五、路由的搭建

将不需要的路由组件删除，并在路由配置中把对应的组件配置删除

找到 router > index.js 

```js
{
    path: '/',
    	// 当你访问 / 的时候，它去到的是Layout这个骨架组件
    component: Layout,
        //然后再重定向到dashboard组件
    redirect: '/dashboard',
        // 子组件
    children: [{
    	path: 'dashboard',
        name: 'Dashboard',
        component: () => import('@/views/dashboard/index'),
        // title 是侧边的名字，icon是图标
        meta: { title: 'Dashboard', icon: 'dashboard' }
    }]
}
```

![image-20211216231232752](README.assets/image-20211216231232752.png)



## 六、搭建品牌管理路由

使用 element-ui 插件（这个模板已经安装好了，可以直接使用）

使用`<el-table></el-table`标签生成**表格**模板，table为表格，column为列数

![image-20211216233016174](README.assets/image-20211216233016174.png)

使用`<el-pagination></el-pagination>`标签生成分页器模板

![image-20211217085149173](README.assets/image-20211217085149173.png)

## 七、浅拷贝、深拷贝

1. JavaScript 变量包含两种不同数据类型的值：基本类型和引用类型
   1. 基本类型值的是简单的数据段，包括 ES6 新增的共有六种，number，string，null，undefined，Boolean，symbol
   2. 引用类型指那些可能由多个值构成的对象，object
2. JavaScript 的变量存储方式，栈、堆

> 浅拷贝：
>
> 被复制对象的所有变量都含有与原来的对象相同的值，而所有的对其他对象的引用仍然指向原来的对象。即对象的浅拷贝会对“主”对象进行拷贝，但不会复制主对象里面的对象。”里面的对象“会在原来的对象和它的副本之间共享。
>
> ![image-20211220134630027](README.assets/image-20211220134630027.png)
>
> 地址指向的是同一个堆，而当我们写 a[0] = 100的时候，b也自然受到了影响

> 深拷贝：
>
> ![image-20211220135107737](README.assets/image-20211220135107737.png)
>
> 一个栈对应一个堆，虽然他们的值都相同，但是修改他们并不会影响到其他

## 八、数据可视化

> 在vue中，正常是无法导入echarts
>
> 原因：官方文档明确指出v5版本 中不再支持
>
> ```js
> import echarts from 'echarts';
> // 或者按需引入
> import echarts from 'echarts/lib/echarts';
> ```
>
> 所以我们应该相应的将导入语	句改为
>
> ```js
> import * as echarts from 'echarts';
> // 按需引入
> import * as echarts from 'echarts/lib/echarts';
> ```

### 8.1、canvas的使用

- 基本：

  - canvas画布是html5 中新增的一个特性

  - canvas默认高度为300 * 150

  - canvas画布中添加文本内容是没有意义的

  - 不能通过样式去设置画布宽高

  - canvas标签的宽高务必通过width | height属性去设置
  - 坐标值的起始点为左上角

- 获取画布和笔

  - ```js
    // 获取画布
    let canvas = document.querySelector('canvas')
    // 获取笔
    let ctx = canvas.getContext('2d')
    ```

- 绘制线段

  - 调用画笔的moveTo方法，参数为坐标值

  - ```js
    // 绘制线段：起点
    ctx.moveTo(100, 100)
    ```

- 绘制其他点

  - 调用lineTo方法

  - ```js
    // 其他点设置
    ctx.lineTo(100, 200)
    ```

- 落笔

  - ```js
    // stroke方法绘制
    ctx.stroke()
    ```

- 起点与终点连接

  - ```js
    // 起点和终点连接
    ctx.closePath()
    ```

### 8.2、svg的使用

- svg双闭合标签，默认搞度300 * 150
- svg绘制图形务必在svg标签内部绘制

绘制直线：

```js
<svg class="box">
  <!-- x1 y1 第一个点的坐标，x2 y2 第二个点的坐标 -->
  <line x1='100' y1='100' x2='200' y2='200' stroke="red"></line>
<line x1='100' y1='200' x2='200' y2='100' stroke="red"></line>
</svg>
```

绘制折线：

```js
<!-- 折线： -->
<polyline points="300 300, 50 100 ,120 40" fill-opacity="0" stroke="cyan"></polyline>
```

绘制矩形：

```js
<!-- 矩形 -->
<rect x='400' y='400' width="150" height="50" fill="pink"></rect>
```

绘制圆形：

```js
<!-- 圆 -->
<circle cx='70' cy='95' r='50' style="stroke: teal; fill:none"></circle>
```

绘制椭圆：

```js
 <!-- 椭圆 -->
<ellipse cx="500" cy="500" rx="100" ry="50" style="fill: black;"></ellipse>
```

绘制多边形：

```js
<!-- 多边形 -->
<polygon points="600 100,300 400,750 100" stroke="red" fill-opacity="0 "></polygon>
```

绘制任意图形：

```js
<!-- 任意图形 M：移动到初始位置，L：画线，Z：将结束和开始闭合-->
<path d="M 100 200 L 50 99 L 300 220 L 123 211 L 30 50 L 111 334 Z" stroke="teal" fill-opacity="0 "></path>
```

### 8.3、Echarts的使用

- 准备一个容器`<div></div>`，可以在样式中设置宽高，容器就是显示图表区域

  - ```html
    <style>
      * {
        margin: 0;
        padding: 0;
      }
    
      div {
        width: 800px;
        height: 400px;
      }
    </style>
    <div></div>
    ```

- 初始化图表

  - ```js
    // 基于坐标好的dom初始化echarts实例
    let dom = document.querySelector('div')
    // 创建echarts实例
    var myChart = echarts.init(dom);
    // 指定图标的配置项与数据
    myChart.setOption({})
    ```

  - setOption配置项有很多，需要参考文档`https://echarts.apache.org/zh/option.html#title`

- 在一个图标中显示多个图标，就是在series数组中多配置几个图表对象

  - ```js
    myChart.setOption({
      // 图标标题
      title: {
        // 主标题
        text: '数据可视化',
        // 子标题
        subtext: 'echarts基本使用',
        // 主标题颜色
        textStyle: {
          color: 'cyan'
        },
        // 设置标题位置
        left: 'center'
      },
      // x轴的配置
      xAxis: {
        data: ['衣服', '游戏', '直播', '电竞', '手机', '宝宝']
      },
      // y轴的配置
      yAxis: {},
      // 系列设置，绘制一个什么样的图标
      series: [
        {
          // 图标的类型，bar柱状图,line折线图，pie饼图
          type: 'bar',
          // 图标数据
          data: [60, 40, 21, 550, 220, 60],
          color: 'red'
        },
        {
          // 图标的类型，bar柱状图,line折线图，pie饼图
          type: 'pie',
          // 图标数据
          data: [{ name: 'x', value: 10 }, { name: 'y', value: 34 }, { name: 'z', value: 56 },],
          // 整个图表的宽高
          width: 200,
          height: 200,
          // 图表位置
          left: 150,
          top: 50,
          // 图表半径
          radius: 30
        }
      ]
    })
    ```

### 8.4、Echarts 数据集

数据集则是创建一个变量，里面是个二维数组，用来存放数据

```js
let data = [
  /* 
      第一个参数为x轴的数据，需要和xAxis的数据顺序对应
      第二个参数为柱状图数据
      第三个参数为折线图数据
      第四个参数为饼状图某块区域的名称
      第五个参数为饼状图数据
      每一列称为一个[维度]从0开始
    */
  ['衣服', 11, 31, '衣服', 10],
  ['游戏', 22, 25, '游戏', 50],
  ['直播', 32, 49, '直播', 66],
  ['电竞', 47, 21, '电竞', 77],
  ['手机', 90, 90, '手机', 12],
  ['宝宝', 50, 60, '宝宝', 4],
]
myChart.setOption({
  // 设置字符集
    dataset: {
      // 数据源
      source: data
    },
  // x轴的配置
  xAxis: {
      data: ['衣服', '游戏', '直播', '电竞', '手机', '宝宝']
    },
  series: [
      // 柱状图
      {
        // 图标的类型，bar柱状图,line折线图，pie饼图
        type: 'bar',
        color: 'red',
        // 使用encode属性
        encode: {
          // 表示柱状图的y轴的数据映射到维度1
          y: 1
        }
      },
      // 折线图
      {
        type: 'line',
        color: '#000',
        encode: {
          // 表示折线图的y轴的数据映射到维度2
          y: 2
        }
      },
      // 饼状图
      {
        // 图标的类型，bar柱状图,line折线图，pie饼图
        type: 'pie',
        // 图标数据
        // data: [{ name: 'x', value: 10 }, { name: 'y', value: 34 }, { name: 'z', value: 56 },],
        // 整个图表的宽高
        width: 200,
        height: 200,
        // 图表位置
        left: 150,
        top: 50,
        // 图表半径
        radius: 30,
        encode: {
          // 饼状图有点特殊，他需要两个属性值，itemName和value
          // itemName则是旁边的名字，value是对应的数据
          itemName: 3,
          value: 4
        }
      }
    ]
}）
```

### 8.5、Echarts 组件的使用

在配置项中进行使用

```js
myChart.setOption({
  series: [
    {
      name: '柱状图',
      type: 'bar',
      data:[20,30,50,80]
    },
    {
      name: '折线图',
      type: 'line',
      data:[30,40,60,90]
    },
  ],
  // 提示组件
  tooltip: {
    // 提示文字的颜色
    textStyle: {
      color: 'red',
    },
  },
  // 系列切换
  legend: {
    // 需要给每个系列定义一个name属性，用来区分是那个图表
    data: ['柱状图','折线图'],
  },
  // 工具栏
  toolbox: {
    // 显示与隐藏
    show: true,
    // 工具分组
    feature: {
      // 数据区域缩放。以及返回
      dataZoom: {
        yAxisIndex: 'none',
      },
      // 数据视图工具，可以展现当前图表所用的数据，编辑后可以动态更新
      dataView: {
        readOnly: false,
      },
      // 动态类型切换
      magicType: {
        type: ['line','bar'],
      },
      // 配置项还原
      restore: {},
      // 下载为图片
      saveAsImage: {},
    },
  },
  // 调整布局
  grid: {
    left: '30',
    right: '0',
  },
})
```

### 8.6、双y轴坐标系

```js
mc.setOption({
  xAxis: {
    type: 'category',
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
  },
  // 设置两个y轴
  yAxis: [
    {},
    {}
  ],
  series: [
    {
      data: [150, 230, 258, 44, 135, 77, 260],
      type: 'line',
      // 设置折线图使用哪一个y轴，值为yAxis数组中的索引值
      yAxisIndex: 0,
    },
    {
      data: [100, 33, 205, 72, 144, 41, 224],
      type: 'bar',
      // 设置折线图使用哪一个y轴，值为yAxis数组中的索引值
      yAxisIndex: 1,
    },
  ],
})
```
88  1:05:51