vue는 ajax를 지원하나요?

vue 자체는 ajax 요청을 지원하지 않지만 "vue-resource", axios 및 기타 플러그인을 사용하여 vue를 구현하여 Ajax 요청을 보낼 수 있습니다. axios는 "vue" 요청을 보내는 데 사용되는 Promise 기반 HTTP 요청 클라이언트입니다. -resource"는 XMLHttpRequest 또는 JSONP를 사용하여 웹 요청을 만들고 응답을 처리하는 서비스를 제공하는 플러그인입니다.

이 튜토리얼의 운영 환경: Windows 10 시스템, Vue3 버전, Dell G3 컴퓨터.

vue는 ajax를 지원하나요?

vue 자체는 AJAX 요청 전송을 지원하지 않습니다.

를 구현하려면 vue-resource(vue1.0 버전), axios(vue2.0 버전) 및 기타 플러그인을 사용해야 합니다. axios는 Promise 기반 HTTP 요청입니다. 요청을 보내는 데 사용되는 클라이언트도 vue2.0에서 공식적으로 권장됩니다. 동시에 vue-resource는 더 이상 업데이트 및 유지 관리되지 않습니다. XMLHttpRequest 또는 JSONP 서비스를 사용하여 웹 요청을 제공하고 응답을 처리하는 Vue.js용입니다.

vue가 2.0으로 업데이트되었을 때 저자는 더 이상 vue-resource를 업데이트하지 않을 것이라고 발표했지만 여기에서 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;

*get request

를 통해 파일을 소개합니다. 1. 기본 사용 형식

형식 1: axios([options]) #이 형식은 모든 데이터를 options

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

2에 직접 씁니다.

URL을 통해 매개변수 전달

params 옵션을 통해 매개변수 전달

코드 조각:

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

*post 요청(푸시 및 삭제에 대한 비-get 요청은 동일)

형식: axios.post(url,data, [ 옵션]) 또는 axios([옵션])

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

index.js 글로벌 가드

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 tutorial

"]

위 내용은 vue는 ajax를 지원하나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!