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

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 uses FormData() to transfer file files
  • How to insert pictures into the content when creating a new article
  • The image inserted into the article is displayed too large and not formatted
• 4.13
  • Use regular to modify the style in html
  • Complete the background article editing page
• 4.14
  • Add a starry sky map
  • Filter when background data is sent
• 4.16
  • Complete the background tag page

deploy

Build images in the two directories under build respectively.

blogfrontend

After entering the directory build/blogfrontend, execute
docker build -t blog. To
build the front-end image.

Then use
docker run -d -p 80:80 blog to
run the mirror

blogbackend

Note: The host port of the back-end connection is 3306, and the corresponding database script needs to be executed in mysql to run the back-end project.
The script file is in the resources directory of the project.

After entering the directory build/blogbackend, execute
docker build -t blogend. To
build the back-end image.

Then use
docker run -d --net host blogend to
run the mirror.