欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

詳解Vuejs2.0之異步跨域請求

 更新時間:2017年04月20日 09:20:57   作者:留芳LiuFang  
這篇文章主要介紹了詳解Vuejs2.0之異步跨域請求,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧

Vuejs由1.0更新到了2.0版本。HTTP請求官方也從推薦使用Vue-Resoure變?yōu)榱薬xios。接下來我們來簡單地用axios進行一下異步請求。(閱讀本文作者默認讀者具有使用npm命令的能力,以及具備ES6的能力,以及等等。。。)

首先我們來安裝Vue-Cli開發(fā)模板(這個模板可以快速生成vuejs的運行配置環(huán)境,可以使新手快速免除配置搭建出運行界面),這里我使用cnpm命令,請自行百度配置。

打開命令窗口:

cnpm install -g vue-cli

等待片刻,即可安裝完畢。

然后新建一個Vuejs項目

vue init webpack axiosproject

切換到項目目錄,執(zhí)行命令:

cnpm install axios --save --dev

最后執(zhí)行命令安裝項目所需依賴:

cnpm install

稍等片刻,即可完成?,F(xiàn)在我們來跑一下用Vue-Cli搭建出來的項目,執(zhí)行命令:

cnpm run dev

自動瀏覽器自動彈出這個界面就說明上面的步驟我們成功實現(xiàn)了。

接下來我才來真正的開始用編輯器來使用axios。打開VS Code(編輯器請自行用自己喜歡的,本人軟粉,所以首選VS Code),我們來改造一下main.js入口文件

import Vue from 'vue'
import App from './App'
import axios from 'axios'
Vue.prototype.$http = axios;
/* eslint-disable no-new */
new Vue({
 el: '#app',
 template: '<App/>',
 components: { App }
})

我們引用了axios,再將axios這個對象clone到Vue的$http這個屬性上,以后我們就可以在其他組件里使用axios來進行 異步請求了。不多說了,我們最終的結(jié)果就是將請求的數(shù)據(jù)打印到瀏覽器控制臺就算成功了。我使用的接口是本地模擬的,不過區(qū)別不大。這里特別說明一下關(guān)于跨域,跨域需要配置返回的請求頭,在asp.core做如下處理,其他后端配置可以參照;

這是Get接口返回在瀏覽器返回結(jié)果:

好,接下來我們在Hello.vue這個組件里寫一些腳本

<script>
export default {
 name: 'hello',
 data () {
 return {
  msg: 'Welcome to Your Vue.js App'
 }
 },
 created:function(){
 this.HelloAxios();
 },
 methods:{
 HelloAxios(){
  this.$http.get('http://localhost:54903/api/values').then(m=>console.log(m.data));
 }
 }
}
</script>

至此我們完成了Get請求,接下來,我們完成Post請求

<script>
export default {
 name: 'hello',
 data () {
 return {
  msg: 'Welcome to Your Vue.js App'
 }
 },
 created:function(){
 this.HelloAxios();
 this.HelloAxiosPost('HelloAxiosPost');
 },
 methods:{
 HelloAxios(){
  this.$http.get('http://localhost:54903/api/values').then(m=>console.log(m.data));
 },
 HelloAxiosPost(val){
  let str = 'value='+val
  this.$http.post('http://localhost:54903/api/values',str).then(m=>console.log(m.data));
 }
 }
}
</script>

結(jié)果如圖,我們傳的值'HelloAxiosPost'也打印出來了。有人可能會問

 

這里問什么要這么寫,官方文檔是這么寫的

親測這樣寫不行。有興趣的朋友可以自行測試。那我們再來說說為何是那個字符串

查看chorme F12查看一下網(wǎng)絡(luò)請求,發(fā)現(xiàn)我們請求的值就是Form Data。這樣我們就可以拼接參數(shù)請求了,多參數(shù)格式為param1=value1&param2=value2。

好了,至此本文結(jié)束了,希望對大家的學(xué)習有所幫助,也希望大家多多支持腳本之家。

相關(guān)文章

  • vue 本地環(huán)境判斷方式

    vue 本地環(huán)境判斷方式

    這篇文章主要介紹了vue 本地環(huán)境判斷方式,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教
    2022-04-04
  • vue常用知識點整理

    vue常用知識點整理

    Vue是一套用于構(gòu)建用戶界面的漸進式JavaScript框架。這篇文章整理了vue中的常用知識點,對大家的學(xué)習或者工作具有一定的參考學(xué)習價值,需要的朋友們下面隨著小編來一起學(xué)習學(xué)習吧
    2022-06-06
  • vue-cli 項目打包完成后運行文件路徑報錯問題

    vue-cli 項目打包完成后運行文件路徑報錯問題

    這篇文章主要介紹了vue-cli 項目打包完成后運行文件路徑報錯問題,文中通過示例代碼介紹的非常詳細,對大家的學(xué)習或者工作具有一定的參考學(xué)習價值,需要的朋友們下面隨著小編來一起學(xué)習學(xué)習吧
    2019-07-07
  • 學(xué)習Vue框架中必掌握的重點知識

    學(xué)習Vue框架中必掌握的重點知識

    這篇文章主要介紹了學(xué)習Vue中必掌握的重點知識,想了解vue的同學(xué)可以參考下
    2021-04-04
  • Vue中使用Element UI的Table組件實現(xiàn)嵌套表格功能

    Vue中使用Element UI的Table組件實現(xiàn)嵌套表格功能

    這篇文章主要介紹了Vue中使用Element UI的Table組件實現(xiàn)嵌套表格功能,演示如何在Vue中使用Element UI的Table組件實現(xiàn)嵌套表格,本文通過實例代碼給大家介紹的非常詳細,對大家的學(xué)習或工作具有一定的參考借鑒價值,需要的朋友參考下吧
    2024-01-01
  • element-ui循環(huán)顯示radio控件信息的方法

    element-ui循環(huán)顯示radio控件信息的方法

    今天小編就為大家分享一篇element-ui循環(huán)顯示radio控件信息的方法,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧
    2018-08-08
  • Vue路由Hash模式分析

    Vue路由Hash模式分析

    Vue-router是Vue的核心組件,主要是作為Vue的路由管理器,Vue-router默認hash模式,本文講給大家詳細分析Vue路由Hash模式,文中有相關(guān)的代碼示例供大家參考,感興趣的同學(xué)可以借鑒一下
    2023-06-06
  • vue.config.js使用代理配置真實請求url方式

    vue.config.js使用代理配置真實請求url方式

    這篇文章主要介紹了vue.config.js使用代理配置真實請求url方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
    2023-10-10
  • vue關(guān)于頁面刷新的幾個方式解讀

    vue關(guān)于頁面刷新的幾個方式解讀

    這篇文章主要介紹了vue關(guān)于頁面刷新的幾個方式,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教
    2023-05-05
  • vue 使用rules對表單字段進行校驗的步驟

    vue 使用rules對表單字段進行校驗的步驟

    這篇文章主要介紹了vue 使用rules對表單字段進行校驗的步驟,幫助大家更好的理解和使用vue,感興趣的朋友可以了解下
    2020-12-12

最新評論