vue+webpackを用いて構築された1ページアプリケーション-プライベートブログMintloG誕生記

紹介する
プロジェクトのアドレス:https://github.com/jrainlau/MintloGMintloGは私が5日以内に完全に自分で開発したプライベートブログで、フロントエンド技術案はvue+vue-router+vue-resource+webpackの構築案を採用し、バックエンド技術はオリジナルPHP+MySQLを採用しました.ブログは完全にajaxによって実現され、バックグラウンドには1つのインタフェースしか提供されず、異なるパラメータを入力することで異なる削除変更機能を実現しています.同時にブログはvue-routerを通じてルーティング管理を実現し、ルーティングの切り替えによって機能を切り替え、ページのリフレッシュとジャンプが全くなく、100%の単一ページアプリケーションである.
デザインのインスピレーションは清新なミント緑から来て、最近南方の南天に帰るのは気持ちが悪くて、“清新”は最も切実な需要なので、比較的に明るいミント緑を主な色調として採用しました.しかし、私のノートは12年前に買った古い機械なので、画面が悪く、角度によって色が違うので、ここのミント緑が具体的にどのように緑になっているのか分かりませんが...
MintloGがどんな顔をしているのか見てみましょう
トップページ
トップページには主にナビゲーションバー、文章リスト、分類パネルの3つの部分があります.

ナビゲーションバー:左側は「ホームページ」ボタンで、すぐにトップページに戻ることができます.中間は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を通じて1つのMySQLデータベースを建てて、1枚の表を创立して、文章の各种の情报を保存して、ブログの基本的な机能は実はこの表の上で振り回します.うん、そう気ままだ.
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をステータス管理として使用するのではなく、「サブコンポーネント-親コンポーネント-サブコンポーネント」を採用してステータス共有を実現しています.具体的な実装方法は私の1つを参考にすることができます.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の設計、フロントエンドの構築を完成して、1つのMintloGが私に与えた収穫は知識の自身よりはるかに大きくて、私の卒業の設計もついに完成しました!勉強して使うのが一番いい方法です.頑張ってください.