写文章

Vue Ant Admin学习笔记，持续记录

我心飞翔 分类：vue

Vue Ant Admin基于Vue2.x的中后台管理系统：https://iczer.gitee.io/vue-antd-admin-docs/

比较漂亮的，可以借鉴的：https://vue-admin-beautiful.com/admin-pro

Ant Design of  Vue： https://antdv.com/docs/vue/introduce-cn/（V2及以上版本为Vue3.x，以下为Vue2.x）

Vue Ant Admin学习记录

1.文件分析

main.js

各种插件、全局的CSS、全局的模块在这里引入（如Vue-Router），程序入口文件，初始化vue实例，并引入使用需要的插件和各种公共组件.

App.vue

一人之下万人之上的组件，作为主组件在main.js中被使用，主组件app.vue调用其他组件，构建页面。app.vue可以当做是网站首页，是一个vue项目的主组件，页面入口文件 ，所有页面都是在App.vue下进行切换的。是整个项目的关键，app.vue负责构建定义及页面组件归集。

router/index.js

router里的index.js 把准备好路由组件注册到路由里；所有路由都从App.vue这个层级开始。

vue.config.js配置项详解

通过自定义webpack配置项externals防止将某些 import 的包(package)打包到 bundle 中，而是在运行时(runtime)再去从外部获取这些扩展依赖(external dependencies)。 

externals: {
    vue: 'Vue',
    'vue-router': 'VueRouter',
    vuex: 'Vuex',
    axios: 'axios',
    nprogress: 'NProgress',
    clipboard: 'ClipboardJS',
    '@antv/data-set': 'DataSet',
    'js-cookie': 'Cookies'
}

2.Mock（前端模拟接口）

Mock.js 是一个模拟数据生成器，帮助前端开发和原型与后端进度分离，根据数据模板生成模拟数据，为 ajax 请求提供请求/响应模拟。

Mock.js 通过覆盖和模拟原生 XMLHttpRequest 的行为来拦截 Ajax 请求，不依赖于第三方 Ajax 工具库。

  • Mock.mock()，根据规则拦截请求，并返回指定的数据。
  • Mock.setup()，配置拦截 Ajax 请求时的行为。
  • Mock.Random 是一个工具类，用于生成各种随机数据。
  • Mock.valid()，校验真实数据 data 是否与数据模板 template 匹配。
  • Mock.toJSONSchema()，把 Mock.js 风格的数据模板 template 转换成 JSON Schema。

相关文档：https://github.com/nuysoft/Mock

3.路由守卫、axios拦截器

路由守卫则是处理进度条、检查登录是否失效、检查页面权限。

axios请求拦截器验证token是否失效，响应拦截器则是弹出错误，验证权限、退出登录，实际上就是检查token 的cookie。

4.参数修改记录

  1. 路由守卫修改：\src\router\guards.js
  2. 登录接口和路由获取接口：\src\services\api.js
  3. 静态路由修改：\src\router\config.js
  4. 系统的各种配置：\src\config\default
  5. axios拦截器：\src\utils\axios-interceptors.js

5.bootstrap.js分析

main.js运行时，如果开启了异步路由，初始化的是公共的一些路由，然后在登录时初始化根据用户而匹配出的动态路由，然后合并成为新的路由规则。然后清空当前的路由规则，用异步之后的规则重新初始化。

如果没有开启异步路由，则是在main.js运行后除初始化完整的路由。

然后根据异步请求之后的路由生成导航栏菜单。

传递给bootstrap的router是vue-router实例化之后的对象，options返回创建 Router 时传递的原始配置对象（只读）。

  • setAppOptions({router, store, i18n})，将已经初始化好的路由、状态管理、国际化赋值到对象appOptions
  • loadInterceptors，设置axios的拦截器，并与路由、状态管理进行关联
  • loadRoutes，加载用户专用的一些路由。
  • loadGuards，加载路由守卫。

扩展：

Vue-router对象的Matcher 属性是一个对象，包含了 2 个方法，match 和 addRoutes，不知为何，Vue-router2.x的文档中并未提到这几个接口。 

/*用新的规则重置所有路由规则*/
router.matcher = new Router({...router.options, routes: []}).matcher
/*追加新的路由规则*/
router.addRoutes(finalRoutes)

相关文章：https://segmentfault.com/a/1190000019386190?utm_source=tag-newest

6.Tab切换（keep-alive）

当组件在 内被切换，它的 activated 和 deactivated 这两个生命周期钩子函数将会被对应执行。

7.axios拦截器和请求token

token是在登录之后存到了cookie中，到期时间为json给的时间，到期之后重新登录，axios请求时用调用拦截器检测token是否过期。

拦截器是在bootstrap.js中的loadInterceptors批量加载的，在\src\utils\request.js对axios进行了相关的参数设置，请求拦截器用于校验cookie是否失效，并进行弹窗提示，设置的参数包括token校验头，和指定取token的cookie名字。

axios.defaults.xsrfHeaderName= "AuthHeader"; /*请求头内字段名*/
axios.defaults.xsrfCookieName= "CookieName" /*从哪个cookie去取值*/

在login.vue内登录成功后，触发setAuthorization记录登录成功的Token。

8.布局

默认是AdminLayout布局，顶部由（\src\layouts\header）内的Logo、avatar、notive、search四部分组成，logo在手机端时显示默认图片，pc端显示组件（\src\components\menu\SideMenu.vue）；

9.标题

标题的Admin在.env环境变量内进行设置。

10.页面是否缓存

meta: {
     icon: 'solution',
     page: {
         cacheAble: false
     }
},

回复

我来回复

  • 暂无回复内容