站長(zhǎng)資訊網(wǎng)
        最全最豐富的資訊網(wǎng)站

        vue支持ajax嗎

        vue本身是不支持ajax請(qǐng)求的,但是可以利用“vue-resource”、axios等插件實(shí)現(xiàn)vue發(fā)送ajax請(qǐng)求;axios是一個(gè)基于Promise的HTTP請(qǐng)求客戶端,用于發(fā)送請(qǐng)求,“vue-resource”是一個(gè)插件用于提供使用XMLHttpRequest或JSONP進(jìn)行Web請(qǐng)求和處理響應(yīng)的服務(wù)。

        vue支持ajax嗎

        本教程操作環(huán)境:windows10系統(tǒng)、Vue3版、Dell G3電腦。

        vue支持ajax嗎

        vue本身不支持發(fā)送AJAX請(qǐng)求,需要使用vue-resource(vue1.0版本)、axios(vue2.0版本)等插件實(shí)現(xiàn)

        axios是一個(gè)基于Promise的HTTP請(qǐng)求客戶端,用來(lái)發(fā)送請(qǐng)求,也是vue2.0官方推薦的,同時(shí)不再對(duì)vue-resource進(jìn)行更新和維護(hù)

        vue-resource是Vue.js的插件提供了使用XMLHttpRequest或JSONP進(jìn)行Web請(qǐng)求和處理響應(yīng)的服務(wù)。

        當(dāng)vue更新到2.0之后,作者就宣告不再對(duì)vue-resource更新,而是推薦的axios,在這里大家了解一下vue-resource就可以。

        vue使用axios發(fā)送AJAX請(qǐng)求:

        首頁(yè)安裝并引入axios

        npm install axios -S

        或者網(wǎng)上直接下載axios.min.js文件通過(guò)script src的方式進(jìn)行文件的引入

        <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請(qǐng)求

        1、基本使用格式

        格式1:axios([options]) #這種格式直接將所有數(shù)據(jù)寫(xiě)在options里

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

        2、傳參方式:

        通過(guò)url傳參

        通過(guò)params選項(xiàng)傳參

        代碼片段:

        <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()">注冊(cè)賬號(hào)</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('賬號(hào)或密碼不能為空');         } 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('登錄失敗請(qǐng)檢查用戶名和密碼是否正確');             }           }).catch(error => {             alert('賬號(hào)或密碼錯(cuò)誤');             // console.log(error);           });          }        }     }   } </script>

        *post請(qǐng)求 (push,delete的非get方式的請(qǐng)求都一樣)

        格式:axios.post(url,data,[options]) 或者 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('注冊(cè)信息不能空');           } 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('注冊(cè)成功去登錄');                  _this.$router.push('/');               }else{                 alert('注冊(cè)失敗請(qǐng)檢查注冊(cè)信息是否正確');               }             }).catch(error => {               alert('注冊(cè)信息有誤');               // console.log(error);             });            }         }     }   } </script>

        index.js全局守衛(wèi)

        router.beforeEach((to,form,next) =>{       //如果進(jìn)入到的路由是登錄頁(yè)或者注冊(cè)頁(yè)面,則正常展示       if (to.path === '/login') {           next();         } else {           let token = window.sessionStorage.getItem('token');           // console.log(token)           if (token === null || token === '') {             next('/login');             // alert("還沒(méi)有登錄,請(qǐng)先登錄!");           } else {             next();           }         }       // console.log(to)   })

        贊(0)
        分享到: 更多 (0)
        網(wǎng)站地圖   滬ICP備18035694號(hào)-2    滬公網(wǎng)安備31011702889846號(hào)
        主站蜘蛛池模板: 日本VA欧美VA欧美VA精品| 2022免费国产精品福利在线| 无码少妇精品一区二区免费动态| 柠檬福利精品视频导航| 亚洲国产一二三精品无码| 国产欧美日韩精品专区| 国内精品久久久久| 久久精品亚洲精品国产色婷| 欧美日韩专区麻豆精品在线| 国产成人精品福利网站在线观看| 99精品在线观看| 久久香蕉国产线看观看精品yw| 久久人搡人人玩人妻精品首页| wwwvr高清亚洲精品二区| 99re国产精品视频首页| 国产午夜无码精品免费看 | 国产综合免费精品久久久| 国产一精品一av一免费爽爽| 麻豆国产在线精品国偷产拍| 欲帝精品福利视频导航| 日韩精品无码永久免费网站| 久久99国产精品成人欧美| 国产精品.XX视频.XXTV| 四虎精品影院4hutv四虎| 精品久久一区二区| 国产精品国产三级国产专播| 国产精品视频第一区二区三区| 日本内射精品一区二区视频 | 精品久久人人做人人爽综合| MM1313亚洲精品无码| 亚洲国产精品婷婷久久| 国产精品三级在线| 国产精品久久久久久一区二区三区| 97久久精品人妻人人搡人人玩 | 四虎永久在线精品884aa下载| 日韩一级精品视频在线观看| 亚洲精品无码不卡| 99久久婷婷国产综合精品草原 | 91精品国产综合久久香蕉 | 国产精品视频全国免费观看| 国产精品无码一区二区在线观一|