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

2023-02-23 173

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

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

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

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

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

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

二、创建两个方法

先在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");
    }
}