資訊專欄INFORMATION COLUMN
摘要：介紹是一個純前端無須服務器實現動態發布的博客文章主要是介紹一下的原理使用的組件和代碼結構如何快速部署項目地址演示地址也是我的博客里面有博客的更新記錄原理是一個純前端的項目利用來存儲博客的數據是上一個分享代碼片段的功能利用來操作實現在網
介紹
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.........項目配置文件
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/95037.html
摘要：有目錄結構書寫方式組件集成項目構建等的約束，整個應用中是沒有文件的，所有的響應都是動態渲染的，包括里面的元信息路徑等。更多參考細說后端模板渲染客戶端渲染中間層服務器端渲染開發工具開發時主要會用到的工具。 vue 前端項目技術選型、開發工具、周邊生態 聲明：這不是一篇介紹 Vue 基礎知識的文章，需要熟悉 Vue 相關知識 主架構：vue, vue-router, vuex UI 框...
摘要：有目錄結構書寫方式組件集成項目構建等的約束，整個應用中是沒有文件的，所有的響應都是動態渲染的，包括里面的元信息路徑等。更多參考細說后端模板渲染客戶端渲染中間層服務器端渲染開發工具開發時主要會用到的工具。 vue 前端項目技術選型、開發工具、周邊生態 聲明：這不是一篇介紹 Vue 基礎知識的文章，需要熟悉 Vue 相關知識 主架構：vue, vue-router, vuex UI 框...
Element iView Vuex Mint UI Vant cube-ui，對比六大 vue ui 組件庫，選中最適合的那個。 Element(pc) 介紹 & 版本 餓了么前端團隊開發的桌面端組件庫，當前最新版本：2.4.8 Star：32.067k 項目特色 團隊維護 支持三個版本：vue、react、angular 支持 Nuxt.js 常規支持：多語言、自定義主題、按需引入、內置...
摘要：是有贊前端團隊維護的移動端組件庫，提供了一整套基礎組件和業務組件。一關于距離首次發布剛好過去了半年時間，在這半年時間里團隊廣泛吸納社區的反饋和建議，持續對組件進行打磨優化，使得逐漸成長為一個輕量可靠的移動端組件庫。 Vant 是有贊前端團隊維護的移動端 Vue 組件庫，提供了一整套 UI 基礎組件和業務組件。通過 Vant 可以快速搭建出風格統一的頁面，提升開發效率。 showImg(...
閱讀 844·2023-04-25 21:21
閱讀 3226·2021-11-24 09:39
閱讀 3067·2021-09-02 15:41
閱讀 1993·2021-08-26 14:13
閱讀 1827·2019-08-30 11:18
閱讀 2768·2019-08-29 16:25
閱讀 507·2019-08-28 18:27
閱讀 1580·2019-08-28 18:17
