谷粒学苑项目实战(八):实现登录功能

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

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


一、修改登录地址到本地(模拟登录)



前篇文章已经讲过,传送门:


谷粒学苑项目实战(七):搭建前端页面


二、创建两个方法



先在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方法


ee332338d91b445284b2b62bea4eb253.png62d92e1d12a147938f6cd98d94c22163.png


2、info方法


fd56558c29b54705990301a8c718b721.png019a46833e044009bfc662167fd75257.png


四、运行测试


     

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

     

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


将它加到controller类上:


79be5966ec7a4cb79a4a62174943b270.png


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


五、后端部分完整代码



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


相关文章
|
2月前
|
存储 安全 Java
学成在线笔记+踩坑(12)——用户认证
连接用户中心数据库、账号密码认证、验证码认证
学成在线笔记+踩坑(12)——用户认证
|
6月前
|
前端开发 NoSQL Java
谷粒学苑笔记整理
谷粒学苑笔记整理
200 0
|
2月前
|
存储 缓存 Java
谷粒商城笔记+踩坑汇总篇
环境的搭建、商品服务-三级分类、品牌服务、阿里云云存储+JSR303数字校验+统一异常处理、spu+sku、分页拦截器、商品服务、仓库服务、Nginx反向代理,thymeleaf+动态展示三级分类、缓存与分布式锁,Redisson+缓存数据一致性、ElasticSearch检索服务、异步和线程池、商品详情搭建+异步编排、认证服务、阿里云短信+验证码防刷+BCrypt加密、用户名密码登录+微博社交登录+SpringSession+xxl-sso单点登录、购物车、订单服务、幂等性、库存自动解锁。MQ延迟队列
谷粒商城笔记+踩坑汇总篇
|
小程序 测试技术 数据库
0022Java程序设计-ssm微信小程序社区互助平台
0022Java程序设计-ssm微信小程序社区互助平台
51 0
|
前端开发 JavaScript
谷粒学苑项目实战(七):搭建前端页面
谷粒学苑项目实战(七):搭建前端页面
177 0
谷粒学苑项目实战(七):搭建前端页面
|
Java 测试技术 数据库
谷粒学苑项目实战(二):讲师管理模块搭建(上)
谷粒学苑项目实战(二):讲师管理模块搭建
227 0
谷粒学苑项目实战(二):讲师管理模块搭建(上)
|
JSON 数据库 数据格式
谷粒学苑项目实战(二):讲师管理模块搭建(下)
谷粒学苑项目实战(二):讲师管理模块搭建
155 0
谷粒学苑项目实战(二):讲师管理模块搭建(下)
|
SQL Java 程序员
谷粒学苑项目实战(十三):课程管理模块搭建
谷粒学苑项目实战(十三):课程管理模块搭建
176 0
谷粒学苑项目实战(十三):课程管理模块搭建
|
Java 数据库
谷粒学苑项目实战(一):项目介绍和环境搭建
在线教育顾名思义,是以网络为介质的教学方式,通过网络,学员与教师即使相隔万里也可以开展教学 活动;此外,借助网络课件,学员还可以随时随地进行学习,真正打破了时间和空间的限制,对于工作 繁忙,学习时间不固定的职场人而言网络远程教育是最方便不过的学习方式。
1370 0
谷粒学苑项目实战(一):项目介绍和环境搭建
|
JSON 前端开发 easyexcel
谷粒学苑项目实战(十二):课程分类管理模块搭建
谷粒学苑项目实战(十二):课程分类管理模块搭建
191 0
谷粒学苑项目实战(十二):课程分类管理模块搭建