コンテンツ：
「」」
サードパーティ製のプラグイン：
1）vuex：コンポーネント間の相互作用（可動端）
2）axios - 表裏（ジャンゴ）：AJAX
3）要素-UI：ページレイアウト
4）JQ + BS：jQueryの+ブートストラップ
「」」
vuexプラグ：情報交換は、任意の成分間（移動端）を行うことができます - 学びます
「」」
いずれかの成分VUEグローバル、共有データウェアハウスの単一の実施形態と理解すべき成分のいずれかとの間の情報交換を実現1）vuex、
2）コンポーネント内の任意のロジックでは、リポジトリにアクセスすることができます
I）ここで倉庫（店舗/ index.js）は、共有データを記憶するための変数を定義します
状態：{
情報：「共有データの初期値は」
}、
II）成分論理倉庫の値を求めます
変数=これをみましょう。$ store.state.info
III）成分論理倉庫の値を更新します
この。$ store.state.info = '新しい価値'
注：多くの場合、携帯端末の開発プロジェクトで使用vuex、プロジェクトのPCの終わりには、データベースlocalStoregeとlocalStoregeを置き換えるために使用することができます
理由：データvuexは、ページの更新後、/ index.jsの構成ストアの既定値にリセットされます
「」」
大型のフロントエンドのストレージデータの概要
「」」
1）クッキー：文字列ストレージ、データは（有効期限までの時間を有効期限を持って、データがあなたを失敗し、そうでなければ、有効な決して）
2）のlocalStorage：永続的に格納データとして格納されたオブジェクト
3）のsessionStorage：あなたのページタグとストレージのフォームにオブジェクト、ライフサイクル（ページが近い、データが有効ではありません）
4）vuex（店舗）：オブジェクトはリセットにページが更新データを格納されている（携帯端末をリフレッシュすることができないので、唯一の大きな払い戻しアプリケーションがリセットされます）
「」」
前面と背面の対話的（フォーカス）
「」」
1）フォームに道を形成します
要求備えるが、直接輸送URLのブラウザを入力してリクエストを送信してもらう、両方の要求のポスト方法を| I）を取得
意思決定をルーティング背景ページ - ⅱ）このアプローチの特徴は、確かにページ（ページジャンプと呼ばれるページをリフレッシュします）が発生しているジャンプ
2）AJAX非同期
ⅰ）取得|ポスト|パッチ|置く|削除要求や他の多くの方法、要求の目的は、非同期のデータ取得の背景であります
意思決定をルーティングフロントページ - ⅱ）の方法は、単に新しいデータを取得し、ページを更新するつもりはない、フロントデスク自分部分ページ・リフレッシュ、ページ全体のジャンプを更新しています
注意：
ⅰ）フォーム依頼フォームの項目をフロントを分離し、バックされているわけではないが完了することができ、ページジャンプ、同期、非同期要求が完了するには、パーシャルリフレッシュページをAJAX
II）、フロントの分離とバックプロジェクト、フォームのフォーム要求を使用していない、ページを更新し、ページジャンプ要求はAJAXによって行われますが、ジャンプページ、背景には、対応する分岐先のURLである、フロントデスク、ジャンプ、自分自身を完了します
ⅲ）フロントとバックオフィスのプロジェクトの分離、フロントデスクでは、フォームの多数を形成しますが、フォームは、フォームがフォームの送信を提出していない取って、ボタンのフォームを送信しますが、AJAXリクエストが
「」」
axiosプラグ：台湾が完了する前と後の相互作用をAJAX
「」」
1）インストール：先端プロジェクトのルートで端末
axiosをインストールcnpm
2）プロジェクトの構成：main.js
「axios」からインポートaxios
Vue.prototype $ Axios = axios。
3）組立ロジックのいずれにおいても、これをアクセスすることができます。$ Axios（）
beforeMount（）{
//要求の背景
この。$ axios（{
URL：この$ settings.base_url + '/テスト/'、
方法：「削除」、
}）
}
「」」
元ポリシー - クロスドメインの問題
「」」
問題が発生したエラーCORSジャンゴA、ジャンゴデフォルト同一生成元ポリシー、フロントので、バック別々のプロジェクトは、クロスドメインアクセス
クロスドメインと呼ばれるものを第二に、
ⅰ）異なるIP：）（二つのサーバを実行すると、ホストフォアグラウンドではありません
ⅱ）ポート異なる：フォアグラウンド（2台のサーバが）異なるポート上で実行する、互いに独立しています
異なるⅲ）契約：HTTPとHTTPSの間でクロスドメインの問題でもあります
注：クロスドメインである3満たす1、
第三に、クロスドメインを解決します
ⅰ）迷彩：自分の要求の背景を装ったフロントデスクの要求が発生しました
II）活性許容クロス背景：応答ヘッダーのクロスドメイン（処理）を可能にするバックグラウンド構成
四、Djangoはクロスドメインを解決します
ⅰ）モジュールを装着します：
ピップジャンゴ・CORS-ヘッダをインストール
ⅱ）登録アプリ：
INSTALLED_APPS = [
...
'corsheaders'
]
ⅲ）ミドルウェアを追加します
ミドルウェア= [
...
'corsheaders.middleware.CorsMiddleware'
]
IV）許容クロスドメインの源
CORS_ORIGIN_ALLOW_ALL =真
「」」
対話の流れの分離プロジェクトの前と後の台湾
「」」
台湾の周り1）スタートプロジェクト
2）フロントページフロントページをレンダリング、コンフィギュレーションをルーティング|背景設定データは、ルーティング、応答データ（クロスドメインの問題に対処するため）
インターフェース背景によって3）受信AJAXリクエスト
ⅰ）バックグラウンドデータにフォアグラウンドを提出
ii）の結果に応じて背景を得
ⅲ）応答データの結果、最終ページには、部分的なリフレッシュを完了し、ページ全体のジャンプを更新しています
「」」
非同期リクエストの詳細
「」」
1）VUE AJAX非同期要求フレームはaxiosで完了する
構文：この$ axios（）は（）キャッチ（）; ..
解釈：$ axios（）要求ロジックである|その後、（）のロジックに正常な応答である|（キャッチ）エラーレスポンスロジックです
コンクリートの構文：
この。$ axios（{
URL：「リンクへのバックエンドインターフェース」
方法：「リクエストモード」、
params：{}、// urlパラメータスプライシング
データ：{} //パラメータパケット
ヘッダー：{} //パラメータ要求ヘッダ
}）。次に、（応答=> {
http //応答が状態2xx応答の結果である、応答データはresponse.dataです
}）。キャッチ（エラー=> {
HTTP //エラー状態応答4XX、5xxの結果であり、エラー応答オブジェクトはerror.responseで、エラー応答データをerror.response.dataあります
}）
二つの方法で送信されたデータの2）受信：
ⅰ）URLスプライシングパラメータ：
すべての要求は、データを持って道に提出されています
データは、と？背中を与えるスプライシング方法要求URLに提出される方法
URL文字列データのみをバックグラウンドデータを提出するために使用することができ提出することは安全ではありません
axiosプラグインはパラメータをステッチURLのparamsプロパティを運ぶために使用することができます
ⅱ）パケットパラメータ：
すべての要求に加えて、データの所有者が提出したすべての要求のうち、方法を取得
この実施形態は、バックグラウンドモードに提出パケットにパックされたデータを暗号化します
URLエンコード（フォームのデフォルトモード）、フォームデータ（文書が提示されてもよい）、JSON（JSONデータの提出）：暗号化されたデータを詰め3つの方法があります。
axiosインサートは、データの属性パラメータを持つデータパケットを運ぶことができます
「」」
「」」
注エントリ：
1）本。$ Axios（{ }）。次に（応答=> {}）。キャッチ（エラー=> {}） で、その後、コールバック関数をキャッチし、あなたはない書き込み機能することができ、実際のVUEプロジェクトの開発ので、コールバックになります構文は、このロジック（VUE代表オブジェクト）を使用関数この構文で使用された、機能が正常な機能ではない（クラスが理解されるであろう、これはオブジェクトのVUEを表していないであろう）
2）ネイティブDjangoはルールを解析するデータパケットのすべてのタイプを提供しないが、データはrequest.body自身を解決することができるであろう。ジャンゴ静止フレームワークフレームワークは、パラメータ解析データ・パケットの3種類の提供します
「」」
プラグ要素-UI
「」」
要素UIは同様のブートストラップ・フレームワークであり、前者は元のプロジェクトで使用されてVUEプロジェクトで使用され、もちろん、プロジェクトVUEにも使用することができます
ビルドに環境：
1）インストール：先端プロジェクトのルートで端末
cnpm要素-UIをインストール
2）構成：main.js
「要素-UI」からインポート要素
Vue.use（部品）
インポート '要素-UI / libに/テーマチョーク/ index.css';
3）用途：ビデオと公式のAPIインタフェース
「」」
JQ + BSプラグ
「」」
ブートストラップjqueryの環境ニーズが、それはロードのBS JQ前にインストールする必要があります
A、JQ環境構造：
1）インストール：先端プロジェクトのルートで端末
cnpmはjqueryのインストール
2）構成：プロジェクトのルートディレクトリにある彼らの新しいvue.config.js ノートは、ファイルの完全なを変更し、このプロジェクトを有効にするには再起動する必要があります
CONSTのWebPACK =（ "のWebPACK"）を必要とします。
module.exportsは= {
configureWebpack：{
プラグイン：[
新しいwebpack.ProvidePlugin（{
$： "jqueryの"、
jQueryの： "jqueryの"、
"ウィンドウ$。"： "jqueryの"、
"window.jQuery"： "jqueryの"、
ポッパー：[ "popper.js"、 "デフォルト"]
}）
]
}
}。
二、BS環境の構造：
1）インストール：プロジェクトのルートディレクトリのフロントエンドの端末 3は3バージョンを表す@現在互換VUE問題の四対が存在するので、メモ添付BS3
cnpmブートストラップインストール@ 3
2）構成：プロジェクトのルートディレクトリにある彼らの新しいvue.config.js
「ブートストラップ」からのインポートブートストラップ
インポート "ブートストラップ/ DIST / CSS / bootstrap.css"
Vue.use（ブートストラップ）
または直接に
インポート「ブートストラップ」
インポート "ブートストラップ/ DIST / CSS / bootstrap.css"
「」」
Djangoの国際化の設定
次のパラメータは、settings.pyに変更されました
「」「
LANGUAGE_CODE = 『ZH-ハンス』 //言語
TIME_ZONE = 『アジア/上海で』 //中国上海を代表して
USE_I18N =真
USE_L10N =真
= FalseのUSE_TZ 夜12時00分の時間帯としてデータベースを保存するかどうか//
「」 "
概要
「」」
1）vuex
質量参加成分と倉庫、
データを格納するための受付場所：クッキー、のlocalStorage、のsessionStorage、vuex
2）axios
構成：インストール=>割り当てられVue.prototypeの$ axios。
使用：。。。この$ axios（{}）を（応答=> {}）キャッチ（エラー=> {}）
2つの要求の種類：フォーム（ページには、フロントにジャンプしない独立したん）|アヤックス（データのみを更新し、プロジェクトのすべてのタイプをすることができます）
台湾は前と分離プロジェクトのワークフローの後：フロントページ=>バックグラウンドデータの提供を開始=>フロントページのレンダリングとバックグラウンドデータ要求を開始提供します
リクエストメソッド：GET、POST、パッチ、PUT、削除...
リクエストデータ：
データをステッチURL：すべての要求を運ぶことができます
パケットデータは：だけでなく、キャリーを取得します
パケット3つの形式：URLエンコード、フォームデータ、JSON
3）元素-UI
レイアウトの束を提供します
4）JQ + BS
レイアウトの束を提供します
「」」