VUE + elementUIは、登録とログインを完了します

要素-UIフレームワーク使って紹介し、設定する方法1. VUE
VUEのVUE-cliの足場ツール使用してプロジェクトを作成するために、1.1を
VUEのinitのWebPACKのpro01を

elementUI 1.2 NPMのインストール
ルートのCD pro01＃は、新しいプロジェクトの入力
NPMは要素-UIを取り付け要素-UI -Sの＃モジュールをインストールします

##三回言うべき重要な事柄：指定された場所にある!!!指定された位置に指定された場所!!! ~~~ !!! 3行のコードを追加
1.3 main.jsは、プロジェクト内のsrcディレクトリの下に見つけるには、指定した場所にあります（行がページが導入されていないだろう、ここで紹介され、ファイルエントリをmain.js）3行のコードを追加します。
インポートは、Vueの「VUE」から

インポートElementUI「UI-要素」。1 //新しくから追加
のインポート「UI要素/ libに『;前./App //から輸入アプリを出すために、異なるスタイルを避けるために、2つの新しい、ポストのパッケージを追加する「/theme-chalk/index.css

インポートのAppから』 ./App」
./routerルータからのインポート「」

Vue.use（ElementUI）//新しく追加された3
偽Vue.config.productionTip =

1.4テストの
効果elementUIを見るためにHelloWorld.vueは、コンポーネントを追加、変更

2.ヴュー+ ElementUIランディングページのデザイン

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

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

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

< テンプレート> 
    < divのクラス= "ログインラップ" > 
        < EL-フォームクラス= "ログイン-コンテナを" > 
            < h1のクラス= "タイトル" >用户登录</ H1 > 
            < EL-フォーム項目ラベル= "" > 
                < EL入力タイプ= "テキスト" Vモデル= "ユーザ名" オートコンプリート= "オフ" > </ EL-入力> 
            </ EL-フォーム項目> 
            <エル・フォーム・アイテムのラベル= "" > 
                < EL-入力タイプ= "パスワード" Vモデル= "パスワード" オートコンプリート= "オフ" > </ EL-入力> 
            </ EL-フォーム項目> 
            < EL-フォーム項目> 
                < EL-ボタンタイプ= "主" スタイル= "幅：100％;" @click = "doSubmit（）" >提交</ EL-ボタン> 
            </ EL-フォーム項目> 
            < EL-行スタイル= "テキスト整列：センター;マージントップ：-10px ;;" > 
                < EL-リンクタイプ=」> 
                < EL-リンクタイプ= "プライマリ" @click = "doRegister（）" >用户注册</ EL-リンク> 
            </ EL-行> 
        </ EL-形態> 
    </ DIV > 
</ テンプレート>

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

1.オフトピックは：
有名な家族のバケットシリーズvue.js：VUE-ルータ、vuex、VUEの -resource、ビルドツールVUE-CLIと相まってを、コアは完全なプロジェクトは、VUEを構成しています。
VUEリソースプラグインのVue.jsであり、それはのXMLHttpRequestまたはJSONPおよび治療応答を介して要求を開始することができるが、2.0 VUEの更新後、
著者らは、もはやVUEリソースの更新を宣言していないが、axios推奨しました

2.GET提交
axios.get('/user', {//注意数据是保存到json对象的params属性
params: {
ID: 12345
}
}).then(function (response) {
console.log(response);
}).catch(function (error) {
console.log(error);
});

3.POST提交
axios.post('/user', {//注意数据是直接保存到json对象
firstName: 'Fred',
lastName: 'Flintstone'
}).then(function (response) {
console.log(response);
}).catch(function (error) {
console.log(error);
});

注1：axios跨域问题
会一直报错：“http://127.0.0.1:8848' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header”
因为使用了前后端分离开发，跨域访问了，解决方案：需要配置tomcat允许跨域访问，
tomcat跨域配置方法很多，但最简单的方式是自己写一个过滤器CorsFilter实现，添加一个响应头
Access-Control-Allow-Origin即可
httpResponse.addHeader("Access-Control-Allow-Origin", "*");//*表示任何域名
httpResponse.addHeader("Access-Control-Allow-Origin", "http://localhost:80");

Access-Control-Allow-Origin:* #则允许所有域名的脚本访问该资源。
Access-Control-Allow-Origin:https://www.fujieace.com #允许特定的域名访问

注2：axios.get提交没有问题，axios.post提交后台接收不到数据
因为POST提交的参数的格式是Request Payload，这样后台取不到数据的(详情见资料“05 Vue中axios踩坑之路-POST传参 - RainSun - CSDN博客.mht”)，
解决方案：使用qs.js库，将{a:'b',c:'d'}转换成'a=b&c=d'

注3：为简化axios使用，还可以使用axios全局配置及拦截器，详情见资料“api/http.js”
axios.defaults.baseURL = 'https://api.example.com';
//axios.defaults.headers.common['Authorization'] = AUTH_TOKEN;//自定义请求头，添加认证令牌
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';

注4：为方便开发，建议对请求地址进行封装，详情见资料“api/action.js”

注5：^_^~~~~为进一步简化开发，将action.js的URL地址封装到axios.urls属性上

VUE + elementUIは、登録とログインを完了します

おすすめ