学校校园网站建设/品牌广告

学校校园网站建设,品牌广告,工业产品设计手绘教程,平台搭建app开发前言 准备工作 数据库表分为实体表和关系表 第一，建数据库表 然后导入前端页面 创建公共模块 就是统一返回值，异常那些东西 自己造一个自定义异常 普通类 mapper 获取全部博客 我们只需要返回id，title，content，us…

前言

准备工作

数据库表分为实体表和关系表

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

第一，建数据库表

在这里插入图片描述
然后导入前端页面
在这里插入图片描述

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

创建公共模块

就是统一返回值，异常那些东西

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

在这里插入图片描述
自己造一个自定义异常

在这里插入图片描述

普通类

在这里插入图片描述

在这里插入图片描述

mapper

在这里插入图片描述
在这里插入图片描述

获取全部博客

我们只需要返回id，title，content，userId，updateTime就可以了

在这里插入图片描述
所以我们直接定义一个返回的类
在这里插入图片描述
在这里插入图片描述

在这里插入图片描述
在这里插入图片描述
但是这个时间展示不太好看
我们可以设置一下，就是改一下get方法

在这里插入图片描述

这个是方法一，设置get方法，但是注意的是，这个get方法只对date类型的有效，对这个类型没有效果
方法二就是用注解

在这里插入图片描述
在这里插入图片描述
如果是date类型的话，就要设置时区，就是上面的那个注解

前端

在这里插入图片描述
在这里插入图片描述
这样就成功了

获取博客详情

博客详情我们还是和上面的接口返回一样的类

在这里插入图片描述
在这里插入图片描述

如果要实现全部列表展示部分数据，详情列表展示全部数据，可以在get方法那里做文章，那么这样的话，两个接口的返回类型就不一样了，因为get方法都不一样

在这里插入图片描述
在这里插入图片描述

但是我们这样写还没有判断查出来是否为null

我们判断是否为null也可以用注解

在这里插入图片描述
@NotNull表示不能为null
@NotEmpty表示不能null，且不为空
@NotBlank表示不为空

在这里插入图片描述
表示id不能为null
如果参数id为null，就会报这个异常HandlerMethodValidationException

可以捕获一下

在这里插入图片描述
在这里插入图片描述

前端

在这里插入图片描述

在这里插入图片描述
这样就OK了

Jwt令牌

在这里插入图片描述
如果我们使用cookie和session的话
这个负载均衡的作用就是根据网速配置那些东西去让客户端去选择用哪个服务器，这些服务器都是部署的同一个项目
如果用session1的话，如果下一次请求负载均衡换了服务器的话，session就失效了，就找不到了，因为不同的服务器有不同的sessionId
所以在多机多集群的部署下，session就失效了

我们的处理方法之一就是设置一个公共的服务器，专门去存储session这些东西，比如redis，session都存储在这个redis里面，而不是对应的服务器里面

方法二就是生成Jwt令牌
用户第一次访问服务器的时候，就会带着用户信息去访问
然后服务器就会给客户端返回一个令牌，这下有了这个令牌，就是token，就可以携带令牌token去访问不同的服务器了

令牌的有点就是解决了集群环境的认证问题
但是我们需要自己去实现令牌，令牌传递，令牌校验

Jwt官网

在这里插入图片描述
这个就是token，这个不是加密的

第一个是header，声明一个头，说明算法是什么等等
第二个是载荷，声明我们的信息是什么
第三个是签名，
现在开始使用Jwt令牌
先引入依赖

在这里插入图片描述
在这里插入图片描述

在这里插入图片描述
以点来进行分割的
复制到官网去

在这里插入图片描述
上面这个没有签名
现在开始设置签名

签名就是一个key，所以我们还要定义一个key

在这里插入图片描述
在这里插入图片描述

但是报错了，这个是因为我们的签名太短了

在这里插入图片描述

在这里插入图片描述
在这里插入图片描述
但是我们的这个签名是非法的

我们专门来定义一个方法去生成key

在这里插入图片描述
这个就是生成的签名

在这里插入图片描述
现在开始校验token
在这里插入图片描述

在这里插入图片描述
在这里插入图片描述
我们在重新生成一个token

在这里插入图片描述

在这里插入图片描述
在这里插入图片描述
我们来把签名改一下

在这里插入图片描述

用户输入账户密码，生成token，返回给前端，前端存储起来，每次访问都要携带token，每次访问拦截器都要去判断token，校验token

登录

登录的请求和响应数据都可以设置为单独的类
请求就是用户名和密码
响应就是userId，和token

在这里插入图片描述
在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

