採用 vue+webpack 構建的單頁應用——私人博客 MintloG 誕生記

寫於 2016.03.18

介紹

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

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

設計的靈感來自清新的薄荷綠，由於最近南方的回南天是在噁心，「清新」是最迫切的需求，因此採用了比較明亮的薄荷綠做爲主色調。可是由於個人筆記本是12年買的老機器，屏幕比較差，不一樣的角度看到的顏色也會不同，因此這裏的薄荷綠具體綠成什麼樣我並不知道……

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

首頁

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

• 導航欄：左側爲「主頁」按鈕，能夠快速回到首頁；中間爲MintloG的logo；右側爲編寫按鈕，點擊之後能夠切換到編寫功能。
• 文章列表：點擊文章標題能夠進入查看文章詳情，點擊時間或標籤能夠快速篩選；刪除按鈕能夠直接刪除該篇文章。
• 分類面板：能夠經過輸入標題關鍵字，點擊標籤或者時間對文章列表進行分類。

---

文章詳情

點擊「編輯」之後會進入編輯頁面

能夠對文章進行修改。

---

撰寫文章

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

提交併提示成功

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

---

查找功能

能夠經過文章的標題、標籤、修改時間進行查詢

具體能夠看地址欄上面的路由有啥不一樣~

---

刪除功能

點擊刪除按鈕並確認之後會刪除對應文章，從新渲染列表。（此處懶得放圖）

---

後臺搭建

介紹完了MintloG的增刪改查功能，咱們來看一下後臺是如何搭建的。 我採用原生PHP編寫後臺，由於感受增刪改查的功能很簡單，就懶得用框架了（實際上是不會）。

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

<?php
// 鏈接數據庫（單例模式）
class ConnMySQL {
    protected static $_connect = null;
    protected $dbName;
    protected $dsn;
    protected $pdoObj;

    // 初始化
    private function __construct($host, $user, $pwd, $dbName) {
        try {
            $this->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設計

「不懂設計的前端不是好老闆」。 不懂能夠學嘛~ 因此在邊學邊作的狀況下進行了個人第一次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做爲狀態管理，而是採用了「子組件——父組件——子組件」的方式實現狀態共享，具體實現方式能夠參考個人一個demogithub.com/jrainlau/vu…

重點部分是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做爲導航欄，經過 <router-view>切換「瀏覽模式」和「編輯模式」。

• 瀏覽模式browseMode.vue

  

  它也有一個<router-view>，用來切換「文章列表」和「文章詳情」，也就是blog-list.vue和blog-article.vue

• 編輯模式

  

  它加載了toolbox.vue做爲工具欄，而後能夠進行文章的撰寫與修改。這個編輯頁面複用了我之前的一個項目Markcook，具體能夠到這兒去看~ github.com/jrainlau/ma…

比較須要動腦的地方在於路由的嵌套對應組件的切換，以及每一次切換路由所須要進行的狀態更新。不過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給個人收穫遠遠大於知識的自己，個人畢業設計也終於完成啦！學以至用纔是學習最好的方法，繼續加油~