Day05-后台系统登录功能改造

1、把系统登录功能改造为本地

系统登录默认使用这个地址：
https://easy-mock.com/mock/5950a2419adc231f356a6636/vue-admin

把登录请求地址改造成本地：http://localhost:8001

2、修改配置文件请求地址

在config文件夹里面有dev.evn.js

'use strict'
const merge = require('webpack-merge')
const prodEnv = require('./prod.env')

module.exports = merge(prodEnv, {
  NODE_ENV: '"development"',
  // BASE_API: '"https://easy-mock.com/mock/5950a2419adc231f356a6636/vue-admin"',
     BASE_API: '"http://localhost:8001"',
})

3、编写接口代码

进行登录需要调用两个方法：login登录操作方法，info登录之后获取用户信息的方法。所以，创建接口两个方法实现登录。

（1）login 返回值token
（2）info 返回值roles name avater
打开idea，在controller包中创建EduLoginController类，在该类中编写登录和查询用户详细信息代码。
,

package com.nonglin.eduservice.controller;

import com.nonglin.commonutils.R;
import org.springframework.web.bind.annotation.*;

/**
 * @Description :
 * @Author :lenovo
 * @Date :2021/3/4 16:22
 */
@RestController
@RequestMapping("/eduservice/user")
public class EduLoginController {

    //login
    @PostMapping("login")
    public R login(){
        return R.ok().data("token","admin");
    }

    //info
    @GetMapping("info")
    public R info(){
        return R.ok().data("roles","[admin]").data("name","admin").data("avatar","");
    }

}

4、修改api文件夹中login.js文件，修改本地接口路径

import request from '@/utils/request'

export function login(username, password) {
  return request({
    url: '/eduservice/user/login',
    method: 'post',
    data: {
      username,
      password
    }
  })
}

export function getInfo(token) {
  return request({
    url: '/eduservice/user/info',
    method: 'get',
    params: { token }
  })
}

5、最终测试，出现问题

启动前端项目，在终端中打开，输入命令：npm run dev
打开浏览器，按f12，查看控制台。

这是因为出现跨域问题：

6、解决跨域问题：