Spring Boot + vue-element 开发个人博客项目实战教程（十六、登录功能实现（上））

前言

这次拖了一个多月才更新，最近自己发生了很多的事情，有时间和大家一起聊聊，所以一直没来得及更新，这次终于能静下心来写文章了，在这期间我还谋划了一个大的规划，那就是整理Java。

我将系统的进行学习，学习的同时我将会写基础的学习文章，估计要持续四个月左右吧，从Java基础到JavaWeb然后到Spring、SpringBoot、MySQL、redis、MQ、SpringCloud、Linux等等，到时候看情况再说。

这个小项目下面的教程我会带着前端一起写，后端的东西也就这些了，具体太复杂的功能这个项目先不写了，等系统的学完之后，我再重构一个项目，将所有的知识整合到一起，大概要到下半年了，不能许诺太长时间哈！现在我们先把剩下的东西写完，最起码也是我们一点一点的敲出来的，做出来也有成就感，当个毕设或者小作品的也还行。

最后关于基础的知识教程欢迎大家给我留言，以什么样的方式写，什么样的难度或者大家有自己的想法欢迎大家留言或者私信我！有想法就要去想，去做，万一实现了呢！

一、前端搭建

好啦，接下来我们进行前端项目的搭建，我选择的是用Vue来搭建后台，我们的重点是要将整个项目完成，有些不太懂前端，所以我这里先使用的简单的现成的框架进行二次开发，能最大限度的减少前端的开发，想具体学习Vue的大家以后可以自己学习或者可以和我一起来学。

我这里隆重的给大家介绍一个后台管理的模板: vue-element-admin
官方网址：https://panjiachen.github.io/vue-element-admin-site/zh/guide/

根据官方的介绍，vue-element-admin是一个后台前端解决方案，它基于 vue 和 element-ui实现。它使用了最新的前端技术栈，内置了 i18 国际化解决方案，动态路由，权限验证，提炼了典型的业务模型，提供了丰富的功能组件，它可以帮助你快速搭建企业级中后台产品原型。相信不管你的需求是什么，本项目都能帮助到你。

建议
本项目的定位是后台集成方案，不太适合当基础模板来进行二次开发。因为本项目集成了很多你可能用不到的功能，会造成不少的代码冗余。如果你的项目不关注这方面的问题，也可以直接基于它进行二次开发。
集成方案: vue-element-admin
基础模板: vue-admin-template
桌面终端: electron-vue-admin
Typescript 版: vue-typescript-admin-template (鸣谢: @Armour)
Others: awesome-project

我使用的是基础的模板: vue-admin-template，这个对我们目前的项目来说足够了，想了解的大家可以自行看一看。

前端的模板就用这个了，下面我们将它下载到本地并且在本地跑起来。

1、下载前端模板

首先我们是使用的基础版
下载地址：https://github.com/PanJiaChen/vue-admin-template/tree/tag/3.11.0

这里我们需要选择一下版本，我用的是3.11.0的版本。上面的图是我们刚进来的页面，这个是新的版本，我们点击那个master，找到tag/3.11.0，然后选择这个分支


选择好分支，然后点击右上角的Code，进行下载。

也可以克隆项目

git clone https://github.com/PanJiaChen/vue-admin-template.git

如果下载不下来，可以从以下网盘中下载：
链接：https://pan.baidu.com/s/16KmkwFgisBrU408LsPNPCQ
提取码：bc7n

2、项目运行

我们现在已经有前端项目了，但是现在如何运行项目和编写vue代码呢，这时候就就要借助开发工具进行编写，这里我推荐的是Vs Code开发工具，相信大家也都听说过或者用过，具体的安装什么的我不再具体的讲解，版本都差不多，我建议不要汉化，要使用英文，顺便可以学习学习英语。
地址：http://vscode.bianjiqi.net/

下载安装完之后，我们将下载的Vs Code打开，然后点击左上角的File，将项目导入进来。

点击左上角的文件，我这个好像是中文版的，两个都可以的。
打开项目：

每个项目的具体的功能，根据官方提供的目录机构，这个应该是完整版的，我们使用的是基础版的，基本上相差不大，都包含了基础版本的功能。

├── build                      # 构建相关
├── mock                       # 项目mock 模拟数据
├── plop-templates             # 基本模板
├── public                     # 静态资源
│   │── favicon.ico            # favicon图标
│   └── index.html             # html模板
├── src                        # 源代码
│   ├── api                    # 所有请求
│   ├── assets                 # 主题 字体等静态资源
│   ├── components             # 全局公用组件
│   ├── directive              # 全局指令
│   ├── filters                # 全局 filter
│   ├── icons                  # 项目所有 svg icons
│   ├── lang                   # 国际化 language
│   ├── layout                 # 全局 layout
│   ├── router                 # 路由
│   ├── store                  # 全局 store管理
│   ├── styles                 # 全局样式
│   ├── utils                  # 全局公用方法
│   ├── vendor                 # 公用vendor
│   ├── views                  # views 所有页面
│   ├── App.vue                # 入口页面
│   ├── main.js                # 入口文件 加载组件 初始化等
│   └── permission.js          # 权限管理
├── tests                      # 测试
├── .env.xxx                   # 环境变量配置
├── .eslintrc.js               # eslint 配置项
├── .babelrc                   # babel-loader 配置
├── .travis.yml                # 自动化CI配置
├── vue.config.js              # vue-cli 配置
├── postcss.config.js          # postcss 配置
└── package.json               # package.json

