記我的博客工程從設計到落地(一)

記我的博客工程從設計到落地(一)

連接： github/meteor
開發期:3.17-3.31 | 實際開發(9day)

1.分析

1.1問題

原先用vuepress構建靜態博客工程以後，在個性化主題改造上花費的時間遠遠比博客文章的攥寫要多，實爲本末倒置。

並且靜態類博客在更新後老是須要本地跑一次命令以獲得新的靜態頁面，操做繁瑣稍感不便。

並且博客搭建或者主題開發自己也有必定的技術門檻。

總的來講，靜態博客不太契合個人需求。

1.2解析

首先我的博客主要是我的使用，做爲我的展現和資料歸檔。

而個人真實需求則更偏向於我的應用：在思否等平臺上寫文章作分享，在我的博客裏歸檔整理和以及知足個性化需求。

由於本職屬於前端，因此對於應用的挑剔會比較怪異和容易鑽牛角尖。

同時也由於開發經驗的問題，在實際落地中總會有各類問題產生而連帶影響寫博客的堅持度。

1.3指望

• 免費白嫖最好
• 數據存儲更安全可信
• 文章攥寫與發佈能更快捷
• 高度個性化的同時有明確的優先級

1.4宗旨

• foolish design
• focus on doc
• free blog

1.5方案

方案一

Plan1(純前端):在git上開闢倉庫存儲博客文章，而後建立一個靜態頁面站點動態地利用GitHub-api從github上拉取博客文章並展現。
靜態頁面站點的前端開發計劃由博客數驅動，每20個增量啓動一批開發計劃，按部就班，由博客數驅動前端開發。

• 利

  • 白嫖數據庫和服務器

• 弊

  • 數據存儲相對而言不太安全
  • 且博客地址與路由文件的同步處理不太智能

方案二

Plan2(全棧):博客文章本地攥寫本地保存，另構建相應數據庫存儲博客站點的各種數據，後端提供各種服務調用，
前端分別實現我的博客站點和博客管理平臺，最後內網穿透暴露到外網訪問。開發進度仍是同方案一由博客數驅動。

• 利

  • 數據存儲安全可靠，文章發佈更便捷智能

• 弊

  • 開發週期大大增長
  • 有必要考慮後端安全
  • 高併發（不考慮）

最終確認選擇方案二。

2.細化

2.1思路設計

確認目標

• 本地數據庫
• 博客先後端

確認需求

• 博客可視化管理
• 博客展現帶類目、標籤
• 提供書籤收集功能
• 提供事件記錄功能

流程簡述

• 本地先後端服務常駐
• 博客管理平臺新建與管理文章並同步更新數據庫
• 博客前端調用後端渲染

開發模式

• 優雅降級（優先針對Chrome-pc）
• 博客數驅動設計，設計驅動前端，前端驅動後端

技術方案

• 前端 vue+element+front-matter（vue-cli4.2）
• 後端 node+express/koa
• 數據庫 MongoDB
• 自動化 python
• 網絡 內網穿透

2.2要素拆解

物理空間

• 文章目錄
• 程序目錄
• 數據庫目錄

數據庫

• 博客-用於存儲博客實體
• 類目-用於存儲博客類型目實體，與博客關聯
• 標籤-用於存儲博客標籤實體，與博客關聯
• 書籤-用於存儲書籤實體
• 記錄-用於存儲各維度的記錄實體

後端

• 文章crud
• 類目crud
• 標籤crud
• 書籤crud
• 記錄crud
• 日誌埋點

前端

• 開始頁-用於初始化配置
• 我的首頁-博客說明
• 文章頁-分類目展現博客
• 臨時博客頁-分享時指定文章使用
• 書籤頁-綜合書籤集
• 記錄頁-我的數據記錄
• 頁首-導航與檢索
• 頁尾-應用信息與版權
• 日誌埋點

2.3 代碼與截圖

前端路由

export const routes = [
    {
        path: '/',
        name: 'meteor',
        redirect:'/start'
    },
    {
        //  開始頁
        path: '/start',
        name: 'Start',
        component: () => import('../views/start/Start.vue')
    },
    {
        //  分享頁
        path: '/sharePage',
        name: 'SharePage',
        component: () => import('../views/share/SharePage.vue')
    },
    {
        name:'Page',
        path:'/page',
        redirect:'/page/home',
        component: () => import('@/components/layout/Page.vue'),
        children:[
            {
                //  主頁
                path: 'home',
                name: 'Home',
                component: () => import('../views/page/home/Home.vue')
            },
            {
                //  博客頁
                path: 'blog',
                name: 'Blog',
                component: () => import('../views/page/blog/Blog.vue')
            },
            {
                //  書籤頁
                path: 'bookmark',
                name: 'BookMark',
                component: () => import('@/components/layout/Blank.vue'),
                redirect:'/page/bookmark/daily',
                children:[
                    {
                        //  經常使用書籤
                        path: 'daily',
                        name: 'Daily',
                        component: () => import('../views/page/bookmark/BookMark.vue')
                    },
                    {
                        //  開發書籤
                        path: 'devil',
                        name: 'Devil',
                        component: () => import('../views/page/bookmark/BookMark.vue')
                    }
                ]
            },
            {
                //  記錄頁
                path: 'record',
                name: 'Record',
                redirect:'/page/record/recLog',
                component: () => import('../views/page/record/Record.vue'),
                children:[
                    {
                        //  開發日誌
                        path: 'recLog',
                        name: 'RecLog',
                        component: () => import('../views/page/record/RecLog.vue')
                    },
                    {
                        //  動漫
                        path: 'animate',
                        name: 'Animate',
                        component: () => import('../views/page/record/RecMedia.vue')
                    },
                    {
                        //  書籍
                        path: 'book',
                        name: 'Book',
                        component: () => import('../views/page/record/RecMedia.vue')
                    },
                    {
                        //  影視劇
                        path: 'movie',
                        name: 'Movie',
                        component: () => import('../views/page/record/RecMedia.vue')
                    },
                    {
                        //  旅行
                        path: 'recMap',
                        name: 'RecMap',
                        component: () => import('../views/page/record/RecMap.vue')
                    },
                    {
                        //  票據
                        path: 'recTicket',
                        name: 'RecTicket',
                        component: () => import('../views/page/record/RecTicket.vue')
                    },
                ]
            }
        ]
    }
];

截圖

• 開始頁-白天

• 開始頁-黑夜

• 首頁

• 頁腳

• 博客頁

• 書籤頁

3.開發計劃_最後更新：2020/03/31

開發日誌

C0_零紀元 2020/03/17-2020/03/31

• 相關技術點回顧與深刻
• 博客設計
• 前端部分場景

---

將來紀元

排序不分前後
- 前端
    - 頁首 √
    - 頁腳 √
    - 開始頁 √
    - 首頁 √
    - 博客頁 √
    - 書籤頁 √
    - 引入 element-scroll 滾動條 √
    - 回到頂部 √
    - 背景粒子動畫particles √
    - 地理位置獲取 √
    - 當地日出日落時間獲取 √
    - 多端適配（@media）
    - 瀏覽器兼容（主要適配safari）
    - 天氣獲取
    - 頁首搜索功能
    - bookmark頁快速檢索
    - blog分享頁開發
    - blog查看窗口開發
    - record頁開發 
    - 加載頁
    - 我的信息頁
    - 管理平臺
    - 評論功能（valine）
    - ...
- 後端
    - all
- 數據庫
    - all