开发者学堂课程【微服务+全栈在线教育实战项目演练（SpringCloud Alibaba+SpringBoot）：后台系统登录功能改造（1）】学习笔记，与课程紧密连接，让用户快速学习知识。
课程地址：https://developer.aliyun.com/learning/course/667/detail/11332
后台系统登录功能改造（1）
vue-admin-template 模块进行前端开发
- 步骤：
把后台管理系统登录改成本地
- 过程：
- 把后台管理系统登录改成本地，也就是请求本地的8001端口然后让它来实现登录，这就是要做到的。
接着看它之前的方式，将F12点开，点开之后不看 Consle,看 Network,点击 Network,然后点击登录。
在这里，它会列出来目前它默认访问的地址。接着看默认访问地址 https://easy-mock.com/mock/5950a2419adc231f356a6636/vue-admin/user/login,
但因为目前服务器有问题，所以要把默认访问地址改为本地地址https://localhost8001。首先看原始方式的过程，然后再进行修改。
看它的代码中，在 src 中有文件夹 api,在 api 有一个文件 login.js,这里面写的是
import resquest from ‘@/utils/request’
export function login(username, password) {
return request
ur1: ‘/user/login’,
method:’post’,
data: {
username,
password
}
export function getInfo(token) {
return request({
ur1: ‘/user/info’,
export 处表示这个方法可以被别的 js 调用，而这个方法中做的主要是以下这部分
return request
ur1: ‘/user/login’,
method:’post’,
data: {
username,
password
这部分做的是定义了当前请求的接口的地址还有提交方式以及参数。user/login是请求地址，post 的表示提交方式，然后默认是给封装的地方 utils 的 request.js。
如下
import axios from ‘axios’
import {Message, MessageBox } from ‘element-ui’
import store from ‘../store’
import { getToken } from ‘@/utils/auth
//创建 axios 实例
const service = axios.creat({
baseURL: process.env.BASE_API,//api 的 base_ur
timeout: 5000 //请求超时时间
}）
//request拦截器
service.interceptors.request.use(
config => {
If (store.getters.token) {
这里面是什么，可以通过 axios 这个单词看出，axios 就是发送请求，所以在里面直接把它做了封装，因此现在只需要在 login 里面定义就可以了。现在更改地址，login里面是一个构成部分，这里面只有一部分。
接着看 config 的 dev.env.js,如下
‘“https://easy-mock.com/mock/5950a2419adc231f356/vue-admin”’是其配置的一个地址，而这个地址可以清楚的看到它与刚才访问的地址是相同的，它只拔成一部分，可以看到原地址它的后面有一个user/login，而这个user/login它就是src的login的一个地址。
也就是其仿地址是由https://easy-mock.com/mock/5950a2419adc231f356/vue-admin这部分，再拼接上user/login构成的地址。
接下来要做的就是把https://easy-mock.com/mock/5950a2419adc231f356/vue-admin这一部分改成本地，后面地址可以用user/login写接口。改的方法是修改配置文件请求地址，配置文件是，在config文件夹里面有一个文件dev.env.js,将这个文件进行更改。
在这个文件中，需要更改https://easy-mock.com/mock/5950a2419adc231f356/vue-admin这个地址，接着进行修改。先将这个地址注释掉，保留原始的，在下面多添加一行。
将BASE_API这一行代码改成本地即“http://localhost:8001”,就是本地下面这个地址，8001端口。
#服务端口
server.port=8001
#服务名
spring.appliation.name=service-edu
#环境设置：dev、test、prod
spring.profiles.active=edv
#mysql数据库连接
将这个稍作修改，这是要做的第一部分，将这个地址改成本地。最后
更改完成的代码如下
‘use strict’
const merge = require（‘webpack-merge’)
const proEnnv = require(‘./prod.env’)
module.exports = merge(proEnv,{
NODE_ENV:’”development”’,
//BASE_API:‘”https://easy-mock.com/mock/5950a2419adc231f356/vue-admin”’,
BASE_API:‘”http://localhost:8001”’,
})
更改过程中会有一个细节问题，上面的地址是https而下面的地址是http，所以要注意书写时不要写错。http可以直接访问，但https的使用需要权限，因而要注意。
下面接着进行操作第三部分。因为现在的登录默认要去请求地址，地址的请求可以看一下它底层的过程。
底层中的应在 sic 的 store 的 user.js里面，在这里面有两个方法，它在请求的时候调用的就是这两个方法，一个方法叫 login，一个叫 GetInFo，调用的是这两个方法。
login 就是做登录的，而 info有信息的意思，表示登录以后得到用户信息。所以它目前是会调两个方法，一个是登录的方法，一个是 info 的方法。如上所言，进行登录要调用两个方法，login 登录操作方法，和 info 登陆之后获取用户信息的方法。
所以，创建接口两个方法实现登录，就是写一个 login 以及一个
info对应刚才看到的地址即可。
两个方法的书写方式，先看底层的地方，如下
//获取用户信息
GetInfo({ commit, state}) {
return new Promise((resolve, reject) => {
getInfo(state.token).then（respnse => {
const data = respnse.data
if (data.roles && data.rples.length > 0) {//验证返回roles是否是一个非空数组
commit(‘SET_ROLES’,data.roles)
}else{
reject(‘getInfo: roles must be a non-null array ！‘）
}
conmmit(‘SET_NAME’,data.name)
commit(‘SET_NAME’,data.avatar)
resolve(respnse)
}).catch(error => {
如上是它反应数据。先看登录，按照上图代码的格式改数据，它里面有以下几个格式：
第一个是 roles 这种格式；
第二个是 name 格式；另外还有一个 avatar（有头像之意，可以表示用户的头像）格式。
info 里面需要反映 roles,name以及 avatar，这里面名字里面的值可以随意起包括avatar 加个头像。然后看登陆里面，它只需要反应一个值就是 token。
然后进行书写如何创建两个方法实现登录：第一步是 login 返回 token 值；
第二步是 info 返回roles、name、avatar。.then response 这个代码，.then 是表示成功了，而response是表示是反映数据，通过response里面有一个 data，data 中有roles、name、avatar，所以把这个返回即可。
而返回结构就是之前写的 R 的对象，包括看下图里面
/**
*code 为非20000是抛错，可结合自己业务进行修改
*/
const res = response.data
if (res.code !== 20000) {
Message({
message: res.messsage,
type:’error’,
duration:5*1000
})
//50008:非法的token;50012:其他客户端登陆了；50014：Token过期了；
if (res.code == 50008 | | res.code ==50012 | | res.code ==
50014) {
MessageBox.confirm(
你已被豋出，可以取消留在该页面，或者重新登录’，
确定登出’，
这里面根据20000做了判断，如果是20000就返回，如果不是20000就报错，20000是写R时的状态码也就是相当于以下这串代码。
Public class P
@ApiModelProperty(value = ”是否成功“）
private Bloolean success:
@ApiModelProperty(value = ”返回码“）
private Interger code:
@ApiModelProperty(value = ”返回消息”）
private String message
package com.atguigu.commontils
public interface ResultCode {
public static Interger SUCESS=20000：//成功
public static Interger ERROR=20001://失败
在这里面返回成功失败，成功是20000，失败是20001。
所以就按照框架结构中，有一个细节需要注意，写状态码的时候，正确效果必须是20000，因为判断过程中就是以20000做判断的。
接着具体写接口部分，开发接口指的不是interface而是之前写的control、service和一个其他的过程。
接着直接写control，在里面按照要求把数据返回就可以了。
接着进行书写，来到项目中，在control里面再建一个controller专门用于模拟登录,controller 模仿规范直接叫 EduloginController,这个就是建的一个controller。
然后在里面写上两个方法，就是一个 login 一个 info。这样在这里面就建立了一个controller，实现了登录。
接着写 EduloginController 里面的代码，controller 上边要加注解，要先加一个叫RestController 表示这个类交给使人管理包括它能缓数据，第二个加一个RequestMapping表示请求的地址，所以加上这两个。接着在原代码中进行添加，添加完如下所示。
起完名字后有两个方法一个就是login的方法，还有一个info的方法。
接着来写两个方法
//login
@PostMapping(“login”)
public_R login () {
return R.ok():
写完这些后进行创建，创建之后再来个info。
//info
@GetMapping(“info”)
public_R info () {
return R.ok():
这样在 control 里面就写了两个方法，一个叫 login，还有一个叫 info。这两个方法为了之后登录中做调用，这些地址之后进行更改。
这个方法中因为进行了一个模拟登录，所以不需要查数据库，但后面整合secret要查数据库，因此做个模拟。按照它的结构先登录，登录之后只需要访问一个值token就可以了,因为在里面是根据token值做判断，所以只需要访问token就可以了。接着返回一下，在下面代码ok()中点上一个data。
//login
@PostMapping(“login”)
public_R login () {
return R.ok():
在里面加个名字，名字是token，这个是固定的，然后它的值是任意的，随意写一个”admin”,
最后代码如图
//login
@PostMapping(“login”)
public_R login () {
return R.ok(”token“，“admin”):
这个就是登录方法。让这个方法诱返一个 token，值是 admin，在前端中，它根据值得到token，就能把这个弄进去，这是第一个。第二个叫 info，info 里面返回有三个值 roles、name、avatar，就是角色、名称和头像。
同理也是返回这三个值，然后返回一下，与上面写法一样，代码如下
//info
@GetMapping(“info”)
public_R info () {
return R.ok.data(”roles“，”[admin]”).data(“name””admin”).data(“avatar””admin”)
在第三个 avatar 里面加一个头像就是加一张图片就可以了，在头像里面提供了一个这段数据
{“code”:2000,”data”:{“roles”:[“admin”],”name”:”admin”,”avatar”:”https://wping.wallstcn
数据如上所示，反映的就是这样一段数据，例如头像返回的就是图中的那串数据。所以现在将两个方法便完成了。
login 表示登录，按照它前段的要求只要返回名称是token，然后就可以了，值可以随意写，值可以写 admin。然后第二个info返回三个名称roles、name、avatar就可以了，这里面加了不同的值，有roles、名称以及头像。这样接口就完成了。
接口完成之后，将服务启动，然后在前端进行操作。都启动之后，对前端进行更改，前端在刚刚地址已经改过了，再改的话就是修改 api 文件夹 login.js 修改本地接口路径。
首先本地应该叫/eduservice/user/login,接着更改一下，因为post的提高方式相同，所以不用更改。
第二个就是信息，本地地址叫/eduservice/info，提高方式是get,如下这里面的也是get,所以要将地址进行修改
export function getInfo（token) {
return request
ur1:’/eduservice/user/info’,
method:’get’,
params: {token}
})
}
改成本地的地址，一个是 login 里面需要进行修改，第二个是info里面要进行一个修改。
这样基本过程就完成了，只剩下测试。它的过程就是首先在前端中的地址改成本地的localhost：8001，
因为默认应该是https://easy-mock.com/mock/5950a2419adc231f356a6636/vue-admin/user/login，这个服务器有问题所以改成了本地。
第二个按照它在本地的要求建了两个方法，一个是 login，另一个是 info，按照它的要求返回数据，一个 token,一个 roles、name、avatar。也就是看到user里面，info这几个值，login 中这几个值，然后写完之后把结果都返回了，最后改一下login.js中的地址，改成本地。因为本地写的是/eduservice/user/，把这个动作修改，这样就可以了。
然后做到之后把后端的接口启动，然后前端也要重启，因为改了配置文件，这是需要重启一下的，所以重启一下最后测试效果。
