当前位置:   article > 正文

vue-admin-template框架搭建及应用

vue-admin-template

一、框架介绍

 vue-admin-template是基于vue-element-admin的一套后台管理系统基础模板(最少精简版),可作为模板进行二次开发;

可以把 vue-element-admin当做工具箱或者集成方案仓库,在 vue-admin-template 的基础上进行二次开发,想要什么功能或者组件就去 vue-element-admin 那里复制过来地址:vue-element-admin

二、框架目录结构介绍

三、文件夹分析

1、views:视图文件夹 ,新建一个vue页面,会有三个组成部分:template=>相当与html页面,里面写div,ui组件等;script=>jquery;  style=>页面的css样式

2、api:  向后端发送http请求,使用的是 /utils/request 里面的内容

可以指定请求的路径、类型、请求参数、请求体参数

3、utils/request.js:

主要作用

1、引入要调用的模块以及创建一个axios实例,其中有url已经请求超时的设置

2、创建一个请求拦截器:

作用:在请求发送前进行一些操作,例如在每个请求体里加上token,统一做了处理如果以后要改也非常容易

store.getters.token 首先从全局状态管理那里判断 token , 有的话就可以请求, 否则就抛出异常

   

3、创建一个响应拦截器:

作用:在接收到响应后再进行一些操作,例如在服务器返回登录状态失效的时候,需要重登录,跳转到登录页面

    

4、/store:

State提供唯一的公共数据源,所有共享的数据都要统一放到Store中的State中存储;
​ Mutation用于修改变更$store中的数据;
在mutations中不能编写异步的代码,会导致vue调试器的显示出错。在vuex中我们可以使用Action来执行异步操作;
Getter用于对Store中的数据进行加工处理形成新的数据;
它只会包装Store中保存的数据,并不会修改Store中保存的数据,当Store中的数据发生变化时,Getter生成的内容也会随之变化;

token的获取:

文件地址:store/modules/user.js

login 方法, 首先 传入 {commit} 以及在方法中 commit(‘SET_TOKEN’, data.token) 这两个的作用是执行 action 中异步方法的简写, 组用就是设置 token 的值, 我们知道修改 store中的数据需要使用 Mutation 就是会调用上面的 SET_TOKEN 把 后端返回的token 保存到vuex中, 并且使用 setToken(data.token) 方法把 token写入到 cookie中 以便我们每次请求都可以带上这个 cookie , 并且能够解析出当前登录的用户

5、main.js:入口文件

挂载路由、store、axios等

6、router:

路由

使用vue router的第一步是需要一个路由表、以及把路由表加载到路由实例中, 最后把路由实例导出

两类:

constantRoutes:如首页和登录页和一些不用权限的公用页面

asyncRoutes :异步挂载的路由 #动态需要根据权限加载的路由表

路由的属性:

path : 访问的路径

component : 此路由对于的组件

hidden : 是否在界面显示此路由

meta : 设置路由的属性, 图标之类的

name : 路由名字

children : 该路由下的子路由, 效果就是二级菜单

7、permission.js:

配合路由使用的, 对于vue router 而言它还附带了一些其他的信息, 比如路由守卫, 在路由守卫中我们可以在路由跳转之前来做一些事情的

1、首先判断是否有token

2、没有token , 如果在白名单里面, 就直接放行, 否则就直接强制跳转登录。

3、有token , 如果是 /login 就就直接到 根目录下

4、不是 /login 就去 store 里面找 当前用户的信息, 然后在放行

登录的流程:

登录页面的请求

/store/modules/user.js:

这里会得到输入的用户名以及密码。 并且执行 login 方法, 把返回的token , 保存到 vuex、cookie 中(在路由守卫中 / login 是白名单会直接放行、axios 的请求拦截中 添加的是一个空值)

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/Cpp五条/article/detail/400745
推荐阅读
相关标签
  

闽ICP备14008679号