/xjt-springboot-vue-blog

springboot+vue前后端分离的个人博客系统

Primary LanguageVue

xiong-blog博客

xiong-blog是基于springboot+vue的前后端分离的博客系统，包括如下几个部分服务端（提供API服务）xiong-blog-server，后台管理界面xiong-blog-backend，前台界面xiong-blog-front。

后台blog-end

https://github.com/BFD2018/xiong-blog-backend

编译运行

Project setup

npm install

Compiles and hot-reloads for development

npm run serve

Compiles and minifies for production

npm run build

功能&技术栈

  • 博客分类展示
  • 博客二级评论功能
  • 留言功能
  • 在线预览
    • kkfileView实现文件预览
    • 博客文章（dialog弹窗---mavon-editor展示博客内容）
  • Vue2.6
  • element-ui
  • mavon-editor实现markdown格式文档

效果

登录页

1643890809504

dashboard页

1643891174017

1643891190187

写博客

1643891210428

文章管理

1643892060971

分类专栏

1643892078598

标签管理

1643892090054

评论管理

1643892108452

友链管理

1643892124128

点击友链地址预览

1643892146265

用户列表

1643892167105

新增用户

1643892595482

测试模块

vue-aplayer

1643892612244

v-emoji-picker

1643892625903

kkfileView文件预览

1643892874548

1643892888419

前台blog-front

https://github.com/BFD2018/-xiong-blog-front

技术栈

"dependencies": {
    "axios": "^0.21.1",
    "core-js": "^3.6.5",
    "element-ui": "^2.15.1",
    "highlight.js": "^11.3.1",
    "hover.css": "^2.3.2",
    "js-base64": "^3.7.2",
    "less-loader": "^6.0.0",
    "mavon-editor": "^2.9.1",
    "moment": "^2.29.1",
    "qs": "^6.10.1",
    "v-emoji-picker": "^2.3.3",
    "vue": "^2.6.11",
    "vue-aplayer": "^1.6.1",
    "vue-echarts": "^6.0.0",
    "vue-particles": "^1.0.9",
    "vue-router": "^3.2.0",
    "vuex": "^3.4.0",
    "wangeditor": "^4.7.10"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "~4.5.0",
    "@vue/cli-plugin-router": "~4.5.0",
    "@vue/cli-plugin-vuex": "~4.5.0",
    "@vue/cli-service": "~4.5.0",
    "@vue/composition-api": "^1.4.0",
    "less": "^4.1.1",
    "vue-template-compiler": "^2.6.11"
  }

效果

登录页

1643893040820

博客列表页

1643893142868

分类专栏

1643893231519

文章标签

1643893245807

留言板

1643893301016

友链

1643893326285

关于我

1643893345633

个人网盘

1643893369527

服务端springboot-server

配置

  • 数据库

运行 xiong-blog.sql 脚本，创建数据库 xiong-blog

image-20230514211512390

  • 阿里云OSS对象存储配置

image-20230514213429821

kkFileView为文件文档在线预览解决方案

技术栈

  • springboot
  • mybatis-plus
  • pageHelper分页
  • shiro权限控制
    • 自定义用户名密码登录realm
    • 自定义邮箱登录realm
    • 根据认证后获取的principals，给用户对象授权
  • fastjson
  • easy-captcha
  • hutool
    • 发邮件（需要依赖spring-boot-starter-mail）
  • jieba分词
  • kumo词云
  • springboot+redis缓存
  • 图片上传

项目结构

1643893579677

功能说明

分页功能

返回的IPage<>对象包括 records、total、size、current、pages

image-20211021201109218

发送邮件

https://blog.csdn.net/qq355972697/article/details/114637374

导入依赖

<dependency>
    <groupId>cn.hutool</groupId>
    <artifactId>hutool-all</artifactId>
    <version>5.7.11</version>
</dependency>

<dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-mail</artifactId>
    <version>2.6.3</version>
</dependency>

Shiro权限控制

Redis缓存

未实现