angular图片传到后台_告诉你,SpringBoot+Angular有多牛逼!
点击上方[全栈开发者社区]→右上角[...]→[设为星标⭐]
零
本文基于《SpringBoot+Angular入门实例教程》第5.1节的内容理解并简化而来。本文的目的浅析前后台分离的普通登录数据流。
一、基本问题
简图如下:
数据流
SpringBoot+Angular的数据流,请参考我的上一篇SpringBoot+Angular前后端分离的数据流浅析。
简而言之:C层负责数据转发, M层(Service服务层)负责具体的数据处理和发出请求, 前台的V层是页面模板,负责组件渲染 后台的仓库层负责和数据库直接对话 前台的实体、后台的实体和数据库的字段一一对应。
前后台的分工?
在这个登录功能中,后台唯一的作用就是只做数据验证。当用户登录时,前台向后台发起用户名、密码验证的请求,如果后台验证成功,就返回真,否则返回假。当前台接收到返回值后,再判断用户是否登录成功。
登录状态保存在哪?
一开始,可以保存在app组件中,然后V层使用ngIf直接获取C层变量就可以获取登录状态,但是依赖登录状态的
登录状态储存在前台的服务层的一个变量中,所有的组件在渲染前都去找这个登录服务要数据,如果用户处于登录状态,就正常跳转,否则跳转到登录页。
登录和注销动作
初始化时,登录状态为假。登录时,如果后台返回值是真,就把登录状态变量改为真,否则不变。注销是,只需把登录状态改为假,即可。
二、详解登录注销过程
登录
- 用户提交Form表单,触发C层onSubmit()方法
- C层调用服务的Login()方法
- teacher服务向后台发起Http请求,传入用户名和密码
- 后台C层调用M层Login方法,传入用户名密码
- 后台M层调用仓库findByUsername方法,传入Username
- 后台仓库使用SQL从数据库中去除对象,并返回给M层
- 后台M层调用ValidatePassword把仓库返回的用户密码和C层传入的密码比较,如果一致就返回True
- 后台C层把布尔值返回给前台
- 前台teacher服务层把接受的布尔值返回给C层
- 前台C层判断返回的数据是否为真,若为真,就调用M层setLogin方法,把登录状态修改为1
- 前台C层返回,跳转对应的界面
跳转
- 浏览器输入Url触发方法,生成组件
- C层向Teacher服务订阅登录组件
- C层获取登录状态isLogin$并赋值给本类的islogin
- V层渲染页面,根据C的登录状态来决定显示那些内容,如果未登录就显示登录页
- 把页面返回给浏览器
注销
- 浏览器触发导航栏C层Logout方法
- 导航栏调用M层setIsLogin(flase),把登录状态改成0
- M层返回
- 把登录页返回给浏览器
三、合并图片
四、存在的问题
当前的所有验证都只是在前台,后台没有任何验证,用户无需认证便可以通过浏览器或是其它的REST工具对后台进行肆意操作。一个形同虚设的登录功能只是挡住了一些正常的用户,但对一些非法用户的入侵却毫无防范。甚至于后台根本就没有能力判断是谁正在进行数据请求,权限控制当然也就无从谈起。本文的图片只是解释了教程中的逻辑,使教程更容易理解,所以更好的方式还是使用安全性更高的token令牌机制。
教程源码:https://github.com/mengyunzhi/spring-boot-and-angular-guild/releases/tag/step5.1.6
觉得本文对你有帮助?请分享给更多人
关注「全栈开发者社区」加星标,提升全栈技能
本公众号会不定期给大家发福利,包括送书、学习资源等,敬请期待吧!
如果感觉
推送内容不错,不妨右下角点个在看转发朋友圈或收藏,感谢支持。
好文章,我在看❤️
angular图片传到后台_告诉你,SpringBoot+Angular有多牛逼!相关推荐
- angular 指定components的路径_如何手动启动 Angular 程序
原文链接: How to manually bootstrap an Angular application blog.angularindepth.com Angular 官方文档写到,为了启动 ...
- python中脚本是指什么_你用Python写过最牛逼的程序/脚本是什么?
有网友在 Quora 上提问,「你用 Python 写过最牛逼的程序/脚本是什么?」.本文摘编了 3 个国外程序员的多个小项目,含代码. Manoj Memana Jayakumar, 3000+ 顶 ...
- python能写什么脚本_你用 Python 写过哪些牛逼的程序/脚本?
原标题:你用 Python 写过哪些牛逼的程序/脚本? [导读]:有网友在 Quora 上提问,「你用 Python 写过最牛逼的程序/脚本是什么?」.本文摘编了 3 个国外程序员的多个小项目,含代码 ...
- vue商城源码_一个标星 5.2k+ 的牛逼开源商城系统
关注上方"终端研发部",选择星标, 关键时间,第一时间送达! 来源:GitHub精选 大家好,我是于小二.今天推荐的这个项目是「newbee-mall」,这个名字乍一看我以为叫牛逼 ...
- jquery数组怎么传给后台_我是如何让公司后台管理系统焕然一新的(下)封装组件...
作者:yeyan1996 https://juejin.im/post/5c7b4761f265da2db2795036 写在前面 上篇在这里 马上到了金三银四的时间,很多公司开启了今年第一轮招聘的热 ...
- 从一个程序员的角度告诉你:12306有多牛逼?
每到节假日期间,一二线城市返乡.外出游玩的人们几乎都面临着一个问题:抢火车票! 12306 抢票,极限并发带来的思考 虽然现在大多数情况下都能订到票,但是放票瞬间即无票的场景,相信大家都深有体会. 尤 ...
- 扫地机器人朋友圈文案_装修建材行业如何写一条牛逼的朋友圈文案?
今天我来分享如何利用知乎这个平台找装修干货,然后做一条优秀的朋友圈文案. "你的家装修成什么样子了?有哪些最实用美观的设计或先见之明?" 这个是知乎装修话题上面的一个提问:你的家装 ...
- 不收费的数据恢复软件_大杀器一款超牛逼的数据恢复软件,能够帮你找回已删除的各种文件...
更新凭缘分,高产靠天命. hello,大家好,我是机客. 很久之前就有机友写过委托,希望机客能够推荐一款能够恢复手机上已删除图片的数据恢复软件.当时我并没有完成这项委托,其原因在于目前绝大多数的数据恢 ...
- es 根据_id查询_京东把 Elasticsearch 用得真牛逼!日均5亿订单查询完美解决
来源:京东技术(ID: jingdongjishu) 京东到家订单中心系统业务中,无论是外部商家的订单生产,或是内部上下游系统的依赖,订单查询的调用量都非常大,造成了订单数据读多写少的情况. 我们把订 ...
最新文章
- 中国人长期“霸榜”GitHub,国外开发者发文控诉
- Android入门(十七)Android多线程
- 一道笔试题--求二进制数1的个数
- 上传本地文件到gitlab 项目里的某个文件夹
- require.context实现前端工程自动化
- 缓存优化过程中的一些思考
- 蓝天准系统P750的介绍与开箱
- 深度学习(花书)+动手学深度学习(李沐)学习资料整理
- APP推广关键词的怎么选词?
- 2018经济寒冬,2019你凭什么活下来?
- 雷霆战机游戏项目(JAVA)
- OBS(Open Broadcaster Software)桌面视频直播软件/直播推流工具使用方法指南
- 使用python读写文件_使用Python读写文件(指南)
- QT 删除QString空白字符
- 免费开源FTP工具:Cyberduck for Mac
- jquery canvas网页画布画图
- github支持php_github怎么使用
- 用python将中文/汉字写入文本文档或者从文本文档读取中文信息
- BERT微调做中文文本分类
- 关于旋转矩阵R,平移向量t和变换矩阵T的关系