# admin-55

**Repository Path**: zhukou/admin-55

## Basic Information

- **Project Name**: admin-55
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 2
- **Created**: 2020-12-01
- **Last Updated**: 2020-12-19

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

### 表单校验

* rules属性绑定
* data中定义规则
* 表单item上prop属性绑定

注意点：  prop的值和规则的值以及表单的值需要保持一致

### 在vue中如何获取dom元素

    - 定义属性

    <div ref='qqq' @click="btn">111111</div>

    - 获取：this.$refs.qqq

### 如何携带token

* 登录成功的时候将获取的token做本地缓存
* 需要做请求拦截====其他所有请求需要携带请求头  Authorization 
    - api/index.js
        - 做请求拦截    获取本地缓存
        - 将本都缓存的值添加到请求头上面去

###  左侧菜单数据展示

    - 封装函数  ===获取左侧菜单数据请求的函数    api/index.js
    - home.vue
        + 导入封装请求函数
        + 调用这个函数获取数据，并且将数据 赋值给data中的menuList
        + 将数据循环出来 ====进行2层循环

    步骤分析：

    - 静态组件布局编写===从官网复制过来
    - 动态渲染左侧菜单导航===将获取的请求数据使用循环
    - 配置属性默认值展开一个  ====查看官网配置属性
    - 配置路由实现显示对应的组件

###  做菜菜单导航图标的显示

 + 引入iconfont.css文件      main.js中引入
 + 一级图标

    - 准备一个对象或者数组 

          iconObj: {
            0: 'icon-user',
            1: 'icon-tijikongjian',
            2: 'icon-shangpin',
            3: 'icon-danju',
            4: 'icon-baobiao'
        },

    - 图标标签属性绑定  class  然后根据索引找到对象中的哪一个类名进行显示

 + 二级图标====直接在二级循环标题前面提加图标标签====写死

 #### 左侧菜单步骤分析：

    - 1-显示组件菜单=====从官网复制
    - 2-只展开一个   通过控制  index
    - 3-配置路由 ===点击谁右边就显示哪一个组件   
        + 配置项上面添加一个router属性   :router="true" 
        + 配置唯一值index的值为path值=====:index="item2.path
    - 4-改变默认高亮颜色   active-text-color="#00ff00"
    - 5-点击当前只展开其他收起  :unique-opened="true"
    - 6-刷新保持最后一次的高亮   
        + 设置默认展开项   :default-active="defaultActive"
        + 点击
            + 给当前每一项的二级菜单  绑定点击事件 并且获取当前的path值
            + 将这个值赋值给 defaultActive 并且做本地缓存【刷新的时候还可以获取上一次的path值】
            + 刷新后获取这个值   defaultActive=从本都缓存中拿 ||  'users'
    - 7-解决二级菜单的每一项的右边框    .el-menu {border:none;}
    - 8-点击收起菜单功能
        + 布局一个按钮  点击按钮
        + 点击设置 collapse=true  or   false  
        + 改变左侧侧边栏宽度样式的设置     <el-aside :width="collapse?'64px':'200px'">
        + 关闭收起和展开的动画  :collapse-transition="false"

  
  ###  路由拦截 

  路由拦截和请求拦截的区别

  请求拦截=====只要请求就拦截
  路由拦截====只要路由值发生改变就拦截

  ###  如何设置路由拦截

    - 在router文件中设置路由前置拦截   router.beforeEach((to,form,next)=>{})
    - 判断是不是lofgin路由值   是 就直接放行，
    - 判断是不是有token  有token就放行 没有就去login
    - 最后解决掉了问题会出现兼容性  解决方法如下

    
    const originalPush = VueRouter.prototype.push;
    VueRouter.prototype.push = function push(location) {
    return originalPush.call(this, location).catch(err => err);
    };

1-请求拦截====token
2-左侧菜单
3-路由拦截   

####  状态

   //  点击按钮

      /* 
      1-获取参数===  {uId:rows.id,type:rows.mg_state}
      2-发送请求==
      */

####  删除用户id

* 封装删除用户的api请求函数
* 给删除按钮绑定点击事件
* 获取当前行用户id
* 导入api请求函数 
    - 导入对话框api函数  .then()里面执行的就是点击确认按钮之后要做的事情
    - 发送请求并且传入id
    - 成功后给出提示
    - 再次调用初次进入获取数据请求的函数===刷新页面

####  编辑用户

* 绑定点击事件
* 获取当前行的数据
* 显示对话框  并且将当前行的数据渲染到对话框中
* 表单校验
    - 点击取消===关闭对话框
    - 点击确认===
        + 二次校验
        + 发送请求

            1、封装更改用户api函数
            2、导入api函数
            3、调用函数并且传入参数
            4、成功后显示提示框+关闭对话框
            5、重新渲染

