5.31串讲Spring、Vue相关问题

5.31串讲 SSM相关问题

文章目录

  • 5.31串讲 SSM相关问题
    • Spring Security(Shiro)
      • Security框架认证流程
      • Security流程图展示
    • Vue
      • 相关指令
      • 四个阶段
    • axios

Spring Security(Shiro)

Spring Security是一个基于Spring 的安全框架,为Web应用程序和服务提供了全面的安全性解决方案。它提供了诸如身份验证、授权、防止跨站点请求伪造(CSRF)、保护会话等安全特性。Spring Security可以与Spring框架完美集成,可以轻松地让您的应用程序获得最佳的安全保护。

作用:验证鉴权

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-S0MprUjh-1685533851536)(C:\Users\DELL\AppData\Roaming\Typora\typora-user-images\image-20230531185900353.png)]

学习框架需要:

  • 尊重规则
  • 善于查询官方文档

Security框架认证流程

  1. SecurityConfig配置类中配置好白名单,设置登录页面,关闭跨域攻击防御策略

    [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-pe5OR5fT-1685533851537)(C:\Users\DELL\AppData\Roaming\Typora\typora-user-images\image-20230530195031993.png)]

  2. 当客户端请求路径不在白名单中,Security框架会自动将请求重定向到登录页面

  3. login.html登录页面中向/login地址发送登录请求时,服务器中UserController里面的login方法处理该请求

  4. login方法中通过认证管理器manager启动认证,将认证结果保存在Security上下文对象中

    [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-NK5GDJgf-1685533851538)(C:\Users\DELL\AppData\Roaming\Typora\typora-user-images\image-20230530195603293.png)]

    [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-cSCrEUgA-1685533851538)(C:\Users\DELL\AppData\Roaming\Typora\typora-user-images\image-20230530200216950.png)]

  5. manager启动认证流程后会自动调用UserDetailServiceImpl里面的loadUserByUsername方法,在方法内部,调用UserMapper里面的查询方法通过用户名查询到UserVO

  6. 如果查询不到return null,此时Security框架会抛出异常代表用户名不存在,需要全局异常处理进行处理,如果查询到的密码和用户输入的密码一致,则不抛出异常

    [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-grVa2rlG-1685533851539)(C:\Users\DELL\AppData\Roaming\Typora\typora-user-images\image-20230530200815954.png)]

  7. UserController中的login方法会执行完,给客户端响应登录成功的信息,如果登录的密码错误,Security框架会抛出代表密码错误的异常,此时也需要全局异常处理类进行处理

    [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-j4wTM1pG-1685533851539)(C:\Users\DELL\AppData\Roaming\Typora\typora-user-images\image-20230530201119444.png)]

Security流程图展示

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-d8ShGL30-1685533851539)(C:\Users\DELL\AppData\Roaming\Typora\typora-user-images\image-20230531191414264.png)]

Vue

  • 导入JS

    <!--引入富文本编辑器相关样式文件-->
    <link href="https://cdn.staticfile.org/wangeditor5/5.1.23/css/style.min.css" rel="stylesheet">
    
  • 创建Vue对象

    <script>
    	let v = new Vue({
            el:"#app",	//作用域
            data:{
                //页面数据相关格式
                user: {},	//对象
                arr: [],	//数组
                username:""
            },
            methods:{
                //自定义方法
            },
            created:function(){
            	//钩子函数,共8个
            }, 
        })
    </script>
    

相关指令

文本相关指令

指令介绍
{{变量}}插值,让当前位置的文本内容和变量进行绑定
v-text=“变量”让元素的文本内容和变量进行绑定
v-html=“变量”让元素的标签内容和变量进行绑定

属性绑定和双向绑定

指令介绍
属性名=“变量”让元素的某个属性的值和变量进行绑定
v-model=“变量”双向绑定,让控件的值和变量进行双向绑定,当需要获取控件的值的时候使用

事件绑定

指令介绍
@事件名=“方法”给元素添加事件,需要将事件触发的方法声明在methods里面

v-for循环遍历指令

指令介绍
v-for=“(变量,下标) in 数组”循环遍历指令,遍历的同时会生成元素,当需要让页面的内容和数组进行绑定时使用

显示隐藏相关指令

指令介绍
v-if=“变量”让元素是否显示和变量进行绑定,true显示、false不显示(删除元素)
v-else让元素的显示状态和 v-if 取反
v-show=“变量”让元素是否显示和变量进行绑定,true显示、false不显示(隐藏元素)

四个阶段

