day05---(01)前端环境登录修改

1、解读登录步骤

(1)在浏览器端使用F12查看vue-admin-template-master登录请求详情
day05---(01)前端环境登录修改_第1张图片
day05---(01)前端环境登录修改_第2张图片
在这里插入图片描述
在这里插入图片描述
(2)获取请求返回的信息

{"code":20000,"data":{"token":"admin"}}
{"code":20000,"data":{"roles":["admin"],"name":"admin","avatar":"https://wpimg.wallstcn.com/f778738c-e4f8-4870-b634-56703b4acafe.gif"}}

2、实现模拟登录接口

在后端service_edu模块中编写模拟登录的EduloginController

package com.atguigu.eduservice.controller;
import com.atguigu.commonutils.R;
import com.atguigu.eduservice.entity.EduTeacher;
import com.atguigu.eduservice.service.EduTeacherService;
import io.swagger.annotations.Api;
import io.swagger.annotations.ApiOperation;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.*;
import java.util.List;
@Api(description="模拟登陆")
@RestController
@RequestMapping("/eduuser")
public class EduloginController {
    //{"code":20000,"data":{"token":"admin"}}
    @ApiOperation(value = "模拟登陆")
    @PostMapping("login")
    public R login(){
        return R.ok().data("token", "admin");
    }
//{"code":20000,"data":{"roles":["admin"],"name":"admin","avatar":"https://wpimg.wallstcn.com/f778738c-e4f8-4870-b634-56703b4acafe.gif"}}
    @ApiOperation(value = "模拟获取信息")
    @GetMapping("info")
    public R info(){
        return R.ok().data("roles", "admin")
                .data("name","admin")
                .data("avatar","https://easy-mock.com/mock/5950a2419adc231f356a6636/vue-admin/user/info?token=admin");
    }
}

3、修改前端

(1)修改前端根目录下的cofig目录中的dev.env.js配置文件
day05---(01)前端环境登录修改_第3张图片

'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"',
})

(2)修改前端根目录下的src目录下的api目录中的login.js文件
day05---(01)前端环境登录修改_第4张图片

import request from '@/utils/request'

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

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

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

(3)重启前端

登录页面报network error错误,F12查看控制台信息,可发现如下图中的跨域请求访问问题。
在这里插入图片描述
(4)解决跨域访问问题

跨域访问:请求协议、访问ip、端口号,三项有一个不一样就是跨域访问。
在登录EduloginController中添加跨域请求注解

@CrossOrigin //跨域
package com.atguigu.eduservice.controller;
import com.atguigu.commonutils.R;
import com.atguigu.eduservice.entity.EduTeacher;
import com.atguigu.eduservice.service.EduTeacherService;
import io.swagger.annotations.Api;
import io.swagger.annotations.ApiOperation;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.*;
import java.util.List;
@Api(description="模拟登陆")
@CrossOrigin //跨域
@RestController
@RequestMapping("/eduuser")
public class EduloginController {
    //{"code":20000,"data":{"token":"admin"}}
    @ApiOperation(value = "模拟登陆")
    @PostMapping("login")
    public R login(){
        return R.ok().data("token", "admin");
    }
    //{"code":20000,"data":{"roles":["admin"],"name":"admin","avatar":"https://wpimg.wallstcn.com/f778738c-e4f8-4870-b634-56703b4acafe.gif"}}
    @ApiOperation(value = "模拟获取信息")
    @GetMapping("info")
    public R info(){
        return R.ok().data("roles", "admin")
                .data("name","admin")
                .data("avatar","https://easy-mock.com/mock/5950a2419adc231f356a6636/vue-admin/user/info?token=admin");
    }
}

(5)再次重启前端,可登录进入后台管理页面

day05---(01)前端环境登录修改_第5张图片

你可能感兴趣的:(在线教育项目)