####  添加用户

* 找组件  对话框组件
* 点击按钮
    - 显示对话框
    - 校验表单 ======同时给表单数据做双向数据绑定
    - 点击对话框中的确认按钮
        + 二次校验
        + 发送请求

            1、封装更改用户api函数
            2、导入api函数·
            3、调用函数并且传入参数
            4、成功后显示提示框+关闭对话框
            5、重新渲染

####  权限列表

* 布局表格组件
* 封装函数api
* 请求数据并渲染

####  角色列表

* 页面结构布局
* 发送请求获取数据并渲染

三级循环
一级===el-row
二级===el-row
三级===el-tag

优化：
1、结构布局中的el-tag的间距
2-边框
3-删除按钮

#### 删除权限  ====根据角色来删除

* 需要获取两个参数   分别是角色id 【经理】  和权限id 【就是展开的】   插槽

* 分装api函数
* 点击当前权限删除按钮  点击谁就获取谁的权限id   ====共用一个函数
* 获取id然后根据id进行发送请求
* 重新渲染

####  树形组件数据展示步骤

* 点击按钮显示对话框
* 封装api 获取树形组件中的数据函数
* 将数据渲染到组件上
    - 获取每一行的数据中的children
    - 每一个children获取他的id  逐个获取children中的id  并将id存放至一个空数组中
        + 收集，每个children中的id,总共需要收集3层===需要使用递归

            使用递归就是你有children就继续找id  没有children就终止递归

    - 最后将这个数组赋值给  default-checked-keys=【】

####  给角色授权

*  点击对话框确认按钮
    - 获取角色id ===
    - 获取权限id=====需要获取所有选中的权限的id  并且以,拼接

        rids = [
        ...this.$refs.tree.getCheckedKeys(),
        ...this.$refs.tree.getHalfCheckedKeys()
      ].join()

    - 封装api函数
    - 调用函数发送请求传入两个参数
    - 成功后 关闭对话框+  给出成功后的提示
    - 重新调用初次进入函数并刷新页面

#### 分配角色

* 点击按钮
  + 显示对话框
  + 显示当前行的数据到组件上
  + 显示角色数据列表
    -  发送请求获取数据
    -  将数据展示在级联选择器
    -  点击谁就显示谁的内容在级联选择器上
    -  点击确认按钮
        + 封装api函数
        + 发送请求
        + 成功后关闭对话框

####  获取商品分类

* 封装函数api
* 调用函数api 并且传入三个参数
* 将数据进行渲染

####  vue-table-with-tree-grid  使用第三方组件库

* 下载  vue-table-with-tree-grid 

分配权限+
分配角色  
 vue-table-with-tree-grid 

####  根据动态参数还是静态属性获取列表数据   =====选择了级联选择器

*  点击了级联选择器  就触发
* 获取分类id   
    - 获取数组中最后一项的索引：arr.length-1      PS: arr=[1,2,3,4,5]========arr-1=4    arr[4]=5
    - 获取数组中最后一项的值：arr[arr.length-1]  

* 获取only还是many   只需要设置v-model  和name的值  

* 封装api函数
* 调用函数发送请求并且渲染数据
* 根据  activeName   的值来判断将获取的值赋值给谁 manyData  还是onlyData
* 点击标签页  ===调用发送请求获取数据函数

####  参数列表

* 获取级联选择器数据并渲染  需要配置

props  【帮我们设置显示什么数据的】
v-model 【获取你点击级联选择器之后的数据  ====id】

*  点击级联选择器 
    - 发送请求 【调用函数封装】 +   按钮禁用关闭
    - 发送请求需要传递的参数

        分类id======根据 级联选择器 v-model的数组的值 来获取数组中的租后一项

            +  通过computed  ===监听v-model 数组的长度的改变 ==3找数组的最后一项

        only  还是many   el-tabs的v-model

* 点击 动态参数和静态属性
    - 发送请求  【调用函数封装】

* 展开列表
    - 按钮和表单的切换

        按钮和表单是通过v-if   v-else  

        + 保证每一项的  v-if是唯一值   在获取的原始数据中添加属性  inputVisible
    - 表单聚焦  

        this.$nextTick(() => {
            console.log(this.$refs.saveTagInput, 777888)
            this.$refs.saveTagInput.focus()
      })

####  添加el-tag

* 失去焦点

    1、获取表单值 并校验表单值不为空
    2、显示按钮隐藏表单
    3、发送请求  

        + 封装api函数
        + 调用函数传入参数
        + 成功后将数据直接显示到页面上