在我们了解目录结构后，下面我们要安装依赖，这时候我们就需要安装Node.js，可能对于新手来说node没有安装过，我这里提供下载的地址。
地址：https://nodejs.org/en/
安装的教程我在网上找了一篇，我在这里不过多的介绍了，这一篇的篇幅会很长，安装软件我就省掉了。
安装教程地址：https://jingyan.baidu.com/article/fd8044faf2e8af5030137a64.html
待我们安装完成后，我们打开VS Code软件，然后Ctrl+j打开控制终端。

然后输入：

# 安装依赖
npm install

等待安装完成，有可能会失败，或者下载慢，可用以下的命令

# 建议不要用 cnpm 安装 会有各种诡异的bug 可以通过如下操作解决 npm 下载速度慢的问题
npm install --registry=https://registry.npm.taobao.org

如果一直安装失败，可以给我留言，我发给你我下载好的，相信大多数都是可以的。
依赖安装完成后，我们开始启动项目

# 本地开发 启动项目
npm run dev

输入完成，回车等待项目启动，出现以下情况项目则启动完成。浏览器自动弹出并访问http://localhost:9528，这个就是我们访问的地址。

在浏览器访问我们的前端地址，看页面会出现登录的页面，是不是很简单，我们的前端项目到这里搭建完成了，接下来我们对前端的项目进行改造。

我们先点一下登录，看到以下页面，是不是很有感觉和成就感。哈哈

二、前端登录改造

1、改造前端项目

现在我们的项目也能在我们本地跑起来了，从一开始就说我们的项目是前后端分离的项目，现在我们就把我们前端和后端的项目进行连接，通过我们后端一开始创建的用户进行登录，真正的实现前后端的联动效果。（我这里只是对登录进行简单的处理，因为我们项目也没有分权限什么的，所以现在以简单的实现为主，后期会有详细的一个大项目再具体说）

我们打开前端代码，现在我们刚才能登陆进去，用的是mock的数据，这里你可能会问，什么是mock，你记住以下这个就行，先作为了解。

前后端分离的开发模式，前端需要向后端请求数据（ajax请求），但实际开发过程中，前后端会约定一份接口文档，但前后端开发进度并不一致，当后端没有完善接口功能时，前端需要在本地模拟数据返回，此时需要使用到mockjs。

我们这个项目肯定是要连接我们的后台接口，所以这个mock我们就用不到了，所以我们将mock删掉或者禁掉即可。

删掉这个文件，然后再将引入mock文件的地方禁掉就OK了。
在文件src/main.js中（注意为了方便以后我都这样写路径，意思是：在src文件下的main.js文件中）。

Ctrl+/把这一行禁掉，保存。然后在次启动项目，然后点击Sign in，会发现报错了，报错就对了，因为我们登录使用的是mock模拟的数据，现在我们不再使用mock了肯定就无法登录了。

这时，遇到事情不要慌，我们一点点的解决，下面我们要将我们的前后台的地址先进行连接上。
打开项目config/dev.env.js文件，我们可以看到项目调用的url前缀，在下面我们要把此处改为自己的服务接口地址。
其中dev.env.js和prod.env.js都改一下。（这里我要说一下小技巧，也是个开发的习惯，在我们修改别人的代码时，尽量使用注释掉，然后再写自己的，这样错了就能直接恢复了！）

当我们完成这一步，我们前后端的项目就实现了联动，当然现在还不能实现登录，我们还要做一些工作才能真正的前后端联动。
基本的工作做完了，接下来我们我们再运行下项目，看一下请求的地址有没有变化。打开浏览器，按一下F12，查看控制台，看到这个login的请求地址变成了我们刚才改的本地的地址了。接下来我们再了解一下前端登录的代码，虽然我们不需要编写，但是先了解了解。

2、登录接口请求详解

接下来先说一下原来是怎么登录的，可能这个比较枯燥，尤其对vue没有基础的同学，先了解就可。首先我们运行前端项目，相信大家现在都会如何运行项目了，打开浏览器控制台，现在我们点下登录，然后再刷新下页面，会看到有两个请求。

这时我们点开login，发现传入的是表单中的用户名和密码，但是应该还会有个返回的token值，可能是跨域的问题，我们先不管，或者使用mock的数据就能看到，我们先知道就好。然后我们再点开info接口，传入的是前面的token，我们这里接口还没接好，所以暂时先了解就好，知道有这些东西。
这个页面的东西就这些，接下来我们看前端代码，既然是登录，我们肯定要从登录的代码看起。我们先看路由的地方，打开src/api/login.js，然后我们看到一个login方法，专门是登录的请求地址的，参数传递、请求的路径，这里说一下，如下图所示：

