摘要：我采用原生編寫(xiě)后臺(tái)，因?yàn)楦杏X(jué)增刪改查的功能很簡(jiǎn)單，就懶得用框架了其實(shí)是不會(huì)。瀏覽模式它也有一個(gè)，用來(lái)切換文章列表和文章詳情，也就是和編輯模式它加載了作為工具欄，然后可以進(jìn)行文章的撰寫(xiě)與修改。

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

MintloG是我在五天之內(nèi)完全由自己開(kāi)發(fā)的私人博客，前端技術(shù)方案采用了vue+vue-router+vue-resource+webpack的構(gòu)建方案，后端技術(shù)采用了原生PHP+MySQL。博客完全由ajax實(shí)現(xiàn)和后臺(tái)的通信，后臺(tái)只提供了一個(gè)接口，通過(guò)傳入不同的參數(shù)實(shí)現(xiàn)不同的增刪改查功能。同時(shí)博客通過(guò)vue-router實(shí)現(xiàn)路由管理，通過(guò)路由的切換來(lái)切換功能，完全沒(méi)有頁(yè)面的刷新和跳轉(zhuǎn)，是百分百的單頁(yè)應(yīng)用。

設(shè)計(jì)的靈感來(lái)自清新的薄荷綠，因?yàn)樽罱戏降幕啬咸焓窃趷盒模扒逍隆笔亲钇惹械男枨螅圆捎昧吮容^明亮的薄荷綠作為主色調(diào)。但是因?yàn)槲业墓P記本是12年買(mǎi)的老機(jī)器，屏幕比較差，不同的角度看到的顏色也會(huì)不一樣，所以這里的薄荷綠具體綠成什么樣我并不知道……

下面來(lái)看看MintloG到底長(zhǎng)什么樣——

首頁(yè)主要有三個(gè)部分，分別是導(dǎo)航欄、文章列表、分類(lèi)面板。

導(dǎo)航欄：左側(cè)為“主頁(yè)”按鈕，可以快速回到首頁(yè)；中間為MintloG的logo；右側(cè)為編寫(xiě)按鈕，點(diǎn)擊以后可以切換到編寫(xiě)功能。

文章列表：點(diǎn)擊文章標(biāo)題可以進(jìn)入查看文章詳情，點(diǎn)擊時(shí)間或標(biāo)簽可以快速篩選；刪除按鈕可以直接刪除該篇文章。

分類(lèi)面板：可以通過(guò)輸入標(biāo)題關(guān)鍵字，點(diǎn)擊標(biāo)簽或者時(shí)間對(duì)文章列表進(jìn)行分類(lèi)。

點(diǎn)擊“編輯”以后會(huì)進(jìn)入編輯頁(yè)面

可以對(duì)文章進(jìn)行修改。

點(diǎn)擊右上角的編寫(xiě)按鈕，進(jìn)入編寫(xiě)頁(yè)面，左邊的輸入窗口支持markdown語(yǔ)法，會(huì)在右邊的窗口實(shí)時(shí)輸出編譯后的文字。

提交并提示成功

點(diǎn)擊OK以后會(huì)跳回首頁(yè)，看到新寫(xiě)的文章

可以通過(guò)文章的標(biāo)題、標(biāo)簽、修改時(shí)間進(jìn)行查詢(xún)



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

點(diǎn)擊刪除按鈕并確認(rèn)以后會(huì)刪除對(duì)應(yīng)文章，重新渲染列表。（此處懶得放圖）

介紹完了MintloG的增刪改查功能，我們來(lái)看一下后臺(tái)是如何搭建的。
我采用原生PHP編寫(xiě)后臺(tái)，因?yàn)楦杏X(jué)增刪改查的功能很簡(jiǎn)單，就懶得用框架了（其實(shí)是不會(huì)）。

我在conn_sql.php里面新建了一個(gè)類(lèi)，專(zhuān)門(mén)用來(lái)鏈接數(shù)據(jù)庫(kù)以及提供操作數(shù)據(jù)庫(kù)的功能：

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(){}

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

    // 定義查詢(xún)方法
    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;
    }

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

難點(diǎn)其實(shí)在于“單例模式”應(yīng)該如何實(shí)例化一個(gè)PDO吧我猜……然后在option.php文件里面引入上面這個(gè)類(lèi)，并通過(guò)獲取$_POST[]獲取參數(shù)并echo相應(yīng)的返回信息。因?yàn)槭莂jax應(yīng)用，涉及到跨域的問(wèn)題，所以我在文件的開(kāi)頭加了這么一句話(huà)header("Access-Control-Allow-Origin:*");跨域問(wèn)題妥妥的解決了。

后臺(tái)那邊搞定了，就通過(guò)phpMyAdmin建了一個(gè)MySQL數(shù)據(jù)庫(kù)，建立了一張表，存放文章的各種信息，博客的基本功能其實(shí)就是在這張表上面折騰。

