星球的眼睛 发表于 2024-12-23 08:16:08

一款基于 Vue + SpringBoot 前后端分离的开源博客体系！

各人好，我是 Java陈序员。
今天，给各人介绍一款基于 Vue + SpringBoot 前后端分离的开源博客体系！
关注微信公众号：【Java陈序员】，获取开源项目分享、AI副业分享、超200本经典盘算机电子书籍等。
项目介绍

shiyi-blog —— 拾壹博客，一款基于 Vue + SpringBoot 前后端分离的博客体系，文件支持本地和七牛云存储，集成 QQ、微信等第三方登录，并实现即时通讯聊天室功能。
功能特色：

[*]前后端分离模式开发，使用最新的前后端开发技术实现
[*]采用 Markdown 编辑器，支持代码高亮和复制、图片预览、深色模式等功能
[*]文章支持考核、评论、点赞、留言等功能
[*]接入第三方登录，支持 QQ、微信、微博、Github、Gitee 登录
[*]提供后台管理、PC Web 端和 Uniapp 移动端
[*]后台管理提供强大的设置功能，网站信息、友情链接、评论打赏、公告等支持个性化设置
[*]使用 Netty + Websocket 技术实现博客群聊和单聊功能
技术栈：

[*]前端：Vue3.0 + Element-Plus
[*]后端：SpringBoot + Sa-Token + MyBatisPlus + MySQL + Redis + ElasticSearch
[*]其他：接入 QQ、微博、码云、微信公众号等第三方登录，接入七牛云对象存储
功能截图

后台管理


[*]首页
https://chen-coding.oss-cn-shenzhen.aliyuncs.com/create-center/shiyi-blog/img-20241218202001.png

[*]文章管理
https://chen-coding.oss-cn-shenzhen.aliyuncs.com/create-center/shiyi-blog/img-20241218202017.png
https://chen-coding.oss-cn-shenzhen.aliyuncs.com/create-center/shiyi-blog/img-20241218202030.png
https://chen-coding.oss-cn-shenzhen.aliyuncs.com/create-center/shiyi-blog/img-20241218202057.png

[*]标签管理
https://chen-coding.oss-cn-shenzhen.aliyuncs.com/create-center/shiyi-blog/img-20241218202114.png

[*]分类管理
https://chen-coding.oss-cn-shenzhen.aliyuncs.com/create-center/shiyi-blog/img-20241218202138.png

[*]网站设置
https://chen-coding.oss-cn-shenzhen.aliyuncs.com/create-center/shiyi-blog/img-20241218202249.png

[*]评论管理
https://chen-coding.oss-cn-shenzhen.aliyuncs.com/create-center/shiyi-blog/img-20241218202314.png

[*]留言管理
https://chen-coding.oss-cn-shenzhen.aliyuncs.com/create-center/shiyi-blog/img-20241218202413.png
PC 客户端


[*]登录
https://chen-coding.oss-cn-shenzhen.aliyuncs.com/create-center/shiyi-blog/img-20241218203336.png

[*]首页
https://chen-coding.oss-cn-shenzhen.aliyuncs.com/create-center/shiyi-blog/img-20241218202450.png

[*]文章详情
https://chen-coding.oss-cn-shenzhen.aliyuncs.com/create-center/shiyi-blog/img-20241218202548.png

[*]文章评论
https://chen-coding.oss-cn-shenzhen.aliyuncs.com/create-center/shiyi-blog/img-20241218202728.png
[*]留言板
https://chen-coding.oss-cn-shenzhen.aliyuncs.com/create-center/shiyi-blog/img-20241218202808.png

[*]个人中心
https://chen-coding.oss-cn-shenzhen.aliyuncs.com/create-center/shiyi-blog/img-20241218202837.png

[*]消息中心
https://chen-coding.oss-cn-shenzhen.aliyuncs.com/create-center/shiyi-blog/img-20241218203015.png

[*]聊天室
https://chen-coding.oss-cn-shenzhen.aliyuncs.com/create-center/shiyi-blog/img-20241218203150.png
移动端


[*]首页
https://chen-coding.oss-cn-shenzhen.aliyuncs.com/create-center/shiyi-blog/img-20241218203438.png

