博客介绍

本文主要介绍博客用到的技术和一些功能详情

1、博客使用到的技术

  1. 前端:vue + vuex + vue-router + axios + vuetify + element + echarts + Websocket
  2. 后端:SpringBoot + nginx + docker + SpringSecurity + Swagger2 + MyBatisPlus + Mysql + Redis + elasticsearch + RabbitMQ + MaxWell + Websocket (合作小伙伴写的)

2、首页登录

本博客支持QQgitee微博、邮箱登录

3、图片的存储

项目中图片存储采用的是腾讯云平台的对象存储,因为腾讯云新用户会有免费的一个额度,其他的都是需要收费的。

4、首页的搜索

首页的搜索采用的是es的搜索,eslinux启动的话会占用比较高的一个内存,所以博主介意如需要使用es搜索的购买服务器时资金允许的情况下尽可能购买内存比较多的服务器。然后项目搜索的话主要是围绕文章的标题和内容进行的分词搜索。

5、项目亮点

1.前台参考”Hexo”的”Butterfly”设计,美观简洁,响应式体验好。
2.后台参考”element-admin”设计,侧边栏,历史标签,面包屑自动生成。
3.采用Markdown编辑器,写法简单。
4.评论支持表情输入回复等,样式参考Valine。
5.添加音乐播放器,支持在线搜索歌曲。
6.前后端分离部署,适应当前潮流。
7.接入第三方登录,减少注册成本。
8.支持发布说说,随时分享趣事。
9.留言采用弹幕墙,更加炫酷。
10.支持代码高亮和复制,图片预览,深色模式等功能,提升用户体验。
11.搜索文章支持高亮分词,响应速度快。
12.新增文章目录、推荐文章等功能,优化用户体验。
13.新增在线聊天室,支持撤回、语音输入、统计未读数量等功能。
14.新增aop注解实现日志管理。
15.支持动态权限修改,采用RBAC模型,前端菜单和后台权限实时更新。
16.后台管理支持修改背景图片,博客配置等信息,操作简单,支持上传相册。
17.代码支持多种搜索模式(Elasticsearch或MYSQL),支持多种上传模式(OSS或本地),可支持配置。
18.代码遵循阿里巴巴开发规范,利于开发者学习。

上面的话都是一些首页的介绍,原作者只是提供了一个模板,并没有提供后台管理的一个功能,所以我就自己写了一个后台管理,主要借用的是比较火的一个vue-admin-template项目模板来进行的二次开发,由于时间有限,所以后台管理开发的功能并不是很多,但是也能进行一个简单的博客管理了。

6、后台管理

后台地址

1、登录界面

login.jpg

2、后台首页

adminhome1.png
adminhome2.png

3、文章管理

  1. 列表页
    文章列表.png
  2. 文章添加
    文章添加.png
    编辑器使用的是mavon-editor编辑器,如不会使用的可以点击下面的链接查看
    Vue markdown编辑器

4、标签管理

标签列表.png

5、日志管理

  1. 针对用户访问以及管理员操作和异常信息都做了一个日志的记录

日志管理.png

6、网页管理

网页管理.png

7、消息管理

消息管理.png

结尾

上述只是项目的一些基础的功能图片,小伙伴们可以自行登录去查看,后台管理所看到的菜单功能都已实现,还在着手后续的一些功能开发。前端全由我自己根据模板改造而来,后端是由合作小伙伴写的。如有比较有意思的功能欢迎各位小伙伴给我留言,我觉得有意思的话就会着手开发。如本项目小伙伴觉得可以,希望能够码云star一下,万分感谢!!

码云地址:点我进入

bye