开发博客系统

前言

准备工作

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

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

第一，建数据库表

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

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

创建公共模块

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

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

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

在这里插入图片描述

普通类

在这里插入图片描述

在这里插入图片描述

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.rhkb.cn/news/28179.html

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

相关文章

uniapp+vue3搭建项目

uniapp+vue3搭建项目

工具使用&#xff1a; Pinia Vue 3 官方推荐的状态管理库&#xff0c;比 Vuex 更轻量&#xff0c;支持模块化&#xff0c;结合 persistedstate 插件可以持久化存储数据。uView-plus 专为 UniApp 设计&#xff0c;支持 App、小程序、H5。UnoCSS 更轻量&#xff0c;比 TailwindCS…
阅读更多...
如何通过rust实现自己的web登录图片验证码

如何通过rust实现自己的web登录图片验证码

在进行web系统开发时&#xff0c;为保障系统登录安全&#xff0c;登录页面中的验证码必不可少。在java中&#xff0c;我们可以利用相应的2D图像库快速生成图形验证码&#xff0c;而对于rust&#xff0c;我们没有合适的标准库进行图像验证码的生成。今天&#xff0c;我们通过使用…
阅读更多...
Unity NGUI新手向几个问题记录

Unity NGUI新手向几个问题记录

1.点Button没反应 制作Button组件时&#xff0c;不光要挂载Button脚本&#xff0c;还有挂载BoxCollider BoxCollider 接收事件 2.Button点击事件的增加与删除 使用.onClick.add增加事件&#xff0c;使用.onClick.Remove,.onClick.RemoveAt,onClick.RemoveRang,onClick.Clear移…
阅读更多...
基于SpringBoot的“扶贫助农系统”的设计与实现（源码+数据库+文档+PPT)

基于SpringBoot的“扶贫助农系统”的设计与实现（源码+数据库+文档+PPT)

基于SpringBoot的“扶贫助农系统”的设计与实现&#xff08;源码数据库文档PPT) 开发语言&#xff1a;Java 数据库&#xff1a;MySQL 技术&#xff1a;SpringBoot 工具&#xff1a;IDEA/Ecilpse、Navicat、Maven 系统展示 系统功能结构图 局部E-R图 系统首页界面 系统注册…
阅读更多...
Rust编程实战：初探WebAssembly

Rust编程实战：初探WebAssembly

WebAssembly: 网页应用的性能革命 ​互联网技术日新月异&#xff0c;Web应用已经从简单的网页跃升为功能丰富的平台。然而&#xff0c;JavaScript作为Web的主力语言&#xff0c;在处理计算密集型任务时仍然存在性能瓶颈。今天&#xff0c;我们来聊一聊可能改变Web格局的技术—…
阅读更多...
蓝桥杯4T平台（串口打印电压值）

蓝桥杯4T平台（串口打印电压值）

知识点&#xff1a;串口(单片机发送数据)按键ADC 题目 配置 代码 adc.c uint16_t getadc2(void) {uint16_t adc0;HAL_ADC_Start(&hadc2);adcHAL_ADC_GetValue(&hadc2);return adc; } adc.h uint16_t getadc2(void); main.c #include "lcd.h" #include…
阅读更多...
【异常解决】Unable to start embedded Tomcat Nacos 启动报错

【异常解决】Unable to start embedded Tomcat Nacos 启动报错

Unable to start embedded Tomcat Nacos 启动报错解决方案 一、背景描述二、原因分析三、解决方案 一、背景描述 Windows 本地启动 Nacos&#xff08;2.2.0&#xff09; 服务&#xff0c;控制台报错 Unable to start embedded Tomcat。 报错信息&#xff1a;Unable to star…
阅读更多...
Spark核心之02：RDD、算子分类、常用算子

Spark核心之02：RDD、算子分类、常用算子

spark内存计算框架 一、目标 深入理解RDD弹性分布式数据集底层原理掌握RDD弹性分布式数据集的常用算子操作 二、要点 ⭐️1. RDD是什么 RDD&#xff08;Resilient Distributed Dataset&#xff09;叫做**弹性分布式数据集&#xff0c;是Spark中最基本的数据抽象&#xff0c…
阅读更多...
Machine Learning 初探

Machine Learning 初探

前置知识 pandas 读取文件&#xff1a;read_csv查看信息 describe&#xff1a;查看整体信息&#xff0c;包括每列的平均值、最大最小值、标准差等head&#xff1a;输出头部几行数据columns&#xff1a;输出所有列名loc&#xff1a;查询数据&#xff0c;或是根据索引取对应的数…
阅读更多...
linux第四讲----基础开发工具vim

linux第四讲----基础开发工具vim

1.软件安装 这里以ubuntu为例&#xff0c;安装sl软件,输入这个命令即可自动安装~ 使用一下&#xff0c;输入sl&#xff0c;屏幕上会出现一个移动的小火车 之后不想要了准备卸载就输入&#xff1a; 注意&#xff1a;1&#xff09;下载软件时也可以进行搜索~ 2&#xff09;cento…
阅读更多...
【Wireshark 02】抓包过滤方法

