springboot + vue 前后端完全分离的博客项目

---

前言

学完了springboot后，又花了十一天学完了禹神的vue2.x与3.x，一直想找机会练习一下vue来制作单页面前端程序，正巧，B站上看了一位叫markerhub的up主发了这个项目，于是我看了看源码，做了一些改进（源码学习，并非白嫖谢谢）

---

一、运行截图

• 登录界面
  
• 注册界面
  
• 找回密码界面
  
  

二、前后台功能

前端构架

• vue2.x
• vuex 全局通信插件
• route 路由（路由守卫）
• Axios 请求（配置了全局请求头用来传递token身份口令）
• element ui 前端UI库
• mavon-editor vue的markdown前端解析库（非常优秀）
• github-markdown-css 不需要，只用mavon-editor就够了
• 跨域请求配置 (后端java程序端口为8081)

  module.exports = {
    pages: {
      index: {
        // page 的入口
        entry: 'src/main.js',
      },
    },
    lintOnSave:false,
    devServer:{
      proxy:'http://localhost:8081'
      /*proxy:{
        '/api':{
            target: 'http://localhost:8081',
            pathRewrite:{'^/api':''},
            changeOrigin: true
          }
        }*/
    }
  }
  

后端架构

• springboot
• mybatis plus
• shiro + jwt
• mail (发送邮箱验证码 - - - 免费)
• mysql 8.0

运行截图

总结

项目在业务请求钩子中把token保存到本地session，大家也可以改成redis。

mavon-markdown插件可以上传图片，不过要像CSDN一样利用回调函数先把图片存到后台服务器上（我没完成这个功能，就直接把CSDN当图床用了）不然发表博客后一段时间图片会自己失效。

源码地址

阿里云盘：springboot + vue 个人博客