这样就成功了

在这里插入图片描述
传入的参数是类的话就用注解Validated
在这里插入图片描述

然后类里面的成员变量就用具体的限制注解

如果传入的参数直接就是基本类型，那么就可以用具体的注解限制了

在这里插入图片描述
在完善一下条件的判断

前端

在这里插入图片描述
我们在前端把token存储在localStorage这里，这样就会一直存着了
在这里插入图片描述
在这里插入图片描述

登录成功这样就存储好了

而且这个不会随着服务器的重启而清空
不会改变
只会随着登录信息的改变而改变

我们这就把token放在header里面了，这样的话，后端只需要用request就可以得到token了
而且每次请求都会携带token

拦截器

在这里插入图片描述
这样我们的拦截器就写成功了
现在开始配置拦截器
就是配置路径那些

在这里插入图片描述
这样我们就成功了

但是值得注意的就是，当我们用postman测试的时候，就要手动添加对应的header才可以测试成功，手动添加user_token
因为poatman没有前端添加header的操作

还有一个点就是localStorage并不是header，localStorage是存储在浏览器中的，长期长达24h
而header是每次请求发出的请求体
所以每次发生请求
每次ajax的时候，都要把localStorage中的token添加到header中
每次ajax，这个我们就要用新的知识了
在这里插入图片描述

这串代码的意思就是每次ajax都把token设置到header中
但是你把这串代码放在一个html中，那么这串代码就只在这个html中生效
所以我们把这个代码放在一个js文件中
然后每个html页面都要引入这个页面

<script src="js/common.js"></script>

在这里插入图片描述
所以这里也要改一下

所以每次请求都会ajax，都会带入token
都会去拦截器中判断，成功的话就正常controller
如果token校验失败的话
就会返回状态码401
意思就是ajax失败了
所以每个ajax失败的请求都要判断一下
我们这里重点判断401状态码
每次ajax失败
所以我们还是写在一个公共的js文件中

在这里插入图片描述
我们去前端页面测试的时候，直接把localStorage删完就可以了

然后就成功了

博客列表页与博客详情页获取个人信息

在这里插入图片描述
定义一个返回的类

在这里插入图片描述
在这里插入图片描述
注意postman测试的时候，一定要手动添加header

在这里插入图片描述

这样就OK了
在这里插入图片描述

在加上一些限制

前端

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

或者这样也可以

由于博客详情页面也要定义getUserInfo这个方法，而且只有url不同
所以我们把这个方法也放在一个公共的js文件中

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

在这里插入图片描述
这样就可以了

注销

右上角有一个注销按钮
注销按钮就是要退出登录
而且每个页面除了登录页面，都有这个功能
所以我们还是写在common.js中

退出登录就是在localstorage中删除token就可以了

在这里插入图片描述

这样就可以了没有后端的操作

发布博客

还是要添加一个请求类

在这里插入图片描述
我们这个设计有点缺陷
就是博客列表那里会显示不是自己的博客，但是没有关系
我们自己写的博客，作者还是自己的

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述
这个可以不用设置，因为有默认值
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

完善一下

前端

在这里插入图片描述这样写是不可以的
因为makedown有mk的获取方式

markdown

这个就是markdown网站

在这里插入图片描述
这个就是对应的组件

在这里插入图片描述

这个是对markdown组件的样式修改

参数对应组件的id即editor
在这里插入图片描述
我们这样写就可以了

在这里插入图片描述
在这里插入图片描述

在这里插入图片描述
但是博客列表那里显示正文的时候，显示了井号，我们可以不用显示的

所以我们可以把博客列表和博客详情返回的类分别处理一下

而且博客列表的内容可以不用显示完全

在这里插入图片描述

在这里插入图片描述

这样就好看多了
还有一个问题就是博客详情页的时候要用markdown的格式来展示

这个就是前端的问题了
用markdown来展示
这个可以去看官网来展示

在这里插入图片描述
我们这样写
但是这样写是id选择器
所以还要增加一个detail的id

在这里插入图片描述

在这里插入图片描述
所以前端这样写就可以了

在这里插入图片描述

样子好多了
但是markdown自己具有样式
我们还要搞一下这个样式

在这里插入图片描述
我们自己去设置了背景
就不会去用markdown的样式了
这个背景设置的是透明状态
那么就默认会用父组件的背景

在这里插入图片描述
这样就正确了

编辑和删除

显示

因为我们登录会显示所有的博客
不管是不是自己写的，都会显示
所以当我们查看不是自己的博客的时候
就不要显示删除和编辑按钮了

