开发博客系统

news2025/5/14 21:48:19

前言

准备工作

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

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

第一，建数据库表

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

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

创建公共模块

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

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

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

在这里插入图片描述

普通类

在这里插入图片描述

在这里插入图片描述

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.coloradmin.cn/o/2310039.html

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

相关文章

微信小程序上如何使用图形验证码

微信小程序上如何使用图形验证码

1、php服务器生成图片验证码的代码片段如下&#xff1a; 注意红框部分的代码&#xff0c;生成的是ArrayBuffer类型的二进制图片 2、显示验证码 显示验证码&#xff0c;不要直接image组件加上src显示&#xff0c;那样拿不到cookie&#xff0c;没有办法做图形验证码的验证&…
阅读更多...
IntelliJ IDEA 构建项目时内存溢出问题

IntelliJ IDEA 构建项目时内存溢出问题

问题现象 在使用 IntelliJ IDEA 构建 Java 项目时&#xff0c;遇到了以下错误&#xff1a; java: java.lang.OutOfMemoryError: Java heap space java.lang.RuntimeException: java.lang.OutOfMemoryError: Java heap space这是一个典型的 Java 堆内存不足错误&#xff0c;表…
阅读更多...
大模型微调与RAG检索增强技术深度解析

大模型微调与RAG检索增强技术深度解析

一、引言 随着人工智能技术的飞速发展&#xff0c;大模型&#xff08;如BERT、GPT等&#xff09;在自然语言处理、计算机视觉等领域取得了显著成效。然而&#xff0c;这些预训练好的大模型往往难以直接应用于特定业务场景&#xff0c;因此&#xff0c;大模型微调&#xff08;F…
阅读更多...
[liorf_localization_imuPreintegration-2] process has died

[liorf_localization_imuPreintegration-2] process has died

使用liorf&#xff0c;编译没报错&#xff0c;但是roslaunch报错如下&#xff1a; 解决方法&#xff1a; step1: 如果你之前没有安装 GTSAM&#xff0c;可以尝试安装它 step2: 检查是否缺少依赖库 ldd /home/zz/1210/devel/lib/liorf_localization/liorf_localization_imuPr…
阅读更多...
2024 年 MySQL 8.0.40 安装配置、Workbench汉化教程最简易（保姆级）

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

首先到官网上下载安装包&#xff1a;http://www.mysql.com 点击下载&#xff0c;拉到最下面&#xff0c;点击社区版下载 windows用户点击下面适用于windows的安装程序 点击下载&#xff0c;网络条件好可以点第一个&#xff0c;怕下着下着断了点第二个离线下载 双击下载好的安装…
阅读更多...
【Python/Pytorch】-- 创建3090Ti显卡所需环境

【Python/Pytorch】-- 创建3090Ti显卡所需环境

文章目录 文章目录 01 服务器上&#xff0c;存在三个anaconda&#xff0c;如何选择合适的&#xff0c;创建python环境&#xff1f;02 conda、anaconda、cuda、cudnn区别03 用到一些指令04 如何指定cuda的版本&#xff1f;05 conda跟pip的区别&#xff1f;06 pycharm控制台07 服…
阅读更多...
如何在无图形化界面的服务器上下载百度网盘的超大文件(10GB以上)？

如何在无图形化界面的服务器上下载百度网盘的超大文件(10GB以上)？

目录 登录百度网盘账号 进入特定的文件夹 下载 完整教程 登录百度网盘账号 第一次登录的时候会展示&#xff1a; Please visit: https://openapi.baidu.com/oauth/2.0/authorize?client_idxxx And authorize this app Paste the Authorization Code here within 10 minut…
阅读更多...
Linux磁盘情况查询

Linux磁盘情况查询

一、查询系统整体磁盘使用情况 1、基本语法 df -h 2、示例 二、查询指定目录的磁盘占用情况 1、基本语法 du -h 查询指定目录的磁盘占用情况&#xff0c;默认为当前目录 2、常用选项 选项 说明 -h 以人类可读的格式显示磁盘使用情况&#xff08;例如&#xff0c;KB、…
阅读更多...
【3D格式转换SDK】HOOPS Exchange技术概览（二）：3D数据处理高级功能

【3D格式转换SDK】HOOPS Exchange技术概览（二）：3D数据处理高级功能

​ 在当今数字化工程领域&#xff0c;HOOPS Exchange作为一款强大的SDK&#xff0c;为3D工程应用程序的开发提供了关键支持。本文将深入剖析其基本组件、特定功能以及数据结构&#xff0c;带您全面了解这一驱动3D数据处理的核心工具。 一、概述 HOOPS Exchange专注于访问和重…
阅读更多...
利用Adobe Acrobat 实现PPT中图片分辨率的提升

利用Adobe Acrobat 实现PPT中图片分辨率的提升

1. 下载适用于 Windows 的 64 位 Acrobat 注册方式参考&#xff1a;https://ca.whu.edu.cn/knowledge.html?type1 2. 将ppt中需要提高分辨率的图片复制粘贴到新建的pptx问价中&#xff0c;然后执行“文件—>导出---->创建PDF、XPS文档” 3. 我们会发现保存下来的distrib…
阅读更多...
Elasticsearch：解锁深度匹配，运用Elasticsearch DSL构建闪电般的高效模糊搜索体验

