【备战春招】第10天 前端VUE项目技术栈

课程名称：SpringBoot2.X + Vue + UniAPP，全栈开发医疗小程序

课程章节：第二章 UNIAPP+Vue3.0+Springboot技术栈分析

课程讲师： 神思者

课程内容：

一、用Vite构建Vue3.0

前端Vue项目采用了Vite脚手架构建出来的。Vite相当于前端项目的Maven，可以下载依赖库、编译打包项目等等。前端项目用到的依赖库写在package.json文件中。

vite.config.js文件里面的内容包括了怎么集成ElementPlus组件库和引入SVG图片的配置内容。

二、自定义封装Ajax请求

因为有时候后端返回不同类型的异常消息，我们需要不同的处理方式，代码写起来挺多的。如果各个Vue页面发送Ajax请求的时候，都要写相同的异常处理JS代码，显得太繁琐而且重复。所以不如我们自己声明函数把Ajax请求给封装起来。各个Vue页面想要发起Ajax请求的时候，调用该封装函数就可以了。在main.js文件中，定义的封装函数是$http，并且把该函数绑定到了全局作用域，每个页面都能使用该函数。

三、前端权限验证

用户登陆成功之后，后端Java项目会在HTTP响应里放入Token令牌和用户拥有的权限列表。前端项目需要把Token和权限列表保存到浏览器的Storage里面。前端VUE页面在渲染的时候，需要根据权限判定哪些控件可以显示，这就逼着我们把权限验证封装成公共函数。

app.config.globalProperties.isAuth = function(permission) {

    let permissions = localStorage.getItem("permissions");

    let flag = false

    for (let one of permission) {

        if (permissions.includes(one)) {

            flag = true

            break;

        }

    }

    return flag;

}

Vue页面的组件需要验证权限的时候，可以写成下面的样子：

<template>

    <div v-if="isAuth(['ROOT', 'DOCTOR:SELECT'])">

        ……

    </div>

</template>

四、MIS系统框架页面

课程收获：通过视频加文档结合的方式，熟悉了前端VUE项目技术栈，期待后续学习！