SpringBoot 前后端分离Vue个人博客系统
Posted 编程指南针
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了SpringBoot 前后端分离Vue个人博客系统相关的知识,希望对你有一定的参考价值。
作者主页:编程指南针
作者简介:Java领域优质创作者、CSDN博客专家 、掘金特邀作者、多年架构师设计经验、腾讯课堂常驻讲师
主要内容:Java项目、毕业设计、简历模板、学习资料、面试题库、技术互助
文末获取源码
一,项目简介
本项目使用springboot+mybatis+前端vue,使用前后端分离架构实现的个人博客系统,共7个模块,首页,写博客,博客详情页,评论管理,文章分类,标签管理和文章归档。该项目没有后端管理功能,比较适合用于大作业!
二,环境介绍
语言环境:Java: jdk1.8
数据库:mysql: mysql5.7/redis
应用服务器:Tomcat: tomcat8.5.31
开发工具:IDEA或eclipse
项目管理工具: maven
三,系统展示
首页
文章分类
标签
登录
发布文章
四,核心代码展示
package com.mszlu.blog.controller;
import com.mszlu.blog.common.aop.LogAnnotation;
import com.mszlu.blog.common.cache.Cache;
import com.mszlu.blog.service.ArticleService;
import com.mszlu.blog.vo.Result;
import com.mszlu.blog.vo.params.ArticleParam;
import com.mszlu.blog.vo.params.PageParams;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.*;
//json数据进行交互
@RestController
@RequestMapping("articles")
public class ArticleController
@Autowired
private ArticleService articleService;
/**
* 首页 文章列表
* @param pageParams
* @return
*/
@PostMapping
//加上此注解 代表要对此接口记录日志
@LogAnnotation(module="文章",operator="获取文章列表")
@Cache(expire = 5 * 60 * 1000,name = "listArticle")
public Result listArticle(@RequestBody PageParams pageParams)
// int i = 10/0;
return articleService.listArticle(pageParams);
/**
* 首页 最热文章
* @return
*/
@PostMapping("hot")
@Cache(expire = 5 * 60 * 1000,name = "hot_article")
public Result hotArticle()
int limit = 5;
return articleService.hotArticle(limit);
/**
* 首页 最新文章
* @return
*/
@PostMapping("new")
@Cache(expire = 5 * 60 * 1000,name = "news_article")
public Result newArticles()
int limit = 5;
return articleService.newArticles(limit);
/**
* 首页 最新文章
* @return
*/
@PostMapping("listArchives")
public Result listArchives()
return articleService.listArchives();
@PostMapping("view/id")
public Result findArticleById(@PathVariable("id") Long articleId)
return articleService.findArticleById(articleId);
//接口url:/articles/publish
//
//请求方式:POST
@PostMapping("publish")
public Result publish(@RequestBody ArticleParam articleParam)
return articleService.publish(articleParam);
package com.mszlu.blog.service.impl;
import com.baomidou.mybatisplus.core.conditions.query.LambdaQueryWrapper;
import com.baomidou.mybatisplus.core.metadata.IPage;
import com.baomidou.mybatisplus.extension.plugins.pagination.Page;
import com.mszlu.blog.dao.dos.Archives;
import com.mszlu.blog.dao.mapper.ArticleBodyMapper;
import com.mszlu.blog.dao.mapper.ArticleMapper;
import com.mszlu.blog.dao.mapper.ArticleTagMapper;
import com.mszlu.blog.dao.pojo.Article;
import com.mszlu.blog.dao.pojo.ArticleBody;
import com.mszlu.blog.dao.pojo.ArticleTag;
import com.mszlu.blog.dao.pojo.SysUser;
import com.mszlu.blog.service.*;
import com.mszlu.blog.utils.UserThreadLocal;
import com.mszlu.blog.vo.ArticleBodyVo;
import com.mszlu.blog.vo.ArticleVo;
import com.mszlu.blog.vo.Result;
import com.mszlu.blog.vo.TagVo;
import com.mszlu.blog.vo.params.ArticleParam;
import com.mszlu.blog.vo.params.PageParams;
import org.apache.commons.lang3.StringUtils;
import org.joda.time.DateTime;
import org.springframework.beans.BeanUtils;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;
import org.springframework.transaction.annotation.Transactional;
import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;
@Service
public class ArticleServiceImpl implements ArticleService
@Autowired
private ArticleMapper articleMapper;
@Autowired
private TagService tagService;
@Autowired
private SysUserService sysUserService;
@Autowired
private ArticleTagMapper articleTagMapper;
@Override
public Result listArticle(PageParams pageParams)
Page<Article> page = new Page<>(pageParams.getPage(),pageParams.getPageSize());
IPage<Article> articleIPage = articleMapper.listArticle(
page,
pageParams.getCategoryId(),
pageParams.getTagId(),
pageParams.getYear(),
pageParams.getMonth());
List<Article> records = articleIPage.getRecords();
return Result.success(copyList(records,true,true));
// @Override
// public Result listArticle(PageParams pageParams)
// /**
// * 1. 分页查询 article数据库表
// */
// Page<Article> page = new Page<>(pageParams.getPage(),pageParams.getPageSize());
// LambdaQueryWrapper<Article> queryWrapper = new LambdaQueryWrapper<>();
// if (pageParams.getCategoryId() != null)
// // and category_id=#categoryId
// queryWrapper.eq(Article::getCategoryId,pageParams.getCategoryId());
//
// List<Long> articleIdList = new ArrayList<>();
// if (pageParams.getTagId() != null)
// //加入标签 条件查询
// //article表中 并没有tag字段 一篇文章 有多个标签
// //article_tag article_id 1 : n tag_id
// LambdaQueryWrapper<ArticleTag> articleTagLambdaQueryWrapper = new LambdaQueryWrapper<>();
// articleTagLambdaQueryWrapper.eq(ArticleTag::getTagId,pageParams.getTagId());
// List<ArticleTag> articleTags = articleTagMapper.selectList(articleTagLambdaQueryWrapper);
// for (ArticleTag articleTag : articleTags)
// articleIdList.add(articleTag.getArticleId());
//
// if (articleIdList.size() > 0)
// // and id in(1,2,3)
// queryWrapper.in(Article::getId,articleIdList);
//
//
// //是否置顶进行排序
// //order by create_date desc
// queryWrapper.orderByDesc(Article::getWeight,Article::getCreateDate);
// Page<Article> articlePage = articleMapper.selectPage(page, queryWrapper);
// List<Article> records = articlePage.getRecords();
// //能直接返回吗? 很明显不能
// List<ArticleVo> articleVoList = copyList(records,true,true);
// return Result.success(articleVoList);
//
@Override
public Result hotArticle(int limit)
LambdaQueryWrapper<Article> queryWrapper = new LambdaQueryWrapper<>();
queryWrapper.orderByDesc(Article::getViewCounts);
queryWrapper.select(Article::getId,Article::getTitle);
queryWrapper.last("limit "+limit);
//select id,title from article order by view_counts desc limit 5
List<Article> articles = articleMapper.selectList(queryWrapper);
return Result.success(copyList(articles,false,false));
@Override
public Result newArticles(int limit)
LambdaQueryWrapper<Article> queryWrapper = new LambdaQueryWrapper<>();
queryWrapper.orderByDesc(Article::getCreateDate);
queryWrapper.select(Article::getId,Article::getTitle);
queryWrapper.last("limit "+limit);
//select id,title from article order by create_date desc desc limit 5
List<Article> articles = articleMapper.selectList(queryWrapper);
return Result.success(copyList(articles,false,false));
@Override
public Result listArchives()
List<Archives> archivesList = articleMapper.listArchives();
return Result.success(archivesList);
@Autowired
private ThreadService threadService;
@Override
public Result findArticleById(Long articleId)
/**
* 1. 根据id查询 文章信息
* 2. 根据bodyId和categoryid 去做关联查询
*/
Article article = this.articleMapper.selectById(articleId);
ArticleVo articleVo = copy(article, true, true,true,true);
//查看完文章了,新增阅读数,有没有问题呢?
//查看完文章之后,本应该直接返回数据了,这时候做了一个更新操作,更新时加写锁,阻塞其他的读操作,性能就会比较低
// 更新 增加了此次接口的 耗时 如果一旦更新出问题,不能影响 查看文章的操作
//线程池 可以把更新操作 扔到线程池中去执行,和主线程就不相关了
threadService.updateArticleViewCount(articleMapper,article);
return Result.success(articleVo);
@Override
public Result publish(ArticleParam articleParam)
//此接口 要加入到登录拦截当中
SysUser sysUser = UserThreadLocal.get();
/**
* 1. 发布文章 目的 构建Article对象
* 2. 作者id 当前的登录用户
* 3. 标签 要将标签加入到 关联列表当中
* 4. body 内容存储 article bodyId
*/
Article article = new Article();
article.setAuthorId(sysUser.getId());
article.setWeight(Article.Article_Common);
article.setViewCounts(0);
article.setTitle(articleParam.getTitle());
article.setSummary(articleParam.getSummary());
article.setCommentCounts(0);
article.setCreateDate(System.currentTimeMillis());
article.setCategoryId(Long.parseLong(articleParam.getCategory().getId()));
//插入之后 会生成一个文章id
this.articleMapper.insert(article);
//tag
List<TagVo> tags = articleParam.getTags();
if (tags != null)
for (TagVo tag : tags)
Long articleId = article.getId();
ArticleTag articleTag = new ArticleTag();
articleTag.setTagId(Long.parseLong(tag.getId()));
articleTag.setArticleId(articleId);
articleTagMapper.insert(articleTag);
//body
ArticleBody articleBody = new ArticleBody();
articleBody.setArticleId(article.getId());
articleBody.setContent(articleParam.getBody().getContent());
articleBody.setContenthtml(articleParam.getBody().getContentHtml());
articleBodyMapper.insert(articleBody);
article.setBodyId(articleBody.getId());
articleMapper.updateById(article);
Map<String,String> map = new HashMap<>();
map.put("id",article.getId().toString());
return Result.success(map);
private List<ArticleVo> copyList(List<Article> records, boolean isTag, boolean isAuthor)
List<ArticleVo> articleVoList = new ArrayList<>();
for (Article record : records)
articleVoList.add(copy(record,isTag,isAuthor,false,false));
return articleVoList;
private List<ArticleVo> copyList(List<Article> records, boolean isTag, boolean isAuthor, boolean isBody,boolean isCategory)
List<ArticleVo> articleVoList = new ArrayList<>();
for (Article record : records)
articleVoList.add(copy(record,isTag,isAuthor,isBody,isCategory));
return articleVoList;
@Autowired
private CategoryService categoryService;
private ArticleVo copy(Article article, boolean isTag, boolean isAuthor, boolean isBody,boolean isCategory)
ArticleVo articleVo = new ArticleVo();
articleVo.setId(String.valueOf(article.getId()));
BeanUtils.copyProperties(article,articleVo);
articleVo.setCreateDate(new DateTime(article.getCreateDate()).toString("yyyy-MM-dd HH:mm"));
//并不是所有的接口 都需要标签 ,作者信息
if (isTag)
Long articleId = article.getId();
articleVo.setTags(tagService.findTagsByArticleId(articleId));
if (isAuthor)
Long authorId = article.getAuthorId();
articleVo.setAuthor(sysUserService.findUserById(authorId).getNickname());
if (isBody)
Long bodyId = article.getBodyId();
articleVo.setBody(findArticleBodyById(bodyId));
if (isCategory)
Long categoryId = article.getCategoryId();
articleVo.setCategory(categoryService.findCategoryById(categoryId));
return articleVo;
@Autowired
private ArticleBodyMapper articleBodyMapper;
private ArticleBodyVo findArticleBodyById(Long bodyId)
ArticleBody articleBody = articleBodyMapper.selectById(bodyId);
ArticleBodyVo articleBodyVo = new ArticleBodyVo();
articleBodyVo.setContent(articleBody.getContent());
return articleBodyVo;
五,项目总结
本项目使用技术新,采用最流行的springboot和vue前后端分离。适合大作业中使用。
开发者涨薪指南 48位大咖的思考法则、工作方式、逻辑体系以上是关于SpringBoot 前后端分离Vue个人博客系统的主要内容,如果未能解决你的问题,请参考以下文章
博客基于SpringBoot+vue的前后端分离颜值博客系统
Java项目:个人博客系统(前后端分离+java+vue+Springboot+ssm+mysql+maven+redis)
Java项目:个人博客系统(前后端分离+java+vue+Springboot+ssm+mysql+maven+redis)
Vue+SpringBoot超详细!一周开发一个SpringBoot + Vue+MybatisPlus+Shiro+JWT+Redis前后端分离个人博客项目!!!项目完结
Vue+SpringBoot超详细!一周开发一个SpringBoot + Vue+MybatisPlus+Shiro+JWT+Redis前后端分离个人博客项目!!!项目完结