1. 初始化=>创建组件=> `beforeCreate`   `created`
2. 挂载=>渲染显示组件=> `beforeMount`   `mouted`
3. 更新=》修改了变量=》触发视图刷新=> `beforeUpdate` `  `updated`
4. 销毁=》切换页面=》会把组件对象从内存删除=> `beforeDestory `  `destoryed`
  • 8个钩子函数,Vue的生命周期
钩子函数介绍
beforeCreate会在实例初始化完成、props解析之后、data(和computed等选项处理之前立即调用。此时不能获得DOM节点
created在这个阶段vue实例已经创建,以下内容已经设置完成:响应式数据、计算属性、方法和侦听器。然而,此时挂载阶段还未开始,因此$el属性仍不可用。仍然不能获取DOM元素。
beforeMount在组件内容被渲染到页面之前自动执行的函数,组件已经完成了其响应式状态的设置,但还没有创建DOM节点。
mounted在组件被渲染之后自动执行的函数。一般我们的异步请求都写在这里。在这个阶段,数据和DOM都已被渲染出来。
beforeUpdate数据变化的时候自动执行的函数,此时变化后的数据还未渲染到页面之上。
updated数据变化之后自动执行的函数,此时变化后的数据已经渲染到页面之上。
beforeUnmount当Vue应用被销毁时,自动执行的函数。
unmounted当Vue应用被销毁后,且dom完全销毁之后,自动执行的函数。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-W85LOLWv-1685533851540)(C:\Users\DELL\AppData\Roaming\Typora\typora-user-images\image-20230531194721963.png)]

axios

  • 导入axios
<!--引入Axios-->
<script src="https://cdn.bootcss.com/axios/0.18.0/axios.min.js"></script>
  • axios的异步请求
axios.get("url").then(function(response){
});
axios.post("url").then(function(response){
});

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/26502.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

软考A计划-电子商务设计师-电子商务系统规划

点击跳转专栏>Unity3D特效百例点击跳转专栏>案例项目实战源码点击跳转专栏>游戏脚本-辅助自动化点击跳转专栏>Android控件全解手册点击跳转专栏>Scratch编程案例 &#x1f449;关于作者 专注于Android/Unity和各种游戏开发技巧&#xff0c;以及各种资源分享&am…

ChatGPT浪潮席卷,维智科技以时空AI赋能数实融合的未来城市

作者 | 伍杏玲 出品 | CSDN 每个时代都有新的技术浪潮&#xff0c;但在短短两年时间里见证两项颠覆全球的技术发展&#xff0c;实在出人意料之外&#xff1a;2021年以来&#xff0c;元宇宙成为互联网产业新风口&#xff0c;今年ChatGPT成为IT圈“顶流”&#xff0c;这两者为地…

数据在内存中的存储

目录 简介数据在内存中的存储方式 整形 有符号整形(signed) 无符号整形(unsigned) 原码、反码、补码 大端小端 整形提升 数据截断 浮点数在内存中的存储 S、E、M S M E double和float的存储模型 简介数据在内存中的存储方式 在讨论数据在内存中的存储方式之前&am…

类脑计算讲解

当前&#xff0c;人工智能的发展有两个主要路径&#xff0c;一个是沿计算机科学发展而来的深度学习途径&#xff0c;另一个是沿着模仿人脑发展而来的类脑计算途径。 类脑计算途径 这个方向是以模拟人脑神经网络计算为基础而发展出的一种新型芯片&#xff0c;通过模拟神经元和…

在线教育机构的视频如何做防下载和防盗录?

在线教育平台付费课程、企业内训的培训课程&#xff0c;这类视频课程内容是如何做防下载和防盗录的&#xff1f; 1.AI隐形溯源水印 这个功能能够将水印隐藏在视频中&#xff0c;不会影响观看体验&#xff0c;但却能够帮助企业很好的视频版权保护。更重要的是&#xff0c;对于盗…

【优化调度】基于改进遗传算法的公交车调度排班优化的研究与实现(Matlab代码实现)

目录 1 概述 2 运行结果 3 参考文献 4 Matlab代码 1 概述 本文对当前公交企业调度系统进行了分析&#xff0c;建立了公交排班的数学模型。本文基于数据挖掘分析的结果上&#xff0c;使用截面客流量数据对模型进行约束&#xff0c;得出了公交客流出行的空间分布规律。再以…

ShareX_一款好用的截图工具安装- Window

择心】向大家介绍and安装ShareX ShareX 免费、开源、轻量多区域截图无缝处理截图屏幕录制、文件共享各种实用工具&#xff08;如拾色器&#xff0c;屏幕拾色器&#xff0c;尺子&#xff0c;图像编辑器&#xff0c;图像合并&#xff0c;图像分割器&#xff0c;生成图像缩略图&am…

三波混频下的相位失配原理

原理推导 在四波混频情况下&#xff0c;实现零相位失配是一件很困难的事情。因为在四波混频中&#xff0c;相位调制和增益都依赖于相同的参数&#xff0c;即克尔非线性 γ \gamma γ。这个问题可以用嵌入在传输线上的辅助共振元件的复杂色散工程来部分解决。 但是在三波混频中…

离散数学_十章-图 ( 5 ):连通性 - 上

&#x1f4f7;10.5 图的连通性 1. 通路1.1 通路1.2 回路1.3 其他术语 2. 无向图的连通性2.1 无向图的连通与不连通2.2 定理2.3 连通分支 3. 图是如何连通的3.1 割点&#xff08; 关节点&#xff09;3.2 割边&#xff08; 桥&#xff09;3.3 不可分割图3.4 &#x1d458;(&#…

华为OD机试真题 Java 实现【跳格子2】【2023 B卷 100分】,附详细解题思路

一、题目描述 小明和朋友玩跳格子游戏&#xff0c;有n个连续格子组成的圆圈&#xff0c;每个格子有不同的分数&#xff0c;小朋友可以选择从任意格子起跳&#xff0c;但是不能跳连续的格子&#xff0c;不能回头跳&#xff0c;也不能超过一圈。 给定一代表每个格子得分的非负整…

3.9 流水作业调度问题

博主简介&#xff1a;一个爱打游戏的计算机专业学生博主主页&#xff1a; 夏驰和徐策所属专栏&#xff1a;算法设计与分析 1.我对流水调度问题的理解 流水作业调度问题是动态规划中的一个经典问题&#xff0c;它涉及将一系列作业分配给多个工作站以最小化总完成时间。该问题的…

练习:有限状态机测试

练习&#xff1a;有限状态机测试 1 FSM 示例 在练习中&#xff0c;我们将使用两个 FSM。 两者都有输入字母 X {a, b} 和输出字母 Y {0,1}。 第一个 FSM 将称为 M1 并由以下有向图表示。 对于上面给出的每个 FSM Mi&#xff1a; 1.确定以下值&#xff0c;显示您的工作。 (a…

内存对齐原则

struct &#xff08;1&#xff09;结构体第一个数据成员放在offset为0的地方&#xff0c;后面每个成员相对于结构体首地址的偏移量&#xff08;offset&#xff09;都是成员大小&#xff08;该变量类型所占字节&#xff09;的整数倍&#xff0c;如有需要编译器会在成员之间加上填…

非煤矿山电子封条系统算法方案 opencv

非煤矿山电子封条系统算法部署方案是基于pythonopencv网络模型Ai视频图像识别技术&#xff0c;非煤矿山电子封条系统算法部署方案对出入井人员、人员变化及非煤矿山生产作业状态等状况&#xff0c;及时发现处理异常动态将自动发出警报。OpenCV的全称是Open Source Computer Vis…

研报精选230528

目录 【行业230528华金证券】传媒行业深度研究&#xff1a;AIGC最新应用与场景研究 【行业230528国海证券】电动船舶行业深度报告&#xff1a;绿色智能大势已至&#xff0c;驶向电化百亿蓝海 【行业230528华西证券】纺织服装行业周报&#xff1a;5月增长放缓无碍中长期出清逻辑…

Vue.js 中的过滤器和计算属性

Vue.js 中的过滤器和计算属性 Vue.js 是一款流行的 JavaScript 框架&#xff0c;它提供了一种简单而灵活的方式来构建交互式 Web 应用程序。在 Vue.js 中&#xff0c;过滤器和计算属性是两个常用的概念。它们可以帮助开发者更方便地处理数据&#xff0c;提高代码的可读性和可维…

【Linux】进程状态与进程优先级

目录 一、什么是进程二、进程状态1、Linux下的进程状态2、两个特殊进程1、僵尸进程2、孤儿进程 三、进程优先级 一、什么是进程 进程就是程序的一个执行实例&#xff0c;也就是正在执行的程序&#xff0c;然后由操作系统帮助我们将程序转化为进程&#xff0c;完成特定的任务。…

山区特殊场景的倾斜摄影三维模型数据出现几何坐标偏差原因,如何修正这些坐标偏差?

山区特殊场景的倾斜摄影三维模型数据出现几何坐标偏差原因&#xff0c;如何修正这些坐标偏差&#xff1f; 山区倾斜摄影三维模型数据出现几何坐标偏差的原因可能有很多&#xff0c;其中一些常见的原因包括不同地图投影系统之间的转换问题、GPS定位误差、测量设备精度问题、摄影…

AI+边缘,是如何加速制造转型的?

在现代工业中&#xff0c;提起智慧工厂、智能制造有一个经久不衰的话题&#xff0c;那便是IT和OT的融合。 IT&#xff08;Information Technology&#xff09;部门专注于处理数据&#xff0c;整个业务系统需要它来维持运营。而OT&#xff08;Operation Technology&#xff09;…

实战Windows Chrome 0day

遇到挑战跟挫折的时侯&#xff0c;我有一个坚定的信念&#xff0c;我可以断气&#xff0c;但绝不能放弃 漏洞复现 实战Windows Chrome 0day需要满足的条件 第一点是关闭沙箱环境 第一种方式 设置Chrome浏览器的快捷方式 在快捷方式上增加 -no-sandbox 第二种方式 命令行命令…