引言

本次项目用到的技术

后端：Spring Boot，Spring MVC，Spring AOP，MyBatis

数据库：MySQL

前端：HTML，CSS，JavaScript，JS-WebAPI，jQuery

测试：IDEA 单元测试，Chrome，Fiddler，Postman

协议：HTTP

本次项目的业务流程

1. 搭建项目环境

2. 设计数据库，并根据数据库设计实体类

3. 做好 Mapper 接口和 xml 文件之间操作数据库的配合

4. 定好前后端交互的思路

5. 实现后端的 Service 层，Contoller 层

6. 编辑前后端代码，实现页面

7. 优化项目

一、搭建项目环境

1. 创建一个 Spring MVC 项目

2. 创建好配置文件( 开发环境 / 运行环境)

连接数据库、开启 MyBatis SQL 打印、配置 " xml 文件 " 保存路径

3. 实现项目的分层

Controller 作为控制层，用来与前端交互；Service 作为服务层，用来调用接口并处理中间代码；Mapper 作为持久层，用来和数据库交互。

model 包用来放置实体类，common 包用来封装公共代码。

4. 将纯前端设计的代码放入【resource / static】目录下，并对【target】目录进行删除操作。

注意： 如果不删除【target】目录，可能会出现前端代码不会加载到 JVM 中，这样就会导致 JVM 找不到前端代码，说白了，就是因为文件缓存的问题。

5. 运行框架提供的 " DemoApplication " 启动类，查看是否无误。

二、设计数据库，并根据数据库设计实体类

通过自己写的 sql 语句，往 MySQL 数据库中，插入【blog 表】、【user 表】

【blog 表】 预期用来存储博客的信息 ( 标题、内容、发布时间 )

【user 表】预期用来存储用户的信息 ( 用户账号、用户密码 )

create database if not exists practice_blog;
use practice_blog;
-- 创建博客表
drop table if exists blog;
create table blog(
    blogID int primary key auto_increment,
    title varchar(50),
    content mediumtext,
    postTime datetime default now(),
    userID int
);
-- 创建用户表
drop table if exists user;
create table user(
    userID int primary key auto_increment,
    username varchar(50) unique,
    password varchar(50)
);
insert into blog values(null, 'Jack 的博客', '中秋快乐，合家团圆！', '2020-08-15 08:20:05', 1);
insert into blog(blogID, title, content, userID) values(null, '莉莉 的博客', 'C++, Java, Python 基础语法', 3);
insert into blog(blogID, title, content, userID) values(null, 'Rose 的博客', '好好学习，天天向上', 2);
insert into blog(blogID, title, content, userID) values(null, '李明 的博客', '坚持锻炼，保持好身体！', 4);
insert into user values(null, 'Jack', '123');
insert into user values(null, 'Rose', '321');
insert into user values(null, '莉莉', '456');
insert into user values(null, '李明', '789');

Blog 类：

@Data
public class Blog {
    private int blogID;
    private String title;
    private String content;
    private String postTime;
    private int userID;
    private int isAuthor; // 数据库不存储，用于业务逻辑
}

User 类：

@Data
public class User {
    private int userID;
    private String username;
    private String password;
    private int blogCount; // 数据库不存储，用于业务逻辑
}

三、实现 Mapper 接口和 xml 文件

实现 Mapper 接口和 xml 文件，明确增删改查数据库的要求。

BlogMapper 接口 和 " BlogMapper.xml " 文件

UserMapper 接口 和 " UserMapper.xml " 文件

四、 定好前后端交互的思路

实现每个页面的思想

五个页面：博客注册页、博客列表页、博客内容页、博客登录页、博客编辑页

博客列表页、博客内容页是通过 ajax 发送的 HTTP 请求，之后在服务器端计算响应的。而注册页、登录页、编辑页，是通过 form 表单的形式来构造 HTTP请求。

必须明确：

• 列表页和内容页是通过 浏览器输入 URL 路径这种形式来构造 HTTP 请求的。这种方式，绝大多数情况下，都是一个 GET 请求。
  
• 登录页和编辑页是通过 form 表单的形式构造 HTTP 请求的，一般和 input 标签相关的提交按钮，都是 POST 方法。
  

1. 博客注册页

2. 博客列表页

3. 博客内容页

4. 博客登录页

判定用户有没有登录

注销操作

显示用户/作者信息

5. 博客编辑页

删除博客功能