基于spring的博客系统（总）

通过前⾯课程的学习, 我们掌握了Spring框架和MyBatis的基本使⽤, 并完成了图书管理系统的常规功能开发, 接下来我们系统的从0到1完成⼀个项⽬的开发；

1. 项⽬介绍

使⽤SSM框架实现⼀个简单的博客系统共5个⻚⾯

        1. 用户登录

        2. 博客发表⻚

        3. 博客编辑⻚

        4. 博客列表⻚

        5. 博客详情⻚

1.1 功能描述

⽤⼾登录成功后, 可以查看所有⼈的博客. 点击《查看原文》可以查看该博客的正⽂内容；

如果该博客作者为当前登录⽤⼾, 可以完成博客的修改和删除操作, 以及发表新博客；

1.2 ⻚⾯预览

登录页面：

博客列表和博客详情⻚：

博客发表和更新页：

2. 准备工作

2.1 数据准备

创建user表和blog表；

create database if not exists spring_blog_240908 charset utf8mb4;
use spring_blog_240908;
drop table if exists user;create table user (`id` INT NOT NULL AUTO_INCREMENT,`user_name` VARCHAR ( 128 ) NOT NULL,`password` VARCHAR ( 128 ) NOT NULL,`github_url` VARCHAR ( 128 ) NULL,`delete_flag` TINYINT ( 4 ) NULL DEFAULT 0,`create_time` DATETIME DEFAULT now(),`update_time` DATETIME DEFAULT now(),PRIMARY KEY ( id ),UNIQUE INDEX user_name_UNIQUE ( user_name ASC ))ENGINE = INNODB DEFAULTCHARACTER set = utf8mb4 comment = '用户表';drop table if exists blog;
CREATE TABLE blog (`id` INT NOT NULL AUTO_INCREMENT,`title` VARCHAR(200) NULL,`content` TEXT NULL,`user_id` INT(11) NULL,`delete_flag` TINYINT(4) NULL DEFAULT 0,`create_time` DATETIME DEFAULT now(),`update_time` DATETIME DEFAULT now(),PRIMARY KEY (id))
ENGINE = InnoDB DEFAULT CHARSET = utf8mb4 COMMENT = '博客表';insert into user (user_name,password,github_url)values("shenmengyao","111111","https://gitee.com/smollye/projects");
insert into user (user_name,password,github_url)values("yuanyiqi","222222","https://gitee.com/smollye/projects");
insert into blog (title,content,user_id) values("第⼀篇博客","我是神喵我是神喵我是神喵",1);
insert into blog (title,content,user_id) values("第⼆篇博客","我是小黑我是小黑我是小黑",2);

数据库信息如下所示：

2.2 创建项⽬

创建SpringBoot项⽬, 添加Spring MVC 和MyBatis对应依赖

2.3 准备前端页面

把课博客系统静态⻚⾯拷⻉到static⽬录下

2.4 配置配置⽂件

server:port: 8087
spring:datasource:url: jdbc:mysql://127.0.0.1:3306/spring_blog_240908?characterEncoding=utf8&useSSL=falseusername: rootpassword: ******driver-class-name: com.mysql.cj.jdbc.Driver
mybatis:configuration:map-underscore-to-camel-case: true #配置驼峰自动转换log-impl: org.apache.ibatis.logging.stdout.StdOutImpl #打印Sql语句mapper-locations: classpath:mapper/**Mapper.xml
# 设置日志路径
logging:file:name: spring_blog_240908.log

2.5 测试

访问前端⻚⾯:

前端⻚⾯可以正确显⽰, 说明项⽬初始化成功;

3. 项⽬公共模块

项⽬分为控制层(Controller), 服务层(Service), 持久层(Mapper). 各层之间的调⽤关系如下:

先根据需求完成实体类和公共层代码的编写;

3.1 实体类

@Data
public class Blog {private Integer id;private String title;private String content;private Integer userId;private String deleteFlag;private Date createTime;private Date updateTime;
}

@Data
public class User {private Integer id;private String userName;private String password;private String githubUrl;private Byte deleteFlag;private Date createTime;private Date updateTime;
}

3.2 公共层

3.2.1 统⼀返回结果实体类

a. code: 业务状态码

          200: 业务处理成功

   -1 : 业务处理失败

       -2 : ⽤户未登录

     后续有其他异常信息, 可以再补充.

b. msg: 业务处理失败时, 返回的错误信息

c. data: 业务返回数据

业务状态码设置代码如下：

public class Constant {//返回业务的状态码设置public  final  static  Integer SUCCESS_CODE = 200;public final static Integer FAIL_CODE = -1;public final static Integer UNLOGIN_CODE = -2;
}

返回结果实体类设置代码：

package com.example.spring_blog_24_9_8.model;import com.example.spring_blog_24_9_8.constants.Constant;
import lombok.Data;@Data
public class Result {private int code;private String msg;private Object data;/*** 业务成功时执行的方法*/public static Result success(Object data){Result result = new Result();result.setCode(Constant.SUCCESS_CODE);result.setMsg("");result.setData(data);return result;}/***  业务执⾏失败时返回的⽅法*/public  static  Result fail(int code, String msg){Result result = new Result();result.setCode(Constant.FAIL_CODE);result.setMsg(msg);result.setData("");return result;}/*** ⽤⼾未登录时返回的⽅法*/public static Result unlogin(int code,String msg,Object data){Result result = new Result();result.setCode(Constant.UNLOGIN_CODE);result.setMsg("用户未登录");result.setData(data);return result;}
}

3.2.2. 统⼀返回结果

