VBlog 的代碼結構, 使用 element, vant 組件開發的純前端博客

介紹

• VBlog 是一個純前端, 無須服務器, 實現動態發佈的博客
• 文章主要是介紹一下 VBlog 的原理, 使用的組件和代碼結構
• 如何快速部署 VBlog http://www.javashuo.com/article/p-zqgezozq-eo.html
• 項目地址 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.........項目配置文件