VUE自作のサーバーノードを学びます

1.ノードは何
C ++言語で書かれた1.1は、JavaScript実行するために使用される言語
1.2ノードは、（ソケット含む）プロジェクトのためのフロントエンドサーバーを提供することができます

　　

2、NPM：パッケージマネージャ-ノードの機能を拡張するために
ダウンロードをし、公式サイトをインストールし


 、国内のソースを変更するには、ダウンロードの加速
管理者のコマンドライン：NPMインストール-g CNPM --registry = HTTPS：//registry.npm.taobao.org 
MacOSのを/ Linuxの場合：須藤NPMインストール-g cnpm --registry = HTTPS：//registry.npm.taobao.org 

NPM後の命令は、上述の動作に置き換えることができるようにCNPM 
NPMインストールvuex => cnpm vuexをインストール

　

3.vueのCLI環境： -足場コマンドライン素早くプロジェクトを作成するには、

-gする@ VUE / CLIは足場をインストールインストールcnpm 

：NPMキャッシュクリーン--forceが原因の速度の問題に基本的にエラーが場合

　　

4. Vueのプロジェクトの作成

先のディレクトリに1.cdを
プロジェクトを作成します。2.：VUEは、ディレクトリ名の作成
操作を残り：

2.1以下のポップアップダイアログボックスを
？レジストリでNPMをデフォルトへの接続はSLOWしているようだ。
   使用HTTPS：//registry.npm。 ？taobao.orgより高速インストール（Y /用 nが） 
	、つまり、国内の淘宝網の源資本Yを選択することをお勧めします

2.2ポップアップダイアログ
VueのCLIのv3.8.4が
PRESET :?（使用するキーの矢印）を選択してください
>デフォルト（バベル、eslint）
  手動で選択した機能は
  、すなわち手動で、カスタマイズを選択するには、下切り替える搭載し

、カスタム設定に入り2.3 
ES6 ES5に（*）バベル> 
 （）はJavaScriptよりも少し高度な活字体    
 プログレッシブに）（アプリケーションのWeb（PWA）のサポートをフロントエンドプログラム機能セットの最適 
 ページ間遷移ルータ（*）、すなわち、ルーティング
 値シングルトンによってコンポーネント間（*）Vuex情報インタラクション、
 （）プリコンパイル済みCSSプリプロセッサ言語
 （*）リンター/フォーマッタは、フロントエンドのコードをフォーマットするには、コードフォーマットの規定は、
 （）テストのためのユニットテスト
 テストするための（）E2Eテスト									 

2.4ポップアップダイアログ：
VueのCLIのv3.8.4 
選択してください？ PRESET：手動でSELECTが特徴
あなたのプロジェクト:?バベル、ルータに必要な機能のチェック、Vuex、リンター
ルータの??使用履歴をMODE（UP NOW生産者のインデックスフォールバックのための適切なサーバーのセットアップが必要です）（Y- / N-）
「」 " 
歴史かルートへの記録、歴史をプラスした後、あなたは前方と後方のページを達成することができ、生成された2つのページ間でジャンプしている
選択Yに


2.5ポップアップダイアログ
>エラーの防止とESLintのみ
  ESLint + Airbnb設定 
2.6ポップアップダイアログ 
  ESLint +標準設定
  ESLint +きれいに
 するために最初に選択

？基本：リンター/フォーマッタの設定を選ぶ
（<i>は選択を変換するためのレート過去に、SELECTを押して、<スペース>すべてを切り替えることが<A>を）:?ピック糸くずその他の機能
保存ON>（*）リント
 （）リントとON FIXコミット管理に保存されているgitの（Gitが必要）
   への最初の選択
    
2.7ダイアログ
など？（使用して矢印キー）、あなたはバベル、PostCSS、ESLintのための場所をconfigコンください好む置く？
>専用の設定は、内のファイル
  package.jsonに
まず、小さな法律を選択し、何の場合は、最初に、より適切なデフォルトを選択し、それをお勧めしていない
 
2.8ダイアログを
どこで行うあなたなどバベル、PostCSS、ESLint、のconfig環境？専用の設定でファイル好む置く？
？保存このAS将来のプロジェクトのプリセット？（Y / N） 
の構成、次の世代を保存するための自動使用は、従って、Yを選択することが推奨されていない、Nを選択し

