レジスタのSPAプロジェクトの開発ログイン

VUEのVUE-cliの足場ツール使用してプロジェクトを作成します
VUEのinitのWebPACKのpro01を

NPM ElementUIインストールし
、新しいプロジェクトのルートディレクトリにCDのPRO01番号を

インストール：

NPMインストールaxios -S
NPMインストール適量-S
NPM VUE-axiosをインストール-S 

NPM要素-UIをインストール-S   

指定した場所に!!! ~~~ 3行のコードを追加し
たプロジェクトの下main.js srcディレクトリを検索して、3行のコードを追加します（main.jsが指定した場所にエントリファイルがあるので、ここでラインに導入され、ページが導入しているではないでしょうA）
Vueの'VUE'からのインポート

'要素-UI' //新しく追加された1からのインポートElementUI
インポート'要素-UI / libに/テーマ-チョーク/ index.css' //はに、異なるスタイルを避けるために、2つの新しい、ポストのパッケージを追加します「./App」からインポートアプリケーションに、前

  Vue.use(ElementUI)   //新添加3

 Vue.config.productionTip =偽

テスト
HelloWorld.vueが効果を確認するためにコンポーネントを追加、変更elementUI

Vueの+ ElementUIランディングページのデザイン

注1：関連スタイル情報「css.txt」を参照してください。

注2：<スタイルは、スコープ>
それは一瞬で、スタイルモジュールに作用する優れたスタイルオブジェクトの民営化を達成することであることを示すために、タグをスコープ、VUEのコンポーネントにスタイル属性に追加しました

注2：オートコンプリート=「OFF」
オートコンプリート属性はHTML5のプロパティで新しいある、-----自動的に無効オフ

http：// localhostを：？8080 / T226_easyui / userAction.action methodNameの=ログイン&&はuid = 001 && upwd = 123456

バックグラウンドの相互作用（Axios / QS / VUE-Axios）
1 Axios
Axiosは、Ajaxの軽量バージョンの利用を促進vue2です。これは、HTTPライブラリの約束に基づいています。これは、Vueのと併せて使用しているブラウザからのXMLHttpRequestsは非常に良いです作成します。

提出GET
axios.get（ '/ユーザ、{ // ノートデータをParamsプロパティのJSONオブジェクトに格納されている
：{paramsは
：ID 12345
}
。次に、（関数（応答）{}）
はconsole.log（応答）;
}） .catch（関数（誤差）{
にconsole.log（エラー）;
}）;

POSTが送信
axios.post（ '/ユーザを'、{ // データは、オブジェクトのJSONに直接保存されていることに注意
： 'フレッド'、のfirstName
lastNameの： 'フリントストーン'
}）を（関数（応答）{
にconsole.log（応答）。
}）キャッチ（関数（誤差）{
にconsole.log（エラー）;
}）;

注1：axiosクロスドメインの問題は
、「http://127.0.0.1:8848 『によってブロックされました：エラーだったでしょう CORSポリシー：いいえ』アクセス制御-起源許可「ヘッダを」
それは独立したフロントとリアエンドの開発を使用しているため、クロス現地訪問、解決策：Tomcatは、クロスドメインアクセスを許可するように設定する必要があります
Tomcatのクロスドメインの設定多くの方法が、しかし、最も簡単な方法は、実装CorsFilterフィルタを書くレスポンスヘッダを追加することで
、アクセス制御-許可-起源ができます
をhttpResponse .addHeader（ "アクセス制御は、許可 、 "*" -Origin"）; // *は任意のドメイン名表し
httpResponse.addHeaderを（ "アクセス制御は、許可 -Origin"、 "のhttp：// localhost：80に"）;

アクセス制御-許可-起源： *＃のすべてのドメイン名のスクリプトは、リソースへのアクセスを許可されています。
アクセス制御-許可-起源： HTTPS：//www.fujieace.com＃ 特定のドメイン名を許可します

注2：axios.getは何の問題を提出していない、axios.post背景には、データを受信しない提出し
た背景には、任意のデータを取得するように、ピットの道路上axios工程での「05のVueの詳細情報として（、POSTのフォーマットパラメータが要求ペイロードを提出しているので、 -POSTパラメータ渡し- RainSun - CSDNブログ.MHT「）、
溶液：qs.jsライブラリ用い{ 'B'、C 'D'が} '=のB＆C = Dに変換され、 '

注3：Axiosの使用を簡素化するために、Axiosグローバルコンフィギュレーションを使用してもよいし、迎撃、詳細情報として、「API / http.js」
axios.defaults.baseURL =「https://api.example.com」;
// Axios。 defaults.headers.common [ '許可'] = AUTH_TOKEN ; // カスタム要求ヘッダー、認証トークン追加
axios.defaults.headers.post [ 'のContent-Typeを'] = 'アプリケーション/ x-www-form-urlencodedで' ;

注4：詳細情報として、お薦めの開発を容易にするために、要求アドレスをカプセル化する「API / action.js」

注5：^ _ ^ ~~~~さらなる発展を簡素化するために、パッケージのプロパティaxios.urlsにURLアドレスをaction.js

QSは
それがURLパラメータ変換jsのライブラリですqs.js。2上の使用：
VAR OBJ = qs.parse（ 'A＆B = C = D'）; //フォームのオブジェクトに分解URL：{A 'B'、C 'D'}
VAR STR = qs.stringify （OBJ）; // URLオブジェクトシリアル化フォームは、スプライシングを、＆する：A = B＆C = D '

