目次
1.2 npm 経由で element-ui をインストールする
2.4 Login コンポーネントで送信ボタンを 100% 幅に調整する
3.2 axios/qs/vue-axios のインストールと使用
1. プロジェクトをビルドする
エンジニアリングモードでプロジェクトをビルドするには、事前にテストに必要なバックグラウンド Web サービス プログラムを準備してください。
1.1 vue-cli でプロジェクトを作成する
コマンド ラインで、vue プロジェクトが保存されているディレクトリに移動し、コマンドを実行します (vue-cli が最初にインストールされている場合)。
vue init webpack vuepro
1.2 npm 経由で element-ui をインストールする
npm install element-ui -S
1.3 コンポーネントのインポート
src ディレクトリにある main.js を開きます。このファイルはプロジェクトのエントリ ファイルなので、ここでインポートします。他のコンポーネントは使用できます。インポートする必要はありません。
import Vue from 'vue'
//新添
import ElementUI from 'element-ui'
//新增
import 'element-ui/lib/theme-chalk/index.css'
//新增
Vue.use(ElementUI)
。。。
2 ログインページを作成する
2.1 ログイン コンポーネントを作成する
1) 新しいビュー ディレクトリを作成し、ディレクトリを右クリックして、[新しいビュー (単純なモジュール)] を選択してログインを作成します。
<template>
</template>
<script>
</script>
<style>
</style>
2) In the element-ui component, find a component similar to the login page in the form component, copy the code to the new created Login component, and modified it to the login page you need. ページには、アカウント、パスワード、送信ボタン
<template>
<div>
<el-form >
<el-form-item label="账户" >
<el-input type="password" v-model="userName" autocomplete="off"></el-input>
</el-form-item>
<el-form-item label="密码" >
<el-input type="password" v-model="passWord" autocomplete="off"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
</el-form-item>
</el-form>
</div>
</template>
<script>
export default {
name: 'Login',
data: function() {
return {
userName: null,
passWord: null,
}
},
methods: {
submitForm: function() {
console.log("fdfdd");
}
}
}
</script>
<style>
</style>
2.2 CSS のインポート (css.txt)
css.txt の指示に従ってインポートして、スタイルを制御し、スタイルを追加します
CSS スタイル:
<スタイル>
.login-wrap { box-sizing: border-box; 幅: 100%; 高さ: 100%; パディングトップ: 10%;
背景画像: url(データ:画像/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+Cjxzdmcgd2lkdGg9IjEzNjFweCIgaGVpZ2h0PSI2MDlweCIgdmlld0JveD0iMCAwIDEzNjEgNjA5IiB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPgogICAgPCEtLSBHZW5lcmF0b3I6IFNrZXRjaCA0Ni4yICg0NDQ5NikgLSBodHRwOi8vd3d3LmJvaGVtaWFuY29kaW5nLmNvbS9za2V0Y2ggLS0+CiAgICA8dGl0bGU+R3JvdXAgMjE8L3RpdGxlPgogICAgPGRlc2M+Q3JlYXRlZCB3aXRoIFNrZXRjaC48L2Rlc2M+CiAgICA8ZGVmcz48L2RlZnM+CiAgICA8ZyBpZD0iQW50LURlc2lnbi1Qcm8tMy4wIiBzdHJva2U9Im5vbmUiIHN0cm9rZS13aWR0aD0iMSIgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj4KICAgICAgICA8ZyBpZD0i6LSm5oi35a+G56CB55m75b2VLeagoemqjCIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoLTc5LjAwMDAwMCwgLTgyLjAwMDAwMCkiPgogICAgICAgICAgICA8ZyBpZD0iR3JvdXAtMjEiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDc3LjAwMDAwMCwgNzMuMDAwMDAwKSI+CiAgICAgICAgICAgICAg+PC9lbGxpcHNlPgogICAgICAgICAgICAgICAgICAgIDxwYXRoIGQ9Ik0zOC4xMzU0NTE0LDg4LjM1MjAyMTUgQzQzLjg5ODQyMjcsODguMzUyMDIxNSA0OC41NzAyMzQsODMuNjgzODY0NyA0OC41NzAyMzQsNzcuOTI1NDAxNSBDNDguNTcwMjM0LDcyLjE2NjkzODMgNDMuODk4NDIyNyw2Ny40OTg3ODE2IDM4LjEzNTQ1MTQsNjcuNDk4NzgxNiBDMzIuMzcyNDgwMSw2Ny40OTg3ODE2IDI3LjcwMDY2ODgsNzIuMTY2OTM4MyAyNy43MDA2Njg4LDc3LjkyNTQwMTUgQzI3LjcwMDY2ODgsODMuNjgzODY0NyAzMi4zNzI0ODAxLDg4LjM1MjAyMTUgMzguMTM1NDUxNCw4OC4zNTIwMjE1IFoiIGlkPSJPdmFsLTMtQ29weSIgZmlsbD0iI0NGREFFNiIgb3BhY2l0eT0iMC40NSI++PC9wYXRoPgogICAgICAgICAgICAgICAgICAgIDxwYXRoIGQ9Ik02My45MjYyMTg3LDMzLjUyMTU2MSBMNDMuNjcyMTMyNiw2OS4zMjUwOTUxIiBpZD0iUGF0aC0xNSIgc3Ryb2tlPSIjQkFDQUQ5IiBzdHJva2Utd2lkdGg9IjAuNzAyNjc4OTY0IiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIHN0cm9rZS1kYXNoYXJyYXk9IjEuNDA1MzU3ODk5ODczMTUzLDIuMTA4MDM2OTUzNDY5OTgxIj48L3BhdGg+CiAgICAgICAgICAgICAgICAgICAgPGcgaWQ9Ikdyb3VwLTE3IiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgxMjYuODUwOTIyLCAxMy41NDM2NTQpIHJvdGF0ZSgzMC4wMDAwMDApIHRyYW5zbGF0ZSgtMTI2Ljg1MDkyMiwgLTEzLjU0MzY1NCkgdHJhbnNsYXRlKDExNy4yODU3MDUsIDQuMzgxODg5KSIgZmlsbD0iI0NGREFFNiI+CiAgICAgICAgICAgICAgICAgICAgICAgIDxlbGxpcHNlIGlkPSJPdmFsLTQiIG9wYWNpdHk9IjAuNDUiIGN4PSI5LjEzNDgyNjUzIiBjeT0iOS4xMjc2ODA3NiIgcng9IjkuMTM0ODI2NTMiIHJ5PSI5LjEyNzY4MDc2Ij48L2VsbGlwc2U+CiAgICAgICAgICAgICAgICAgICAgICAgIDxwYXRoIGQ9Ik0xOC4yNjk2NTMxLDE4LjI1NTM2MTUgQzE4LjI2OTY1MzEsMTMuMjE0MjgyNiAxNC4xNzk4NTE5LDkuMTI3NjgwNzYgOS4xMzQ4MjY1Myw5LjEyNzY4MDc2IEM0LjA4OTgwMTE0LDkuMTI3NjgwNzYgMCwxMy4yMTQyODI2IDAsMTguMjU1MzYxNSBMMTguMjY5NjUzMSwxOC4yNTUzNjE1IFoiIGlkPSJPdmFsLTQiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDkuMTM0ODI3LCAxMy42OTE1MjEpIHNjYWxlKC0xLCAtMSkgdHJhbnNsYXRlKC05LjEzNDgyNywgLTEzLjY5MTUyMSkgIj48L3BhdGg+CiAgICAgICAgICAgICAgICAgICAgPC9nPgogICAgICAgICAgICAgICAgPC9nPgogICAgICAgICAgICAgICAgPGcgaWQ9Ikdyb3VwLTE0IiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgyMTYuMjk0NzAwLCAxMjMuNzI1NjAwKSByb3RhdGUoLTUuMDAwMDAwKSB0cmFuc2xhdGUoLTIxNi4yOTQ3MDAsIC0xMjMuNzI1NjAwKSB0cmFuc2xhdGUoMTA2LjI5NDcwMCwgMzUuMjI1NjAwKSI+CiAgICAgICAgICAgICAgICAgICAgPGVsbGlwc2UgaWQ9Ik92YWwtMiIgZmlsbD0iI0NGREFFNiIgb3BhY2l0eT0iMC4yNSIgY3g9IjI5LjExNzY0NzEiIGN5PSIyOS4xNDAyNDM5IiByeD0iMjkuMTE3NjQ3MSIgcnk9IjI5LjE0MDI0MzkiPjwvZWxsaXBzZT4KICAgICAgICAgICAgICAgICAgICA8ZWxsaXBzZSBpZD0iT3ZhbC0yIiBmaWxsPSIjQ0ZEQUU2IiBvcGFjaXR5PSIwLjMiIGN4PSIyOS4xMTc2NDcxIiBjeT0iMjkuMTQwMjQzOSIgcng9IjIxLjU2ODYyNzUiIHJ5PSIyMS41ODUzNjU5Ij48L2VsbGlwc2U+CiAgICAgICAgICAgICAgICAgICAgPGVsbGlwc2UgaWQ9Ik92YWwtMi1Db3B5IiBzdHJva2U9IiNDRkRBRTYiIG9wYWNpdHk9IjAuNCIgY3g9IjE3OS4wMTk2MDgiIGN5PSIxMzguMTQ2MzQxIiByeD0iMjMuNzI1NDkwMiIgcnk9IjIzLjc0MzkwMjQiPjwvZWxsaXBzZT4KICAgICAgICAgICAgICAgICAgICA8ZWxsaXBzZSBpZD0iT3ZhbC0yIiBmaWxsPSIjQkFDQUQ5IiBvcGFjaXR5PSIwLjUiIGN4PSIyOS4xMTc2NDcxIiBjeT0iMjkuMTQwMjQzOSIgcng9IjEwLjc4NDMxMzciIHJ5PSIxMC43OTI2ODI5Ij48L2VsbGlwc2U+CiAgICAgICAgICAgICAgICAgICAgPHBhdGggZD0iTTI5LjExNzY0NzEsMzkuOTMyOTI2OCBMMjkuMTE3NjQ3MSwxOC4zNDc1NjEgQzIzLjE2MTYzNTEsMTguMzQ3NTYxIDE4LjMzMzMzMzMsMjMuMTc5NjA5NyAxOC4zMzMzMzMzLDI5LjE0MDI0MzkgQzE4LjMzMzMzMzMsMzUuMTAwODc4MSAyMy4xNjE2MzUxLDM5LjkzMjkyNjggMjkuMTE3NjQ3MSwzOS45MzI5MjY4IFoiIGlkPSJPdmFsLTIiIGZpbGw9IiNCQUNBRDkiPjwvcGF0aD4KICAgICAgICAgICAgICAgICAgICA8ZyBpZD0iR3Jv+PC9wYXRoPgogICAgICAgICAgICAgICAgICAgIDwvZz4KICAgICAgICAgICAgICAgICAgICA8ZWxsaXBzZSBpZD0iT3ZhbC0xMCIgZmlsbD0iI0NGREFFNiIgY3g9IjIxOC4zODIzNTMiIGN5PSIxMzguNjg1OTc2IiByeD0iMS42MTc2NDcwNiIgcnk9IjEuNjE4OTAyNDQiPjwvZWxsaXBzZT4KICAgICAgICAgICAgICAgICAgICA8ZWxsaXBzZSBpZD0iT3ZhbC0xMC1Db3B5LTIiIGZpbGw9IiNFMEI0QjciIG9wYWNpdHk9IjAuMzUiIGN4PSIxNzkuNTU4ODI0IiBjeT0iMTc1LjM4MTA5OCIgcng9IjEuNjE3NjQ3MDYiIHJ5PSIxLjYxODkwMjQ0Ij48L2VsbGlwc2U+CiAgICAgICAgICAgICAgICAgICAgPGVsbGlwc2UgaWQ9Ik92YWwtMTAtQ29weSIgZmlsbD0iI0UwQjRCNyIgb3BhY2l0eT0iMC4zNSIgY3g9IjE4MC4wOTgwMzkiIGN5PSIxMDIuNTMwNDg4IiByeD0iMi4xNTY4NjI3NSIgcnk9IjIuMTU4NTM2NTkiPjwvZWxsaXBzZT4KICAgICAgICAgICAgICAgICAgICA8cGF0aCBkPSJNMjguOTk4NTM4MSwyOS45NjcxNTk4IEwxNzEuMTUxMDE4LDEzMi44NzYwMjQiIGlkPSJQYXRoLTExIiBzdHJva2U9IiNDRkRBRTYiIG9wYWNpdHk9IjAuOCI+PC9wYXRoPgogICAgICAgICAgICAgICAgPC9nPgogICAgICAgICAgICAgICAgPGcgaWQ9Ikdyb3VwLTEwIiBvcGFjaXR5PSIwLjc5OTk5OTk1MiIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMTA1NC4xMDA2MzUsIDM2LjY1OTMxNykgcm90YXRlKC0xMS4wMDAwMDApIHRyYW5zbGF0ZSgtMTA1NC4xMDA2MzUsIC0zNi42NTkzMTcpIHRyYW5zbGF0ZSgxMDI2LjYwMDYzNSwgNC42NTkzMTcpIj4KICAgICAgICAgICAgICAgICAgICA8ZWxsaXBzZSBpZD0iT3ZhbC03IiBzdHJva2U9IiNDRkRBRTYiIHN0cm9rZS13aWR0aD0iMC45NDExNzY0NzEiIGN4PSI0My44MTM1NTkzIiBjeT0iMzIiIHJ4PSIxMS4xODY0NDA3IiByeT0iMTEuMjk0MTE3NiI+MTcuNDQ1MDM4NiBaIiBpZD0iT3ZhbC03Ij48L3BhdGg+CiAgICAgICAgICAgICAgICAgICAgPC9nPgogICAgICAgICAgICAgICAgICAgIDxwYXRoIGQ9Ik0zNC42NTk3Mzg1LDI0LjgwOTY5NCBMNS43MTY2NjA4NCw0Ljc2ODc4OTQ1IiBpZD0iUGF0aC0yIiBzdHJva2U9IiNDRkRBRTYiIHN0cm9rZS13aWR0aD0iMC45NDExNzY0NzEiPjwvcGF0aD4KICAgICAgICAgICAgICAgICAgICA8ZWxsaXBzZSBpZD0iT3ZhbCIgc3Ryb2tlPSIjQ0ZEQUU2IiBzdHJva2Utd2lkdGg9IjAuOTQxMTc2NDcxIiBjeD0iMy4yNjI3MTE4NiIgY3k9IjMuMjk0MTE3NjUiIHJ4PSIzLjI2MjcxMTg2IiByeT0iMy4yOTQxMTc2NSI+PC9lbGxpcHNlPgogICAgICAgICAgICAgICAgICAgIDxlbGxpcHNlIGlkPSJPdmFsLUNvcHkiIGZpbGw9IiNGN0UxQUQiIGN4PSIyLjc5NjYxMDE3IiBjeT0iNjEuMTc2NDcwNiIgcng9IjIuNzk2NjEwMTciIHJ5PSIyLjgyMzUyOTQxIj48L2VsbGlwc2U+CiAgICAgICAgICAgICAgICAgICAgPHBhdGggZD0iTTM0LjYzMTI0NDMsMzkuMjkyMjcxMiBMNS4wNjM2NjY2Myw1OS43ODUwODIiIGlkPSJQYXRoLTEwIiBzdHJva2U9IiNDRkRBRTYiIHN0cm9rZS13aWR0aD0iMC45NDExNzY0NzEiPjwvcGF0aD4KICAgICAgICAgICAgICAgIDwvZz4KICAgICAgICAgICAgICAgIDxnIGlkPSJHcm91cC0xOSIgb3BhY2l0eT0iMC4zMyIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMTI4Mi41MzcyMTksIDQ0Ni41MDI4NjcpIHJvdGF0ZSgtMTAuMDAwMDAwKSB0cmFuc2xhdGUoLTEyODIuNTM3MjE5LCAtNDQ2LjUwMjg2NykgdHJhbnNsYXRlKDExNDIuNTM3MjE5LCAzMjcuNTAyODY3KSI+CiAgICAgICAgICAgICAgICAgICAgPGcgaWQ9Ikdyb3VwLTE3IiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgxNDEuMzMzNTM5LCAxMDQuNTAyNzQyKSByb3RhdGUoMjc1LjAwMDAwMCkgdHJhbnNsYXRlKC0xNDEuMzMzNTM5LCAtMTA0LjUwMjc0MikgdHJhbnNsYXRlKDEyOS4zMzM1MzksIDkyLjUwMjc0MikiIGZpbGw9IiNCQUNBRDkiPgogICAgICAgICAgICAgICAgICAgICAgICA8Y2lyY2xlIGlkPSJPdmFsLTQiIG9wYWNpdHk9IjAuNDUiIGN4PSIxMS42NjY2NjY3IiBjeT0iMTEuNjY2NjY2NyIgcj0iMTEuNjY2NjY2NyI+PC9jaXJjbGU+CiAgICAgICAgICAgICAgICAgICAgICAgIDxwYXRoIGQ9Ik0yMy4zMzMzMzMzLDIzLjMzMzMzMzMgQzIzLjMzMzMzMzMsMTYuODkwMDExMyAxOC4xMDk5ODg3LDExLjY2NjY2NjcgMTEuNjY2NjY2NywxMS42NjY2NjY3IEM1LjIyMzM0NDU5LDExLjY2NjY2NjcgMCwxNi44OTAwMTEzIDAsMjMuMzMzMzMzMyBMMjMuMzMzMzMzMywyMy4zMzMzMzMzIFoiIGlkPSJPdmFsLTQiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDExLjY2NjY2NywgMTcuNTAwMDAwKSBzY2FsZSgtMSwgLTEpIHRyYW5zbGF0ZSgtMTEuNjY2NjY3LCAtMTcuNTAwMDAwKSAiPjwvcGF0aD4KICAgICAgICAgICAgICAgICAgICA8L2c+CiAgICAgICAgICAgICAgICAgICAgPGNpcmNsZSBpZD0iT3ZhbC01LUNvcHktNiIgZmlsbD0iI0NGREFFNiIgY3g9IjIwMS44MzMzMzMiIGN5PSI4Ny41IiByPSI1LjgzMzMzMzMzIj48L2NpcmNsZT4KICAgICAgICAgICAgICAgICAgICA8cGF0aCBkPSJNMTQzLjUsODguODEyNjY4NSBMMTU1LjA3MDUwMSwxNy42MDM4NTQ0IiBpZD0iUGF0aC0xNyIgc3Ryb2tlPSIjQkFDQUQ5IiBzdHJva2Utd2lkdGg9IjEuMTY2NjY2NjciPjwvcGF0aD4KICAgICAgICAgICAgICAgICAgICA8cGF0aCBkPSJNMTcuNSwzNy4zMzMzMzMzIEwxMjcuNDY2MjUyLDk3LjY0NDk3MzUiIGlkPSJQYXRoLTE4IiBzdHJva2U9IiNCQUNBRDkiIHN0cm9rZS13aWR0aD0iMS4xNjY2NjY2NyI+PC9wYXRoPgogICAgICAgICAgICAgICAgICAgIDxwb2x5bGluZSBpZD0iUGF0aC0xOSIgc3Ryb2tlPSIjQ0ZEQUU2IiBzdHJva2Utd2lkdGg9IjEuMTY2NjY2NjciIHBvaW50cz0iMTQzLjkwMjU5NyAxMjAuMzAyMjgxIDE3NC45MzU0NTUgMjMxLjU3MTM0MiAzOC41IDE0Ny41MTA4NDcgMTI2LjM2Njk0MSAxMTAuODMzMzMzIj48L3BvbHlsaW5lPgogICAgICAgICAgICAgICAgICAgIDxwYXRoIGQ9Ik0xNTkuODMzMzMzLDk5Ljc0NTM4NDIgTDE5NS40MTY2NjcsODkuMjUiIGlkPSJQYXRoLTIwIiBzdHJva2U9IiNFMEI0QjciIHN0cm9rZS13aWR0aD0iMS4xNjY2NjY2NyIgb3BhY2l0eT0iMC42Ij48L3BhdGg+CiAgICAgICAgICAgICAgICAgICAgPHBhdGggZD0iTTIwNS4zMzMzMzMsODIuMTM3MjEwNSBMMjM4LjcxOTQwNiwzNi4xNjY2NjY3IiBpZD0iUGF0aC0yNCIgc3Ryb2tlPSIjQkFDQUQ5IiBzdHJva2Utd2lkdGg9IjEuMTY2NjY2NjciPjwvcGF0aD4KICAgICAgICAgICAgICAgICAgICA8cGF0aCBkPSJNMjY2LjcyMzQyNCwxMzIuMjMxOTg4IEwyMDcuMDgzMzMzLDkwLjQxNjY2NjciIGlkPSJQYXRoLTI1IiBzdHJva2U9IiNDRkRBRTYiIHN0cm9rZS13aWR0aD0iMS4xNjY2NjY2NyI+PC9wYXRoPgogICAgICAgICAgICAgICAgICAgIDxjaXJjbGUgaWQ9Ik92YWwtNSIgZmlsbD0iI0MxRDFFMCIgY3g9IjE1Ni45MTY2NjciIGN5PSI4Ljc1IiByPSI4Ljc1Ij48L2NpcmNsZT4KICAgICAgICAgICAgICAgICAgICA8Y2lyY2xlIGlkPSJPdmFsLTUtQ29weS0zIiBmaWxsPSIjQzFEMUUwIiBjeD0iMzkuMDgzMzMzMyIgY3k9IjE0OC43NSIgcj0iNS4yNSI+PC9jaXJjbGU++);
/* 背景色: #112346; */
background-repeat: 繰り返しなし;
background-position: 中央右。
背景サイズ: 100%;
}
.login-container { ボーダー半径: 10px; マージン: 0px 自動; 幅: 350px; パディング: 30px 35px 15px 35px; 背景: #fff; ボーダー: 1px ベタ #eaeaea; テキスト整列: 左; ボックスの影: 0 0 20px 2px rgba(0, 0, 0, 0.1); } .title { margin: 0px auto 40px auto; テキスト整列: 中央; 色: #505458; } .remember { マージン: 0px 0px 35px 0px; } .code-box { text-align: right;
}
.codeimg { 高さ: 40px; } .title { text-align: center;
}
</style>
base64 エンコーディング:
バイナリ データを表す 64 個の印刷可能な文字に基づいており、8 ビットのバイト コードを送信するために使用され、HTTP 環境で長い識別情報を送信するために使用できます。Base64 エンコーディングは読み取り不能であり、読み取る前にデコードする必要があります。
2.3 ルーティングの構成
ルーター/index.js
import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
//首先导入组件
import Login from '@/views/Login'
Vue.use(Router)
export default new Router({
routes: [
{
//配置路由，根路径访问Login组件
path: '/',
name: 'Login',
component: Login
}
]
})
2.4 Login コンポーネントで送信ボタンを 100% 幅に調整する
<el-button type="primary" @click="submitForm('ruleForm')" style="width:100%">提交</el-button>
2.5 走行効果
プロジェクト ディレクトリで、次のコマンドを実行してサービスを開始します。
npm run dev
インターフェース効果:
3. バックグラウンドでのやり取り
3.1 axios の紹介
Axios は vue2 が提唱する ajax の軽量版です。これは promise ベースの HTTP ライブラリです。ブラウザーから XMLHttpRequests を作成し、Vue で非常にうまく機能します。
Vue.js には、vue-router、vuex、vue-resource などの有名なファミリー バケット シリーズと、完全な vue プロジェクトのコア コンポーネントであるビルド ツール vue-cli があります。その中でも vue-resource は Vue.js のプラグインであり、XMLHttpRequest や JSONP を介してリクエストを開始し、レスポンスを処理することができます. しかし、vue が 2.0 にアップデートされた後、作者は vue-resource がアップデートされなくなることを発表しました.しかし、推奨される axios
3.2 axios/qs/vue-axios のインストールと使用
注:
qs.js は、url パラメータ変換用の 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'
vue-axios は axios をベースに拡張したプラグインです. Vue.prototype プロトタイプの $http などのプロパティを拡張し, axios を使いやすくします.
3.2.1 axios のインストール
npm install axios -S
package.json の依存関係の下にインストールされた新しいライブラリを確認できます。
2) Login コンポーネントに axios をインポートする
import axios from 'axios'
export default {
......
3.2.2 get リクエストの送信:
get リクエストを送信ボタンのリスナー関数に送信するコードを追加します。
//请求url，需要保证服务可用
let url = 'http://localhost:8080/webserver/userMsg/userAction!login.action';
//注意数据是保存到json对象的params属性
axios.get(url, {
params: {
userNo: this.userNo,
userPwd: this.userPwd
}
}).then(function(response) {
console.log(response);
}).catch(function(error) {
console.log(error);
});
次の図のエラー メッセージに注意してください。リクエストにクロスドメイン エラーの問題があります。
クロスドメインリクエストの問題：
フロントエンドとバックエンドを分離して開発する方式を採用しているため、フロントエンドとバックエンドは別のサーバー上にあります.セキュリティの観点から、ブラウザは同じオリジンポリシーを持っています.であるため、クロスドメインの問題があります。
Same-origin policy is a security feature of browsers. 異なるオリジンのクライアント側スクリプトは、明示的な承認なしに相互にリソースを読み書きすることはできません。Same Origin Policy は、ブラウザ セキュリティの基礎です。
4)
クロスドメインの問題の処理 フィルターでクロスドメインの問題を処理するには、キーコード:
// Access-Control-Allow-Origin就是我们需要设置的域名
// Access-Control-Allow-Headers跨域允许包含的头。
// Access-Control-Allow-Methods是允许的请求方式
httpResponse.setHeader("Access-Control-Allow-Origin", "*");// *,任何域名
httpResponse.setHeader("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
httpResponse.setHeader("Access-Control-Allow-Methods", "POST, GET, PUT, DELETE");
filterChain.doFilter(servletRequest, servletResponse);
CorsFilter はコースウェアの資料で提供され、web.xml で構成されてすべての要求をインターセプトします。これにより、クロスドメインの問題を解決できます。注：Struts セントラル コントローラの前に設定してください
3.2.3 投稿リクエストの送信:
//注意数据是直接保存到json对象
axios.post(url, {
userNo: 'admin',
userPwd: '123'
}).then(function(response) {
console.log(response);
}).catch(function(error) {
console.log(error);
});
入力したテストアカウントとパスワードは正しく、リクエストを送信するために get を使用して取得した応答は「パスワードは正しい」ですが、post メソッドで送信したリクエストの応答は「パスワードが正しくありません」です!
理由分析:
コンソールを観察すると、ポストがリクエストを送信すると、リクエスト パラメーターがリクエスト ペイロードを介して json 形式で送信され、struts はこの方法で渡されたパラメーターを処理しないことがわかります (少なくとも、使用している struts バージョン) に渡すため、サーバー パラメータが効率的に解析されませんでした。
問題の処理:
最初の方法: サーバー側でコーディングして、リクエスト ペイロード パラメータの解析を実装します。リクエスト ペイロードから json データを取得し、指定されたクラスに変換するメソッドを BaseAction に追加します。
public Object getRequestBody(Class clazz) {
BufferedReader br;
HttpServletRequest request = ServletActionContext.getRequest();
try {
br = request.getReader();
String str, aStr = "";
while((str = br.readLine()) != null){
aStr += str;
}
System.out.println(aStr);
Object obj = JSONObject.parseObject(aStr, clazz);
return obj;
} catch (IOException e) {
throw new RuntimeException("获取请求参数异常: " + e);
}
}
取得するパラメータを取得するときにこのメソッドを呼び出します
User user = (User)this.getRequestBody(User.class);
2 番目の方法: qs.js ライブラリを使用して {a:'b',c:'d'} を 'a=b&c=d' に変換します。
1) qs と vue-axios をインストールする
npm install qs -S
npm install vue-axios -S
インストールが成功すると、package.json の「dependencies」に新しいライブラリがインストールされていることがわかります。
リクエストの送信時に qs を使用して json オブジェクトを変換する
//注意数据是直接保存到json对象
let params = {
userNo: 'admin',
userPwd: '123'
};
//参数格式转换
let paramStr = qs.stringify(params);
console.log(paramStr);
//提交时使用转换之后的参数
axios.post(url, paramStr).then(function(response) {
console.log(response);
}).catch(function(error) {
console.log(error);
});
コンソールの出力を確認すると、json 形式が & 連結形式に変換されています。返された結果が期待値であるかどうかを確認します。
3.2.4 axios の使用を簡素化する
axios の使用を簡素化するために、axios のグローバル構成とインターセプターを使用することもできます
1) vue-axios をインストールする
npm install vue-axios -S
2) コースウェアで提供される api ディレクトリを src ルート パスにテストします。
Now you can delete the import axios and qs statement in the Login component. action.js と http.js の構成については、コード内のコメントを参照してください。
3) 動作中の構成を独自のバックグラウンド サービス構成に変更します。
export default {
'SERVER': 'http://localhost:8080/webserver', //服务器
'SYSTEM_USER_DOLOGIN': '/userMsg/userAction!login.action', //登陆
'SYSTEM_USER_DOREG': '/userAction.action', //注册
//获取完整的请求地址
'getFullPath': k => { //获得请求的完整地址，用于mockjs测试时使用
return this.SERVER + this[k];
}
}
4) main.js を構成する
import Vue from 'vue'
//vue项目对axios的全局配置（增加配置）
import axios from '@/api/http'
import VueAxios from 'vue-axios'
Vue.use(VueAxios,axios)
......
5) 送信時に手動で変換を処理する必要はなく、グローバル構成が変換されます。
//修改url的获取方式，url已经配置在了action.js中，这里只要指定action路径
//服务地址和服务上下文已经在http.js中设置了axios.defaults.baseURL，
//axios会根据配置自动获取。
let url = this.axios.urls.SYSTEM_USER_DOLOGIN;
this.axios.post(url, params).then(resp => {
console.log(resp);
}).catch(resp => {});
6) 投稿リクエストが発生し、テスト