# vue-admin-2207

**Repository Path**: connerljlx_admin/vue-admin-2207

## Basic Information

- **Project Name**: vue-admin-2207
- **Description**: 2207班vue的后台管理项目
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2023-03-06
- **Last Updated**: 2023-03-16

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 项目基础搭建
+ 项目目录
```js
utils // 存储 工具函数
api // 存储 接口函数 （单独抽离 model函数）
```
+ 修改项目运行配置
  
## 基础封装
接口相关
+ axios二次封装
  1 baseURL 存储在环境变量中
    环境变量获取
      process.env.环境变量名 获取
      vueCli 预设环境变量 叫 NODE_ENV 值 开发环境下 development production
      自定义环境变量：
        项目根目录下 定义 .env文件
          .env.development 存储 变量在开发环境下值
          .env.production 存储变量在 生产环境下的值
        如何定义环境变量语法如下
          key=值
        注意：自定义环境变量命名一定要 以 VUE_APP_变量名 否则拿不到
+ 配置开发反向代理 （解决跨域问题） 
```js
 devServer: {
    host: 'localhost',
    port: 3000,
    open: true,
    proxy: {
      // 所有 以 /conner开头请求 会触发这个反向代理
      '/conner': {
        target: 'https://api.it120.cc',
        // 是否切换源
        changeOrigin: true,
        // 请求前缀的路径重写
        pathRewrite: {
          '^/conner': '/conner'
        }
      }
    }
  }
  注意：
    1 服务请求接口完整地址是  target+前缀pathRewrite之后的值+path   （地址一定要真实地址是一致）
    2 判断这个接口是不是真的有这个前缀，没有 重写为 "" 有 重写原来的值
```
+ 封装常用工具函数


https://api.it120.cc/conner

# 为什么前后端分离 数据接口 一般都会添加 /api（语义就行也可以是其他前缀）这个请求前缀
因为 开发环境反向代码 所有请求 以 前缀开头 才能触发这个反向代理

# mock接口
前后端分离开发，后端和前端开发进度是同步进行
问题？
  前端在开发时，后端接口还没好？
这个时候前端 根据接口文档  自己mock接口，（mock每一个接口 path 请求方式，返回数据格式都要和接口文档保持一致）
好处是：前端时请求自己的mock接口， 后端接口完成后，只需要将反向代理的源 改为 后端真实接口源即可（生产环境源后面记得改）

本地 利用mockjs 进行接口mock 
## mockjs基本使用
+ 安装
```js
npm i mockjs -D
```
+ 基础使用
```js
/*
 Mock.mock(url[,type],data)
  参数1 接口 path
  参数2 请求类型 get post put delete
  参数2 接口返回的数据

mockjs 生成随机数语法
  量词
    定义 字段名  修饰 数组长度、字符串长度、number大小、 字段自增（id)
      数组 "arr|10" 固定长度为10数组 "arr|10-20" 产生10-20和数据数组
      字符串 语法同数组 "str|3": "☆☆" 6个五角星  也可以给范围
      number 一般都给范值 "num|10-20": 10 产生10-20之间的随机整数
      自增 比如 id字段
          {
            "id|+1": 1
          }
  快速生成不同类型 数据的 占位符
      使用在 字段值中 值需要加引号 前面 @占位符生效
      {
        icon: "@image"
      }

  Mock.mock('/api/itemLists', 'get', {
    code: 200,
    msg: 'success',
    "data|10-20": [
      {
        "id|+1": 1,
        itemName: "@ctitle",
        desc: "@cparagraph",
        onsale: "@boolean",
        createAt: "@date",
        "thumb": "@image('100x100','@color', '牛夫人')"
      }
    ]
  })
*/
```
+ 占位符

+ <table>
  <thead>
  <tr>
  <th style="text-align:center">Type</th>
  <th style="text-align:center">Method</th>
  </tr>
  </thead>
  <tbody>
  <tr>
  <td style="text-align:center">Basic</td>
  <td style="text-align:center">boolean, natural, integer, float, character, string, range, date, time, datetime, now</td>
  </tr>
  <tr>
  <td style="text-align:center">Image</td>
  <td style="text-align:center">image, dataImage</td>
  </tr>
  <tr>
  <td style="text-align:center">Color</td>
  <td style="text-align:center">color</td>
  </tr>
  <tr>
  <td style="text-align:center">Text</td>
  <td style="text-align:center">paragraph, sentence, word, title, cparagraph, csentence, cword, ctitle</td>
  </tr>
  <tr>
  <td style="text-align:center">Name</td>
  <td style="text-align:center">first, last, name, cfirst, clast, cname</td>
  </tr>
  <tr>
  <td style="text-align:center">Web</td>
  <td style="text-align:center">url, domain, email, ip, tld</td>
  </tr>
  <tr>
  <td style="text-align:center">Address</td>
  <td style="text-align:center">area, region</td>
  </tr>
  <tr>
  <td style="text-align:center">Helper</td>
  <td style="text-align:center">capitalize, upper, lower, pick, shuffle</td>
  </tr>
  <tr>
  <td style="text-align:center">Miscellaneous</td>
  <td style="text-align:center">guid, id</td>
  </tr>
  </tbody>
  </table>