axios-VUE
VUE-axiosは、$ HTTP属性を拡張し、axiosを使用する方が便利なことができ、プラグインVue.prototypeプロトタイプに基づいてaxiosの延長であります

 変更main.js ファイルを

      'axios' からの#import axios

      「適量」からの#import適量

      '@ / API /からの輸入axios HTTP' #vueのプロジェクトaxios グローバルコンフィギュレーション      

      'VUE-axios' からインポートVueAxios

      Vue.use（VueAxios、axios）

付録I： ES6 文法的機能の矢印

doSomethingの（関数（A）{...}）。

doSomethingの（（A）=> {}）。

処理 CORS クロスドメインリスナーを

パッケージcom.zking.vue.util。

インポートにjava.io.IOException; 

インポートは、javax.servlet.Filter; 
輸入れるjavax.servlet.FilterChain。
インポートするjavax.servlet.FilterConfig。
輸入javax.servlet.ServletException; 
輸入javax.servlet.ServletRequest; 
インポートのjavax.servlet.ServletResponse。
インポートのjavax.servlet.http.HttpServletRequest; 
インポートのjavax.servlet.http.HttpServletResponse; 

/ ** 
 *配置tomcatの允许跨域访问
 * 
 * @author管理
 * 
 * / 
パブリッククラスCorsFilterはフィルタを実装{ 

	@Override 
	ます。public void initを（に、FilterConfigに、FilterConfig）はServletExceptionがは{スロー
	} 

	// @Overrideを
	//公共ボイドのdoFilter（のServletRequestのServletRequestは、ServletResponseを
	// ServletResponseを、フィルターチェーンれるFilterChainは）
	//のIOException、ServletExceptionがスロー{ 
	// HttpServletResponseのをhttpResponse =（HttpServletResponseの）ServletResponseをします。
	// 
	// //アクセス制御-許可-起源就是我们需要设置的域名
	// //アクセス制御-許可-ヘッダ跨域允许包含的头。
	// //アクセス制御-メソッドを許可是允许的请求方式
	// httpResponse.addHeader（ "アクセス制御-許可-起源"、 "*"）; // *、任何域名
	// httpResponse.setHeader（ "アクセス制御-許可-メソッド"、「POST、GET 、PUT、
	// "DELETE）; 
	// // httpResponse.setHeader（ "アクセス制御-許可-ヘッダ"、「起源、
	// // X-要求-では、Content-Typeの、
	// //允许请求头トークン
	// httpResponse.setHeader（ "アクセス制御-許可-ヘッダ"、
	// "起源、X-要求-では、Content-Typeの、トークンを受け入れます"）; 
	//のHttpServletRequest REQ =（HttpServletRequestの）のServletRequest。
	//するSystem.out.println（ "トークン=" + req.getHeader（ "トークン"））; 
	//もし（ "OPTIONS" .equals（req.getMethod（）））{ 
	//リターン。
	//} 
	// 
	// 
	// filterChain.doFilter（のServletRequest、ServletResponseを）。
	//} 

	@Override 
	公共ボイドのdoFilter（のServletRequestのServletRequest、ServletResponseをServletResponseを、フィルターチェーンれるFilterChainは）
			にIOException、ServletExceptionがをスロー{  
		HttpServletResponseのRESP =（HttpServletResponseの）ServletResponseをします。
		HttpServletRequestのREQ =（HttpServletRequestの）のServletRequest。

		//アクセス制御-許可-起源は、我々が設定する必要があるドメインである
		//アクセス制御-許可-ヘッダは、クロスドメインのヘッダに含まれることができます。
		//アクセス制御-許可-メソッドモード要求が許可されている
		resp.setHeader（「アクセス制御-許可 -Origin」、「*」）; // *、 任意のドメイン
		resp.setHeader（「アクセス制御- Allow-メソッド"" POST、GET、PUT、DELETE "）; 
		// resp.setHeader（"アクセス制御-許可-ヘッダ""原点、X-要求-With-、
		//タイプのコンテンツは、「同意します）; 
		/ /クライアントができます、新しいリクエストヘッダJWT送る
		resp.setHeader（ "アクセス制御-許可-ヘッダ"、 "原点、X-要求-With-、Content-Typeの、受け入れ、JWTを"）; 

		//許可するクライアント新しいレスポンスヘッダJWT処理
		resp.setHeader（「アクセス制御-露光-ヘッダ」、「JWTを」）;
		ストリングSSS = resp.getHeader //（ "アクセス制御-露光-ヘッダ"）; 

		//許可要求は、トークンヘッダ
		// httpResponse.setHeader（ "アクセス制御-許可-ヘッダ"、「起源、Xが要求-With-を、
		//タイプのコンテンツは、トークンを受け入れる"）; 
		//するSystem.out.println（"トークン= "+ req.getHeader（"トークン"））; 

		IF（" OPTIONS」.equals（req.getMethod（）） ）{// axios、最初の提出がある2つの要求が発行されますAJAX：直接返すオプション、
			返す; 
		} 
		FilterChain.doFilter（のServletRequest、ServletResponseを）; 
	} 

	@Override 
	ます。public void破壊（）{ 

	} 
}

　　Vueの+ elementUIは成功した背景を構築するためにJavaプロジェクトSPAへのアクセスを構築しました