專案正常跑起來後,現在就開始與後台聯調介面的配置問題,也就是資料傳輸需要的介面配置。vue本身是不支援ajax介面請求的,所以我們需要安裝乙個介面請求npm包。開始新手上手建議使用superagent這個工具,具體介紹請看文件,以前的vue專案通常是用vue-resource,但是vue-resource文件不再跟新,也就是說vue-resource api的封裝方法已經不再對新的框架支援,所以不建議再使用,目前比較流行的axios這個工具,本身axios已經做好了優化和封裝,但是對應不同的專案,還是需要做一些修改,以便相容不同專案需求,以下是大部分專案需要的封裝格式
首先安裝axios工具,執行命令:npm install axios 或者使用**映象 cnpm install axios
在已經搭好的專案檔案中新建乙個api檔案,最好是放在src資料夾或者config資料夾下,配置內容如下
// 配置api介面位址
var root = process.env.api_root;
// 在root(根目錄路徑中後面的等號是你在dev.env.js和prod.env.js檔案中所連線的後台介面,
如api_root: '""',)
// 引用axios
import axios from 'axios';
var axios = require('axios')
// 自定義判斷元素型別js
function totype (obj) ).tostring.call(obj).match(/\s([a-za-z]+)/)[1].tolowercase()
}// 引數過濾函式
function filternull (o)
if (totype(o[key]) === 'string') else if (totype(o[key]) === 'object') else if (totype(o[key]) === 'array')
} return o}/*
介面處理函式
這個函式每個專案都是不一樣的,我現在調整的是適用於
https://* 的介面,如果是其他介面
主要是,不同的介面的成功標識和失敗提示是不一致的。
另外,不同的專案的處理方法也是不一致的,這裡出錯就是簡單的alert
*/function apiaxios (method, url, params, success, failure)
axios()
.then(function (res)
} else else }})
.catch(function (err)
})}// 返回在vue模板中的呼叫介面
export default ,
post: function (url, params, success, failure) ,
put: function (url, params, success, failure) ,
delete: function (url, params, success, failure)
}api檔案配置好以後,在main.js檔案引入api.js檔案,在配置好的原始檔案中新增
// 引用api檔案
import api from './api/index.js'
// 將api方法繫結到全域性
vue.prototype.$api = api
形如:import vue from 'vue'
import router from './router'
// 引用api檔案
import api from './api/index.js'
// 將api方法繫結到全域性
vue.prototype.$api = api
vue.config.productiontip = false
/* eslint-disable no-new */
new vue()
over,thanks Vue2 配置跨域
vue.config.js 配置說明 官方vue.config.js 參考文件 這裡只列一部分,具體配置參考文件 module.exports 問你是否使用eslint lintons e true 如果你想要在生產構建時禁用 eslint loader,你可以用如下配置 lintons e pro...
vue2專案使用axios傳送請求
前言 在vue1.0的時候有乙個官方推薦的 ajax 外掛程式 vue resource,但是自從 vue 更新到 2.0 之後,官方就不再更新 vue resource。目前主流的 vue 專案,都選擇 axios 來完成 ajax 請求,下面來具體介紹一下axios的使用。專案中安裝axios ...
vue2新人入門
預設對webpack,sass,npm有一定的了解。一些vue指令不會說,反正官方文件有,我也懶得抄。一 超級基礎部分 1.全域性安裝 npm install globall vue cli 已全域性安裝了的不必安裝 2.建立乙個基於webpack的模板專案 vue init webpack 你的專...