VBlog 的代码结构, 使用 element, vant 组件开发的纯前端博客

介绍

• VBlog 是一个纯前端, 无须服务器, 实现动态发布的博客
• 文章主要是介绍一下 VBlog 的原理, 使用的组件和代码结构
• 如何快速部署 VBlog https://segmentfault.com/a/1190000014879081
• 项目地址 https://github.com/GitHub-Laziji/vblog
• 演示地址 https://github-laziji.github.io (也是我的博客, 里面有博客的更新记录)

原理

VBlog 是一个纯前端的项目, 利用 gist 来存储博客的数据 ( gist 是 github 上一个分享代码片段的功能 ) , 利用 github-api 来操作 gist, 实现在网页上动态发布博客的功能

查询类api 的大多不需要权限, 写入类的api 则需要token, 所以token 就是管理员的标志, 绑定token 之后可以对博客进行增删改的操作, token 存在本地cookie 中

开发注意事项

配置文件读取的总是与 index.html 同级的 ./static/configuration.json, 所以本地 npm run dev 的时候会出现修改配置无效的情况, 如果需要修改的话修改本地的配置文件就行, 发布到 github 之后不影响, 因为修改配置的时候是通过 github-api 修改 ${username}.github.io 下的 /static/configuration.json

查询博客的例子

/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.............
│     └─ social..................社交圈页面
│        ├─ Details.vue..........
│        └─ Main.vue.............
└─ static........................
   ├─ .gitkeep...................
   └─ configuration.json.........项目配置文件