終えた構成上、自動的にプロジェクトを作成します

　　

5.スタートプロジェクト


「」「端末を開始し、起動コマンドラインで同様の項目をDjangoの後に
プロジェクトに1.：あなたが作成したプロジェクト名ではなく、ディレクトリで発見されたプロジェクトディレクトリにcd 
2.スタートプロジェクト：NPM NPMはまたcnpm交換することに役立つ実行
：ポップ2つのアドレスを
：アプリケーションが実行されているAT 
現地ます。http：// localhost：8080 /ローカルアドレス- 
-ネットワーク：http://192.168.11.108:8080/ IP +ポート

」 「」

pycharm configureコンスタートアップが「後「」
VUEで作成しpycharmプロジェクト、オープンで見つかっ
1.ダウンロードvue.jsプラグイン、再起動
NPMのスタートアップ項目2. configureは+の次数のプロジェクトは、NPMを見つけた
package.jsonを選択するために、2.1を良いpackage.jsonの作成
2.2スクリプトは機能するように選択することができます
2.3は、デフォルトの名前に変更することができます
ナビゲーションバーを開始するために三角形のボタンをクリックして、あなたがすることができます3. 
「」 " 

単にCTRL + Sを押して、データを変更しますページを更新実現するために保存

　　

6.復興VUEキー項目

 のルートディレクトリc：CD ../ ..するQiaoxia端子

VUE項目を再構築：アイデアを削除すると依存ファイル、他のファイルが別のファイルにコピーするnode_modules 、対応する端末を見つけることによってパスの下のプロジェクトは、入力されたNPMは、コンピュータプログラムに従って構成良い環境を達成するためにインストール。

次いで、通常の使用VUE後に上記構成の動作に応じて、ファイルを開くpycharm

　　

7.プロジェクトディレクトリ

「」「
node_modules：依存
公共：総資源
	ICO：ロゴページのタグ
	- ：HTML単一ページのプロジェクトのページのみ
SRC：コードの本体
：...プロジェクト、および他の関連する構成プラグイン
「」」

「」 " SRC 
資産：静的リソース
コンポーネント：ウィジェット
ビュー：ビュー・コンポーネントページ・コンポーネント
App.vue：ルート成分
main.js：メインスクリプトファイル
router.js：ルータのルーティングスクリプトファイルVUE 
store.js：倉庫スクリプトファイルvuex 
「」 "

　　

8.アセンブリ

<テンプレート> 
    - < -唯一のルートタグ！> 
</テンプレート> 

<スクリプト> 
    エクスポートエクスポートデフォルト{// 
        名前： "メイン"、
        データ：機能（）{ 
            リターン{ 
                
            } 
        }、 
        。... 
    } 
</ SCRIPT> 

<スタイルスコープ> 
	/ *スコープ* / //ページのページに対応している必要があり、パターン、すべてに適用されるスタイルを持つローカライズスタイルアセンブリなしに達成することはできませんここにスタイルだけのためにしばらくこのページ
</スタイル>

　　

9.ルート要素アセンブリでページをレンダリングする




<！ - Main.vueアセンブリホーム- > 
<テンプレート> 
    の<divクラス= "メイン"> 
        {{}}タイトル<の/ H1> <のH1> 
    </ DIV> 
</テンプレート> 

<スクリプト> 
    エクスポート{デフォルト
        名： "メイン"、
        データ：機能（）{ 
            リターン{ 
                タイトル： 'ホーム' 
            } 
        } 
    } 
</ SCRIPT> 

<>スコープのスタイル
    .main { 
        高さ：100VH; 
        背景色：オレンジ; 
    } 
    {H1の
        マージン：0; 
        色：赤; 
    } 
</スタイル>






<！ - App.vueルート要素- > 
<テンプレート>
    <DIV ID = "アプリ"> 
        <！ - 3.使用- > 
        <メイン> </メイン> 
    </ div> 
</テンプレート> 
<スクリプト> 
    // 1.导入
    輸入メイン「@ /ビュー/メインから「
    輸出のデフォルト{ 
        // 2.注册
        コンポーネント：{ 
            メイン：メイン
        } 
    } 
