一、项目简介
个人博客系统采用前后端分离的方式来实现，使用数据库来存储相关的数据。前端由五个页面构成，分别是注册页面、登录页面、博客列表页、博客详情页、博客编辑页，这五个页面模拟实现了博客的最基础的功能。其结合后端实现了以下的功能：注册功能、登录功能、查看博客功能、发布博客功能、博客展示功能。
二、项目使用的技术
HTML、CSS、JS、Ajax、SpringMVC、MyBatis、MySQL
三、项目数据库设计
由于这是一个简易版的博客系统，因此在数据库的设计中还是比较简单的，只有三张表：用户表、图片表和文章表
--创建用户表
create table users (
uid int primary key auto_increment,
username varchar(50) not null unique,
password varchar(50) not null,
git_repo varchar(200) not null,
avatar_url varchar(200) not null comment '保存头像URL地址'
);--创建图片表
create table images (
imgid int primary key auto_increment,
content longblob not null comment '保存图片的内容二进制数据'
);--创建文章表
create table articles (
aid int primary key auto_increment,
uid int not null,
title varchar(100) not null,
published_at datetime not null,
category varchar(20) not null,
content text not null
);四、项目效果
1、注册页面
2、登录页面
3、博客列表页
4、博客详情页
5、博客编辑页
五、项目实现
首先要明确该博客系统的需求，即实现注册功能、登录功能、查看博客功能、发布博客功能、博客展示功能。接下来分别对这五大功能的实现做详细解释。
1、实现注册功能
实现逻辑是：
1）先把用户提交的图片保存到images表中，得到一个imgid（不考虑失败的情况）;
2）根据imgid得到一个图片的URL，即/images/<imgid>；
3）把username、password、git_repo，img_url插入用户表（不考虑失败的情况）；
4）完成注册
实现这个注册功能用到的资源：
①静态资源有/user/register.html、/user/register.css
②动态资源有/user/register.do，这个资源用来读取用户填写的信息、将图片保存到images表中以及将用户信息保存到users表
2、实现登录功能
实现逻辑是：
1）将用户提交的用户名和密码在数据库中进行查询，如果可以查询到相关记录，则登录成功，否则登录失败
2）将登录成功的用户信息放入session中
实现这个登录功能用到的资源：
①静态资源有/user/login.html、/user/login.css
②动态资源有/user/login.do，这个资源的作用有两个，一是根据用户名和密码查询到对应的用户，二是利用Cookie+Session机制保存当前用户的对象信息
实现Cookie+Seeion机制的代码为：
HttpSession session = request.getSession(true);
session.setAttribute("currentUser", user);3、实现博客展示功能（即在首页显示多篇文章摘要的功能）
实现逻辑是：
先根据session中的内容判断当前用户是否登录
登录分两种情况：
第一种情况：用户未登录，却在博客列表页，这里我们需要把这个页面跳转到登陆页面
第二种情况：用户已登录，此时我们需要要考虑博客列表页的数据渲染情况，这里我们要分两大区域来考虑
1）个人信息区域（即个人头像、用户名、git地址、文章总数、文章分类）
对于这个区域，我们的处理方式：
首先我们知道个人头像、用户名、git地址是可以通过用户表和图片表查询得到的，而文章分类和文章数量需要我们通过特定的SQL语句才能得到，所以这里我们的处理方法是将这里的五个属性放到一个类中，这样就可以通过新建的这个类的对象去得到这五个属性了
这是具体实现的代码：
@GetMapping("/current.json")
@ResponseBody
public CurrentResult getCurrentUser(HttpServletRequest request) {
//1、根据session中的内容判断当前用户是否登录
User currentUser = null;
HttpSession session = request.getSession(false);
if (session != null) {
currentUser = (User) session.getAttribute("currentUser");
}
if (currentUser == null) {
//用户未登录
return CurrentResult.notLogin();
} else {
//用户已登录
//查询文章数量
int articleCount = articleMapper.countByUid(currentUser.uid);
int categoryCount = articleMapper.countCategoryByUid(currentUser.uid);
return CurrentResult.login(currentUser, articleCount, categoryCount);
}
}上面代码中的CurrentResult类为
public class CurrentResult {
public String result;
public UserWithCount user;
public static CurrentResult notLogin() {
CurrentResult result = new CurrentResult();
result.result = "未登录";
result.user = null;
return result;
}
public static CurrentResult login(User user, int articleCount, int categoryCount) {
UserWithCount userWithCount = new UserWithCount(user, articleCount, categoryCount);
CurrentResult result = new CurrentResult();
result.result = null;
result.user = userWithCount;
return result;
}
}上面代码中的UserWithCount类的代码为
@Data
public class UserWithCount extends User {
public int article_count;
public int category_count;
public UserWithCount(User user, int article_count, int category_count) {
this.uid = user.uid;
this.username = user.username;
this.password = user.password;
this.avatar_url = user.avatar_url;
this.git_repo = user.git_repo;
this.article_count = article_count;
this.category_count = category_count;
}
}2）内容区（即显示多篇文章摘要的区域）
这里因为还没有实现发布博客功能，因此暂时不讨论
实现这个博客展示功能用到的资源：
①静态资源有/blog/index.html、/blog/loyout.css、/blog/list.css、/js/list.js;
在/js/list.js中JS通过Ajax请求动态资源/user/current.json得到用户的登录情况，通过Ajax请求动态资源/article/list.json得到该用户所有文章的摘要
②动态资源有/user/current.json、/images/<imgid>、/article/list.json;
/user/current.json这个动态资源根据Cookie+Seeion机制获取当前登录用户信息
/images/<imgid>这个动态资源根据imgid获取对应的图片
/article/list.json根据当前登录用户获取他发表的所有文章
4、实现发布博客功能
实现逻辑是：
先根据session中的内容判断当前用户是否登录
登录分两种情况：
第一种情况：用户未登录，却在博客编辑页，这里我们需要把从这个页面跳转到登陆页面
第二种情况：用户已登录，此时我们需要要考虑文章的发表时间、文章的保存问题
具体的代码为
LocalDateTime now = LocalDateTime.now(ZoneId.of("Asia/Shanghai"));
String publishedAt = now.format(DateTimeFormatter.ofPattern("yyyy-MM-dd HH:mm:ss"));
Article article = new Article();
article.uid = currentUser.uid;
article.title = title;
article.category = category;
article.published_at = publishedAt;
article.content = content;
articleMapper.insert(article);
//return "发表成功";
return "redirect:/blog/detail.html?aid=" + article.aid;实现这个博客发布功能用到的资源：
①静态资源有/blog/edit.html、/blog/edit.css
②动态资源有/article/save.do
/article/save.do这个动态资源做的是收集用户提交的数据，然后将这些数据保存
这个功能开发完之后，就可以使用博客的发布功能了，也就可以解决第三点实现博客展示功能中遗留的问题了，即在用户已登录的情况下，对内容区（即显示多篇文章摘要的区域）的展示
解决的具体逻辑是
首先根据session中的内容判断当前用户是否登录
登录分两种情况：
第一种情况：用户未登录，此时我们要求返回一个空的顺序表
第二种情况：用户已登录，我们要先根据用户的uid查询到该登录用户所有的文章，因为这里只是展示文章的摘要，因此我们需要对该用户的每篇文章做一定的处理，处理的逻辑是如果文章的字数（准确来说是长度）小于等于100，那么就不做处理，否则只留一百个字（准确来说是长度）。将所有文章处理完后，再依次把它们放入一个顺序表中，经过js的处理将这些文章摘要展示到文章列表页中
对文章的处理逻辑的代码是
public static ArticleSummary build(Article article) {
ArticleSummary articleSummary = new ArticleSummary();
articleSummary.aid = article.aid;
articleSummary.title = article.title;
articleSummary.published_at = article.published_at;
if (article.content.length() <= 100) {
articleSummary.summary = article.content;
} else {
articleSummary.summary = article.content.substring(0, 100);
}
return articleSummary;
}5、实现查看博客功能
实现逻辑是：
1）在博客列表页点击查看全文按钮就会跳转到博客详情页
2）每个查看全文按钮都对应着一个aid，从数据表中根据aid查询文章的标题、文章的发表时间、文章的正文
3）JS通过Ajax请求/article/get.json，然后操作DOM树得到博客详情页的具体文章信息
实现这个查看博客功能用到的资源：
①静态资源有/blog/detail.html、/blog/detail.css、/js/detail.js;
/js/detail.js这个静态资源通过Ajax请求/user/current.json得到用户的登录情况，通过Ajax请求/article/get.json?aid=<aid>得到具体文章的信息
②动态资源有/user/current.json、/images/<imgid>、/article/get.json?aid=<aid>;
/user/current.json这个动态资源根据Cookie+Seeion机制获取当前登录用户信息
/images/<imgid>这个动态资源根据imgid获取对应的图片
/article/get.json?aid=<aid>这个动态资源根据aid查询到对应的文章
六、项目代码
1、项目环境
IDEA + MySQL
2、项目布局
3、项目代码
Gitee链接：yan/blog_project
4315
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
