【项目】星辰博客介绍

目录

一、项目背景

二、项目功能

1. 登录功能：

2. 列表页面：

3. 详情页面：

4. 写博客：

三、技术实现

四、功能页面展示

1. 用户登录

2. 博客列表页

3. 博客编辑更新页

4.博客发表页

5. 博客详情页

五.系统亮点

1.强制要求登陆

2.令牌技术

网站: 博客登陆页

账号: zhangsan 密码: 123456 或者 账号: lisi 密码: 123456

(欢迎大家登录测试,如果无法响应,请联系我重新部署,谢谢!)

一、项目背景


1. 星辰博客系统采用前后端分离的方法来实现，同时使用了数据库来存储相关的数据，同时将其部署到云服务器上。前端主要有四个页面构成：登录页、列表页、详情页以及编辑页，以上模拟实现了最简单的个人博客系统。其结合后端实现了以下的主要功能：登录、编辑博客、注销、删除博客、以及强制登录等功能。


2. 但是该项目没有设计用户注册功能，只能提前在数据库中存储用户信息后经过校验登录；并且用户头像不能自己设定，在进行前端页面的书写过程中已经将头像的图片写为静态了；而用户信息中的文章数以及分类数也没有在后端中具体实现，直接在前端页面中写为了静态的。


3. 该博客系统可以实现个人用户简单的博客记录，时间、标题、内容以及发布者等都可以进行详细地查看。


二、项目功能


该博客系统主要实现了以下几个功能：登录、注销、写博客以及删除博客等功能。

1. 登录功能：

用户名以及密码已经在后端写入了数据库，没有实现账户注册功能，即：用户名以及密码是已经存在的。登录成功后就会跳转到列表页面。在右上角存在主页和写博客两个按钮，但是在未登录情况下按下均只会跳转到登录页面。


2. 列表页面：

可以在列表页查看有限数量的博客简介，其包括博客标题、发布时间以及内容概要。在左侧可以看到登录的用户以及文章数、分类数等的模块。在右上角有主页、写博客和注销三个功能：主页即列表页，写博客即博客编辑页，注销即注销用户，回到登录页面。


3. 详情页面：

在列表页面点击“查看全文”按钮就会跳转到详情页，此时就可以看到该篇博客的完整内容。在右上角同样有主页、写博客、删除和注销四个功能：删除即删除该篇博客，删除之后就会跳转到列表页面，该篇博客就被成功删除。


4. 写博客：

在登录之后的任意界面点击“写博客”之后就会进入博客编辑页面，此时就可以进行博客的编写，点击“发布文章”后就可以成功发布文章，此时就会跳转到列表页。

三、技术实现

星辰博客系统采用Spring Boot作为核心框架,同时集成了SpringMVC、MyBatis等相关技术组件,构建了一个功能完备、性能优异的博客系统。具体技术实现如下:

  1. 基于Spring Boot框架构建Web应用程序,实现快速开发和部署。
  2. 采用MyBatis作为数据访问层框架,实现对数据库的CRUD操作。
  3. 使用Thymeleaf作为视图模板引擎,生成动态的HTML页面。
  4. 利用Markdown解析器实现博客文章的富文本编辑和展示。
  5. 采用Maven进行项目管理和构建,实现依赖管理和自动化构建部署。

四、功能页面展示

1. 用户登录

2. 博客列表页

3. 博客编辑更新页

4.博客发表页

5. 博客详情页

五.系统亮点

1.强制要求登陆

当⽤⼾访问博客列表⻚和博客详情⻚时,如果⽤⼾当前尚未登陆,就⾃动跳转到登陆⻚⾯. 采⽤拦截器来完成,token通常由前端放在header中,我们从header中获取token,并校验 token是否合法

添加拦截器

@Slf4j
@Component
public class LoginInterceptor implements HandlerInterceptor {
    @Override
    public boolean preHandle(HttpServletRequest request, HttpServletResponse response, Object handler) throws Exception {
        //1. 从header中获取token
        //2. 校验token
        //3. 成功, 放行

        String userToken = request.getHeader(Constant.USER_TOKEN_HEADER);
        log.info("获得token, token:"+userToken);
        boolean result = JwtUtils.checkToken(userToken);
        if (result){
            return true;
        }else {
            response.setStatus(401);
            return false;
        }
    }
}
@Configuration
public class WebConfig implements WebMvcConfigurer {

    @Autowired
    private LoginInterceptor loginInterceptor;

