【搭建】个人博客网站的搭建

大概花了四天的时间完成了博客网站的搭建,以下是对博客网站搭建的过程记录

一、前言

环境:

JDK1.88u292

mysql5.7 (端口3307)

相关的jar包:

bash 复制代码
2025/10/29  17:09            78,492 jackson-annotations-2.17.2.jar
2025/10/29  17:09           581,927 jackson-core-2.17.2.jar
2025/10/29  17:09         1,649,454 jackson-databind-2.17.2.jar
2025/10/29  17:09            95,505 javax.servlet-api-4.0.1.jar
2025/10/29  17:09           231,811 logback-classic-1.2.12.jar
2025/10/29  17:09           448,860 logback-core-1.2.12.jar
2025/10/29  17:09         1,808,512 mybatis-3.5.15.jar
2025/10/29  17:09         1,006,904 mysql-connector-java-5.1.49.jar
2025/10/29  17:09            41,125 slf4j-api-1.7.36.jar

二、过程

先有一个思路,如果我想制作一个评论系统的话,该如何制作,首先脑海里构建一个清晰的思路,接着尝试用JavaScript模拟后端数据处理还有htmll、css实现页面布局,最终上传到gittee,这就是一个过程,详细可以看:
master分支

接着开始后端构建,配置过滤器(可以理解为前端的中间件):

java 复制代码
package com.example.api.config;

import javax.servlet.*;
import javax.servlet.annotation.WebFilter;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;

/**
 * 全局 UTF-8 编码过滤器
 * 作用于所有 /* 请求,保证请求体、响应体均为 UTF-8
 * 过滤器的顺序按照字母大小进行排序也可以在web.xml进行指定顺序
 */
@WebFilter(filterName = "utf8Filter", urlPatterns = "/*")
public class Utf8Filter implements Filter {

    @Override
    public void init(FilterConfig filterConfig) {
        // 无初始化资源
    }

    @Override
    public void doFilter(ServletRequest request,
                         ServletResponse response,
                         FilterChain chain)
            throws IOException, ServletException {



        HttpServletRequest req = (HttpServletRequest) request;
        HttpServletResponse resp = (HttpServletResponse) response;

        //三件套设置,servlet请求返回的接口数据必须为json格式
        // 关键:必须在第一次读取请求参数或 getInputStream 之前
        req.setCharacterEncoding("UTF-8");

        // 关键:必须在第一次调用 getWriter 之前
        resp.setCharacterEncoding("UTF-8");
        chain.doFilter(req, resp);
    }

    @Override
    public void destroy() {
        // 无资源释放
    }
}

创建数据库blog,分别创建表格,注意这里的数据库和数据表编码格式是utf8_general_ci,

创建表格article

sql 复制代码
CREATE TABLE IF NOT EXISTS `article` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `title` varchar(30) NOT NULL,
  `content` text NOT NULL,
  `viewCount` int(11) NOT NULL,
  `userId` int(11) NOT NULL,
  `categoryId` int(11) NOT NULL,
  `create_time` timestamp NOT NULL DEFAULT CURRENT_TIMESTAMP,
  PRIMARY KEY (`id`)
) ENGINE=MyISAM  DEFAULT CHARSET=utf8 AUTO_INCREMENT=16 ;

创建表格article_tag

sql 复制代码
CREATE TABLE IF NOT EXISTS `article_tag` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `articleId` int(11) NOT NULL,
  `tagId` int(11) NOT NULL,
  `create_time` timestamp NOT NULL DEFAULT CURRENT_TIMESTAMP,
  PRIMARY KEY (`id`)
) ENGINE=MyISAM  DEFAULT CHARSET=utf8 AUTO_INCREMENT=58 ;

创建表格category

sql 复制代码
CREATE TABLE IF NOT EXISTS `category` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `name` varchar(30) NOT NULL,
  `description` varchar(30) NOT NULL,
  `userId` int(11) NOT NULL,
  `create_time` timestamp NOT NULL DEFAULT CURRENT_TIMESTAMP,
  PRIMARY KEY (`id`)
) ENGINE=MyISAM  DEFAULT CHARSET=utf8 AUTO_INCREMENT=5 ;

创建表格comment

sql 复制代码
CREATE TABLE IF NOT EXISTS `comment` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `content` text CHARACTER SET utf8 COLLATE utf8_unicode_ci NOT NULL,
  `articleId` int(11) NOT NULL,
  `userId` int(11) NOT NULL,
  `replyId` int(11) NOT NULL,
  `rootId` int(11) NOT NULL,
  `create_time` timestamp NOT NULL DEFAULT CURRENT_TIMESTAMP,
  PRIMARY KEY (`id`)
) ENGINE=MyISAM  DEFAULT CHARSET=utf8 AUTO_INCREMENT=192 ;

创建表格user:

sql 复制代码
CREATE TABLE IF NOT EXISTS `tag` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `color` varchar(30) NOT NULL,
  `name` varchar(30) NOT NULL,
  `description` varchar(30) NOT NULL,
  `userId` int(11) NOT NULL,
  `create_time` timestamp NOT NULL DEFAULT CURRENT_TIMESTAMP,
  PRIMARY KEY (`id`)
) ENGINE=MyISAM  DEFAULT CHARSET=utf8 AUTO_INCREMENT=6 ;

于是,根据创建的数据表写对应的接口:
分支commont_version1.0

三、改进

现在博客系统已经完成的差不多了,新增一个多用户的功能。然后用户可可以在用户界面发表和管理自己的博客文章。详细的代码实现:

java 复制代码
    private SqlSession sqlSession = MyBatisUtil.getSession();
    private UserMapper mapper = sqlSession.getMapper(UserMapper.class);

    // 路径认证配置:路径 -> 允许的方法列表
    private static final Map<String, Set<String>> PATH_AUTH_CONFIG = new HashMap<>();
    private static final Map<String, Set<String>> PATH_PERMISSION_CONFIG = new HashMap<>();
    private static final Map<String, Set<String>> PATH_VIP_CONFIG = new HashMap<>();

    //验证token
    private final TokenVerify tokenVerify = new TokenVerify();

    static {
        // 完全公开的路径(所有方法都不需要认证)
        PATH_AUTH_CONFIG.put("/login", Collections.singleton("ALL"));
        PATH_AUTH_CONFIG.put("/register", Collections.singleton("ALL"));
        PATH_AUTH_CONFIG.put("/front/article", Collections.singleton("ALL"));
        PATH_AUTH_CONFIG.put("/front/user", Collections.singleton("ALL"));
        PATH_AUTH_CONFIG.put("/front/category", Collections.singleton("ALL"));
        PATH_AUTH_CONFIG.put("/front/tag", Collections.singleton("ALL"));
        PATH_AUTH_CONFIG.put("/verifyUser", Collections.singleton("ALL"));
        PATH_AUTH_CONFIG.put("/upload", Collections.singleton("ALL"));

        // 方法级控制的路径 运行get请求,但是不允许其他的post、put、delete请求,比如没有post,需要token进行登录
        PATH_AUTH_CONFIG.put("/front/comment", new HashSet<>(Arrays.asList("GET", "OPTIONS")));

        // 静态资源
        PATH_AUTH_CONFIG.put("/css/", Collections.singleton("ALL"));
        PATH_AUTH_CONFIG.put("/index.html", Collections.singleton("ALL"));
        PATH_AUTH_CONFIG.put("/js/", Collections.singleton("ALL"));
        PATH_AUTH_CONFIG.put("/images/", Collections.singleton("ALL"));
        PATH_AUTH_CONFIG.put("/favicon.ico", Collections.singleton("ALL"));
    }

    //下面这两个是完全相反的
    static {
        PATH_PERMISSION_CONFIG.put("/manage/comment", Collections.singleton("ALL"));
        PATH_PERMISSION_CONFIG.put("/manage/article", Collections.singleton("ALL"));
        PATH_PERMISSION_CONFIG.put("/manage/user", Collections.singleton("ALL"));
        PATH_PERMISSION_CONFIG.put("/manage/tag", Collections.singleton("ALL"));
        PATH_PERMISSION_CONFIG.put("/manage/category", Collections.singleton("ALL"));

        // 方法级控制的路径 不可以运行get请求,但是其他post、put、delete请求可以运行
        PATH_PERMISSION_CONFIG.put("/manage/test", new HashSet<>(Arrays.asList("GET", "OPTIONS")));
    }

    static{
        PATH_VIP_CONFIG.put("/vip/list", Collections.singleton("ALL"));
        // 方法级控制的路径 不可以运行get请求,但是其他post、put、delete请求可以运行
        PATH_VIP_CONFIG.put("/vip/test", new HashSet<>(Arrays.asList("GET", "OPTIONS")));
    }

详细代码可以见:
分支commont_version2.0

代码完全开源,欢迎各位留下改进的评论,谢谢!

相关推荐
PineappleCoder4 小时前
性能数据别再瞎轮询了!PerformanceObserver 异步捕获 LCP/CLS,不卡主线程
前端·性能优化
PineappleCoder4 小时前
告别字体闪烁 / 首屏卡顿!preload 让关键资源 “高优先级” 提前到
前端·性能优化
45288655上山打老虎4 小时前
C++完美转发
java·jvm·c++
Seven974 小时前
查找算法
java
晓梦.4 小时前
Vue3学习笔记
笔记·学习
m0_471199634 小时前
【vue】通俗详解package-lock文件的作用
前端·javascript·vue.js
思成不止于此4 小时前
【MySQL 零基础入门】DQL 核心语法(二):表条件查询与分组查询篇
android·数据库·笔记·学习·mysql
GIS之路5 小时前
GDAL 读取KML数据
前端
今天不要写bug5 小时前
vue项目基于vue-cropper实现图片裁剪与图片压缩
前端·javascript·vue.js·typescript