Elasticsearch：解锁深度匹配，运用Elasticsearch DSL构建闪电般的高效模糊搜索体验

目录 Elasticsearch查询分类 叶子查询 全文检索查询 match查询 multi_match查询 精确查询 term查询 range查询 复杂查询 bool查询简单应用 bool查询实现排序和分页 bool查询实现高亮 场景分析 问题思考 解决方案 search_after方案(推荐) point in time方案 方案…
阅读更多...
解决局域网访问Dify却仅显示nginx页面的问题

解决局域网访问Dify却仅显示nginx页面的问题

为什么dify在本机可以正常访问&#xff0c;局域网通过ip访问却只看到欢迎使用nginx的提示&#xff0c;如果访问服务器ip/apps则直接提示404 Not Found。这是怎么回事该如何解决呢&#xff1f;文章中将一步步解决这些问题。 前言 之前在服务器部署了dify&#xff0c;也在服务器…
阅读更多...
从小米汽车召回看智驾“命门”：智能化时代 — 时间就是安全

从小米汽车召回看智驾“命门”：智能化时代 — 时间就是安全

2025年1月&#xff0c;小米因车辆“授时同步异常”召回3万余辆小米SU7&#xff0c;成为其造车历程中的首个重大安全事件。 从小米SU7召回事件剖析&#xff0c;授时同步何以成为智能驾驶的命门&#xff1f; 2024年11月&#xff0c;多名车主反馈SU7标准版的智能泊车辅助功能出现…
阅读更多...
OpenAI 最后一代非推理模型：OpenAI 发布 GPT-4.5预览版

OpenAI 最后一代非推理模型：OpenAI 发布 GPT-4.5预览版

最后一代非推理大模型 在人工智能领域&#xff0c;OpenAI 一直以其创新的技术和卓越的产品引领着行业的发展。近期&#xff0c;OpenAI 正式发布了 GPT-4.5 研究预览版。不仅如此&#xff0c;官方还宣称 GPT-4.5 被定位为 “最后一代非推理模型”&#xff0c;这一消息再次引起了…
阅读更多...
ioday2-----＞标准io函数

ioday2-----＞标准io函数

思维导图&#xff1a; 练习&#xff1a; 1将当前的时间写入到time. txt的文件中&#xff0c;如果ctrlc退出之后&#xff0c;在再次执行支持断点续写 1.2022-04-26 19:10:20 2.2022-04-26 19:10:21 3.2022-04-26 19:10:22 //按下ctrlc停止&#xff0c;再次执行程序 4.2022…
阅读更多...
C++第六节：stack和queue

C++第六节：stack和queue

本节目标&#xff1a; stack的介绍与使用queue的介绍与使用priority_queue的介绍与使用容器适配器模拟实现与结语 1 stack&#xff08;堆&#xff09;的介绍 stack是一种容器适配器&#xff0c;专门用在具有后进先出操作的上下文环境中&#xff0c;只能从容器的一端进行元素的插…
阅读更多...
华宇“ITSS咨询服务标准助力政务服务区块链解决方案设计”案例成功入选ITSS典型应用案例库

华宇“ITSS咨询服务标准助力政务服务区块链解决方案设计”案例成功入选ITSS典型应用案例库

近日&#xff0c;华宇“ITSS咨询服务标准助力政务服务区块链解决方案设计”案例经专家评审后成功入选由全国信息技术标准化技术委员会信息技术服务分技术委员会和中国电子工业标准化技术协会信息技术服务分会&#xff08;以下简称“ITSS分会”&#xff09;联合组织建立的“信息…
阅读更多...
从0到1构建AI深度学习视频分析系统--基于YOLO 目标检测的动作序列检查系统：（0）系统设计与工具链说明

从0到1构建AI深度学习视频分析系统--基于YOLO 目标检测的动作序列检查系统：（0）系统设计与工具链说明

文章大纲 系统简介Version 1Version2环境摄像机数据流websocket 发送图像帧RTSP 视频流树莓派windows消息队列参考文献项目地址提示词系统简介 Version 1 Version2 环境 # 配置 conda 源 # 配置conda安装源 conda config --add channels https://mirrors.tuna.tsinghua.edu.c…
阅读更多...
串口通讯基础

串口通讯基础

第1章 串口的发送和接收过程 1.1 串口接收过程 当上位机给串口发送(0x55)数据时&#xff0c;MCU的RX引脚接受到&#xff08;0x55&#xff09;数据&#xff0c;数据(0x55)首先进入移位寄存器。数据全部进入移位寄存器后&#xff0c;一次将&#xff08;0x55&#xff09;全部搬运…
阅读更多...
WebP2P技术在嵌入式设备中的应用：EasyRTC音视频通话SDK如何实现高效通信？

WebP2P技术在嵌入式设备中的应用：EasyRTC音视频通话SDK如何实现高效通信？

在数字化时代&#xff0c;实时通信技术&#xff08;RTC&#xff09;与人工智能&#xff08;AI&#xff09;的融合正在重塑各个行业的交互方式。从在线教育到远程医疗&#xff0c;从社交娱乐到企业协作&#xff0c;RTC的应用场景不断拓展。然而&#xff0c;传统的RTC解决方案往往…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023