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

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

一、前言

环境：

JDK1.88u292

mysql5.7 （端口3307）

二、过程

先有一个思路，如果我想制作一个评论系统的话，该如何制作，首先脑海里构建一个清晰的思路，接着尝试用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

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