基于Springboot+vue的博客系统分享

2024-02-24 14:28:40

作为互联网行业的一员，经常学习一些前沿技术、阅读经典框架源码是必不可少的。相信很多小伙伴都有这样一个想法，那就是自己做一个属于自己的网站，用上自己掌握的技术、从0到1的敲一个系统出来。我是后端Java工程师，4年经验，工作之余每天写写，做了一个个人博客网站，目前还是半成品，不过可以写博客、看博客，基本功能还是有的，分享给大家，如果大家有想法、也可以一起维护下。

博客网站

看到这个是不是有知乎那味了。。。哈哈、平时看知乎多了，设计博客布局时，感觉用知乎这种样式也挺舒服的，就这样设计了。

系统设计

软件设计

本系统是前后端分离的模式、前端使用vue+elementui，后端使用springboot，权限使用spring security+jwt，数据库是mysql，还使用了一些提升效率的工具，比如logbook等。

git地址如下：

后端地址

前端地址

模块设计

系统分为博客和圆桌两大模块。博客包括个人文章的分享、阅读他人博客等功能。圆桌是一个讨论区域、每个人都可以在这里提问问题、解答别人的问题。

首页

左上方有一个定期更新的推荐图片，这可以放一个热度很高的文章链接。

左下方展示所有人发布过的博客列表、后期可以根据每个人的标签推荐不同的文章。目前只实现了列表根据发布时间逆序的功能。。。

右上方是操作区域，分为写博客、提问、讨论三个操作，点击分别跳转不同的页面。

右下方是自己的活动记录，包括写过哪些博客、参与什么圆桌讨论、给哪些博客点过赞、评论过等等动态。

圆桌

这里用来展示所有用户提出的技术问题、和问题答案。暂未实现

个人中心

这里展示用户的各项数据、最近一个月发表过多少文章、获得过多少赞、参与过多少讨论等等数据。暂未

编辑页面

功能设计比较简介，如果要完成这个系统、囊括的技术点还是挺多的，大家有需要的可以clone下来、改改用户的逻辑变成自己的博客网站。或者可以提一些merge request一起建设下这个网站。

下载使用

首先保证本地有java8环境、安装有maven、vue环境。

1、首先下载后台系统、更改application.yml中的数据库配置

数据库配置更改

2、数据库表生成

用户表：

CREATE TABLE `user` (
  `id` int NOT NULL AUTO_INCREMENT COMMENT '用户表主键',
  `username` varchar(64) COLLATE utf8mb4_general_ci NOT NULL DEFAULT '' COMMENT '用户名',
  `password` varchar(128) COLLATE utf8mb4_general_ci NOT NULL DEFAULT '' COMMENT '密码',
  `head_img` varchar(256) COLLATE utf8mb4_general_ci NOT NULL DEFAULT '' COMMENT '头像',
  `create_time` timestamp NOT NULL COMMENT '创建时间',
  `update_time` timestamp NOT NULL ON UPDATE CURRENT_TIMESTAMP COMMENT '修改时间',
  `is_delete` tinyint(1) NOT NULL DEFAULT '0' COMMENT '是否删除。0：否；1：是',
  PRIMARY KEY (`id`)
) ENGINE=InnoDB AUTO_INCREMENT=2 DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_general_ci;

博客表：

CREATE TABLE `blog` (
  `id` int NOT NULL AUTO_INCREMENT COMMENT '博客表主键',
  `user_id` int NOT NULL DEFAULT '0' COMMENT '用户ID',
  `title` varchar(256) COLLATE utf8mb4_general_ci NOT NULL DEFAULT '' COMMENT '标题',
  `img` varchar(256) COLLATE utf8mb4_general_ci NOT NULL DEFAULT '' COMMENT '图片',
  `introduction` varchar(512) COLLATE utf8mb4_general_ci NOT NULL DEFAULT '' COMMENT '简介',
  `content` text COLLATE utf8mb4_general_ci NOT NULL COMMENT '正文',
  `create_time` timestamp NULL DEFAULT NULL COMMENT '创建时间',
  `update_time` timestamp NULL DEFAULT NULL COMMENT '更新时间',
  `is_delete` tinyint(1) NOT NULL DEFAULT '0' COMMENT '是否删除1:是：0:否',
  PRIMARY KEY (`id`)
) ENGINE=InnoDB AUTO_INCREMENT=23 DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_general_ci;

目前只写了这俩表，其他后续更新

3、系统启动

数据库可以手动插入一个用户、几个博客

4、下载vue项目

5、控制台执行 vue ui 命令

启动vue cli

6、启动vue项目

启动vue

任务-->serve-->启动

然后访问 localost:8080，即可访问系统。打开系统后点下首页、或者路由设下 "/" 重定向到"/index"

系统主页

码农公寓