</ SCRIPT> 
<スタイル> 
    HTML、身体{ 
        マージン：0; 
    } 
</スタイル>

　　

    行の高さ：60PX; 
  } 
のLi：ホバー{ 
    背景色：サンゴ。
  }







  
{リー
    テキスト装飾：なし; / *タグを削除するには、* /下線付き
    フォント：太字30px / 60PX 'STSong'; / *太字30pxの60PX行高フォントスタイル* / 
  } 

</スタイル> 



2. 3つ作成Goods.vue People.vueページコンポーネントMain.vue 


<テンプレート> 
    の<divクラス= "財"> / *メイン*人/ 
        <H1>商品</ H1>ページ
    </ div> 
</テンプレート> 

<スクリプト> 
    エクスポート{デフォルト
        名： "製品" / *メインの人* / 
    } 
</ SCRIPT> 

<スタイルスコープ> 
 .goods { 
        高さ：100VH; 
        背景色：ピンク; 

    } 
</スタイル> 



の構成3.ルーティングルータ。jsが


「./views/Main.vue」からメインインポート
「./views/Goods.vue」からの輸入製品
「./views/People.vue」からの輸入の人々

Vue.use（ルータ）

のエクスポートデフォルト新しいルーター（{ 
  モード： 『歴史』、
  ベース：process.env.BASE_URL、
  ルート：[ 
    { 
      パス： '/'、
      名称： 'メイン'、
      成分：メイン
    }、
      { 
      パス： '/商品'、
      名称： '商品'、
      成分：製品
    }、
      { 
      パス： '/人'、
      名前： 「人の、
      コンポーネント：人々
    }、

  ] 
}）

　　

11.ライフサイクルフック


フック関数を対応するタイムノード所与のプロセスの一部の破壊を作成から処理の一例を示すVUE - 
条件が満たさコールバックメソッドである特性：フック関数を- 


新しい新しいヴュー（{ 
    EL：「＃アプリ" 
    データ：{ 
        MSG："メッセージ" 
    }、
    beforeCreate（）{ 
        にconsole.log（"だけインスタンスを作成"）; 
        はconsole.log（this.msg 
                    
    }、
    作成（）{ 
        にconsole.log（"インスタンスが作成され、データ、メソッド）」をされてきた
        にconsole.log（this.msg）; 
    }、
    マウント（）{ 
        リターン//この関数によって表される関数において、この関数は、今返され、ないグローバル
        にconsole.log（ 「ページがレンダリングされたVUEたとえば、データは、メソッドが更新されました」）; 
    } 
    需要を取得// => OKフック関数=>解像度の論理ブロックニーズ
}）    
    
    

　　

Djangoのクロスドメインの問題

クロスドメインどのようなものです

。通常、B Webアクセスサーバーのリソースは、次の3つの条件のいずれかを満たしていないが、クロスドメインアクセスされる
異なるプロトコル1. 
2.別のポート
3.異なるホスト

　　

クロスドメインソリューションDjangoの


インストールモジュールジャンゴ- corsheadersの
PIP3インストール-i https://pypi.douban.com/simpleジャンゴ・corsheaders 


settings.pyに配置された
＃登録アプリケーション
INSTALLED_APPS = [ 
	... 
	'corsheaders' 
] 
＃追加ミドルウェア
ミドルウェア= [ 
	... 
	'corsheaders.middleware.CorsMiddleware' 
] 
＃許可クロスソース
CORS_ORIGIN_ALLOW_ALL =真

　　

VUEのプロジェクトでは、様々なプラグインをインストールする必要があります

ルータVUE 


{ 
    パス：「/」、
    名称：「ホーム」、
    //リダイレクトルーティング
    リダイレクトを「/ホーム」
} 

{ 
    //ルートは、ルート・コンポーネントをレンダリングされ、ルート・コンポーネント<router-を交換ビュー/>タグの
    パス：「/ワンビュー」、
    名称：「一つの」、
    成分：（）=>インポート（「./ビュー/ OneView.vue」）
} 