怎么判断呢
就在博客详情页面
用返回的数据中的userId与登录的useId进行判断就可以了
不相等的话，就不显示了

所以要求返回的数据中要有userId

在这里插入图片描述
然后前端就可以判断了

在这里插入图片描述

OK了
记得还要把原来的按钮删掉

在这里插入图片描述

成功了

后端

还是要创建新的类

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

前端

在这里插入图片描述

这个没有问题

在这里插入图片描述

在这里插入图片描述

这样就OK了

对了
我们的删除采用逻辑删除

所以改一下

在这里插入图片描述
这样就OK了

在这里插入图片描述

在这里插入图片描述

还有一个问题就是有些时候不会显示完全

是因为我们给contenet的赋值不规范

给markdown的赋值，不能这么草率

在这里插入图片描述

这样赋值才规范，就不会出现有些时候显示，有些时候不显示的问题了

加密加盐

在这里插入图片描述
对称：就是加密与解密的密钥是一样的
非对称：加密与解密的密钥是不一样的

公钥是所有人都可以看到，锁
私钥就是我们可以看到，钥匙

摘要算法：CRC算法，把一段字符串变成固定长度的字符串

在这里插入图片描述
MD5就是摘要算法

在这里插入图片描述
摘要算法是无法解密的
其他两个可以解密

我们用MD5加密
非对称效率比较低

在这里插入图片描述

MD5加密，如果字符串很复杂就无法解密了
如果密码简单，就可以很容易解密了

所以要让密码变的复杂
所以可以加上随机的字符串
这个就是盐值
在这里插入图片描述
在这里插入图片描述

代码测试

我们用的MD5是spring提供的

在这里插入图片描述

在这里插入图片描述
我们可以去解密软件去解密一下
在这里插入图片描述
使用同样的字符串，加密出来的字符串都是一样的

在这里插入图片描述
在这里插入图片描述
总共长度是32位，这个就是盐值的长度
一般不会重复的
基本不会重复
极低的概率会重复

这个是根据用户的mac地址去生成的uuid

明文与盐值直接拼接就可以了

在这里插入图片描述

在这里插入图片描述
看得出来最后加出来的还是32位
这个是无法解密的
我们只需要存储最后的密码和盐值就可以了

注意盐值和最后的密文都是16进制的32位的

工具类

我们现在写一个工具类
分别代表加密和解密

在这里插入图片描述
这样我们就成功了
数据库存储的就是盐和密文

后端

我们没有注册操作
所以直接加密去修改数据库

在这里插入图片描述
在这里插入图片描述
然后就是修改后端登录代码
只需要校验就可以了

在这里插入图片描述
登录接口主要是修改这里
就是判断密码的那里

在这里插入图片描述
我输入的123456就成功了

在这里插入图片描述

这样就失败了，问题主要是后端数据库存储的密码没有64位
在改一下

在这里插入图片描述
这里密码错误会抛出异常，然后被全局异常处理
这个ajax请求是失败的
我们要处理一下前端
在这里插入图片描述
在这里插入图片描述

注意我们可以把这个我们自定义异常的状态码取消掉
这样就是正常返回给前端了
前端就会sucess了，不会err了
因为如果设置为其他状态码
前端就会err
然后res可能就不是简简单单的Result了

总结

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

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

20250304学习记录

20250304学习记录

第一部分&#xff0c;先来了解一下各种论文期刊吧&#xff0c;毕竟也是这把岁数了&#xff0c;还什么都不懂呢 国际期刊&#xff1a; EI收集的主要有两种&#xff0c; JA&#xff1a;EI源刊 CA&#xff1a;EI会议 CPCI也叫 ISTP 常说的SCI分区是指&#xff0c;JCR的一区、…
阅读更多...
2024 年 MySQL 8.0.40 安装配置、Workbench汉化教程最简易（保姆级）

2024 年 MySQL 8.0.40 安装配置、Workbench汉化教程最简易（保姆级）

首先到官网上下载安装包&#xff1a;http://www.mysql.com 点击下载&#xff0c;拉到最下面&#xff0c;点击社区版下载 windows用户点击下面适用于windows的安装程序 点击下载&#xff0c;网络条件好可以点第一个&#xff0c;怕下着下着断了点第二个离线下载 双击下载好的安装…
阅读更多...
汽车智能钥匙中PKE低频天线的作用

汽车智能钥匙中PKE低频天线的作用

