第十天/十一天学习总结

1、权限应用—根据权限显示左侧菜单（面试）

这里我们需要使用到vuex进行配合实现左侧菜单的显示，首先我们需要在state里面定义路由变量routes:constantRoutes(静态路由),在路由前置守卫里面我们通过store.commit('user/setRoutes', filterRoutes)给仓库里面的mutations派发事件，仓库里面通过state.routes = [...constantRoutes, ...newRoutes]进行接收并存储到state里面。为了使用路由信息简单，我们使用getters开发state属性：routes:state => state.user.routes。接下来我们在Sidebar/index.vue里面使用仓库里面的路由信息。

2、权限应用—退出登录重置路由

在我们点击退出登录的时候只做了vuex里面的token以及用户信息的清除功能，但是当我们将地址栏的对应路由输入进去的时候，对应的界面依旧能够显示，这是不合理的，原因在于我们没有对路由进行重置处理。

3、权限应用—功能权限—按钮权限标识

功能权限指的是页面路由权限点，按钮权限点，添加权限时type为1表示访问权限；添加权限时type为2表示按钮权限。

4、权限应用—自定义指令应用功能权限

首先我们需要在main.js中封装自定义指令v-permission来判断Vuex中的points是否有对应的标识，有的话对应的按钮正常显示，没有的话删除或者禁用按钮。

// 编写指令代码
Vue.directive('permission', {
    inserted(el, binding){
        const points = store.state.user.userInfo?.roles?.points || []
        if(!points.includes(binding.value)) {
            el.remove()
            //el.disabled = true
        }
    }
})

// 应用指令
<el-button v-permission="'add-employee'">添加角色</el-button>

5、vue-count-to插件—数字滚动插件

// 安装
npm install vue-count-to

//使用
   // 先引入
   import CountTo from 'vue-count-to'
   
   // 使用
   <count-to
    :start-val="0"
    :end-val="228"
    :duration="1000"
  />
  

6、vue渲染数据是异步的，所以在渲染多层数据的时候会出现undefined的报错，可以使用可选链操作符（?.）——在不确定一个值是否存在时使用。

首先我们需要知道可选操作符的定义：允许读取位于连接对象链深处的属性的值，而不必明确验证链中的每个引用是否有效。?. 运算符的功能类似于 . 链式运算符，不同之处在于，在引用为空 (nullish ) (null 或者 undefined) 的情况下不会引起错误，该表达式短路返回值是 undefined。与函数调用一起使用时，如果给定的函数不存在，则返回 undefined。

可选链操作符的使用需要对应的版本要求：vue版本和编辑器的版本要求： vue@2.7.0 vue-template-compiler@2.7.0

<span>{{homeData.provientFund?.declarationTotal}}</span>  //可选链操作符

7、项目上线前的优化之echarts的优化手段——将全局导入变成按需导入

    // 优化前
    import * as echarts from 'echarts'
    
    //优化后
    import * as echarts from 'echarts/core'   // 核心 包
    import { LineChart } from 'echarts/charts'  // 图表 - 柱状/折线
    import { GridComponent } from 'echarts/components' // 引入提示框，标题，坐标系
    import { CanvasRenderer } from 'echarts/renderers'  //引入渲染器
    
    // 使用
    echarts.use([
        LineChart,
        GridComponent,
        CanvasRenderer
    ])
    

8、项目上线前的优化之打包分析

在项目完成开发后，我们通过npm run preview -- --report （yarn preview --report） 进行打包分析预览可以看到对应的文件大小信息。我们可以据此针对性地对代码进行优化。

9、项目上线前的优化之cnd加速

通过添加cdn引入ui库的方式对相应的依赖代码进行加载提升项目的加载速度。具体操作是：通过cdn链接配合对应的文件引入标签在文件夹public里面的index.html文件里面添加cdn链接代码：

<link href="https://cdn.bootcdn.net/ajax/libs/element-ui/2.15.13/theme-chalk/index.min.css" rel="stylesheet">
<script src="https://lf9-cdn-tos.bytecdntp.com/cdn/expire-1-M/vue/2.6.14/vue.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/element-ui/2.15.13/index.min.js"></script>

10、打包上线的流程是什么？最终是谁来部署上线？

前端工程师先通过npm build打包html css js到文件夹dist里面，后端工程师将dist文件夹里面的代码放到nignx代理服务器里面进行部署。然后公众通过地址进行访问。

11、路由有哪些模式

const createRouter = () => new Router({
  // mode: 'history', // require service support
  scrollBehavior: () => ({ y: 0 }),
  mode: 'history',
  routes: constantRoutes
})

路由的模式有hash、history、abstrat模式。

• hash：带#，#后面的地址变化不会引起页面的刷新，它是最安全的模式，因为它兼容所有的浏览器和服务器。
• history：没有#，地址变化会引起页面刷新，更符合页面地址的规范（开发环境不刷新—webpack配置），它包括back/forward/go三个方法，对应浏览器的前进、后退、跳转操作。
  • 在这个项目中，当我们将打包好的文件放入到服务器后，打开链接出现了404报错，这个时候我们需要在nginx中的配置文件修改相关的配置，因为在开发环境中我们使用了webpack进行了跨域问题的解决，但是项目打包后没有webpack代码，所以我们需要在nginx中添加配置文件解决的跨域问题。

    // 在nginx中的配置文件nginx.conf处理
    
    // 解决404报错问题
    location / {
        # root   html;
        # index  index.html index.htm;
        try_files $uri $uri/ /index.html;
    }
    
    // 解决跨域问题
    location /prod-api {
      proxy_pass https://heimahr-t.itheima.net;
    }

    history.go(-2);//后退两次 
    history.go(2);//前进两次 
    history.back(); //后退
    hsitory.forward(); //前进

• abstrat：在已存在的路由页面中内嵌其他的路由页面，而保持在浏览器当中依旧显示当前页面的路由path，这就利用到了abstract这种与浏览器分离的路由模式。