JSONP(JSON with Padding)是一種跨域請求的解決方案,它利用了瀏覽器允許跨域請求 script 標簽的特性,將數據以回調函數的形式返回并執行。在 Vue 中使用 JSONP 可以通過安裝 jsonp 插件實現:
import Vue from 'vue' import VueJsonp from 'vue-jsonp' Vue.use(VueJsonp)
安裝完插件后,在組件中使用 this.\$jsonp 調用 jsonp 請求:
this.$jsonp('//your_api_url', { params: {}, callbackKey: 'callback', jsonpCallback: 'jsonpCallback' }).then(res =>{ console.log(res) }).catch(err =>{ console.error(err) })
其中,第一個參數是請求的 URL,第二個參數配置包括 params(請求參數)、callbackKey(回調參數名)、jsonpCallback(回調函數名)等。
除了使用 jsonp,Vue 還可以使用 axios 發送 AJAX 請求。axios 是一個基于 Promise 的 HTTP 庫,可以同時支持瀏覽器和 Node.js 環境。在 Vue 中使用 axios,需要先安裝 axios 包:
npm install axios --save
接下來在組件中引入 axios 并發起 AJAX 請求:
import axios from 'axios' axios.get('//your_api_url', { params: {} }).then(res =>{ console.log(res.data) }).catch(err =>{ console.error(err) })
github 是一個代碼托管平臺,可以方便地與他人協作開發項目。使用 Vue 開發項目時可以將代碼托管在 Github 上,并使用 Github Pages 或其他托管服務部署網站。在 Github 上創建一個空的倉庫,然后將本地代碼上傳到倉庫中:
git init git add . git commit -m "initial commit" git remote add origin git@github.com:your_username/your_repository.git git push -u origin master
這樣就將本地代碼推送到了 Github 上。接下來,可以在 Github 上設置 Pages 選項,選擇使用 master 分支的 docs 目錄作為網站根目錄。打開項目的 Github Pages 鏈接即可訪問托管在上面的網站。
上一篇html qq驗證碼代碼
下一篇css 限制表格大小