PKE&#xff08;Passive Keyless Entry&#xff09;即被动式无钥匙进入系统&#xff0c;汽车智能钥匙中PKE低频天线在现代汽车的智能功能和安全保障方面发挥着关键作用&#xff0c;以下是其具体作用&#xff1a; 信号交互与身份认证 低频信号接收&#xff1a;当车主靠近车辆时…
阅读更多...
uiautomatorviewer定位元素报Unexpected ... UI hierarchy

uiautomatorviewer定位元素报Unexpected ... UI hierarchy

发现问题 借鉴博客 Unexpected error while obtaining UI hierarchy android app UI自动化-元素定位辅助工具 Unexpected error while obtaining UI hierarchy&#xff1a;使用uiautomatorviewer定位元素报错 最近在做安卓自动化,安卓自动化主要工作之一就是获取UI树 app端获…
阅读更多...
Halcon 车牌识别-超精细教程

Halcon 车牌识别-超精细教程

车牌示例 流程: 读取图片转灰度图阈值分割,找车牌内容将车牌位置设置变换区域形状找到中心点和弧度利用仿射变换,斜切车牌旋转转正,把车牌抠出来利用形态学操作拼接车牌号数字训练ocr开始识别中文车牌 本文章用到的算子(解析) Halcon 算子-承接车牌识别-CSDN博客 rgb1_to_gray…
阅读更多...
详细分析KeepAlive的基本知识 并缓存路由（附Demo）

详细分析KeepAlive的基本知识 并缓存路由（附Demo）

目录 前言1. 基本知识2. Demo2.1 基本2.2 拓展2.3 终极 3. 实战 前言 &#x1f91f; 找工作&#xff0c;来万码优才&#xff1a;&#x1f449; #小程序://万码优才/r6rqmzDaXpYkJZF 基本知识推荐阅读&#xff1a;KeepAlive知识点 从实战中学习&#xff0c;源自实战中vue路由的…
阅读更多...
记一次误禁用USB导致键盘鼠标失灵的修复过程

记一次误禁用USB导致键盘鼠标失灵的修复过程

背景说明 在电脑上插入了一个USB hub&#xff0c;然后弹窗提示&#xff1a;“集线器端口上出现电涌”&#xff0c;点开让选择“重置”或者“关闭”&#xff0c;不小心点了关闭&#xff0c;结果这个usb口就被关了&#xff0c;再插任何东西都没反应&#xff0c;找了很多办法都恢…
阅读更多...
小米手机如何录制屏幕？手机、电脑屏幕录制方法分享

小米手机如何录制屏幕？手机、电脑屏幕录制方法分享

大家最近有没有遇到想记录手机屏幕操作的情况&#xff1f; 比如精彩的游戏瞬间、有趣的视频教程&#xff0c;或者需要录制屏幕来制作演示材料。小米手机在这方面可是个好帮手&#xff0c;今天就来给你好好唠唠&#xff0c;小米手机如何录制屏幕&#xff0c;以及后续如何处理这…
阅读更多...
chrome Vue.js devtools 提示不支持该扩展组件，移除

chrome Vue.js devtools 提示不支持该扩展组件，移除

可能是版本不兼容&#xff0c;可以重新安装&#xff0c;推荐网址极简插件官网_Chrome插件下载_Chrome浏览器应用商店 直接搜索vue&#xff0c;下载旧版&#xff0c;vue2、vue3都支持&#xff0c;上面那个最新版本试了下&#xff0c;vue2的肯定是不能用
阅读更多...
【RabbitMQ】RabbitMQ的核心概念与七大工作模式

【RabbitMQ】RabbitMQ的核心概念与七大工作模式

&#x1f525;个人主页&#xff1a; 中草药 &#x1f525;专栏&#xff1a;【中间件】企业级中间件剖析 在现代分布式系统和微服务架构中&#xff0c;消息队列&#xff08;Message Queue&#xff09; 是解决服务间通信、系统解耦和流量削峰的关键技术之一。而 RabbitMQ 作为一…
阅读更多...
SQLAlchemy系列教程：理解SQLAlchemy元数据

SQLAlchemy系列教程：理解SQLAlchemy元数据

SQLAlchemy是Python开发人员的强大ORM工具。SQLAlchemy中的元数据是对象-关系映射配置的集合&#xff0c;允许开发人员无缝地定义和使用数据库模式。 使用元数据 SQLAlchemy中的元数据充当各种数据库描述符&#xff08;如表、列和索引&#xff09;的容器。这使开发人员能够通…
阅读更多...
MacDroid for Mac v2.3 安卓手机文件传输助手 支持M、Intel芯片 4.7K

MacDroid for Mac v2.3 安卓手机文件传输助手 支持M、Intel芯片 4.7K