    @Override
    public void addInterceptors(InterceptorRegistry registry) {
        registry.addInterceptor(loginInterceptor).addPathPatterns("/**")
                .excludePathPatterns("/**/*.html",
                        "/pic/**",
                        "/js/**",
                        "/css/**",
                        "/blog-editormd/**",
                        "/user/login"); //这里要排除登录页面

    }
}

1. 前端请求时,header中统⼀添加token,写在common.js中

$(document).ajaxSend(function (e, xhr, opt) { var user_token = localStorage.getItem("user_token"); xhr.setRequestHeader("user_token", user_token); });

效果展示

强制要求登陆展示

2.令牌技术

在我们实现登陆的时候

 传统思路:

• 登陆⻚⾯把⽤⼾名密码提交给服务器.

• 服务器端验证⽤⼾名密码是否正确,并返回校验结果给后端

• 如果密码正确,则在服务器端创建Session.通过Cookie把sessionId返回给浏览器.

有可能出现问题: 集群环境下无法直接使用Session.

如下场景:

1. 用户登录

用户登录请求,经过负载均衡,把请求转给了第⼀台服务器,第⼀台服务器进⾏账号密码 验证,验证成功后,把Session存在了第⼀台服务器上

2. 查询操作

用户登录成功之后,携带Cookie(里面有SessionId)继续执⾏查询操作,比如查询博客列表.此时请求转发到了第⼆台机器,第⼆台机器会先进⾏权限验证操作(通过SessionId验证⽤⼾是否 登录),此时第⼆台机器上没有该⽤⼾的Session,就会出现问题,提示用户登录,这是我们不能忍受的

问题出现的原因:

我们开发的项⽬,在企业中很少会部署在⼀台机器上,容易发⽣单点故障.(单点故障:⼀旦这台服务器挂 了,整个应⽤都没法访问了).所以通常情况下,⼀个Web应⽤会部署在多个服务器上,通过Nginx等进⾏ 负载均衡.此时,来⾃⼀个⽤⼾的请求就会被分发到不同的服务器上.

令牌技术可以解决如上场景:

1. 用户登录 用户登录请求,经过负载均衡,把请求转给了第⼀台服务器,第⼀台服务器进⾏账号密码 验证,验证成功后,⽣成⼀个令牌,并返回给客⼾端.

2. 客⼾端收到令牌之后,把令牌存储起来.可以存储在Cookie中,也可以存储在其他的存储空间.

3. 查询操作 用户登录成功之后,携带令牌继续执⾏查询操作,⽐如查询博客列表.此时请求转发到了 第⼆台机器,第⼆台机器会先进⾏权限验证操作.服务器验证令牌是否有效,如果有效,就说明用户已 经执行了登录操作,如果令牌是⽆效的,就说明用户之前未执⾏登录操作.

下面是JWT令牌⽣成和校验的部分源码:

1. 引⼊JWT令牌的依赖

<dependency>
         <groupId>io.jsonwebtoken</groupId>
         <artifactId>jjwt-impl</artifactId>
         <version>0.11.5</version>
         <scope>runtime</scope>
      </dependency>
      <dependency>
         <groupId>io.jsonwebtoken</groupId>
         <artifactId>jjwt-jackson</artifactId> <!-- or jjwt-gson if Gson is
preferred -->
         <version>0.11.5</version>
         <scope>runtime</scope>
      </dependency>
public static String genToken(Map<String, Object> claim){
     return Jwts.builder()
            .setClaims(claim)
            .setExpiration(new Date(System.currentTimeMillis()+EXPIRATION_DATE))
            .signWith(key)
            .compact();
}


//生成key

public static Claims parseToken(String token) {
    JwtParser build = Jwts.parserBuilder().setSigningKey(key).build();
    Claims body = null;
    try {
        body = build.parseClaimsJws(token).getBody();
    }catch (ExpiredJwtException e){
        log.error("token过期,校验失败,token:",token);
    } catch (Exception e) {
        log.error("token校验失败,token:",token);

    }
    return body;
}
public static boolean checkToken(String token) {
   Claims body = parseToken(token);
   if (body == null){
       return false;
   }
    return true;
}

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

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

相关文章

C#发送内容到钉钉消息

C#发送内容到钉钉消息

文章目录 一、前提工作&#xff1a;配置钉钉机器人二、以text格式发送消息到钉钉三、以markdown格式发送消息到钉钉 一、前提工作&#xff1a;配置钉钉机器人 见链接&#xff1a;https://star-302.blog.csdn.net/article/details/135649084 下边的代码&#xff0c;钉钉安全设…
阅读更多...
【C#】| 与 及其相关例子

【C#】| 与 及其相关例子