{ 
    //マルチレベルルーティング、アセンブリは、ルートでありますレンダリング、ルート・コンポーネント<ルータビュー/>タグ置換
    パス：「/ワン表示/ワンディテール」、
    成分：（）=>インポート（「./ビュー/ OneDetail.vue」）、
    //サブ経路をコンポーネントは、<ルータビュー/>タグの成分（OneDetail）交換、ルーティングポイントをレンダリングさ属する
    [{：子供
        パス： '表示'、
        成分：（）=>インポート（」./コンポーネント/ OneShowを。図「） 
    }] 
}

　　

補足：   


<！ -リンクタグとしてルータ-レンダリング- > 
<-Linkルータへ= "/">ホーム</ルーターリンク> | 
<-Linkルータへ= "/について"について> </ Router-を追加リンク> | 
<ルーターリンク：=に"{名： 'ワン'}">の</ルータリンク> | 

！< -ルーティングレンダリングコンポーネントのプレースホルダ- > 
<ルータービュー/> 


。正確な-リンクルータ{アクティブ
    カラー：＃42b983は、
} 



//ルータロジックがジャンプ
。このrouter.pushの$（「/ワンビュー」）

使用したアクセス履歴に//ルータ
この$ルーターを..行く（-1）

　　

vuex 

//いずれかのコンポーネントでは、この$ store.state.msgのMSGデータを介してアクセスすることができます。
//ステートがしかの一つの状態値持つことができます
状態：{ 
    MSG：「ステータスマネージャ」
}、
//ましょう状態は、状態値を複数有する
変異：{ 
    //一つの成分で、この$のstore.commit（「setMsg」によって行うことができる new_msg） 。MSGの状態を変更する
    setMsg（状態、new_msg）{ 
        state.msg = new_msg 
    } 
}、
//突然変異は、複数の状態値を持つように
アクション：{ 

}

　　

クッキー-VUE 

//取り付けcookieコマンド
//インストールNPM-VUEクッキー--save 
//プロジェクトのクッキー設定するには、グローバルVUE 
VueCookie 'VUE-クッキー'からのインポートを
グローバル属性として、Vueのプロトタイプにウィジェットを設定する//、どこでもこの。$クッキーのアクセスによって
Vue.prototype。$クッキー= VueCookie 




のクッキーのvalに格納//永続値
この。$ Cookie.set（this.val「ヴァル」）
//取得クッキー中のvalフィールドの値
この。$のcookie.get（ 'ヴァル' ）

　　

 

Axiosは


// axiosをインストールする（アヤックス）コマンド
// NPM Axiosインストール-保存
プロジェクトAxios用//グローバルコンフィギュレーション
Axios「Axios」からのインポートを
。Vue.prototype $アヤックス= // Axiosこの背後にあるこの世界から直接見つけることができます変数は、



この_this =ましょう
。$このアヤックス（{ 
    'POST'、：メソッド
    URL： 'http://127.0.0.1:5000/loginAction' 
    のparams：{ 
        USR：this.usr、
        PS：this.psを
    } 
}）。次に、（関数（RES）{ 
    この点の再発生である//これは、次に、コールバックメソッドを表し、発信者（axiosプラグイン）、
    タイトルページを更新する//変数、タイトルはVUEインスタンスが属します
    / / RESコールバックオブジェクトは、オブジェクトデータのデータプロパティが戻される
    _this.title = res.data 
}）。キャッチ（関数（ERR）{ 
    window.console.log（ERR）
}）

　　

 

＃用pycharm启动该文件模拟后台
フラスコインポートフラスコ、要求、render_templateから
flask_corsからはCORSインポート
アプリ=フラスコ（__ name__）
CORS（アプリ、supports_credentials = true）を

@ app.route（ '/'）
DEFインデックス（）：
    リターン" <H1>主页</ H1>」

app.route（ '/ LoginActionの'、メソッド= [ 'GET'、 'POST']）@ 
デフtest_action（）：＃
    プリント（request.args） 
    ＃プリント（のRequest.Form）
    ＃プリント（request.values）
    USR = request.args [ 'USR'] 
    PS = request.args [ 'PS'] 
    USR場合= 'ABC'またはPS = '123'：！！
        リターンのログインに失敗した" 
    リターンのログインを成功


の場合__name__ == '__main__ '： 
    app.run（）