个人博客前后端以及部署的实现

huu-blog

个人博客，采用vue + springboot前后端分离实现，springboot只提供数据接口。部署采用docker部署，打包成两个镜像，分别运行。

github地址：https://github.com/feiniua/huu-blog

前端

vue

使用依赖

• router

• axios

• element-ui

• mavon-editor

• marked

• js-md5

项目结构

• src
  • components/ // 自定义组件
  • config/ // 后端提供url信息
  • router/ // 路由信息
  • views/ // 页面
  • App.vue
  • main.js

Element-UI

使用相关组件

首页

文章页

标签页

归档页

后端

采用Springboot。

• shiro:
  • 继承FormAuthenticationFilter拦截器，对不同请求方式进行拦截
• querydsl：
  • DAO层用来多表查询

建表

Article：用来记录文章信息

Tag：标签，用来对文章进行分类。

认证

User：用户，一个用户对应一个角色

Role：角色，一个角色对应多个权限

Permission：权限，add对应post，edit对应put，delete对应delete

日志

• 4.4
  • vue 整合axios后如何发送ajax请求
  • 每篇文章图片背景如何保存
• 4.5
  • 分页的处理
• 4.8
  • 后端权限shiro
• 4.11
  • vue 如何登陆后跳转并传参
  • vue使用sessionStorage保存登录后的返回信息，登录后即可跳过登录页
  • vue发送的请求不带cookie，对于后台来说就像是一个新客户端。无法获得权限。
    • 解决：main.js中添加axios.defaults.withCredentials=true;
  • 发送请求返回权限失败500使用catch
    • 解决：axios(…).then(…).catch(function(error) {…})
• 4.12
  • axios使用FormData()传送file文件
  • 新建文章时如何往内容中插入图片
  • 插入文章的图片显示出来过大未设置格式
• 4.13
  • 使用正则修改html里面的样式
  • 完成后台文章编辑页
• 4.14
  • 添加星空图
  • 后台数据发送时进行过滤
• 4.16
  • 完成后台tag页

部署

分别在build下面的两个目录中构建镜像。

blogfrontend

进入目录build/blogfrontend后，执行
docker build -t blog .
构建前端镜像。

然后使用
docker run -d -p 80:80 blog
运行镜像

blogbackend

注意：后端连接的宿主机端口3306，mysql中需要执行相应数据库脚本后才能运行后端项目。
脚本文件在项目resources目录下。

进入目录build/blogbackend后，执行
docker build -t blogend .
构建后端镜像。

然后使用
docker run -d --net host blogend
运行镜像。