利用在线 mock平台进行mock （rap2.taobao.org fastmock easymock） 在线平台生成随机数语法 也是mockjs 

利用软件mock  apiPost


# vueCli 中import和require区别
import  必须在 代码编译之前就引入 引入的文件 需要参与代码编译
require 可以按需引入 （编译后js代码中执行）

一般 一个 文件 引入后 后续 需要删除 建议使用require（区别醒目）4



单个分类
```
cateName
cateIcon
enable
pid 我的父级分类的id   特殊 值 -1  代表顶层分类

{
  id: 1,
  cateName: "电视",
  pid: -1
}

{
  id: 2,
  cateName: "等离子电视",
  pid: 1
}
```
# element-ui 或 element-plus
+ 必填验证
```js
{
  required: true,
  message: 'xxx字段必填', // 验证不通过 提示文案
  trigger: 'blur' // 验证触发的时机  默认是 blur
}
```
+ 常用类型 type验证
```js
{
  type: 'string',
  message: 'xccc'
}
/* 
  预定义类型有
  string: Must be of type string. This is the default type.
  number: Must be of type number.
  boolean: Must be of type boolean.
  method: Must be of type function.
  regexp: Must be an instance of RegExp or a string that does not generate an exception when creating a new RegExp.
  integer: Must be of type number and an integer.
  float: Must be of type number and a floating point number.
  array: Must be an array as determined by Array.isArray.
  object: Must be of type object and not Array.isArray.
  enum: Value must exist in the enum.
  date: Value must be valid as determined by Date
  url: Must be of type url.
  hex: Must be of type hex.
  email: Must be of type email.
  any: Can be any type.
*/
```
+ pattern正则验证
```js
{
  pattern: /\w{3,7}/,
  message: 'xfg'
}
```
+ 自定义验证函数
```js
{
  validator: (rule,value, callback) => {
    if(验证通过) {
      callback()
    } else {
      callback(new Error('这是错误提示文案'))
    }
  }
}
```
+ 自定义 异步验证
场景：
```js
// 返回promise  then触发通过 catch触发 验证失败
/* 
  asyncValidator: (rule, value) =>{
    return axios.get('xxx', {params: {value}})
  }
*/
  {
    asyncValidator: (rule, value) => {
      return new Promise((resolve, reject) => {
        if (value < 18) {
          reject('too young');  // reject with error message
        } else {
          resolve();
        }
      });
    }
  }
```

# excel导入导出
https://docs.sheetjs.com/docs/demos/frontend/vue/

# 富文本编辑器
ueditor 百度
TinyMCE
quill
wangeditor

# 数据可视化 常用图表插件
echarts  百度  vue技术栈
antv react技术栈


d3.js  国外图表插件
high-charts

## echarts 自定义文本内容
富文本
属性: "{a|标签里面文本内容}"

# 地图 
高德 百度 


vue-baidu-map-3x

# 登录鉴权
路由鉴权：
  前端在 路由前置守卫中，判断缓存中是否有token
接口鉴权：将token 防到 接口请求头中， 发送给后端， 后端进行校验， 验证通过返回正常 code 0 200
正常返回数据   如果判断token过期 获取 失败 返回错误 code  401代表过期  403 无token


# vuex持久化
原理：
  在缓存中备份vuex 状态，vuex的状态改变（mutation），缓存也要同步一样 ，当我们刷新时，取缓存的备份状态 给 vuex state赋值即可

# 角色鉴权
每个用户都可以分配一个角色，不同角色可以访问 权限不同
（权限包括：侧边导航，路由、某个路由组件的某个操作
rabc 基于 角色 权限管理

## 静态角色鉴权
这个项目会固定 若干角色， 所有角色 侧边导航 和 路由数据 都全部定义在前端代码中（建议存在vuex）,
每个 导航 数据 和 路由数据 都会定义一个字段 roles,代表可以访问 该导航或该路由的 所有的角色，当用户登录成功后，返回role, 此时 对于 导航数组进行过滤，路由进行拦截
```js
{
  label: '商品列表',
  icon: 'Xxxx',
  path: '/xxxx',
  roles: ['admin', 'a', 'b']
}

{
  path: 'xxx',
  component: xxx,
  meta: {
    roles: ['admin', 'a', 'b']
  }
}
```

优点：
  1 较为简单，不需要后端过多配合， 登录返回 对应用户的role即可
缺点：
  代码 不灵活，权限定义在 前端代码中，后续 项目想要新增新的权限，只能重新该 前端源码，重新部署上线
适用于：
  中小型，且 角色较为固定的项目
## 动态角色鉴权
思路：
  每个角色可以访问 导航菜单 和 路由 全部存储在数据库，前端 只定义 基础路由，用户登录成功后，再一次发请求，请求当前用户 可以访问的 权限数据 （侧边导航和权限路由），前端动态渲染，和动态添加路由

# lodash  js工具