参数总结
1、级联
2、获取最后一项的id
3、禁用按钮
4、渲染表格
5、按钮和表单的切换以及添加数据

    - 实现按钮和表达你的切换 
    - 表单显示时需要聚焦
    - 失去焦点
        + 表单和按钮切换显示
        + 校验表单值  不能为空
        + 发送请求  注意点：参数有5个 【麻烦】
        +  成功后需要将数据显示出来

6、删除

    其实调用的接口还是表单添加属性的接口，只不过需要传的参数中就需要把选中的移除即可

####  添加参数

* 点击按钮
    - 根据不同按钮显示对话框中不同的标题  需要点击的时候传参
    - 显示对话框 +  布局
    - 校验表单
    - 点击对话框中的按钮  
        + 进行二次校验
        + 封装api函数
        + 调用并发送请求 
        + 成功后关闭对话框
        + 更新数据列表

####  步骤条和标签页如何进行关联

* 将标签页的name值从0开始计算   v-model=‘’获取就是从0开始的
* 步骤条是索引0  开始计算的  并且获取的这个索引是一个number值 
* 将 标签页的值转换成number赋值给active即可

####  显示参数和属性

* 判断当前属于第几个tabs切换屏   参数和属性执行的内容是一样的
* 复制之前获取分类参数和静态属性的函数api  进行封装
* 进入到参数 调用函数传入  many   或者进入到属性  传入   only
* 循环参数和属性的数据  需要循环两次

    <div
        class="box2"
        v-for="(item, index) in tableData"
        :key="index"
    >
        <h3>{{item.attr_name}}</h3>

        <el-tag
            style="margin:10px;"
            v-for="(item2, index2) in item.attr_vals"
            :key="index2"
        >{{item2==''?'暂无数据':item2}}</el-tag>
    </div>

*  将获取的数据进行截取 只获取5条    this.tableData = res.data.slice(0, 5)

####  部署本地服务器

* 启动phpstudy
* 启动sql图形化工具并且导入sql
* 在服务器文件中  cnpm  i  然后在node  app.js
    - 如果没有获取数据  就在黑窗口中  回车一下
* 将所有的基准url换成本机 127.0.0.1

    //axios.defaults.baseURL = "http://klxin.cn:8888/api/private/v1"
    axios.defaults.baseURL = "http://127.0.0.1:8888/api/private/v1"

app.listen(3000, 'ip')

####  echarts

* 下载包 
* 导入包和他的模板  ===mounted   原因是他需要操作dom元素
* 配置项需要在data中先定义好
* 封装api函数
* 调用函数  =====mounted
* 获取数据后将data中的配置项和获取的数据进行合并

    合并有两种方法：1、使用扩展运算符 +  lodash

vue        2.x
vue-cli    3. X和4.x        npm   i   @vue/cli   -g
weBpaCK    4. X    

实现优化的过程

* 关闭console.log   
    - 下载  babel-plugin-transform-remove-console
    - babel.config.js  

         "plugins": ["transform-remove-console"]

#### 优化步骤--  某些包文件  使用cdn：

* vue.config.js中配置打包入口文件
* 将入口打包文件  改成  main-prod.js  和  main-dev.js
* 在vue.config.js中配置哪些文件是不需要使用import文件导入【之后这些导入文件就可以删除了，打包的时候也不会打包到打包后的文件中】

         //使用externals设置排除项
            config.set('externals',{
                vue:'Vue',
                'vue-router':'VueRouter',
                axios:'axios',
                lodash:'_',
                echarts:'echarts',
                nprogress:'NProgress',
                'vue-quill-editor':'VueQuillEditor'
            })

* 在public中index.html中引入cdn资源文件

####   element-ui做按需引入

* 在babel.comfig.js中配置文件代码

        {
    "presets": [
        ["es2015", { "modules": false }]
    ],
    "plugins": [["component", [
        {
        "libraryName": "element-ui",
        "styleLibraryName": "theme-chalk"
        }
    ]]]
    }

* 原先使用引入element-ui  就不需要了  全部删除
* 创建一个js文件做按需引入   import  {}  from  'element-ui

    引入后需要注册

* 在原先使用 import引入 element-ui的地方引入上面的按需引入的js文件即可
* 在public中index.html中引入cdn资源文件

####  优化 

* console.log
* 按需加载 element-ui   
* cdn加载 
* 路由懒加载

SPA

单页和多页面的区别

单页  ===spa===不利于搜索引擎   爬虫        + nuxt【服务端渲染】
开发速度快

多页面===