按位或&#xff08;|&#xff09; 按位或运算符 | 对两个数的每一位进行比较&#xff0c;如果两个数中至少有一个为 1&#xff0c;则结果位为 1&#xff1b;否则&#xff0c;结果位为0。 1010 (10 in decimal) | 1100 (12 in decimal) ------1110 (14 in decimal) 力扣相关…
阅读更多...
利用patch-package补丁，解决H5预览PDF时电子签章不显示问题

利用patch-package补丁，解决H5预览PDF时电子签章不显示问题

利用patch-package补丁&#xff0c;解决H5预览PDF时电子签章不显示问题 一、问题描述 在生产环境中&#xff0c;遇到了一个紧急的技术问题&#xff1a;用户在移动端H5页面上查看电子票时&#xff0c;PDF文件预览功能正常&#xff0c;但其中的电子签章未能正常显示。这一问题直…
阅读更多...
el-select选择器修改背景颜色

el-select选择器修改背景颜色

<!--* FilePath: topSearch.vue* Author: 是十九呐* Date: 2024-07-18 09:46:03* LastEditTime: 2024-07-18 10:42:03 --> <template><div class"topSearch-container"><div class"search-item"><div class"item-name&quo…
阅读更多...
笔记：Few-Shot Learning小样本分类问题 + 孪生网络 + 预训练与微调

笔记：Few-Shot Learning小样本分类问题 + 孪生网络 + 预训练与微调

内容摘自王老师的B站视频&#xff0c;大家还是尽量去看视频&#xff0c;老师讲的特别好&#xff0c;不到一小时的时间就缕清了小样本学习的基础知识点~Few-Shot Learning (1/3): 基本概念_哔哩哔哩_bilibili Few-Shot Learning&#xff08;小样本分类&#xff09; 假设现在每类…
阅读更多...
UniVue@v1.5.0版本发布：里程碑版本

UniVue@v1.5.0版本发布：里程碑版本

前言 以后使用UniVue都推荐使用1.5.0以后的版本&#xff0c;这个版本之后&#xff0c;更新的速度将会放缓。 希望这个框架能够切实的帮助大家更好的开发游戏&#xff0c;做出一款好游戏&#xff01;本开源项目采用的开源协议为MIT协议&#xff0c;完全开源化&#xff0c;以后也…
阅读更多...
数据结构——线性表（循环链表）

数据结构——线性表（循环链表）

一、循环链表定义 将单链表中终端结点的指针端由空指针改为指向头结点&#xff0c;就使整个单链表形成一 个环&#xff0c;这种头尾相接的单链表称为单循环链表&#xff0c;简称循环链表(circular linked list)。 循环链表解决了一个很麻烦的问题。如何从当中一 个结点出发&am…
阅读更多...
二叉树的前、中、后序遍历（递归法、迭代法）leetcode144/94/145

二叉树的前、中、后序遍历（递归法、迭代法）leetcode144/94/145

leetcode144、二叉树的前序遍历 给你二叉树的根节点 root &#xff0c;返回它节点值的 前序 遍历。 示例 1&#xff1a; 输入&#xff1a;root [1,null,2,3] 输出&#xff1a;[1,2,3] 示例 2&#xff1a; 输入&#xff1a;root [] 输出&#xff1a;[] 示例 3&#xff1a;…
阅读更多...
【Linux】Linux环境设置环境变量操作步骤

【Linux】Linux环境设置环境变量操作步骤

Linux环境设置环境变量操作步骤 在一些开发过程中本地调试经常需要依赖环境变量的参数&#xff0c;但是怎么设置对小白来说有点困难&#xff0c;今天就介绍下具体的操作步骤&#xff0c;跟着实战去学习&#xff0c;更好的检验自己的技术水平&#xff0c;做技术还是那句话&…
阅读更多...
三字棋游戏（C语言详细解释）

三字棋游戏（C语言详细解释）

hello&#xff0c;小伙伴们大家好&#xff0c;算是失踪人口回归了哈&#xff0c;主要原因是期末考试完学校组织实训&#xff0c;做了俄罗斯方块&#xff0c;后续也会更新&#xff0c;不过今天先从简单的三字棋说起 话不多说&#xff0c;开始今天的内容 一、大体思路 我们都知…
阅读更多...
pytest常用命令行参数解析

pytest常用命令行参数解析

简介&#xff1a;pytest作为一个成熟的测试框架&#xff0c;它提供了许多命令行参数来控制测试的运行方式&#xff0c;以配合适用于不同的测试场景。例如 -x 可以用于希望出现错误就停止&#xff0c;以便定位和分析问题。–rerunsnum适用于希望进行失败重跑等个性化测试策略。 …
阅读更多...
用ComfyUI安装可图Kolors大模型做手机壁纸

