[JavaScript知识库]基于vue和SpringBoot的博客系统(快速搭建属于自己的博客网站)

SlcpBlog

🌍
English ? 简体中文

github：获取源码

SlcpBlog：展示

基于SpringBoot 和 vue，实现的博客系统

前言

一直有小伙伴问我要代码，不是我不发而是代码真的out，我不知我大一怎么想能写出那样的代码。总之，看了让人不言而喻🤡。这段时间比较空闲，然后就对代码进行了大改并且加了redis缓存等等一系列功能，我就不一列举了哈。

好了，废话不多说，上车~

主要功能：

• 文章，分类，标签，文章编辑支持Markdown等；
• 悠闲娱乐模块，支持文章搜索、听歌、相册等；
• 侧边栏模块，最新文章，最热文章，标签等；
• 烟花模块，一个模拟放烟花的页面；
• 帮你百度模块，一个可以帮你自动进行百度搜索的页面；
• 在线算法模块，可进行在线刷题以及题型分享功能等；
• 评论模块，所有文章都可进行评论，以及评论的邮件提醒；
• 后台管理采用vue+elementUI实现；
• 集成了动态诗歌；
• 集成了图床功能；
• 集成第三方QQ登录；
• 集成QQ邮箱，实现彩虹屁；
• 集成支付宝支付功能；
• 支持Redis缓存，基于注解实现。
• …

基本环境

windows环境需求

后端

JDK = 1.8
MySQL >= 5.7
Maven >= 3.0
Redis >= 6.0
IntelliJ IDEA
Xshell
MySQL图形化操作工具

前端

Node.js
VsCode 前端工具
VUE

温馨提示:
该前端选项是可选，若不整合vue，可直接跳过前端(基于vue的后台管理系统，是我以前玩的出勤异常项目，目前还未完全替换本项目的后台管理，主要是本项目的后台太丑了! 我也不知道当时大一的我是怎么想的🤡)

• JDK = 1.8

  在官方网站上下载1.8版本中的最新版，下载完成后安装即可。

  下载地址：https://www.oracle.com/java/technologies/javase/javase-jdk8-downloads.html

  #环境变量配置(现在默认会自动配置好)
  略
  
  #打开CMD命令行工具，检查是否配置成功
  java -version
  

• Maven >= 3.0

  从Maven官方网站上下载最新版的压缩包。

  下载地址：https://maven.apache.org/download.cgi

  #环境变量配置
  略
  
  #打开CMD命令行工具，检查是否配置成功
  mvn -v
  

• Mysql >= 5.7(最新版即可)

  安装教程：https://www.runoob.com/mysql/mysql-install.html

  下载地址：https://dev.mysql.com/downloads/mysql/

  访问Mysql的可视化数据库开发工具： Navicat Premium 工具的安装教程可自行百度搜索。

• Redis

  下载地址：https://redis.io/download/

  安装教程：解压，配置(密码，默认无密码)

  #快捷启动命令.bat
  redis-server.exe redis.windows.conf
  pause
  

• IntelliJ IDEA

  安装教程：https://blog.csdn.net/Sunshine_Mr_Sun/article/details/123891067

• Xshell

  安装教程：https://blog.csdn.net/Sunshine_Mr_Sun/article/details/124320972

• VSCode

  下载地址：https://code.visualstudio.com/

• Node.js

  安装教程：https://www.runoob.com/nodejs/nodejs-install-setup.html

运行

后端启动步骤

1. 创建数据库
2. 导入项目
3. 配置yaml
4. 启动成功

温馨提示：

1.sql文件已提供，只需执行即可。myblog.sql

2.将项目导入idea(本项目使用的工具是idea，如果你用的ecplise一样可以使用，毕竟百度无所不能)

3.启动之前记得修改连接数据库的配置

4.若控制台打印出访问路径，即OK

前端启动步骤（可选）

#打开windows命令行窗口，进入项目目录
cd 路径/topicUI

#强烈建议不要用直接使用 cnpm 安装，会有各种诡异的 bug，可以通过重新指定 registry 来解决 npm 安装速度慢的问题。
npm install --registry=https://registry.npm.taobao.org

#启动项目
npm run dev

打开浏览器，输入：http://localhost:81

若能正确展示登录页面，并能成功登录，菜单及页面展示正常，则表明项目启动成功

服务器部署

Linux部署肯定是先基于win操作的前提下获取jar以及dist，再进行操作的，若没有云服务器，here-下载VMware 或 白嫖云服务器

Linux环境需求

docker
docker-compose
nginx

• docker

  安装教程：https://blog.csdn.net/Sunshine_Mr_Sun/article/details/123206789

• nginx

  下载地址：http://nginx.org/download/

部署步骤

1.分别将前后端项目打包(jar、dist)

2.将dist丢到nginx里，并配置nginx.conf

3.修改Dockerfile以及docker-compose.yml文件（文件已提供）

4.执行docker build -t myblog:1.0 .

5.docker images 查看镜像是否生成

6.docker-compose up (查看是否启动成功，成功后可后台启动 -d)

7.查看并登录

问题相关

有任何问题欢迎提Issue,或者将问题描述发送至我邮箱 1206128610@qq.com.我会尽快解答.推荐提交Issue方式.

致大家🙋?♀?🙋?♂?

如果本项目帮助到了你，请在这里留下你的网址，让更多的人看到。
您的回复将会是我继续更新维护下去的动力。

2022.7.13更新说明

后台管理系统，已整合vue，并且抛弃原有的界面。(因此，vue成了必不可少的环节了)

2022.7.15更新说明

前台页面，已整合thymeleaf