ENGLISH|中文版

TinyBlogFront

TinyBlog是一个小型的个人博客系统，采用前后端分离，响应式设计，本项目是TinyBlog的前端部分，基于Vue编写。查看后端项目，TinyBlogBack

项目已部署，在线demo

先看下最终效果

博客主页

后台管理页面

说明

起初写这个项目的时候，就想让它尽可能地简洁，所以就起了TinyBlog这个名字。 TinyBlog带有一个小型的后台管理系统,后台页面基于ElementUI打造，但后台页面并没有适配移动端，后台的页面参考了flatlab的部分设计

• 作者本人目前大二，能力有限，本项目主要作为学习使用，还存在很多不足的地方。

部署说明

• 1.clone本项目到本地，进入项目根目录
• 2.执行npm install安装依赖
• 3.执行npm run build，在dist目录会生成编译好的资源文件，index.html即为入口文件
• 4.以nginx为例，监听80端口，location的root指向index.html

  location /{
    root /path/to/dist/;
    index index.html;
  }

• 5.将前端的 /back地址代理至后端api接口地址，比如我在http://localhost:8000/启动后端，则做如下配置

  location /back {
     proxy_pass http://localhost:8000/;
     proxy_set_header Host $host;
     proxy_set_header X-Real-IP $remote_addr;
     proxy_set_header REMOTE-HOST $remote_addr;
     proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
  }

• 详细的nginx配置可以参考我上传的文件nginx.conf

• 启动后端项目，请转至TinyBlogBack查看后台部署说明。

Plans

• 目前项目还存在很多不足的地方，代码重用这块做得不是很好，后期会考虑重构
• 考虑加入websocket