- 此项目是基于 SpringBoot2 + Vue3开发的前后端分离的个人博客项目
- 项目成就 访客量2500+ 请求量21000+
- 哔哩哔哩19万播放 4000+ 收藏
- 此项目代码写的比较小白 比较冗余 只提供技术业务的提升以及界面的灵感设计
- 使用Redis进行缓存常用的数据提高响应减轻数据库压力
- 使用MongoDb存储留言数据减轻数据库压力
- 使用ElementPlus快速开发组件页面美观
- 使用Md-editor-v3编辑器使文章变得美观
- 使用Danmaku-vue实现留言板的弹幕效果
- 使用Minio进行图片存储免费好用
- 使用Elasticsearch用于文章的存储以及实现搜索和高亮的效果
- 使用Rabbitmq异步通知处理各种操作实现友链的申请
- 使用SpringAop面向切面编程来进行接口访问量的数据统计
- 使用Echarts图表来快速的预览数据
- 使用SpringTask定时任务来进行将每天统计数据写入数据库
- 使用Mybatis-Plus快速的CRUD开发
- 使用Aws-java-sdk-s3亚马逊和Minio配合进行视频的分片上传
- 使用Easyexcel技术快速的将excel数据导入导出
前台前端（博客）： Vue3+ Element Plus + Echarts + Md-editor-v3.+ Danmaku-vue + Vue-video-player.......
后台前端（管理）： Vue3+ Element Plus + Echarts + Md-editor-v3 ……
后端： JDK17 + SpringBoot2 + SpringAop + SpringTask + Elasticsearch+ Mysql+ Redis + MongoDb + RabbitMQ + Minio + Mybatis-Plus + Easyexcel + aws-java-sdk-s3 + Nginx + Docker……
以下需要版本要求其他技术版本新一点就可以
| 名称 | 环境 |
|---|---|
| Npm | 10+ |
| Vue3 | 3+ |
| Node | 17+ |
以下需要版本要求其他技术版本新一点就可以
| 名称 | 环境 |
|---|---|
| MySQL | 8.0+ |
| JDK | 17 |
| SpringBoot | 2 |
| Elasticsearch | 7.2.1 |
| Easyexel | 3.0.1 |
哔哩哔哩视频效果演示地址：https://space.bilibili.com/1680425641?spm_id_from=333.788.0.0
前台博客：http://blog.haoyuming.top
后台管理： http://admin.haoyuming.top:8888
- 服务器是2核2G1M比较垃圾可以项目捐赠一下哦
- 随时可能崩掉发现了会及时维护
- 免费使用 大家随意发挥
- 后续网站访问不了以及长期没更新的话就是没钱啦
- 如有安装问题请联系作者
QQ： 3655161743
WX: H9498426
vue3-blog-web文件夹
npm install || npm run dev
npm run devvue3-blog-admin文件夹
npm install || npm run dev
npm run devjava-blog-system文件夹
- 后端分为两个服务一个对应web端一个admind端
- 打开项目 配置jdk 加载maven依赖
- 安装mysql redis mq es mongoDb minio
- 将sql文件夹中的sql放入到你的数据库中
- 安装完minio后需要创建blog桶并开放public权限
- 安装es后还需要配置分词器
- 配置完分词器需要创建索引结构
curl -X PUT "http://localhost:9200/article" -H 'Content-Type: application/json' -d'
{
"settings": {},
"mappings": {
"properties": {
"id": {
"type": "long"
},
"title": {
"type": "text",
"analyzer": "standard"
},
"describe": {
"type": "text",
"index": false
},
"categoryName": {
"type": "keyword"
},
"labelName": {
"type": "keyword"
},
"cover": {
"type": "keyword",
"index": false
},
"status": {
"type": "integer"
},
"sort": {
"type": "integer"
},
"hot": {
"type": "integer"
},
"content": {
"type": "text",
"analyzer": "standard"
},
"createTime": {
"type": "date"
},
"updateTime": {
"type": "date"
}
}
}
}'
- 安装mongoDb完成后打开可视化界面需要先使用
use blog 来创建数据库
- 在TODO的地方修改你的配置文件
server:
servlet:
context-path: /api
port: 9779
// TODO:mysql的配置
spring:
datasource:
driver-class-name:
url: jdbc:mysql://127.0.0.1:3306/blog-admin?serverTimezone=Asia/Shanghai&useUnicode=true&characterEncoding=utf-8&zeroDateTimeBehavior=convertToNull&useSSL=false&allowPublicKeyRetrieval=true
username: root
password: 123456
// TODO:redis的配置
redis:
host: 127.0.0.1
port: 6379
password: 123456
// es的配置
elasticsearch:
uris: 127.0.0.1:9200
// mongoDb配置如果上线到服务器中需要配置密码防止被黑
data:
mongodb:
field-naming-strategy: org.springframework.data.mapping.model.SnakeCaseFieldNamingStrategy # 自动转驼峰
host: 127.0.0.1
port: 27017
database: blog
# password:
# username:
// TODO:mq的配置
rabbitmq:
port: 5672
host: 127.0.0.1
username:
password:
publisher-confirm-type: CORRELATED # 消息确认模式
publisher-returns: true # 消息无法路由回调
listener:
simple:
prefetch: 1
concurrency: 3
acknowledge-mode: manual # 手动确认
mybatis-plus:
configuration:
# 在映射实体或者属性时，将数据库中表名和字段名中的下划线去掉，按照驼峰命名法映射
map-underscore-to-camel-case: true
log-impl: org.apache.ibatis.logging.stdout.StdOutImpl # 日志
global-config:
db-config:
id-type: ASSIGN_ID # 使用手动指定ID的方式。也就是说，当你插入数据时，需要手动为实体类中的ID属性设置值。
// TODO:minio的配置
minio:
# MinIO服务器地址
endpoint: http://127.0.0.1:9000
# MinIO服务器访问凭据
accessKey:
secretKey:
# MinIO桶名称
bucket: blog
# MinIO读取路径前缀
readPath: http://127.0.0.1:90001.图片加载太慢
2.上传图片没做限制
3.以及一些数据统计没做好
4.没有响应式
觉得做的还可以 对你的灵感和技术业务有帮助的话以及喜欢这个项目的可以通过以下方式支持我：
- Star和Fork
- 哔哩哔哩视频一键三连支持
- 通过微信、支付宝一次性打赏或捐赠作者 谢谢各位大哥赏饭吃 你的鼓励 是我最大的动力
| 微信 | 支付宝 |
|---|---|
 |
 |
- 主要编写uni-app+vue3代码
- 后续项目会集成AI相关
- 项目只从0到1编写
- 后端编写SpringCloud微服务项目
- 从0到1一个月内完成仿哔哩哔哩移动端以及网页端预计7.30上线
- 自研校园内项目会集成AI目前没有啥思路