摘要：我采用原生編寫后臺，因為感覺增刪改查的功能很簡單，就懶得用框架了其實是不會。瀏覽模式它也有一個，用來切換文章列表和文章詳情，也就是和編輯模式它加載了作為工具欄，然后可以進行文章的撰寫與修改。

項目地址：https://github.com/jrainlau/MintloG （特別亂，參考就好-_-|||）

MintloG是我在五天之內完全由自己開發的私人博客，前端技術方案采用了vue+vue-router+vue-resource+webpack的構建方案，后端技術采用了原生PHP+MySQL。博客完全由ajax實現和后臺的通信，后臺只提供了一個接口，通過傳入不同的參數實現不同的增刪改查功能。同時博客通過vue-router實現路由管理，通過路由的切換來切換功能，完全沒有頁面的刷新和跳轉，是百分百的單頁應用。

設計的靈感來自清新的薄荷綠，因為最近南方的回南天是在惡心，“清新”是最迫切的需求，所以采用了比較明亮的薄荷綠作為主色調。但是因為我的筆記本是12年買的老機器，屏幕比較差，不同的角度看到的顏色也會不一樣，所以這里的薄荷綠具體綠成什么樣我并不知道……

下面來看看MintloG到底長什么樣——

首頁主要有三個部分，分別是導航欄、文章列表、分類面板。

導航欄：左側為“主頁”按鈕，可以快速回到首頁；中間為MintloG的logo；右側為編寫按鈕，點擊以后可以切換到編寫功能。

文章列表：點擊文章標題可以進入查看文章詳情，點擊時間或標簽可以快速篩選；刪除按鈕可以直接刪除該篇文章。

分類面板：可以通過輸入標題關鍵字，點擊標簽或者時間對文章列表進行分類。

點擊“編輯”以后會進入編輯頁面

可以對文章進行修改。

點擊右上角的編寫按鈕，進入編寫頁面，左邊的輸入窗口支持markdown語法，會在右邊的窗口實時輸出編譯后的文字。

提交并提示成功

點擊OK以后會跳回首頁，看到新寫的文章

可以通過文章的標題、標簽、修改時間進行查詢



具體可以看地址欄上面的路由有啥不同~

點擊刪除按鈕并確認以后會刪除對應文章，重新渲染列表。（此處懶得放圖）

介紹完了MintloG的增刪改查功能，我們來看一下后臺是如何搭建的。
我采用原生PHP編寫后臺，因為感覺增刪改查的功能很簡單，就懶得用框架了（其實是不會）。

我在conn_sql.php里面新建了一個類，專門用來鏈接數據庫以及提供操作數據庫的功能：

dsn = "mysql:host=".$host.";dbname=".$dbName;
            $this->pdoObj = new PDO($this->dsn, $user, $pwd);
            $this->pdoObj->query("set names utf8");
        } catch (PDOException $e) {
            echo $e->getMessage();
        }
    }

    // 防止克隆
    private function __clone(){}

    // 返回一個實例化的PDO對象
    public static function makeConnect($host, $user, $pwd, $dbName) {
        if (self::$_connect === null) {
            self::$_connect = new self($host, $user, $pwd, $dbName);
        }
        return self::$_connect;
    }

    // 定義查詢方法
    public function query($db, $sqlState = null, $sqlVal=null) {
        if(!$sqlState) {
            $_result = $this->pdoObj->query("select * from $db");
        } else {
            $_result = $this->pdoObj->query("select * from $db where $sqlState like "%".trim($sqlVal)."%"");
        }
        return $_result;
    }

    // 定義添加方法
    public function insert($db, $where, $what) {
        $_result = $this->pdoObj->exec("insert into $db ($where) values ($what)");
        return $_result;
    }

    // 定義刪除方法
    public function delete($db, $where) {
        $_result = $this->pdoObj->exec("delete from $db where $where");
        return $_result;
    }

    // 定義更新方法
    public function updata($db, $what, $where) {
        $_result = $this->pdoObj->exec("update $db set $what where $where");
        return $_result;
    }

    // 斷開和數據庫鏈接
    public function destruct()
    {
        $this->pdoObj = null;
    }
}
?>

難點其實在于“單例模式”應該如何實例化一個PDO吧我猜……然后在option.php文件里面引入上面這個類，并通過獲取$_POST[]獲取參數并echo相應的返回信息。因為是ajax應用，涉及到跨域的問題，所以我在文件的開頭加了這么一句話header("Access-Control-Allow-Origin:*");跨域問題妥妥的解決了。

后臺那邊搞定了，就通過phpMyAdmin建了一個MySQL數據庫，建立了一張表，存放文章的各種信息，博客的基本功能其實就是在這張表上面折騰。

嗯，就是這么隨性。

