Vue prend-elle en charge ajax ?-Questions et réponses frontales-php.cn

Vue prend-elle en charge ajax ?

WBOY

Libérer： 2022-07-01 16:47:05

original

3120 Les gens l'ont consulté

vue elle-même ne prend pas en charge les requêtes ajax, mais vous pouvez utiliser "vue-resource", axios et d'autres plug-ins pour implémenter vue afin d'envoyer des requêtes ajax ; axios est un client de requête HTTP basé sur Promise utilisé pour envoyer des requêtes, "vue -resource" Est un plug-in qui fournit des services pour effectuer des requêtes Web et traiter les réponses à l'aide de XMLHttpRequest ou JSONP.

Vue prend-elle en charge ajax ?

L'environnement d'exploitation de ce tutoriel : système Windows 10, version Vue3, ordinateur Dell G3.

Est-ce que vue prend en charge ajax ?

vue elle-même ne prend pas en charge l'envoi de requêtes AJAX. Vous devez utiliser vue-resource (version vue1.0), axios (version vue2.0) et d'autres plug-ins pour implémenter

. axios est une requête HTTP basée sur Promise. Le client, utilisé pour envoyer des requêtes, est également officiellement recommandé par vue2.0. En même temps, vue-resource ne sera plus mis à jour et maintenu

vue-resource est un plug-. pour Vue.js qui fournit des requêtes Web et traite les réponses à l'aide des services XMLHttpRequest ou JSONP.

Lorsque vue a été mise à jour vers 2.0, l'auteur a annoncé qu'il ne mettrait plus à jour vue-resource, mais a recommandé axios Ici, vous pouvez en savoir plus sur vue-resource.

vue utilise axios pour envoyer des requêtes AJAX :

Installez et introduisez axios sur la page d'accueil

npm install axios -S

Copier après la connexion

ou téléchargez directement le fichier axios.min.js en ligne et introduisez le fichier via le script src

<script src="js/axios.min.js"></script>

Copier après la connexion

import axios from 'axios'
import VueAxios from 'vue-axios'
Vue.use(VueAxios,axios);
Vue.prototype.$axios = axios;

Copier après la connexion

*get request

1. Format d'utilisation de base

Format 1 : axios([options]) #Ce format écrit toutes les données directement dans les options

Format 2 : axios.get(url[,options])

Passage des paramètres via l'url

Passage des paramètres via l'option params

Extrait de code :

<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>

Copier après la connexion

<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>

Copier après la connexion

*demande de publication (les requêtes non-get pour push et delete sont les mêmes)

Format : axios.post(url,data, [ options]) ou axios([options])

<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>

Copier après la connexion

index.js global guard

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)
  })

Copier après la connexion

[Recommandation associée : "tutoriel vue.js"]

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!