package com.example.spring_blog_24_9_8.config;import com.example.spring_blog_24_9_8.model.Result;
import com.fasterxml.jackson.databind.ObjectMapper;
import lombok.SneakyThrows;
import org.springframework.core.MethodParameter;
import org.springframework.http.MediaType;
import org.springframework.http.server.ServerHttpRequest;
import org.springframework.http.server.ServerHttpResponse;
import org.springframework.web.bind.annotation.ControllerAdvice;
import org.springframework.web.servlet.mvc.method.annotation.ResponseBodyAdvice;@ControllerAdvicepublic class ResponseAdvice implements ResponseBodyAdvice {//哪个接口执行统一结果返回@Overridepublic boolean supports(MethodParameter returnType, Class converterType) {return true;}@SneakyThrows@Override//统一结果返回的具体逻辑public Object beforeBodyWrite(Object body, MethodParameter returnType,MediaType selectedContentType, Class selectedConverterType,ServerHttpRequest request, ServerHttpResponse response) {if (body instanceof Result){return body;}//对String 类型单独处理if (body instanceof String){ObjectMapper mapper = new ObjectMapper();return mapper.writeValueAsString(Result.success(body));}return Result.success(body);}}

3.3.3. 统⼀异常处理

@ControllerAdvice
@ResponseBody
public class ExceptionAdvice {@ExceptionHandler(Exception.class)public Result  exceptionAdvice(Exception e){return Result.fail(-1,e.getMessage());}
}

4. 业务代码

4.1 持久层

根据需求, 先⼤致计算有哪些DB相关操作, 完成持久层初步代码, 后续再根据业务需求进⾏完善

        1. ⽤⼾登录⻚

                a. 根据⽤⼾名查询⽤⼾信息

        2. 博客列表⻚

                a. 根据id查询user信息

                b. 获取所有博客列表

        3. 博客详情⻚

                a. 根据博客ID查询博客信息

                b. 根据博客ID删除博客(修改delete_flag=1)

        4. 博客修改⻚

                a. 根据博客ID修改博客信息

        5. 发表博客

                a. 插⼊新的博客数据

根据以上分析, 来实现持久层的代码：

package com.example.spring_blog_24_9_8.mapper;import com.example.spring_blog_24_9_8.model.Blog;
import org.apache.ibatis.annotations.Insert;
import org.apache.ibatis.annotations.Mapper;
import org.apache.ibatis.annotations.Select;import java.util.List;
@Mapper
public interface BlogMapper {@Select("Select id,title,content,user_id,delete_flag,create_time,update_time" +"from blog where delete_flag = 0 order by create_time desc")List<Blog> selectAllBlogs();@Insert("insert into blog (title,content,user_id) values (#{title},#{content},#{userId})")int insertBlog(Blog record);@Select("select * from blog where id = #{id}")Blog selectById(Integer id);int updateBlog(Blog blog);}

package com.example.spring_blog_24_9_8.mapper;import com.example.spring_blog_24_9_8.model.User;
import org.apache.ibatis.annotations.Mapper;
import org.apache.ibatis.annotations.Select;
@Mapper
public interface UserMapper {@Select("select id, user_name, password, github_url, delete_flag, create_time " +"from user where id = #{id}")User selectById(Integer id);@Select("select id, user_name, password, github_url, delete_flag, create_time " +"from user where user_name = #{userName}")User selectByName(String name);}

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="com.example.spring_blog_24_9_8.mapper.BlogMapper"><update id="updateBlog">update blog<set><if test="title!=null">title = #{title},</if><if test="content!=null">content = #{content},</if><if test="deleteFlag!=null">delete_flag = #{deleteFlag},</if></set>where id = #{id}</update>
</mapper>

书写测试⽤例, 简单进⾏单元测试

package com.example.spring_blog_24_9_8.mapper;import org.junit.jupiter.api.Test;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.boot.test.context.SpringBootTest;import static org.junit.jupiter.api.Assertions.*;
@SpringBootTest
class UserMapperTest {@Autowiredprivate UserMapper userMapper;@Testvoid selectById() {System.out.println(userMapper.selectById(2));}@Testvoid selectByName() {System.out.println(userMapper.selectByName("shenmengyao"));}
}

selectbyid结果如下：

selestbyname结果如下：

package com.example.spring_blog_24_9_8.mapper;import com.example.spring_blog_24_9_8.model.Blog;
import org.junit.jupiter.api.Test;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.boot.test.context.SpringBootTest;import static org.junit.jupiter.api.Assertions.*;
@SpringBootTest
class BlogMapperTest {@Autowiredprivate BlogMapper blogMapper;@Testvoid selectAllBlogs() {System.out.println(blogMapper.selectAllBlogs());}@Testvoid insertBlog() {Blog blog = new Blog();blog.setTitle("测试接⼝");blog.setContent("单元测试测试接⼝测试接⼝");blog.setUserId(1);blogMapper.insertBlog(blog);}@Testvoid selectById() {System.out.println(blogMapper.selectById(3));}@Testvoid updateBlog() {Blog blog = new Blog();blog.setId(3);blog.setDeleteFlag(1);blog.setTitle("测试修改接⼝");blog.setContent("测试修改接⼝测试修改接⼝测试修改接⼝");blogMapper.updateBlog(blog);}
}

selectallblogs结果如下：

insertblog结果如下：

selectbyid结果如下：

updateblog结果如下：

4.2 实现博客列表

4.2.1 约定前后端交互接⼝

[请求]
/blog/getlist
[响应]
{"code": 200,"msg": "","data": [{"id": 1,"title": "第⼀篇博客","content": "111我是博客正⽂我是博客正⽂我是博客正⽂","userId": 1,"deleteFlag": 0,"createTime": "2023-10-21 16:56:57","updateTime": "2023-10-21T08:56:57.000+00:00"},.....]
}

客⼾端给服务器发送⼀个 /blog/getlist 这样的 HTTP 请求, 服务器给客户端返回了⼀个 JSON 格式的数据.

4.2.2 实现服务器代码

控制层代码：

@RestController
@RequestMapping("/blog")
public class BlogController {@Autowiredprivate BlogService blogService;@RequestMapping("/getList")public List<Blog> getList(){return blogService.getBlogList();}
}

服务层代码：

@Service
public class BlogService {@Autowiredprivate BlogMapper blogMapper;public List<Blog> getBlogList(){return blogMapper.selectAllBlogs();}
}

运行程序，浏览器访问http://127.0.0.1:8087/blog/getList，结果如下：

4.2.3 实现客⼾端代码

        修改 blog_list.html, 删除之前写死的博客内容, 并新增 js 代码处理 ajax 请求；

        使⽤ ajax 给服务器发送 HTTP 请求.；

        服务器返回的响应是⼀个 JSON 格式的数据, 根据这个响应数据使⽤ DOM API 构造⻚⾯内容.

        响应中的 postTime 字段为 ms 级时间戳, 需要转成格式化⽇期.

        跳转到博客详情⻚的 url 形如 blog_detail.html?blogId=1 这样就可以让博客详情⻚知道当前是要访问哪篇博客.

前端代码修改如下：

   function getBlogList() {$.ajax({type: "get",url: "/blog/getList",success: function (result) {//逻辑不全//可以再完善, 比如code==200, 但是data为空的, 页面可以提示: 当前还没有任何博客, 快去写博客吧...if (result.code == 200 && result.data != null && result.data.length > 0) {//循环拼接数据到documentvar finalHtml = "";//页面展示for (var blog of result.data) {finalHtml += '<div class="blog">';finalHtml += '<div class="title">' + blog.title + '</div>';finalHtml += '<div class="date">' + blog.createTime + '</div>';finalHtml += '<div class="desc">' + blog.content + '</div>';finalHtml += '<a class="detail" href="blog_detail.html?blogId=' + blog.id + '">查看全文&gt;&gt;</a>';finalHtml += '</div>';}$(".right").html(finalHtml);}},error: function (error) {console.log("后端返回失败");}});}

如上图所示，我们当前博客列表页显示的时间为时间戳，我们从后端也⽇期进⾏处理；SimpleDateFormat，格式参考官⽅⽂档：

/*** 日期工具类*/
public class DateUtils {public static String format(Date date){SimpleDateFormat simpleDateFormat = new SimpleDateFormat("yyyy-MM-dd HH:mm");return simpleDateFormat.format(date);}
}

重写获取博客创建时间：

@Data
public class Blog {private Integer id;private String title;private String content;private Integer userId;private Integer deleteFlag;private Date createTime;private Date updateTime;public String getCreateTime(){return DateUtils.format(createTime);}
}

重新访问博客列表页，查看页面结果：

4.3 实现博客详情

⽬前点击博客列表⻚的 "查看全⽂" , 能进⼊博客详情⻚, 但是这个博客详情⻚是写死的内容. 我们期望能够根据当前的博客 id 从服务器动态获取博客内容

4.3.1 约定前后端交互接⼝

[请求]
/blog/getBlogDetail?blogId=1
[响应]
{"code": 200,"msg": "","data": {"id": 1,"title": "第⼀篇博客","content": "我是神喵我是神喵我是神喵","userId": 1,
"deleteFlag": 0,"createTime": "2023-10-21 16:56:57","updateTime": "2023-10-21T08:56:57.000+00:00"}
}

4.3.2 实现服务器代码

在BlogController中添加getBlogDeatail ⽅法

@RequestMapping("/getBlogDetail")public Blog getBlogDetail(Integer blogId){return blogService.getBlogDetail(blogId);}

在BlogService 中添加getBlogDeatil⽅法

 public Blog getBlogDetail(Integer blogId){return blogMapper.selectById(blogId);}

访问http://127.0.0.1:8087/blog/getBlogDetail?blogId=1，结果如下：

4.3.3 实现客户端代码

        修改 blog_content.html ：

        根据当前⻚⾯ URL 中的 blogId 参数(使⽤ location.search 即可得到形如 ?blogId=1 的数据), 给服务器发送 GET /blog 请求.

         根据获取到的响应数据, 显⽰在⻚⾯上

1. 修改html⻚⾯, 去掉原来写死的博客标题, ⽇期和正⽂部分，代码如下：

 <div class="content"><div class="title"></div><div class="date"></div><div class="detail"></div><div class="operating"><button onclick="window.location.href='blog_update.html'">编辑</button><button>删除</button></div></div>

2. 完善 js 代码, 从服务器获取博客详情数据.

 $.ajax({type: "get",url: "/blog/getBlogDetail" + location.search,success: function (result){console.log(result);if(result.code == 200 && result.data != null){$(".title").text(result.data.title);$(".date").text(result.data.createTime);$(".detail").text(result.data.detail);}   }})

前进入到博客列表页，点击其中的查看全文进入到文章全文页面：

点击编辑进入到文章更新页面：

5. 实现登陆

分析

传统思路:

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

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

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

        问题:

        集群环境下⽆法直接使⽤Session.

        原因分析:

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

        假如我们使⽤Session进⾏会话跟踪, 会出现下面的场景:

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

        2. 查询操作⽤⼾登录成功之后, 携带Cookie(⾥⾯有SessionId)继续执⾏查询操作, ⽐如查询博客列表. 此时请求转发到了第⼆台机器, 第⼆台机器会先进⾏权限验证操作(通过SessionId验证⽤⼾是否登录), 此时第⼆台机器上没有该⽤⼾的Session, 就会出现问题,来提⽰⽤⼾登录, 这样就会给用户带来不好的体验；该场景的逻辑如下所示：

接下来我们介绍另一种⽅案: 令牌技术

5.1 令牌技术

令牌其实就是⼀个⽤⼾⾝份的标识, 其实本质就是⼀个字符串. ⽐如我们出⾏在外, 会带着⾃⼰的⾝份证, 需要验证⾝份时, 就掏出⾝份证⾝份证不能伪造, 可以辨别真假；其运行逻辑如下所示：

服务器具备⽣成令牌和验证令牌的能⼒

        我们使⽤令牌技术, 继续思考上述场景:

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

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

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

        令牌的优缺点

        优点:

                 • 解决了集群环境下的认证问题

• 减轻服务器的存储压⼒(⽆需在服务器端存储)

        缺点:

        需要⾃⼰实现(包括令牌的⽣成, 令牌的传递, 令牌的校验)

当前企业开发中, 解决会话跟踪使⽤最多的⽅案就是令牌技术.

5.2 JWT令牌

令牌本质就是⼀个字符串, 他的实现⽅式有很多, 我们采⽤⼀个JWT令牌来实现.

5.2.1 介绍

JWT全称: JSON Web Token

官⽹:JSON Web Tokens - jwt.io

JSON Web Token(JWT)是⼀个开放的⾏业标准(RFC 7519), ⽤于客⼾端和服务器之间传递安全可靠的信息. 其本质是⼀个token, 是⼀种紧凑的URL安全⽅法.

5.2.2 JWT组成

        JWT由三部分组成, 每部分中间使⽤点 (.) 分隔，⽐如：aaaaa.bbbbb.cccc

         • Header(头部) 头部包括令牌的类型（即JWT）及使⽤的哈希算法（如HMAC SHA256或RSA）

         • Payload(负载) 负载部分是存放有效信息的地⽅, ⾥⾯是⼀些⾃定义内容. ⽐如: {"userId":"123","userName":"shenemngyao"} , 也可以存在jwt提供的现场字段, ⽐如 exp(过期时间戳)等. 此部分不建议存放敏感信息, 因为此部分可以解码还原原始内容.

        • Signature(签名) 此部分⽤于防⽌jwt内容被篡改, 确保安全性. 防⽌被篡改, ⽽不是防⽌被解析. JWT之所以安全, 就是因为最后的签名. jwt当中任何⼀个字符被篡改, 整个令牌都会校验失败. 就好⽐我们的⾝份证, 之所以能标识⼀个⼈的⾝份, 是因为他不能被篡改, ⽽不是因为内容加密.(任何⼈都可以看到⾝份证的信息, jwt 也是)

对上⾯部分的信息, 使⽤Base64Url 进⾏编码, 合并在⼀起就是jwt令牌 Base64是编码⽅式，⽽不是加密⽅式

5.3 JWT令牌⽣成和校验

5.3.1. 引⼊JWT令牌的依赖

 <!-- https://mvnrepository.com/artifact/io.jsonwebtoken/jjwt-api --><dependency><groupId>io.jsonwebtoken</groupId><artifactId>jjwt-api</artifactId><version>0.11.5</version></dependency><!-- https://mvnrepository.com/artifact/io.jsonwebtoken/jjwt-impl --><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><!-- https://mvnrepository.com/artifact/io.jsonwebtoken/jjwt-api --><dependency><groupId>io.jsonwebtoken</groupId><artifactId>jjwt-api</artifactId><version>0.11.5</version></dependency><!-- https://mvnrepository.com/artifact/io.jsonwebtoken/jjwt-impl --><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>

5.3.2. JWT令牌的⽣成和校验

使⽤Jar包中提供的API来完成JWT令牌的⽣成和校验，代码如下：

package com.example.spring_blog_24_9_8;import io.jsonwebtoken.Claims;
import io.jsonwebtoken.JwtParser;
import io.jsonwebtoken.Jwts;
import io.jsonwebtoken.SignatureAlgorithm;
import io.jsonwebtoken.io.Decoders;
import io.jsonwebtoken.io.Encoders;
import io.jsonwebtoken.security.Keys;
import org.junit.jupiter.api.Test;import javax.crypto.SecretKey;
import java.security.Key;
import java.util.Date;
import java.util.HashMap;
import java.util.Map;public class JWTUtisTest {//过期时间: 1小时的毫秒数private final static long EXPIRATION_DATE = 60 * 60 * 1000;//秘钥private final static String secretString = "MDDOvlf8sQ675YuOsOxu45EXYK1dl/PoAyJq9C8vta0=";//生成安全秘钥private final static Key key = Keys.hmacShaKeyFor(Decoders.BASE64.decode(secretString));//生成令牌@Testpublic void genToken(){//⾃定义信息Map<String, Object> claim = new HashMap<>();claim.put("userId", 1);claim.put("userName", "shenmengyao");String token = Jwts.builder().setClaims(claim) //⾃定义内容(负载.setExpiration(new Date(System.currentTimeMillis()+EXPIRATION_DATE))//设置过期时间.signWith(key).compact();System.out.println(token);}//生成key@Testpublic void genKey(){//生成keySecretKey secretKey = Keys.secretKeyFor(SignatureAlgorithm.HS256);String encode = Encoders.BASE64.encode(secretKey.getEncoded());System.out.println(encode);}//校验令牌@Testpublic void parseToken(){String token = "eyJhbGciOiJIUzI1NiJ9.eyJ1c2VyTmFtZSI6InNoZW5tZW5neWFvIiwidXNlcklkIjoxLCJleHAiOjE3MjU5NTMzMTl9.Aa7kKOH6vJFo09eEYCLtGCqRh6lBiXucRh-ze-F-IY8";JwtParser build = Jwts.parserBuilder().setSigningKey(key).build();Claims body = null;try {body = build.parseClaimsJws(token).getBody();} catch (Exception e) {System.out.println("令牌校验失败");}System.out.println(body);}
}

生成密钥：

生成令牌：

我们把⽣成的令牌通过官⽹进⾏解析, 就可以看到我们存储的信息了：

令牌校验：

令牌解析后, 我们可以看到⾥⾯存储的信息，如果在解析的过程当中没有报错，就说明解析成功了. 令牌解析时, 也会进⾏时间有效性的校验, 如果令牌过期了, 解析也会失败. 修改令牌中的任何⼀个字符, 都会校验失败, 所以令牌⽆法篡改

学习令牌的使⽤之后, 接下来我们通过令牌来完成⽤⼾的登录

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

2. 服务器端验证⽤⼾名密码是否正确, 如果正确, 服务器⽣成令牌, 下发给客⼾端.

3. 客⼾端把令牌存储起来(⽐如Cookie, local storage等), 后续请求时, 把token发给服务器

4. 服务器对令牌进⾏校验, 如果令牌正确, 进⾏下⼀步操作

5.4 约定前后端交互接⼝

[请求]
/user/login
username=shenmengyao&password=111111
[响应] 
{"code": 200,"msg": "","data": 
"eyJhbGciOiJIUzI1NiJ9.eyJpZCI6MSwidXNlcm5hbWUiOiJ6aGFuZ3NhbiIsImlhdCI6MTY5ODM5N
zg2MCwiZXhwIjoxNjk4Mzk5NjYwfQ.oxup5LfpuPixJrE3uLB9u3q0rHxxTC8_AhX1QlYV--E"
}
//验证成功, 返回token, 验证失败返回 ""

5.5 实现服务器代码

创建JWT⼯具类

package com.example.spring_blog_24_9_8.utils;import com.example.spring_blog_24_9_8.constants.Constant;
import io.jsonwebtoken.Claims;
import io.jsonwebtoken.ExpiredJwtException;
import io.jsonwebtoken.JwtParser;
import io.jsonwebtoken.Jwts;
import io.jsonwebtoken.io.Decoders;
import io.jsonwebtoken.security.Keys;
import lombok.extern.slf4j.Slf4j;import java.security.Key;
import java.util.Date;
import java.util.Map;@Slf4j
public class JwtUtils {//过期时间: 1小时的毫秒数private final static long EXPIRATION_DATE = 600000 * 60 * 1000;private final static String secretString = "2LT0G2Og7zG9aOPJR+Y4cLMGicyUoRVPS4J0xRlpZzg=";private final static Key key = Keys.hmacShaKeyFor(Decoders.BASE64.decode(secretString));//生成令牌public static String genToken(Map<String, Object> claim){return Jwts.builder().setClaims(claim).setExpiration(new Date(System.currentTimeMillis()+EXPIRATION_DATE)).signWith(key).compact();}/*** 解析令牌* @param token* @return*/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){System.out.println("555");return false;}System.out.println("444");return true;}public static Integer getUserIdFromToken(String token){Claims body = parseToken(token);if (body!=null){System.out.println("222");return (Integer) body.get("id");}System.out.println("111");return null;}
}

创建 UserController

package com.example.spring_blog_24_9_8.controller;import com.example.spring_blog_24_9_8.model.Result;
import com.example.spring_blog_24_9_8.model.User;
import com.example.spring_blog_24_9_8.service.UserService;
import com.example.spring_blog_24_9_8.utils.JwtUtils;
import lombok.extern.slf4j.Slf4j;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.util.StringUtils;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.util.HashMap;
import java.util.Map;
@Slf4j
@RequestMapping("/user")
@RestController
public class UserController {@Autowiredprivate UserService userService;@RequestMapping("/login")public Result login(HttpServletRequest request, HttpServletResponseresponse, String username, String password){if (!StringUtils.hasLength(username) ||!StringUtils.hasLength(password)){log.error("username:"+username+",password:"+password);return Result.fail(-1, "⽤⼾名或密码为空");}//判断账号密码是否正确User user = userService.getUserInfo(username);if (user==null || !user.getPassword().equals(password)){return Result.fail(-1, "⽤⼾名或密码错误");}//登录成功, 返回tokenMap<String , Object> claims = new HashMap<>();claims.put("id", user.getId());claims.put("username", user.getUserName());String token = JwtUtils.genToken(claims);System.out.println("⽣成token:"+ token);return Result.success(token);}
}

userservice:

@Service
public class UserService {@Autowiredprivate UserMapper userMapper;public User getUserInfo(String username){return userMapper.selectByName(username);}
}

5.6 实现客⼾端代码

修改 login.html, 完善登录⽅法前端收到token之后, 保存在localstorage中

function login() {//发送ajax请求, 获得token$.ajax({type:"post",url: "/user/login",data:{"username": $("#username").val(),"password": $("#password").val()},success:function(result){if(result.code==200 && result.data != ""){//存储tokenlocalStorage.setItem("user_token", result.data);location.href = "blog_list.html";}else{  // 自行补充完整alert("用户名或密码错误")}}});}

local storage相关操作

存储数据

localStorage.setItem("user_token","value");

读取数据

 localStorage.getItem("user_token");

删除数据

localStorage.removeItem("user_token");

运行服务器，访问登录页面，输入正确的账号和密码：

输入错误的账号和密码，查看返回的结果：

6. 强制登录

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

6.1 添加拦截器

package com.example.spring_blog_24_9_8.config;
import com.example.spring_blog_24_9_8.utils.JwtUtils;
import io.jsonwebtoken.Claims;
import lombok.extern.slf4j.Slf4j;
import org.springframework.stereotype.Component;
import org.springframework.web.servlet.HandlerInterceptor;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
@Slf4j
@Component
public class LoginInterceptor implements HandlerInterceptor {@Overridepublic boolean preHandle(HttpServletRequest request, HttpServletResponseresponse, Object handler) throws Exception {//从header中获取tokenString jwtToken = request.getHeader("user_token");log.info("从header中获取token:{}",jwtToken);//验证⽤⼾tokenClaims claims = JwtUtils.parseToken(jwtToken);if (claims!=null){log.info("令牌验证通过, 放⾏");return true;}response.setStatus(401);return true;}
}

package com.example.spring_blog_24_9_8.config;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.InterceptorRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;
import java.util.Arrays;
import java.util.List;
@Configuration
public class AppConfig implements WebMvcConfigurer {private final List excludes = Arrays.asList("/**/*.html","/blog-editormd/**","/css/**","/js/**","/pic/**","/login");@Autowiredprivate LoginInterceptor loginInterceptor;@Overridepublic void addInterceptors(InterceptorRegistry registry) {registry.addInterceptor(loginInterceptor).addPathPatterns("/**").excludePathPatterns(excludes);}
}

6.2 实现客⼾端代码

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

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

        ajaxSend() ⽅法在 AJAX 请求开始时执⾏函数：

         event - 包含 event 对象

         xhr - 包含 XMLHttpRequest 对象

        options - 包含 AJAX 请求中使⽤的选项

同时我们要注意引入common.js;

 <script src="js/jquery.min.js"></script><script src="js/common.js"></script><script>getBlogList();function getBlogList(){$.ajax({type: "get",url: "/blog/getList",success:function (result){if(result.data != 0 && result.data.length>0 && result.code == 200 ){var finalHtml = "";for(var blog of result.data){finalHtml += '<div class="blog">';finalHtml += '<div class="title">' + blog.title + '</div>';finalHtml += '<div class="date">' + blog.createTime + '</div>';finalHtml += '<div class="desc">' + blog.content + '</div>';finalHtml += '<a class="detail" href="blog_detail.html?blogId=' + blog.id + '">查看全文&gt;&gt;</a>';finalHtml += '</div>';}$(".right").html(finalHtml);}},error:function (err){console.log(err);if(err!=null && err.status==401){alert("⽤⼾未登录, 即将跳转到登录⻚!");//已经被拦截器拦截了, 未登录location.href ="blog_login.html";}}})}</script>

2. 修改 blog_datail.html

访问⻚⾯时, 添加失败处理代码

使⽤ location.href 进⾏⻚⾯跳转；

error:function (err){console.log(err);if(err!=null && err.status==401){alert("⽤⼾未登录, 即将跳转到登录⻚!");//已经被拦截器拦截了, 未登录location.href ="blog_login.html";}}

修改 blog_list.html的部分代码如上故事；

运行程序：浏览器访问博客列表页面：

结果进入到登录页面；

7. 实现显⽰⽤⼾信息

⽬前⻚⾯的⽤⼾信息部分是写死的. 形如:

        我们期望这个信息可以随着⽤⼾登陆⽽发⽣改变. ：

        如果当前⻚⾯是博客列表⻚, 则显⽰当前登陆⽤⼾的信息.

         如果当前⻚⾯是博客详情⻚, 则显⽰该博客的作者⽤⼾信息.

        注意: 当前我们只是实现了显⽰⽤⼾名, 没有实现显⽰⽤⼾的头像以及⽂章数量等信息.

7.1 约定前后端交互接⼝

在博客列表⻚, 获取当前登陆的⽤⼾的⽤⼾信息.

[请求]
/user/getUserInfo
[响应]
{userId: 1,username: test...
}

在博客详情⻚, 获取当前⽂章作者的⽤⼾信息

[请求]
/user/getAuthorInfo?blogId=1
[响应]
{userId: 1,username: test
}

7.2 实现服务器代码

在 UserController添加代码

 /*** 获取当前登录⽤⼾信息* @param request* @return*/@RequestMapping("/getUserInfo")public User getUserInfo(HttpServletRequest request){//从header中获取tokenString jwtToken = request.getHeader("user_token");//从token中获取⽤⼾idInteger userId = JwtUtils.getUserIdFromToken(jwtToken);//根据Userid获取⽤⼾信息if (userId!=null){return userService.selectById(userId);}return null;}/*** 获取博客作者信息* @param blogId* @return*/@RequestMapping("/getAuthorInfo")public Result getAuthorInfo(Integer blogId) {if (blogId == null && blogId < 1) {return Result.fail(-1, "博客ID不正确");}//根据博客id, 获取作者相关信息User user = userService.selectAuthorByBlogId(blogId);return Result.success(user);}

在UserService中添加代码

@Service
public class UserService {@Autowiredprivate UserMapper userMapper;@Autowiredprivate  BlogMapper blogMapper;public User getUserInfo(String username){return userMapper.selectByName(username);}public User selectById(Integer Id){return  userMapper.selectById(Id);}public User selectAuthorByBlogId(Integer blogId) {//1. 根据博客ID, 获取作者ID//2. 根据作者ID, 获取作者信息Blog blog = blogMapper.selectById(blogId);if (blog==null && blog.getUserId()<1){return null;}User user = userMapper.selectById(blog.getUserId());return user;}
}

usermapper代码：

@Mapper
public interface UserMapper {@Select("select id, user_name, password, github_url, delete_flag, create_time " +"from user where id = #{id}")User selectById(Integer id);@Select("select id, user_name, password, github_url, delete_flag, create_time " +"from user where user_name = #{userName}")User selectByName(String name);}

7.3实现客⼾端代码

修改 blog_list.html和 blog_detail.html代码

在响应回调函数中, 根据响应中的⽤⼾名, 更新界⾯的显⽰.

function getUserInfo(url) {$.ajax({type: "get",url: url,success: function (result) {if (result.code == 200 && result.data != null) {$(".left .card h3").text(result.data.userName);$(".left .card a").attr("href", result.data.githubUrl);}}});
}

由于该部分添加的代码一样，所以进行代码整合: 提取common.js，即将该部分代码放入到common.js中

function getUserInfo(url) {$.ajax({type: "get",url: url,success: function (result) {if (result.code == 200 && result.data != null) {$(".left .card h3").text(result.data.userName);$(".left .card a").attr("href", result.data.githubUrl);}}});
}

分别在两个页面的<script>中引⼊common.js；

blog_list.html 代码修改：

<script src="js/common.js"></script>
var userUrl= "/user/getUserInfo";
getUserInfo(userUrl);

blog_detail.html 代码修改:

<script src="js/common.js"></script>
//获取作者信息
var userUrl= "/user/getAuthorInfo"+location.search;
getUserInfo(userUrl);

效果展示：成功登录到博客列表页；

当前是用户沈梦瑶的博客列表页：

当前是用户袁一琦的博客列表页：

用户沈梦瑶点击袁一琦写的博客的详情页，显示的是作者袁一琦的信息：

在该页面点击github地址，我们的页面跳转到袁一琦的gitee的首页，也就是我的码云首页，如下所示：

8. 实现用户退出

前端直接清除掉token即可.

实现客⼾端代码

<注销>链接已经提前添加了onclick事件，在common.js中完善logout⽅法

function logout(){localStorage.removeItem("user_token");location.href = "blog_login.html";
}

点击下图注销：

返回到登录页面：

localstorage中的令牌也被清除掉了；

9. 实现发布博客

9.1 约定前后端交互接⼝

[请求]
/blog/add
title=标题&content=正⽂...
[响应]
{"code": 200,"msg": "","data": true
}
//true 成功
//false 失败

9.2 实现服务器代码

修改 BlogController, 新增 add ⽅法.

   @RequestMapping("/add")public Result insert(String title, String content, HttpServletRequest request){//获取当前登录⽤⼾IDString jwtToken = request.getHeader("user_token");Integer loginUserId = JwtUtils.getUserIdFromToken(jwtToken);if (loginUserId==null || loginUserId<1){return Result.fail(-1,"⽤⼾未登录");}Blog blog = new Blog();blog.setUserId(loginUserId);blog.setTitle(title);blog.setContent(content);blogService.insertBlog(blog);return Result.success(true);}

BlogService 添加对应的处理逻辑

   public int insertBlog(Blog record){return blogMapper.insertBlog(record);}

9.2.1 editor.md 简单介绍

editor.md 是⼀个开源的⻚⾯ markdown 编辑器组件. 官⽹参⻅: http://editor.md.ipandao.com/ 代码： https://pandao.github.io/editor.md/ 使⽤⽰例

<link rel="stylesheet" href="editormd/css/editormd.css" />
<div id="test-editor"><textarea style="display:none;">### 关于 Editor.md
**Editor.md** 是⼀款开源的、可嵌⼊的 Markdown 在线编辑器（组件），基于 CodeMirror、
jQuery 和 Marked 构建。</textarea>
</div>
<script src="https://cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
<script src="editormd/editormd.min.js"></script>
<script type="text/javascript">$(function() {var editor = editormd("test-editor", {// width : "100%",// height : "100%",path : "editormd/lib/"});});
</script>

        使⽤时引⼊对应依赖就可以了

        "test-editor" 为 markdown编辑器所在的div的id名称

        path为 editor.md依赖所在的路径

9.3 实现客⼾端代码

修改 blog_edit.html • 完善submit⽅法

 function submit() {$.ajax({type:"post",url: "/blog/add",data:{title:$("#title").val(),content:$("#content").val()},success:function(result){if(result.code==200 && result.data==true){location.href = "blog_list.html";}//结果为false, 下面自己补充else{alert(result.msg);return;}},error:function(error){if(error!=null && error.status==401){alert("⽤⼾未登录, 登录后再进⾏对应操作")}}});}

如下图所示，我们发现我们的blog在发布之后，在博客列表和内容细节页正文部分带有一些符号：

修改详情⻚⻚⾯显⽰，即详情⻚会显⽰markdown的格式符号, 我们对⻚⾯进⾏也下处理

1. 修改 html 部分, 把博客正⽂的 div 标签, 改成如下内容，并且加上 style="background-color: transparent;"

<!-- 右侧内容详情 -->
<div class="content"><div class="title"></div><div class="date"></div><div class="detail" id="detail" style="background-color: transparent;"></div><div class="operating"><button onclick="window.location.href='blog_update.html'">编辑</button><button>删除</button></div>
</div>

2. 修改博客正⽂内容的显⽰

 $.ajax({type: "get",url: "/blog/getBlogDetail" + location.search,success: function (result){console.log(result);if(result.code == 200 && result.data != null){$(".title").text(result.data.title);$(".date").text(result.data.createTime);// $(".detail").text(result.data.content);editormd.markdownToHTML("detail", {markdown: result.data.content,});}},

我们之前存在问题的页面被成功如下修正；

10. 实现删除/编辑博客

进⼊⽤⼾详情⻚时, 如果当前登陆⽤⼾正是⽂章作者, 则在导航栏中显⽰ [编辑] [删除] 按钮, ⽤⼾点击时则进⾏相应处理.

需要实现两件事:

1、判定当前博客详情⻚中是否要显⽰[编辑] [删除] 按钮

2、实现编辑/删除逻辑. 删除采⽤逻辑删除, 所以和编辑其实为同⼀个接⼝

10.1 约定前后端交互接⼝

1. 判定是否要显⽰[编辑] [删除] 按钮

即修改之前的获取博客信息的接⼝, 在响应中加上⼀个字段.

loginUser 为 1 表⽰当前博客就是登陆⽤⼾⾃⼰写的.

[请求]
/blog/getBlogDetail?blogId=1
[响应]
{"code": 200,"msg": "","data": {
"id": 1,"title": "第⼀篇博客","content": "111我是博客正⽂我是博客正⽂我是博客正⽂","userId": 1,"loginUser": 1"deleteFlag": 0,"createTime": "2023-10-21 16:56:57","updateTime": "2023-10-21T08:56:57.000+00:00"}
}

2. 修改博客

[请求]
/blog/update
[参数]
Content-Type: application/json
{"title": "测试修改⽂章","content": "在这⾥写下⼀篇博客","blogId": "4"
}
[响应]
{"code": 200,"msg": "","data": true
}

3、删除博客

[请求]
/blog/delete?blogId=1
[响应]
{"code": 200,"msg": "","data": true
}

10.2 实现服务器代码

1. 给Blog类新增⼀个字段

@Data
public class Blog {private Integer id;private String title;private String content;private Integer userId;private Integer deleteFlag;private Date createTime;private Date updateTime;private Integer loginUser;public String getCreateTime(){return DateUtils.format(createTime);}
}

2. 修改 BlogController 其他代码不变. 只处理 "getBlogDeatail" 中的逻辑.从请求中获取登录用户的userid，如果登录用户和文章的作者是同一个人的话就给新变量赋值为1；

  @RequestMapping("/getBlogDetail")public Blog getBlogDetail(Integer blogId,HttpServletRequest request){Blog blog = blogService.getBlogDetail(blogId);String jwtToken = request.getHeader("user_token");Integer loginUserId = JwtUtils.getUserIdFromToken(jwtToken);if (loginUserId!=null && blog.getUserId()==loginUserId){blog.setLoginUser(1);}return blog;}

3. 修改 BlogController

增加 update/delete ⽅法, 处理修改/删除逻辑.

@RequestMapping("/update")public Result update(@RequestBody Blog blog){blogService.updateBlog(blog);return Result.success(true);}@RequestMapping("/delete")public boolean delete(Integer blogId){Blog blog = new Blog();blog.setId(blogId);blog.setDeleteFlag(1);blogService.updateBlog(blog);return true;}

 public Integer updateBlog(Blog blog) {return blogMapper.updateBlog(blog);}

10.3 实现客⼾端代码

1. 判断是否显⽰[编辑] [删除]按钮

 //获取博客详情$.ajax({type: "get",url: "/blog/getBlogDetail" + location.search,success: function (result){console.log(result);if(result.code == 200 && result.data != null){$(".title").text(result.data.title);$(".date").text(result.data.createTime);// $(".detail").text(result.data.content);editormd.markdownToHTML("detail", {markdown: result.data.content,});// 是否显示编辑/删除按钮if(result.data.loginUser){console.log("显示编辑/删除");var html = "";html += '<div class="operating">';html += '<button onclick="window.location.href=\'blog_update.html'+location.search+'\'">编辑</button>';html += '<button onclick="deleteBlog()">删除</button>';html += '</div>';$(".content").append(html);}}},error:function (error){console.log(error);if(error!=null && error.status==401){alert("⽤⼾未登录, 即将跳转到登录⻚!");//已经被拦截器拦截了, 未登录location.href ="blog_login.html";}}})

        //显⽰当前登录⽤⼾的信息function deleteBlog() {if(confirm("确定删除这篇博客吗?")){$.ajax({type:"post",url:"/blog/delete"+location.search,success:function(result){if(result.code==200 && result.data==true){alert("删除成功, 即将跳转⾄博客列表⻚");location.href = "blog_list.html";}else{alert("删除失败");}}});}}

编辑博客逻辑:

修改blog_update.html ⻚⾯加载时, 请求博客详情

    function getBlogInfo() {$.ajax({type:"get",url:"/blog/getBlogDetail"+location.search,success:function(result){if (result.code == 200 && result.data != null) {console.log(result);$("#blogId").val(result.data.id);$("#title").val(result.data.title);// $("#content").val(result.data.content);editormd("editor", {width  : "100%",height : "550px",path: "blog-editormd/lib/",onload : function() {this.watch()this.setMarkdown(result.data.content);}});}},error: function (err) {if (err != null && err.status == 401) {alert("⽤⼾未登录, 即将跳转到登录⻚!");//已经被拦截器拦截了, 未登录location.href = "/blog_login.html";}}});}getBlogInfo();

已经在getBlogInfo进⾏markdown编辑器的渲染了, 所以把以下代码删除

$(function () {var editor = editormd("editor", {width: "100%",height: "550px",path: "blog-editormd/lib/"});
});

完善发表博客的逻辑

function submit() {$.ajax({type: "post",url: "/blog/update",contentType: "application/json",data: JSON.stringify({"title": $("#title").val(),"content": $("#content").val(),"id": $("#blogId").val()}),success: function (result) {if (result != null && result.code == 200 && result.data == true) {location.href = "blog_list.html";} else {alert(result.msg);return;}},error: function (error) {if (error != null && error.status == 401) {alert("⽤⼾未登录, 登录后再进⾏对应操作");}}});}

运行程序：

修改之前：