“不懂設計的前端不是好老板”。
不懂可以學嘛~
所以在邊學邊做的情況下進行了我的第一次UI設計……所以如果看官覺得MintloG長得丑請直接把磚頭砸向我！我會把你們的磚頭都撿起來然后拿去賣錢……
其實剛設計出來的時候更丑……

一定的UI規范還是有的：統一以15px作為同類元素的間距，30px作為非同類元素的間距。頁面的顏色不超過5個，元素通過陰影作為區分。
實在是很鐘情google的MD風格，所以模仿的痕跡還是相當重哈！雖然不怎么像。
因為懶所以沒有用css框架也沒有做成響應式。

因為打算采用vuejs，所以采用了官方的vue-cli來生成項目，并安裝了vue-router，vue-resource作為路由管理和資源請求工具。
文件目錄如下：

--- /MintloG  項目主目錄
    |
    --- /bower_component  第三方庫
    |
    --- /src
        |
        --- /components  組件*.vue文件夾
        |       |
                --- blog-article.vue  文章詳情
                |
                --- blog-head.vue  導航欄
                |
                --- blog-list.vue  文章列表
                |
                --- blog-search.vue  搜索框
                |
                --- blog-tags.vue  標簽欄
                |
                --- blog-timeline.vue  時間線
                |
                --- browse-mode.vue  瀏覽模式父組件
                |
                --- toolbox.vue  編輯頁工具欄
                |
                --- write-panel.vue  編輯頁
        |
        --- main.js  入口js文件（路由控制）
        |
        --- App.vue  主程序文件
    |
    --- /lib  第三方文件
    |
    --- /image  圖片資源

可以看到，MintloG是通過不同的組件組合而成，這樣符合組件化的思想，以后的維護和修改也會更方便。由于項目比較簡單，所以沒有使用vuex作為狀態管理，而是采用了“子組件——父組件——子組件”的方式實現狀態共享，具體實現方式可以參考我的一個demohttps://github.com/jrainlau/vuejs-demo

重點部分是main.js文件，它作為入口文件，規定了不同路由的含義：

router.map({
    "/": {
      component: browseMode,
      subRoutes: {
        "/": {
          component: blogList
        },
        "/details/:artId": {
          component: blogArticle
        }
      }
    },
    "/edit/:mode": {
      component: writePanel
    },
    "/search/tag/:tag": {
      component: browseMode,
      subRoutes: {
        "/": {
          component: blogList
        }
      }
    },
    "/search/time/:time": {
      component: browseMode,
      subRoutes: {
        "/": {
          component: blogList
        }
      }
    },
    "/search/title/:title": {
      component: browseMode,
      subRoutes: {
        "/": {
          component: blogList
        }
      }
    },
})

而App.vue則作為父組件：

它加載了blog-head.vue作為導航欄，通過切換“瀏覽模式”和“編輯模式”。

瀏覽模式browseMode.vue

它也有一個，用來切換“文章列表”和“文章詳情”，也就是blog-list.vue和blog-article.vue

編輯模式

它加載了toolbox.vue作為工具欄，然后可以進行文章的撰寫與修改。這個編輯頁面復用了我以前的一個項目Markcook，具體可以到這兒去看~
https://github.com/jrainlau/markcook

比較需要動腦的地方在于路由的嵌套對應組件的切換，以及每一次切換路由所需要進行的狀態更新。不過vue-router把這些問題都考慮得很周到，仔細研究官方文檔能解決大部分的問題。具體的組件嵌套及組合形式如圖：

在ajax通信方面，第一次使用vue-resource，感覺比使用jquery相對復雜一點，尤其是配置項，需要全局配置請求體的json格式才能正常發送請求的參數：

import VueRouter from "vue-router"
Vue.use(VueRouter)
Vue.http.options.emulateJSON = true;

當然付出得多，得到的也多。vue-resource返回的response對象還會帶有狀態碼、狀態描述，請求頭等等，方便更復雜的使用

在內容更新方面，由于是單頁應用，不提倡刷新的操作，因為會產生不必要的資源請求而浪費資源，所以通過“重新渲染”的方式實現內容更新。舉個例子，在browseMode.vue里我定義了一個getList()方法，用于獲取數據：

任何需要“刷新”的時候，我都可以通過this.$emit("getList")來觸發這個方法，把內容重新渲染到頁面上，實現內容更新的功能。

寫了那么多，總算是把MintloG的誕生給介紹完了，其實主要目的還是作為自己成長的一個記錄吧。在一周之內，從完全不懂后臺開發到掌握PHP和MySQL的使用，在5天之內完成后臺的搭建，UI設計，前端構建，一個MintloG給我的收獲遠遠大于知識的本身，我的畢業設計也終于完成啦！學以致用才是學習最好的方法，繼續加油~