介绍
- VBlog 是一个纯前端, 无须服务器, 实现动态发布的博客
- 这个帖子主要介绍一下 VBlog 的原理, 使用的组件和代码结构
- 这是之前发的一个如何快速部署 VBlog 的帖子 https://www.v2ex.com/t/454125#reply6
项目地址
https://github.com/GitHub-Laziji/vblog
演示地址
https://github-laziji.github.io (也是我的博客, 里面有博客的更新记录)
原理
VBlog 是一个纯前端的项目, 利用 gist 来存储博客的数据, gist 是 github 上一个分享代码片段的功能, 利用 github-api 来操作 gist, 实现在网页上动态发布博客的功能
查询博客的例子
/users/${githubUsername}/gists?page=${query.page}&per_page=${query.pageSize}
github-api 文档
https://developer.github.com/v3/
使用的组件
- Element-UI (电脑端主要的组件)
- mavon-editor (markdown 语法的富文本编辑器)
- vant (移动端的组件)
代码结构
VBlog-master.....................
├─ index.html....................
├─ package.json..................依赖
├─ README.md.....................
├─ src...........................源码文件夹
│ ├─ api........................调用 github-api
│ │ ├─ gist.js.................
│ │ ├─ project.js..............
│ │ └─ user.js.................
│ ├─ App.vue....................
│ ├─ assets.....................资源文件夹, 暂时没东西
│ │ └─ logo.png................
│ ├─ main.js....................入口文件
│ ├─ mobile_views...............移动端视图
│ │ ├─ blog....................博客页面
│ │ │ ├─ Details.vue..........
│ │ │ └─ Main.vue.............
│ │ ├─ layout..................移动端布局
│ │ │ ├─ components...........
│ │ │ │ ├─ AppMain.vue.......
│ │ │ │ └─ Bottombar.vue.....
│ │ │ └─ Layout.vue...........
│ │ ├─ project.................项目页面
│ │ │ ├─ Details.vue..........
│ │ │ └─ Main.vue.............
│ │ └─ self....................个人中心页面
│ │ └─ Main.vue.............
│ ├─ router.....................路由
│ │ └─ index.js................
│ ├─ store......................全局状态管理
│ │ ├─ getters.js..............
│ │ ├─ index.js................
│ │ └─ modules.................
│ │ ├─ configuration.js.....项目配置
│ │ ├─ token.js.............Token
│ │ └─ user.js..............用户信息
│ ├─ utils......................工具文件夹
│ │ ├─ cookie.js...............操作 cookie
│ │ ├─ request.js..............axios 请求
│ │ └─ util.js.................常用方法
│ └─ views......................电脑端视图
│ ├─ blog....................博客页面
│ │ ├─ Add.vue..............
│ │ ├─ Details.vue..........
│ │ ├─ Edit.vue.............
│ │ └─ Main.vue.............
│ ├─ common..................公共视图
│ │ └─ TokenDialog.vue......
│ ├─ configure...............配置页面
│ │ └─ Main.vue.............
│ ├─ error...................错误状态页面
│ │ └─ Error404.vue.........
│ ├─ layout..................电脑端布局
│ │ ├─ components...........
│ │ │ ├─ AppMain.vue.......
│ │ │ ├─ Foot.vue..........
│ │ │ └─ Sidebar.vue.......
│ │ └─ Layout.vue...........
│ ├─ License.vue.............
│ ├─ new.....................最新动态页面
│ │ └─ Main.vue.............
│ ├─ project.................开源项目页面
│ │ ├─ Details.vue..........
│ │ └─ Main.vue.............
│ └─ readme..................README 页面
│ └─ Main.vue.............
└─ static........................
├─ .gitkeep...................
└─ configuration.json.........项目配置文件