Vue 自体は ajax リクエストをサポートしていませんが、「vue-resource」、axios、およびその他のプラグインを使用して vue を実装し、ajax リクエストを送信できます。axios は、送信に使用される Promise ベースの HTTP リクエスト クライアントです。 「vue-resource」は、XMLHttpRequest または JSONP を使用して Web リクエストを作成し、応答を処理するためのサービスを提供するプラグインです。
このチュートリアルの動作環境: Windows 10 システム、Vue3 バージョン、Dell G3 コンピューター。
Vue 自体は AJAX リクエストの送信をサポートしていません。vue-resource (vue1.0 バージョン)、axios (vue2.0 バージョン) を使用する必要があります。および実装するその他のプラグイン
axios は、リクエストの送信に使用される Promise ベースの HTTP リクエスト クライアントであり、vue2.0 によって公式に推奨されています。更新および保守は行われなくなりました
vue -resource は、XMLHttpRequest または JSONP を使用して Web リクエストを作成し、応答を処理するためのサービスを提供する Vue.js のプラグインです。
vue が 2.0 に更新されると、作者は vue-resource を更新しないことを発表しましたが、axios を推奨します。ここでは vue-resource について学ぶことができます。
vue は axios を使用して AJAX リクエストを送信します:
ホームページで axios をインストールして導入します
npm install axios -S
または axios.min.js ファイルを直接ダウンロードしますスクリプト src を通じてオンライン ファイルの紹介
<script src="js/axios.min.js"></script>
import axios from 'axios' import VueAxios from 'vue-axios' Vue.use(VueAxios,axios); Vue.prototype.$axios = axios;
<p class="lgD"> <input type="text" placeholder="输入用户名" v-model="loginForm.loginName"/> </p> <p class="lgD"> <input type="password" placeholder="输入用户密码" v-model="loginForm.passWord"/> </p> <a class="register" @click="gotoRegister()">注册账号</a> <p class="logC"> <button @click="doLogin" type="button">立即登录</button> </p>
<script> export default { data:function(){ return{ none: false, loginForm: { loginName: '', passWord: '' } } }, methods: { gotoRegister:function(){ this.$router.push({ name:'register' }); }, doLogin(){ //接口 this.$axios.get(接口地址).then(function(respon){}).catch(function(error){}) let _this = this; if (this.loginForm.loginName === '' || this.loginForm.passWord === '') { alert('账号或密码不能为空'); } else { this.$axios.get("/WebUserLogin",{ params:_this.loginForm }).then(res=>{ var result = JSON.parse(res.data); // console.log(result); if (result.state == 'ok') { // console.log('登陆成功'); window.sessionStorage.setItem('token', result.token) //存入token _this.$router.push('/index'); }else{ alert('登录失败请检查用户名和密码是否正确'); } }).catch(error => { alert('账号或密码错误'); // console.log(error); }); } } } } </script>
<script> import qs from 'qs' export default { data:function(){ return{ none: false, registerForm: { LoginName: '', LoginPassword: '' } } }, methods: { register(){ let _this = this; if (this.registerForm.LoginName === '' || this.registerForm.LoginPassword === '') { alert('注册信息不能空'); } else { this.$axios({ url:"/WebUserRegist", method:"post", data:qs.stringify(_this.registerForm) }).then(res=>{ var result = JSON.parse(res.data); // console.log(result); if (result.state == 'ok') { alert('注册成功去登录'); _this.$router.push('/'); }else{ alert('注册失败请检查注册信息是否正确'); } }).catch(error => { alert('注册信息有误'); // console.log(error); }); } } } } </script>
router.beforeEach((to,form,next) =>{ //如果进入到的路由是登录页或者注册页面,则正常展示 if (to.path === '/login') { next(); } else { let token = window.sessionStorage.getItem('token'); // console.log(token) if (token === null || token === '') { next('/login'); // alert("还没有登录,请先登录!"); } else { next(); } } // console.log(to) })
vue.jsチュートリアル###"】###
以上がvueはajaxをサポートしていますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。