用ComfyUI安装可图Kolors大模型做手机壁纸

一、Kolors简介 国内科技公司快手在人工智能领域取得了显著进展&#xff0c;特别推出了「可图 Kolors」这一开源模型&#xff0c;它在图像生成质量上超越了SD3&#xff0c;与Midjourney v6模型相媲美&#xff0c;并支持中文提示词识别与生成中文字符&#xff0c;成为国产AI绘画…
阅读更多...
经典神经网络(14)T5模型原理详解及其微调(文本摘要)

经典神经网络(14)T5模型原理详解及其微调(文本摘要)

经典神经网络(14)T5模型原理详解及其微调(文本摘要) 2018 年&#xff0c;谷歌发布基于双向 Transformer 的大规模预训练语言模型 BERT&#xff0c;而后一系列基于 BERT 的研究工作如春笋般涌现&#xff0c;预训练模型也成为了业内解决 NLP 问题的标配。 2019年&#xff0c;谷歌…
阅读更多...
Qt开发网络嗅探器03

Qt开发网络嗅探器03

数据包分析 想要知道如何解析IP数据包&#xff0c;就要知道不同的IP数据包的包头结构&#xff0c;于是我们上⽹查查资料&#xff1a; 以太网数据包 ARP数据包 IPv4 IPv6 TCP UDP ICMP ICMPv6 根据以上数据包头结构&#xff0c;我们就有了我们的protocol.h文件&#xff0c;声明…
阅读更多...
node解析Excel中的考试题并实现在线做题功能

node解析Excel中的考试题并实现在线做题功能

1、背景 最近公司安排业务技能考试&#xff0c;下发excel文件的题库&#xff0c;在excel里查看并不是很方便&#xff0c;就想着像学习驾考题目一样&#xff0c;一边看一边做&#xff0c;做完之后可以查看正确答案。 2、开始分析需求 题目格式如下图 需求比较简单&#xff0c;…
阅读更多...
配置RIPv2的认证

配置RIPv2的认证

目录 一、配置IP地址、默认网关、启用端口 1. 路由器R1 2. 路由器R2 3. 路由器R3 4. Server1 5. Server2 二、搭建RIPv2网络 1. R1配置RIPv2 2. R2配置RIPv2 3. Server1 ping Server2 4. Server2 ping Server1 三、模拟网络攻击&#xff0c;为R3配置RIPv2 四、在R…
阅读更多...
ExoPlayer架构详解与源码分析（15）——Renderer

ExoPlayer架构详解与源码分析（15）——Renderer

系列文章目录 ExoPlayer架构详解与源码分析&#xff08;1&#xff09;——前言 ExoPlayer架构详解与源码分析&#xff08;2&#xff09;——Player ExoPlayer架构详解与源码分析&#xff08;3&#xff09;——Timeline ExoPlayer架构详解与源码分析&#xff08;4&#xff09;—…
阅读更多...
拖拽上传（预览图片）

拖拽上传（预览图片）

需求 点击上传图片&#xff0c;或直接拖拽图片到红色方框里面也可上传图片&#xff0c;上传后预览图片 效果 实现 <!DOCTYPE html> <html lang"zh-cn"><head><meta charset"UTF-8"><meta name"viewport" content&…
阅读更多...
【safari】react在safari浏览器中，遇到异步时间差的问题，导致状态没有及时更新到state，引起传参错误。如何解决

【safari】react在safari浏览器中，遇到异步时间差的问题，导致状态没有及时更新到state，引起传参错误。如何解决

在safari浏览器中&#xff0c;可能会遇到异步时间差的问题&#xff0c;导致状态没有及时更新到state&#xff0c;引起传参错误。 PS&#xff1a;由于useState是一个普通的函数&#xff0c; 定义为() > void;因此此处不能用await/async替代setTimeout&#xff0c;只能用在返…
阅读更多...
价格较低，功能最强？OpenAI 推出 GPT-4o mini，一个更小、更便宜的人工智能模型

价格较低，功能最强？OpenAI 推出 GPT-4o mini，一个更小、更便宜的人工智能模型

OpenAI美东时间周四推出“GPT-4o mini”&#xff0c;入局“小而精”AI模型竞争&#xff0c;称这款新模型是“功能最强、成本偏低的模型”&#xff0c;计划今后整合图像、视频、音频到这个模型中。 OpenAI表示&#xff0c;GPT-4o mini 相较于 OpenAI 目前最先进的 AI 模型更加便…
阅读更多...
最新文章

Copyright @ 2022~2023