配置的这些再加上我们在config文件配置的地址，组合起来，看一下是不是我们经常在postman测试的地址，看到这里，你就会明白我们的数据请求地址是怎么来的了。

export function login(username, password) {
  return request({
    url: '/user/login',
    method: 'post',
    data: {
      username,
      password
    }
  })
}
export function getInfo(token) {
  return request({
    url: '/user/info',
    method: 'get',
    params: { token }
  })
}

export function logout() {
  return request({
    url: '/user/logout',
    method: 'post'
  })
}

上边的代码，一共是三个方法，同样对应的是我们后端的三个接口，前两个是我们在登录页面上看到的，最后一个顾名思义是登出的接口。
接下来我们在看一下通过这个接口拿到数据又干了什么，打开src/views/login/index.vue，可以看到有一个handleLogin方法，专门用来处理登录校验的信息：

  methods: {
    showPwd() {
      if (this.pwdType === 'password') {
        this.pwdType = ''
      } else {
        this.pwdType = 'password'
      }
    },
    handleLogin() {
      this.$refs.loginForm.validate(valid => {
        if (valid) {
          this.loading = true
          this.$store.dispatch('Login', this.loginForm).then(() => {
            this.loading = false
            this.$router.push({ path: this.redirect || '/' })
          }).catch(() => {
            this.loading = false
          })
        } else {
          console.log('error submit!!')
          return false
        }
      })
    }

可能有些同学会看不懂，没关系，我们先来看一下地址，dispatch到了Login，然后我们再去找这个Login方法，在/src/store/modules/user.js文件中找到了这个Login方法。

// 登录
    Login({ commit }, userInfo) {
      const username = userInfo.username.trim()
      return new Promise((resolve, reject) => {
        login(username, userInfo.password).then(response => {
          const data = response.data
          setToken(data.token)
          commit('SET_TOKEN', data.token)
          resolve()
        }).catch(error => {
          reject(error)
        })
      })
    },

    // 获取用户信息
    GetInfo({ commit, state }) {
      return new Promise((resolve, reject) => {
        getInfo(state.token).then(response => {
          const data = response.data
          if (data.roles && data.roles.length > 0) { // 验证返回的roles是否是一个非空数组
            commit('SET_ROLES', data.roles)
          } else {
            reject('getInfo: roles must be a non-null array !')
          }
          commit('SET_NAME', data.name)
          commit('SET_AVATAR', data.avatar)
          resolve(response)
        }).catch(error => {
          reject(error)
        })
      })
    },

从上边的方法可以看到，这个就是实现那个api文件里的三个方法，在user.js最上边可以看到引入了那三个方法。

import { login, logout, getInfo } from '@/api/login'

这里我就说一下这个Promise，译为承诺，是异步编程的一种解决方案，比传统的解决方案（回调函数）更加合理和更加强大。

1. 这个对象它有三个状态：
   ● pending（进行中）
   ● fulfilled（已成功）
   ● rejected（已失败）
2. 特点
   ● 对象的状态不受外界影响，只有异步操作的结果，可以决定当前是哪一种状态
   ● 一旦状态改变（从pending变为fulfilled和从pending变为rejected），就不会再变，任何时候都可以得到这个结果
3. 流程
   
4. 用法
   Promise对象是一个构造函数，用来生成Promise实例

const promise = newPromise(function(resolve, reject) {});

Promise构造函数接受一个函数作为参数，该函数的两个参数分别是resolve和reject
● resolve函数的作用是，将Promise对象的状态从“未完成”变为“成功”
● reject函数的作用是，将Promise对象的状态从“未完成”变为“失败”

此时我们上边说过的dispatch这个方法的目的：

1. 发送login请求获取到token值
2. 并存储到Vuex状态管理模式中，供多个组件同时识别使用

3、数据响应

不知道大家还记不记得我们在写后端接口的时候，我们封装了一个返回类，如果不记得了可以打开后端代码看一下，我们在请求数据成功时，会返回请求的数据和一个code标识200，代表我们接口请求成功了。
这个vue-elemeent-template也有自己的请求拦截，我们这里需要改一下。
我们打开/src/utils/request.js文件，在大约第9行的位置有个注释为请求超时时间，我们这里调的时间长一点，将5000ms调成30000ms（5秒调到30秒）

// 创建axios实例
const service = axios.create({
  baseURL: process.env.BASE_API, // api 的 base_url
  timeout: 30000 // 请求超时时间
})

然后再往下找找，大概在27行左右，有个response拦截器注释，将20000改成我们自己定义的200

到这里我们前端的初始化工作基本上完成了，接下来我们要去后端处理登录了，从上边我们已经知道了，我们要登录就要两个接口，一个是login，另一个是info接口，接下来我们就根据这两个接口来写代码。

三、总结

本来感觉能写完的把登录，我一看篇幅写了很长了，就先把这个前端的作为结尾，后端的下一篇再写，估计这两天就可以了，希望大家不要放弃，坚持下去，为自己的梦想奋斗！

上一篇：Spring Boot + vue-element 开发个人博客项目实战教程（十五、文章功能实现（下））
下一篇：Spring Boot + vue-element 开发个人博客项目实战教程（十七、登录功能实现（下））