嗯，就是這么隨性。

“不懂設(shè)計(jì)的前端不是好老板”。
不懂可以學(xué)嘛~
所以在邊學(xué)邊做的情況下進(jìn)行了我的第一次UI設(shè)計(jì)……所以如果看官覺(jué)得MintloG長(zhǎng)得丑請(qǐng)直接把磚頭砸向我！我會(huì)把你們的磚頭都撿起來(lái)然后拿去賣(mài)錢(qián)……
其實(shí)剛設(shè)計(jì)出來(lái)的時(shí)候更丑……

一定的UI規(guī)范還是有的：統(tǒng)一以15px作為同類(lèi)元素的間距，30px作為非同類(lèi)元素的間距。頁(yè)面的顏色不超過(guò)5個(gè)，元素通過(guò)陰影作為區(qū)分。
實(shí)在是很鐘情google的MD風(fēng)格，所以模仿的痕跡還是相當(dāng)重哈！雖然不怎么像。
因?yàn)閼兴詻](méi)有用css框架也沒(méi)有做成響應(yīng)式。

因?yàn)榇蛩悴捎胿uejs，所以采用了官方的vue-cli來(lái)生成項(xiàng)目，并安裝了vue-router，vue-resource作為路由管理和資源請(qǐng)求工具。
文件目錄如下：

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

可以看到，MintloG是通過(guò)不同的組件組合而成，這樣符合組件化的思想，以后的維護(hù)和修改也會(huì)更方便。由于項(xiàng)目比較簡(jiǎn)單，所以沒(méi)有使用vuex作為狀態(tài)管理，而是采用了“子組件——父組件——子組件”的方式實(shí)現(xiàn)狀態(tài)共享，具體實(shí)現(xiàn)方式可以參考我的一個(gè)demohttps://github.com/jrainlau/vuejs-demo

重點(diǎn)部分是main.js文件，它作為入口文件，規(guī)定了不同路由的含義：

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作為導(dǎo)航欄，通過(guò)切換“瀏覽模式”和“編輯模式”。

瀏覽模式browseMode.vue

它也有一個(gè)，用來(lái)切換“文章列表”和“文章詳情”，也就是blog-list.vue和blog-article.vue

編輯模式

它加載了toolbox.vue作為工具欄，然后可以進(jìn)行文章的撰寫(xiě)與修改。這個(gè)編輯頁(yè)面復(fù)用了我以前的一個(gè)項(xiàng)目Markcook，具體可以到這兒去看~
https://github.com/jrainlau/markcook

比較需要?jiǎng)幽X的地方在于路由的嵌套對(duì)應(yīng)組件的切換，以及每一次切換路由所需要進(jìn)行的狀態(tài)更新。不過(guò)vue-router把這些問(wèn)題都考慮得很周到，仔細(xì)研究官方文檔能解決大部分的問(wèn)題。具體的組件嵌套及組合形式如圖：

在ajax通信方面，第一次使用vue-resource，感覺(jué)比使用jquery相對(duì)復(fù)雜一點(diǎn)，尤其是配置項(xiàng)，需要全局配置請(qǐng)求體的json格式才能正常發(fā)送請(qǐng)求的參數(shù)：

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

當(dāng)然付出得多，得到的也多。vue-resource返回的response對(duì)象還會(huì)帶有狀態(tài)碼、狀態(tài)描述，請(qǐng)求頭等等，方便更復(fù)雜的使用

在內(nèi)容更新方面，由于是單頁(yè)應(yīng)用，不提倡刷新的操作，因?yàn)闀?huì)產(chǎn)生不必要的資源請(qǐng)求而浪費(fèi)資源，所以通過(guò)“重新渲染”的方式實(shí)現(xiàn)內(nèi)容更新。舉個(gè)例子，在browseMode.vue里我定義了一個(gè)getList()方法，用于獲取數(shù)據(jù)：

任何需要“刷新”的時(shí)候，我都可以通過(guò)this.$emit("getList")來(lái)觸發(fā)這個(gè)方法，把內(nèi)容重新渲染到頁(yè)面上，實(shí)現(xiàn)內(nèi)容更新的功能。

寫(xiě)了那么多，總算是把MintloG的誕生給介紹完了，其實(shí)主要目的還是作為自己成長(zhǎng)的一個(gè)記錄吧。在一周之內(nèi)，從完全不懂后臺(tái)開(kāi)發(fā)到掌握PHP和MySQL的使用，在5天之內(nèi)完成后臺(tái)的搭建，UI設(shè)計(jì)，前端構(gòu)建，一個(gè)MintloG給我的收獲遠(yuǎn)遠(yuǎn)大于知識(shí)的本身，我的畢業(yè)設(shè)計(jì)也終于完成啦！學(xué)以致用才是學(xué)習(xí)最好的方法，繼續(xù)加油~