Heim > Web-Frontend > Front-End-Fragen und Antworten > Unterstützt Vue Ajax?

Unterstützt Vue Ajax?

WBOY
Freigeben: 2022-07-01 16:47:05
Original
3120 Leute haben es durchsucht

vue selbst unterstützt keine Ajax-Anfragen, aber Sie können „vue-resource“, Axios und andere Plug-Ins verwenden, um Vue zum Senden von Ajax-Anfragen zu implementieren; Axios ist ein Promise-basierter HTTP-Anfrage-Client, der zum Senden von Anfragen verwendet wird, „vue -resource“ ist ein Plug-in, das Dienste zum Erstellen von Webanfragen und zum Verarbeiten von Antworten mithilfe von XMLHttpRequest oder JSONP bereitstellt.

Unterstützt Vue Ajax?

Die Betriebsumgebung dieses Tutorials: Windows 10-System, Vue3-Version, Dell G3-Computer.

Unterstützt Vue Ajax?

Vue selbst unterstützt das Senden von AJAX-Anfragen. Sie müssen Vue-Ressource (Version Vue1.0), Axios (Version Vue2.0) und andere Plug-Ins verwenden, um

zu implementieren axios ist ein Promise-basierter HTTP-Anfrage-Client, der auch von vue2.0 offiziell empfohlen wird. Gleichzeitig wird vue-resource nicht mehr aktualisiert und gewartet. in für Vue.js, das Webanfragen und Verarbeitungsantworten mithilfe von XMLHttpRequest- oder JSONP-Diensten bereitstellt.

Als vue auf 2.0 aktualisiert wurde, kündigte der Autor an, dass er vue-resource nicht mehr aktualisieren würde, empfahl jedoch Axios. Hier können Sie mehr über vue-resource erfahren.

vue verwendet Axios, um AJAX-Anfragen zu senden:

Installieren und stellen Sie Axios auf der Homepage vor

npm install axios -S
Nach dem Login kopieren
oder laden Sie die Datei axios.min.js direkt online herunter und führen Sie die Datei über das Skript src ein

<script src="js/axios.min.js"></script>
Nach dem Login kopieren
import axios from 'axios'
import VueAxios from 'vue-axios'
Vue.use(VueAxios,axios);
Vue.prototype.$axios = axios;
Nach dem Login kopieren

*get request

1. Grundlegendes Verwendungsformat

Format 1: axios([Optionen]) #Dieses Format schreibt alle Daten direkt in Optionen

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

2.

Übergeben von Parametern über die URL

Übergeben von Parametern über die Option „params“

Code-Snippet:

<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>
Nach dem Login kopieren
<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>
Nach dem Login kopieren

*Post-Anfrage (Nicht-Get-Anfragen für Push und Löschen sind gleich)

Format: axios.post(url,data, [ Optionen]) oder Axios([Optionen])

<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>
Nach dem Login kopieren

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)
  })
Nach dem Login kopieren

[Verwandte Empfehlung: „

vue.js Tutorial

“]

Das obige ist der detaillierte Inhalt vonUnterstützt Vue Ajax?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage