基于Vue搭建——EL-ADMIN前端（笔记一）_el admin

一 快速了解

1.前言

​ EL-ADMIN 基于 Spring Boot 2.1.0 、 Spring Boot Jpa、 JWT、Spring Security、Redis、Vue、Element-UI 的前后端分离的后台管理系统， 项目采用按功能分模块的开发方式。本开发模块属于该项目前端。

2.技术栈

Vue
vue-router
axios
element ui

3.实现功能

1）登录页面

2）主页面

3）用户管理

二 初始化项目

1.创建项目

​ 使用vue-cli打开项目管理界面创建非常方便。直接在后台输入vue ui(需要vue-cli3.0以上版本)就可以打开项目管理界面。

​ 在选好的目录下创建新项目，包管理选择npm。

接下来预设选择手动配置项目。

功能选择以下三个：

Babel：把JavaScript 中 es6 的新语法转化为 es5，让低端运行环境(如浏览器和 node )能够认识并执行）

Router：路由

Vuex：专为 Vue.js 应用程序开发的“状态管理模式”，采用集中式存储管理应用的所有组件的状态

然后下一步，等待项目自动初始化完成。

2.插件安装

3.依赖安装

4.项目结构

`|-- public 存放静态资源，存放在该文件夹的东西不会被打包影响，而是会原封不动的输出到dist文件夹中
    |-- favicon.ico 网站图标
    |-- index.html 主页，项目入口
|-- src
    |-- api  后端请求接口文件
    |-- assets  静态资源
    |-- components  公用组件
    |-- layout  系统布局：头部、侧边栏、设置、中间内容页面
    |-- mixins  混入文件（CRUD混合模式）
    |-- router  路由配置
    |-- plugins 插件
    |-- store  vuex存放数据
    |-- utils  工具包
    |-- views  页面
    |-- app.vue  根组件
|-- main.js  入口文件
|-- .gitignore  git忽略上传的文件格式
|-- package.json 项目描述文件
|-- vue.config.js  cli配置文件
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

三 登录页面开发

1.引入Element-UI

有两种方式：

​ 第一种，直接在main.js中下入这三行：

​

​ 第二种，直接引入element.js文件（上面三行代码抽出来放到里面）

import './plugins/element.js'
1

2.画登录页面

​ 这里直接把项目登录页面的样式和页面元素搬到login.vue。

​ 然后把黄色波浪线的变量和方法都在login组件内。

​ 标签也要注释掉，因为涉及到index.vue组件。

​ 但这个时候还会存在一个问题，就是样式格式不兼容，页面全局比例不对。

​ 解决方法有两个：

​ 方法一，安装sass、sass-loader依赖（安装依赖后记得重启项目），把App.vue的样式都删掉，然后再main.js中引入准备好的全局样式index.scss。

import './assets/styles/index.scss'
1

​ 方法二，不导入全局样式，直接在index.html中设置样式

body, html, #app{    
	height: 100%;
}
1
2
3

至此登录页面画好了，接下来就可以完成页面的底层逻辑了。

​ 补充一下：

​ .vue文件由、

3.实现getCode()方法：获取验证码

首先需要安装axios依赖：

npm install axios
1

为了使axios能够全局使用，要在main.js用import导入，并且将导入的axios赋值给Vue.prototype的$axios变量（变量名可随便取）中

注：

​ 如果想用全局注册一些数据/实用工具，可以在main.js中将变量添加到 Vue.prototype（原型）中。

	Vue.prototype.$appName = ‘My App’
1

​ 这样 $appName 就在所有的 Vue 实例中可用了，甚至在实例被创建之前就可以。

重启使axios依赖生效后，将getCode()方法补全

getCode(){
      //发送请求给后端，需要用到axios
      this.$axios.get('http://localhost:8000/auth/code').then(resp =>{
        this.codeUrl = resp.data.img;
        this.loginForm.uuid = resp.data.uuid;
      })
}
1
2
3
4
5
6
7

这样获取验证码的方法就写好了！

4.实现handleLogin()方法:处理登录请求

密码加密

​ 导入准备好的js工具文件rsaEncrypt.js，利用公钥对密码进行加密（密钥可自己生成）。

      this.loginForm.password = encrypt(this.loginForm.password);
1

请求处理

this.$axios.post('http://localhost:8000/auth/login',this.loginForm).then(resp => {
        this.$router.push('/dashboard');
})
1
2
3

​ 其中$router是访问路由实例，$router.push 方法会向 history 栈添加一个新的记录，所以，当用户点击浏览器后退按钮时，会回到之前的 URL。

​ push方法的参数可以是一个字符串路径，或者一个描述地址的对象。例如：

// 字符串路径
router.push('/users/eduardo')

// 带有路径的对象
router.push({ path: '/users/eduardo' })

// 命名的路由，并加上参数，让路由建立 url
router.push({ name: 'user', params: { username: 'eduardo' } })

// 带查询参数，结果是 /register?plan=private
router.push({ path: '/register', query: { plan: 'private' } })

// 带 hash，结果是 /about#team
router.push({ path: '/about', hash: '#team' })
1
2
3
4
5
6
7
8
9
10
11
12
13
14

表单校验

将表单校验规则补全：

 loginRules:{
        username: [{required :true, trigger : 'blur' , message: '用户名不能为空'}],
        password: [{required :true, trigger : 'blur' , message: '密码不能为空'}],
        code: [{required :true, trigger : 'blur' , message: '验证码不能为空'}],
 },
1
2
3
4
5

required设置是否必输，trigger设置触发条件。

还需在发送请求前判断校验结果，校验通过才能发送请求。

handleLogin(){
      this.$refs.loginForm.validate( valid =>{
        if(valid){
          //如果表单校验通过，则发送登录请求
          //密码加密
          this.loginForm.password = encrypt(this.loginForm.password);
          this.$axios.post('http://localhost:8000/auth/login',this.loginForm).then(resp=>{
            this.$router.push('/dashboard');
          })
        }else alert("请按请求完善登录信息");
      });

    }
1
2
3
4
5
6
7
8
9
10
11
12
13

注意，这里通过this.$refs.loginForm获取的loginForm实例是由ref="loginForm"将表单实例绑定上去的。

添加拦截器

若请求得到失败响应后，我们需要对返回响应信息进行处理，提示失败信息。

这个时候就可以用到拦截器。

这里我们把axios放在新建的request.js工具文件中导入，再在main.js中引入该文件，然后给创建的axios实例添加响应拦截器。

import axios from "axios";
import ElementUI from "element-ui";

let request = axios.create();
//添加响应拦截器
request.interceptors.response.use(response => {
    console.log("response");
    return response;//固定格式
},
    error => {
    ElementUI.Message.error("请求失败！"+error);
    return Promise.reject(error);//固定格式
    }
)

export default request;
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

原先的Vue.prototype.$axios = axios也要改成Vue.prototype.$request = request，相应的this.$axios要改成this.$request。

请求等待

如果后端很慢，这时候如果没有提示登录中的话，用户可能会再次点击登录，所以现在还需要实现以下请求等待的功能。

只需要在发送请求前把loading设置为true，请求结束后再设置会false就好了。

5 实现”记住我“功能

实现”记住我“功能实际上就是实现JWT的前端功能。

数据的交互过程：用户登录 -> 后端验证登录返回 token -> 前端带上token请求后端数据 -> 后端返回数据。

具体要实现的：

①保存用户名密码到cookies

②保存token到cookies

​ 这里之前的this.loginForm也要改为user

③rememberMe判断是否要自动登录

还需要实现判断是否要跳过登录页面，这个时候就又涉及到路由的基础知识了。

在router/index.js中添加导航守卫(NavigationGuard)，用来通过跳转或取消的方式守卫导航。

router.beforeEach((to,from,next)=> {
    if(getToken()){//已登录
        if(to.name === 'Login') next('/dashboard')
        else next()
    }else if(to.path !== '/') //若不是在根路径，则自动跳转到根路劲
        next({path:'/'})
    else next()
})
1
2
3
4
5
6
7
8

“to”: 即将要进入的目标 路由对象;（这个对象中包含name，params，meta等属性）

“from”: 当前导航正要离开的路由对象；（这个对象中包含name，params，meta等属性）

“next”: Function: 确保要调用 next 方法，否则钩子就不会被 resolved。这个当中还可以传一些参数，具体可以看官方文档。

这样记住我功能就实现好了。

6 实现”注销“功能

实现注销功能需要请求后端接口删除该用户的token，同时前端Cookies也要删除该用户的token

logout(){
      //请求后端接口删除该用户的token，同时前端Cookies也要删除该用户的token
      this.$requset.delete('http://localhost:8000/auth/logout').then(res=>{
        removeToken(config.TokenKey)
        this.$Router.replace('/')
      })
}
1
2
3
4
5
6
7

7 实现携带token发送请求

​ 想要在每个请求头上加上token，需要使用到请求拦截器。

​ 和之前响应拦截器一样，在request.js中添加：

//添加请求拦截器
request.interceptors.request.use(config => {
    console.log('请求拦截！')
    if(getToken()){
        config.heads['Authorization'] = getToken()
    }
    return config
},
    error => {
        return Promise.reject(error)
    })
1
2
3
4
5
6
7
8
9
10
11

由于axios默认的请求格式就是application/json, 所以这里是不用设置的。

注：一定要记得return！因为use接受两个函数作为参数，那么这两个函数就必须要有返回值。

8 认证失败或过期的处理

​ 一般，认证失败后，需要做的是自动注销并且跳转至登录页面。

​ 首先，我们可以把登录相关的方法抽出来封装到login.js中。

import {removeToken} from "./auth";
import Config from '@/setting';
import router from "@/router";
import request from "./request";

export function logout(){
    request.delete('http://localhost:8000/auth/logout').then(res =>{
        removeToken(Config.TokenKey)
        router.replace('/')
    })
}
1
2
3
4
5
6
7
8
9
10
11

然后在响应拦截器中添加判断认证失败(401错误码)的操作，如果是认证失败就直接进行注销。

到这里登录页面的基本功能就已经都完成了！