[*]文章
https://chen-coding.oss-cn-shenzhen.aliyuncs.com/create-center/shiyi-blog/img-20241218203531.png

[*]消息
https://chen-coding.oss-cn-shenzhen.aliyuncs.com/create-center/shiyi-blog/img-20241218203907.png

[*]个人中心
https://chen-coding.oss-cn-shenzhen.aliyuncs.com/create-center/shiyi-blog/img-20241218203948.png
本地开发

情况准备

1、开发情况

[*]Node.js
[*]JDK 1.8
[*]MySQL
[*]Redis
[*]Elasticsearch(可选)
2、克隆代码
git clone https://gitee.com/quequnlong/shiyi-blog.git3、目次结构
shiyi-blog
├──blog               -- 后台服务
│├── shiyi-admin         --后台管理系统的controller模块
│├── shiyi-common      --通用模块
│├── shiyi-generate      --代码生成模块
│├── shiyi-quartz      --定时任务模块
│├── shiyi-server      --博客启动类模块
│└── shiyi-web         --门户接口模块
├──blog-admin          -- 后台管理
├──blog-web            -- PC 客户端
└──uniapp-blog         -- Uniapp 移动端服务端

1、将整个项目以 Maven 工程的形式导入到 IDEA 中
2、创建数据库 blog
CREATE DATABASE `blog` DEFAULT CHARACTER SET utf8mb4 COLLATE utf8mb4_bin;3、在数据库 blog 中执行 shiyi-blog/blog.sql 脚本，初始化数据库数据
4、修改 shiyi-blog/blog/shiyi-common/src/main/resources/application.yml 设置文件中的 MySQL、Redis、ElasticSearch(可选，默认不启用)的连接信息
5、运行主启动类 shiyi-blog/blog/shiyi-server/src/main/java/com/shiyi/Application.java 启动服务
6、服务启动乐成后，欣赏器访问如下地点查阅 API 文档
http://localhost:8800/shiyi/doc.htmlAPI 文档访问的默认用户名暗码：admin/queql.
后台管理端

## 进入后台管理
cd blog-admin

## 安装依赖
pnpm install

## 运行服务
pnpm run dev

## 浏览器访问
http://localhost:3000留意：默认后台的登录用户名暗码：admin/123456.
如用户名暗码错误，可通过后台服务 AesEncryptUtil 类中的主函数重新天生暗码，并更新到数据表 b_user 表中的用户暗码。
public class AesEncryptUtil {

    final static String key = "shiyi2022";
    /**
   * 校验内容是否一致
   */
    public static boolean validate(String target, String target1) {
      return target.equalsIgnoreCase(aesEncrypt(target1));
    }

    /**
   * AES加密
   *
   * @param password：密码
   * @return
   */
    public static String aesEncrypt(String password){
      return SaSecureUtil.aesEncrypt(key, password);
    }

    public static void main(String[] args) {
      System.out.println(aesEncrypt("123456"));
    }
}PC 客户端

## 进入 PC 客户端
cd blog-web

## 安装依赖
pnpm install

## 运行服务
pnpm run dev

## 浏览器访问
http://localhost:8000移动端

1、将 uniapp-blog 目次导入到 HBuilderX 中
2、修改 request.js 中的后台服务地点
export default function request(options) {
        //后端接口地址
        const baseUrl = 'http://localhost:8800/shiyi';
}3、点击 HBuilderX 顶部菜单栏中的运行
shiyi-blog 作为一款开源的博客体系，可以说功能齐全，采用最新的开发模式和技术栈完备地实现了一套博客体系，是一个十分优秀的开源博客体系！
项目地址：https://gitee.com/quequnlong/shiyi-blog最后

推荐的开源项目已经收录到 GitHub 项目，欢迎 Star：
https://github.com/chenyl8848/great-open-source-project大概访问网站，举行在线欣赏：
https://chencoding.top:8090/#/https://chen-coding.oss-cn-shenzhen.aliyuncs.com/%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_20240629100336.png
各人的点赞、收藏和评论都是对作者的支持，如文章对你有资助还请点赞转发支持下，谢谢！

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。
页: [1]
查看完整版本: 一款基于 Vue + SpringBoot 前后端分离的开源博客体系！