谷粒学苑项目实战（八）：实现登录功能

        前面我们已经搭建了前端环境，运行起来后是可以看见登录框的，但是由于后端没有写东西，不能成功登录，今天我们就完成这个功能。

一、修改登录地址到本地（模拟登录）

        前篇文章已经讲过，传送门：

        谷粒学苑项目实战（七）：搭建前端页面

二、创建两个方法 

        先在controller包下创建登录的控制类 EduLoginController.java。

@RestController
@RequestMapping("/eduservice/user")
public class EduLoginController {

}

 

        进行登录需要调用两个方法：login登录操作方法 和 info登录之后获取用户信息的方法

        1、 login方法  

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

        这个方法和 vue-admin-template-master\src\api\login.js 中的 login 方法相对应，获取该方法给出的token值。

        2、info方法

@GetMapping("/info")
    public R info(){
        return R.ok().data("roles", "[admin]").data("name", "admin").data("avatar", "https://wpimg.wallstcn.com/f778738c-e4f8-4870-b634-56703b4acafe.gif");
    }

         这个方法和 vue-admin-template-master\src\api\login.js 中的 info 方法相对应，获取该方法给出的roles、name、avatar值。

 

三、前端的接口路径和请求方式需要和后端保持一致 

        1、login方法 

 

 

 

        2、info方法 

 

 

 

 

四、运行测试 

        启动前端和后端，点击登录后，发现报错，报错原因：跨域问题

        前端使用的端口为9528，后端使用的端口为8001，所以并不能直接整合，这就需要用到一个注解：@CrossOrigin

        将它加到controller类上：

        

        再次运行测试，成功登录。

五、后端部分完整代码 

@RestController
@RequestMapping("/eduservice/user")
@CrossOrigin    //解决跨域问题
public class EduLoginController {

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

    @GetMapping("/info")
    public R info(){
        return R.ok().data("roles", "[admin]").data("name", "admin").data("avatar", "https://wpimg.wallstcn.com/f778738c-e4f8-4870-b634-56703b4acafe.gif");
    }
}