开发博客系统

开发博客系统

devtools/2025/3/5 10:25:00/

前言

准备工作

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

在这里插入图片描述

第一，建数据库表

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

在这里插入图片描述

创建公共模块

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

在这里插入图片描述

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

在这里插入图片描述

普通类

在这里插入图片描述

在这里插入图片描述

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.ppmy.cn/devtools/164722.html

相关文章

DeepSeek R1学习入门

DeepSeek R1学习入门

一、什么是 DeepSeek R1 2025.01.20 DeepSeek-R1 发布，DeepSeek R1 是 DeepSeek AI 开发的第一代推理模型，擅长复杂的推理任务，官方对标OpenAI o1正式版。适用于多种复杂任务，如数学推理、代码生成和逻辑推理等。根据官方信息D…

阅读更多...

Geotools中获取Shapefile的属性表格字符集编码的一种方法

Geotools中获取Shapefile的属性表格字符集编码的一种方法

目录前言 1、字符集编码的重要性 2、Geotools 在 GIS 开发中的地位一、GeoTools的字符集知识 1、字符集的作用 2、shapefile中字符集信息二、GeoTools中获取字符集的方法 1、默认获取 2、从DataStore中获取 3、从CPG文件中获取 4、生产字符获取实践三、总结前言…

阅读更多...

『Python底层原理』--Python字典的实现机制

『Python底层原理』--Python字典的实现机制

在Python中，字典（dict）是一种极为强大且常用的内置数据结构，它以键值对的形式存储数据，并提供了高效的查找、插入和删除操作。接下来，我们将深入探究 Python 字典背后的实现机制，特别是其与哈…

阅读更多...

无人机高功率快速充电器技术详解

无人机高功率快速充电器技术详解

无人机高功率快速充电器技术是无人机领域的一项重要技术，它直接关系到无人机的续航能力和作业效率。以下是对无人机高功率快速充电器技术的详细解析： 一、技术原理无人机高功率快速充电器的基本技术原理涉及电能转换与控制。它将市电或直流电源转换为…

阅读更多...

Spring学习笔记04：spring mvc和Spring Boot之间是什么关系？

Spring学习笔记04：spring mvc和Spring Boot之间是什么关系？

Spring MVC 是什么？ 想象你开了一家餐厅，顾客（用户）点菜、服务员传话、厨师做菜、最后服务员上菜。Spring MVC 就是规定这套流程的“餐厅管理规则”，专门用于处理网页请求（HTTP）和响应。核心…

阅读更多...

Mayavi一个强大的python库

Mayavi一个强大的python库

Mayavi 介绍 Mayavi 是一个用于 Python 的科学数据可视化库，提供了一种便捷的方式来创建复杂的 3D 可视化效果。它基于 VTK（Visualization Toolkit）构建，能够处理各种类型的数据，包括标量、矢量和张量数据，广泛应用于科学研究和数据分析领域。主要特点丰富的可视化选…

阅读更多...

OCR PDF 文件是什么？它包含什么内容？

OCR PDF 文件是什么？它包含什么内容？

有些 PDF 文件是通过扫描纸质书页生成的，这类文件有其独特的特点。有时，原始书籍是唯一可用的版本，因此只能通过扫描的方式获取内容。如何识别 OCR PDF 文件？ 你通常可以从外观上辨别 OCR PDF 文件——页面上的文本看起来像“锯…

阅读更多...

代码随想录|哈希表|09四数之和

代码随想录|哈希表|09四数之和

leetcode:18. 四数之和 - 力扣（LeetCode） 题目题意：给定一个包含 n 个整数的数组 nums 和一个目标值 target，判断 nums 中是否存在四个元素 a，b，c 和 d ，使得 a b c d 的值与 target 相等…

阅读更多...

最新文章