MacDroid 是Mac毒搜集到的一款安卓手机文件传输助手&#xff0c;在Mac和Android设备之间传输文件。您只需要将安卓手机使用 USB 连接到 Mac 电脑上即可将安卓设备挂载为本地磁盘&#xff0c;就像编辑mac磁盘上的文件一样编辑安卓设备上的文件&#xff0c;MacDroid支持所有 Andr…
阅读更多...
Android+SpringBoot的老年人健康饮食小程序平台

Android+SpringBoot的老年人健康饮食小程序平台

感兴趣的可以先收藏起来&#xff0c;还有大家在毕设选题&#xff0c;项目以及论文编写等相关问题都可以给我留言咨询&#xff0c;我会一一回复&#xff0c;希望帮助更多的人。 系统介绍 我将从经济、生活节奏、技术融合等方面入手&#xff0c;详细阐述居家养老管理模式兴起的…
阅读更多...
【星云 Orbit • STM32F4】10. 在串口接收中断里即时解析数据头的程序框架

【星云 Orbit • STM32F4】10. 在串口接收中断里即时解析数据头的程序框架

【星云 Orbit • STM32F4】10. 串口中断中即时解析数据头的程序开发&#xff1a;实现高效实时数据处理 摘要 在嵌入式开发中&#xff0c;串口中断处理是实现高效实时数据传输的关键技术之一。本文将详细介绍如何在STM32F407微控制器上开发一个在串口接收中断中即时解析数据头的…
阅读更多...
SAP MDG —— MDG on S/4HANA 2023 FPS03 创新汇总

SAP MDG —— MDG on S/4HANA 2023 FPS03 创新汇总

文章目录 MDG 基于SAP S/4HANA 2023 FPS03的创新BP/C/S&#xff1a;消息控制BP/C/S&#xff1a;手工分配数据控制者MDG-F&#xff1a;使用S/4扩展数据校验功能生成式AI可用于协助自定义对象的数据变更/同时可总结批量变更的内容 MDG 基于SAP S/4HANA 2023 FPS03的创新 由于从S…
阅读更多...
抽奖系统(从0-1)(上)

抽奖系统(从0-1)(上)

hu项目的开发流程介绍 1. 项目启动阶段 • 项⽬概述&#xff1a;介绍项⽬的背景、⽬标和预期成果。 • 团队组建&#xff1a;建跨职能团队&#xff0c;包括产品经理、UI/UX 设计师、开发⼈员、测试⼈员等。 • ⻆⾊定义&#xff1a;明确团队中各个⻆⾊的职责和⼯作内容。 2. 需…
阅读更多...
vim 调整字体

vim 调整字体

vim: 在vim 面板单击右键&#xff0c;选择references: terminal :也是单击右键,选择references:
阅读更多...
Libgdx游戏开发系列教程(3)——通过柏林噪音算法地图随机地形

Libgdx游戏开发系列教程(3)——通过柏林噪音算法地图随机地形

在B站刷到了随机地图生成的视频,随手学习下并做下记录 注: 本篇使用javafx应用作演示,算是了解这个算法的使用,后续会再出篇libgdx生成地图的示例 说明 抛开算法实现,首先认知柏林噪音算法 一般我们想要随机数,会指定个范围,如0.0-1.0之间任意小数,而柏林算法的结果范围就是[…
阅读更多...
LeetCode热题100JS（20/100）第四天|​41. 缺失的第一个正数​|​73. 矩阵置零​|​54. 螺旋矩阵​|​48. 旋转图像​

LeetCode热题100JS（20/100）第四天|​41. 缺失的第一个正数​|​73. 矩阵置零​|​54. 螺旋矩阵​|​48. 旋转图像​

41. 缺失的第一个正数 题目链接&#xff1a;41. 缺失的第一个正数 难度&#xff1a;困难 刷题状态&#xff1a;1刷 新知识&#xff1a; 解题过程 思考 示例 1&#xff1a; 输入&#xff1a;nums [1,2,0] 输出&#xff1a;3 解释&#xff1a;范围 [1,2] 中的数字都在数组中…
阅读更多...
e2studio开发RA2E1(17)---- ADC扫描多通道采样

e2studio开发RA2E1(17)---- ADC扫描多通道采样

e2studio开发RA2E1.17-- ADC扫描多通道采样 概述视频教学样品申请硬件准备参考程序源码下载ADC属性配置回调函数主程序演示结果 概述 在嵌入式系统中&#xff0c;ADC&#xff08;模数转换器&#xff09;是一个非常重要的组件&#xff0c;它将模拟信号转换为数字信号。为了提高…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023