【Wireshark 02】抓包过滤方法

一、官方教程 Wireshark 官网文档 &#xff1a; Wireshark User’s Guide 二、显示过滤器 2.1、 “数据包列表”窗格的弹出过滤菜单 例如&#xff0c;源ip地址作为过滤选项&#xff0c;右击源ip->prepare as filter-> 选中 点击选中完&#xff0c;显示过滤器&#…
阅读更多...
在 macOS 使用 .pem 私钥免密登录腾讯云服务器

在 macOS 使用 .pem 私钥免密登录腾讯云服务器

前言 在腾讯云上创建服务器时&#xff0c;如果选择了「密钥对」的登录方式&#xff0c;就会得到一个 .pem 文件作为私钥。很多小伙伴在使用 macOS 系统时&#xff0c;可能不清楚如何使用这个私钥文件来 SSH 免密登录远程服务器。本文将详细介绍如何在本地配置 .pem 私钥文件并…
阅读更多...
Android U 分屏——SystemUI侧处理

Android U 分屏——SystemUI侧处理

WMShell相关的dump命令 手机分屏启动应用后运行命令&#xff1a;adb shell dumpsys activity service SystemUIService WMShell 我们可以找到其中分屏的部分&#xff0c;如下图所示&#xff1a; 分屏的组成 简图 分屏是由上分屏(SideStage)、下分屏(MainStage)以及分割线组…
阅读更多...
【Python】——使用python实现GUI图书管理系统：Tkinter+SQLite实战

【Python】——使用python实现GUI图书管理系统：Tkinter+SQLite实战

本文将通过一个完整的python项目——图书管理系统&#xff0c;演示如何利用Tkinter构建GUI 界面&#xff0c;结合SQLite数据库实现增删改查功能。代码简洁易懂&#xff0c;适合python初学者学习和二次开发。 一、项目功能概览 图书管理&#xff1a;添加、查看、修改、删除图书…
阅读更多...
文件上传靶场（1--9关）

文件上传靶场（1--9关）

实验环境&#xff1a; 1&#xff0c;upload的靶场环境可以去GitHub上自行查找 2&#xff0c;打开小皮面板的nginx和数据库 3&#xff0c;将文件上传的靶场部署到本地&#xff1a; 放到小皮的phpstduy_pro的www下面 小提示&#xff1a; 另外如果你用的是php7的版本建议将版…
阅读更多...
leetcode每日一题——1745分割回文串

leetcode每日一题——1745分割回文串

给你一个字符串 s &#xff0c;如果可以将它分割成三个 非空 回文子字符串&#xff0c;那么返回 true &#xff0c;否则返回 false 。 当一个字符串正着读和反着读是一模一样的&#xff0c;就称其为 回文字符串 。 示例 1&#xff1a; 输入&#xff1a;s "abcbdd"…
阅读更多...
Python的那些事第三十九篇：MongoDB的Python驱动程序PyMongo

Python的那些事第三十九篇：MongoDB的Python驱动程序PyMongo

PyMongo：MongoDB的Python驱动程序 摘要 PyMongo 是 MongoDB 的官方 Python 驱动程序，用于在 Python 应用程序中与 MongoDB 数据库进行交互。本文将详细介绍 PyMongo 的安装、基本操作、高级功能以及实际应用案例，并通过示例代码和表格展示其强大的功能和灵活性。 1. 引言 …
阅读更多...
Windows 使用 Docker + WSL2 部署 Ollama（AMD 显卡推理）搭建手册‌

Windows 使用 Docker + WSL2 部署 Ollama（AMD 显卡推理）搭建手册‌

Windows 使用 Docker WSL2 部署 Ollama&#xff08;AMD 显卡推理&#xff09;搭建手册‌ ‌手册目标‌ 在 Windows 11 上通过 ‌Docker WSL2‌ 调用 AMD 显卡运行 Ollama 推理服务。 实现 ‌低延迟、高性能的本地模型推理‌&#xff0c;同时不影响 Windows 正常使用。 标记…
阅读更多...
【大模型基础_毛玉仁】1.1 基于统计方法的语言模型

【大模型基础_毛玉仁】1.1 基于统计方法的语言模型

【大模型基础_毛玉仁】1.1 基于统计方法的语言模型 1.语言模型基础1.1 基于统计方法的语言模型1.1.1 n-grams 语言模型1.1.2 n-grams 的统计学原理 1.语言模型基础 语言是概率的。语言模型&#xff08;LanguageModels, LMs&#xff09;旨在准确预测语言符号的概率。 将按照语…
阅读更多...
IDEA 2025最新版2024.3.3软件安装、插件安装、语言设置

IDEA 2025最新版2024.3.3软件安装、插件安装、语言设置

IntelliJ IDEA是一款由JetBrains公司开发的集成开发环境&#xff08;IDE&#xff09;&#xff0c;主要用于Java语言的开发&#xff0c;它通过提供丰富的功能如智能代码补全、代码分析、版本控制集成等来提高开发效率。 IDEA有社区版和专业版两个版本&#xff0c;社区版是免费开…
阅读更多...
最新文章
推荐文章

Copyright @ 2022~2023