前后端分离实践----blog's frontend

后端地址---- blog's backend

在线地址 管理员地址  用户名：admin  密码： 123456

简介:通过vue.js框架与koa2框架分别搭建前后端，利用ngnix端口分发部署实现代码全分离，开发全分离。

nginx文件配置内容

   server {
   	listen       80;
   	server_name  localhost;
   	location / {
   	    proxy_pass http://127.0.0.1:8080;               #转发非api，与上传的静态资源的其他信息 
   	    proxy_redirect default;
   	}
   	location /api/ {
   	    proxy_pass http://127.0.0.1:3000/api/;          #转发至api接口
   	}
   		location ^~ /uploads/ {
   	    proxy_pass http://127.0.0.1:3000/uploads/;     #转发至上传的静态资源
   	}
   }

Getting Start

1. 开发环境

node.js 7.6+
mognodb 3.0+

2. 克隆到本地，安装依赖，运行

> git clone https://github.com/FantasyGao/blog-frontend.git
> cd blog-frontend
> npm install 
> npm start

简要概述

1. axios模块实现http请求拦截器，配合完成权限控制

2. vuex集中管理文章数据信息

3. iview开源组件的使用(全局提示框，文件上传组件等)

4. mavon-editor 模块完成markdown富文本编辑器 

5. vue-chartjs 完成数据分析的图表展示

6. smartTable 表格组件使用

功能概述

用户层

1. 文章按照种类区分

2. 文章可拥有多个不同标签

3. 文章按照种类区分

4. 支持文章评论，用户之间的多层回复

管理员层

1. 撰写文章（markdown编写，实时查看效果）

2. 全部文章管理（上，下线;修改文章，预览效果，删除文章等）

3. 评论管理（审核，删除等）

4. 回复管理（审核，删除等）

5. 注册人员管理（查看，删除等）

6. 评论用户或者回复用户 （查看评论或回复详情）

7. 添加评论用户或者回复用户为特别关注

8. 登录与操作日志查看

9. 评论用户或者回复用户 （查看评论或回复详情）

10. 网站数据分析（评论最多与浏览最多文章查看）

11. 网站数据用图表展示（近十天浏览量，浏览最多十篇文章，评论最多十篇文章）

后期添加功能

1. 网站后台多层权限控制

2. 不定

目录结构

➜  backend/src
.
├── components
├── page
│   ├── admin
│   ├── articlePage
│   ├── classPage
│   ├── coverPage
│   ├── index
│   ├── noPage
│   └── tags
├── router
│   └── index.js
├── util
│   ├── api.js
│   └── axios.js
├── vuex
│   ├── action.js
│   ├── mutations.js
│   ├── store.js
│   └── type.js
├── api
│   ├── articleAPI.js
├── ├── userAPI.js
│   └── logAPI.js
├── main.js
└── App.vue

License

MIT