vue如何利用axios調(diào)用后臺(tái)api接口
vue用axios調(diào)用后臺(tái)api接口
全代碼svn地址 （用戶名：liu，密碼;123）
通常我們的vue項(xiàng)目是前后分離的，vue前端通過(guò)后臺(tái)api提供的接口(url)操作數(shù)據(jù)庫(kù)，這里我們通過(guò)axios來(lái)實(shí)現(xiàn)。
可以使用我的在線API的URL進(jìn)行測(cè)試
和使用swagger構(gòu)造的API描述文檔（81端口的后臺(tái)已經(jīng)設(shè)置了跨域；82端口的后臺(tái)沒(méi)有設(shè)置跨域；）
還有在線測(cè)試的系統(tǒng)（用戶名：liu，密碼：12345），有點(diǎn)慢（現(xiàn)在升級(jí)為2兆帶寬，速度還是可以的了）
我們后臺(tái)有這樣一個(gè)接口：http://localhost:8081/api/projectInfo/GetAll（如果使還沒(méi)有后臺(tái)接口，可以先使用http://112.125.90.247:81/api/Data/GetAll這個(gè)地址），它的作用是獲取projectInfo表的所有數(shù)據(jù)。
在地址欄輸入上述地址，看一下結(jié)果：
很明顯，只要我們vue前臺(tái)訪問(wèn)這個(gè)地址，就可以拿到這些數(shù)據(jù)了。
下面我們來(lái)一步步做：
1.安裝axios
和安其它包一樣：
npm install axios
2.新建接口文件:
在src文件夾中新建api文件夾，在api文件夾中新建api.js文件（在里面將后臺(tái)的接口地址稍微修飾，變成前臺(tái)可以調(diào)用的方法）：
// 引入axios import axios from 'axios' // 請(qǐng)求延時(shí)（毫秒數(shù)，如果請(qǐng)求話費(fèi)超過(guò)了'timeout'的時(shí)間，請(qǐng)求將被中斷） axios.defaults.timeout = 100000
3.寫(xiě)方法
我們寫(xiě)一個(gè)getAllData 方法
這里的params 用來(lái)傳參，雖然這里還沒(méi)用到
export const getAllData = params => {
return axios.get(`http://localhost:8081/api/projectInfo/GetAll`,{ params: params });
};4.調(diào)用方法
比如我們要在xxx.vue文件里使用這個(gè)getAllData 方法：
①先引入方法：
import { getAllData } from '../api/api'②然后就可以使用getAllData 方法了：
getAllData().then((res) => {
console.log(res)
})5.運(yùn)行看一下是否獲取到數(shù)據(jù)
結(jié)果一運(yùn)行就報(bào)錯(cuò)了。
原來(lái)是跨域的錯(cuò)誤。
6.跨域修改
首先我們把在api.js寫(xiě)的方法改一下，改成：
export const getAllData = params => {
return axios.get(`api/projectInfo/GetAll`,{ params: params });
};
然后為url加一個(gè)基礎(chǔ)前綴：
axios.defaults.baseURL="/api"
之后，做代理配置：
proxyTable: {
// 配置多個(gè)代理
"/api": {
target: "http://localhost:8081",
secure:true,
changeOrigin: true,
pathRewrite: {
// 路徑重寫(xiě)，
"^/api": "" // 替換target中的請(qǐng)求地址
}
},
},
- 如果你想進(jìn)行測(cè)試而暫時(shí)不想自己創(chuàng)建后臺(tái)，想用上面的在線API URL時(shí)，只需要將這里的
target: "http://localhost:8081",
- 改為：
target: "http://112.125.90.247:81",
- 或
target: "http://112.125.90.247:82",
81是后臺(tái)也進(jìn)行過(guò)跨域配置的接口，82是后臺(tái)未進(jìn)行過(guò)跨域配置的接口
現(xiàn)在來(lái)說(shuō)一下上述修改起到了什么作用：
我們get.axios里的初始url為api/projectInfo/GetAll，經(jīng)過(guò)axios.defaults.baseURL="/api"，要訪問(wèn)的url變?yōu)?code>api/api/projectInfo/GetAll。
代理配置中的
"/api": {
target: "http://localhost:8081",
表示，當(dāng)碰到以/api為前綴的地址時(shí)，將/api替換為http://localhost:8081，所以我們現(xiàn)在要訪問(wèn)的地址就是http://localhost:8081/api/projectInfo/GetAll
上述跨域修改是在開(kāi)發(fā)環(huán)境中使用，如果是生產(chǎn)環(huán)境中則需另做跨域修改，比如使用nginx發(fā)布，則需添加配置
（和上面的代理配置是一樣的效果）
location ~/api {
#rewrite ^/api/(.*)$ /$1 break;
proxy_pass http://127.0.0.1:8081; #接口地址
}
7.再運(yùn)行，發(fā)現(xiàn)有結(jié)果了
返回的格式不用去管，這是后臺(tái)配置的，我們只需要看到response里有9011條數(shù)據(jù)，說(shuō)明獲取數(shù)據(jù)成功了。
8.新增、編輯、刪除的寫(xiě)法
對(duì)應(yīng)在線文檔的這三個(gè)方法
/**
* 數(shù)據(jù)管理頁(yè)面新增一條數(shù)據(jù)
* @param {*} params
* qs.stringify()將對(duì)象 序列化成URL的形式，以&進(jìn)行拼接，來(lái)傳遞參數(shù)
* @returns
*/
export const addData = params => {
return axios.post(`${base}/api/Data/post`, qs.stringify(params), {
headers: {
"Content-Type": "application/x-www-form-urlencoded;charset=utf-8"
}
}); // 這里是跨域的寫(xiě)法
};
/**
* 數(shù)據(jù)管理頁(yè)面編輯一條數(shù)據(jù)
* @param {*} params
* @returns
*/
export const editData = params => {
return axios.post(`${base}/api/Data/put`, qs.stringify(params), {
headers: {
"Content-Type": "application/x-www-form-urlencoded;charset=utf-8"
}
}); // 這里是跨域的寫(xiě)法
};
/**
* 數(shù)據(jù)管理頁(yè)面根據(jù)id刪除一條數(shù)據(jù)
* @param {*} id
* @returns
*/
export const DeleteDataById = id => {
return axios.get(`${base}/api/Data/DeleteById/${id}`);
};
其對(duì)應(yīng)的后臺(tái)代碼為：
/// <summary>
/// 新增數(shù)據(jù)
/// </summary>
///<param name="request">一條數(shù)據(jù)</param>
[HttpPost]
public MessageModel<string> Post([FromBody] Data request)
{
var data = new MessageModel<string>();
request.Id = Guid.NewGuid().ToString();
request.CreateTime = DateTime.Now;
//插入數(shù)據(jù)
var id = DbContext.Insertable(request).ExecuteCommand();
//查詢是否添加成功
var success1 = DbContext.Queryable<Data>().Where(it => it.Id == request.Id)
.ToList();
data.success = success1.Count > 0;
if (data.success)
{
data.response = id.ToString();
data.msg = "添加成功";
log4net.ILog log = log4net.LogManager.GetLogger("MyLogger");
log.Info("Data" + "-" + "Add" + "-" + request.Id);
}
return data;
}
/// <summary>
/// 編輯數(shù)據(jù)
/// </summary>
///<param name="request">一條數(shù)據(jù)</param>
[HttpPost]
public MessageModel<string> Put([FromBody] Data request)
{
var data = new MessageModel<string>();
request.UpdateTime = DateTime.Now;
if (request.Id != null)
{
var id = DbContext.Updateable(request).ExecuteCommand();
data.success = (id > 0);
if (data.success)
{
data.msg = "更新成功";
data.response = id.ToString();
log4net.ILog log = log4net.LogManager.GetLogger("MyLogger");
log.Info("Data" + "-" + "Edit" + "-" + request.Id);
}
}
return data;
}
/// <summary>
/// 根據(jù)主鍵Id刪除一條數(shù)據(jù)
/// </summary>
///<param name="Id">編號(hào)</param>
[HttpGet]
public MessageModel<string> DeleteById(string Id = "")
{
var data = new MessageModel<string>();
var id = DbContext.Deleteable<Data>().In(Id).ExecuteCommand();
data.success = (id > 0);
if (data.success)
{
data.msg = "刪除成功";
data.response = id.ToString();
log4net.ILog log = log4net.LogManager.GetLogger("MyLogger");
log.Info("Data" + "-" + "Delete" + "-" + Id);
}
return data;
}
可能會(huì)出現(xiàn)put請(qǐng)求和delete請(qǐng)求不被允許的情況（報(bào)405之類(lèi)的錯(cuò)誤）
一種解決方法是將put請(qǐng)求改成post請(qǐng)求
將delete請(qǐng)求改成get請(qǐng)求（例如上面的編輯和刪除方法）
總結(jié)
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了詳解vue的數(shù)據(jù)binding原理介紹，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-04-04
vue項(xiàng)目的創(chuàng)建的步驟(圖文教程)
本文主要介紹了vue項(xiàng)目的創(chuàng)建的步驟(圖文教程)，文中通過(guò)示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-03-03
插槽就是子組件中的提供給父組件使用的一個(gè)占位符，用<slot></slot> 表示，父組件可以在這個(gè)占位符中填充任何模板代碼，如 HTML、組件等，填充的內(nèi)容會(huì)替換子組件的<slot></slot>標(biāo)簽，這篇文章主要介紹了Vue插槽的理解和使用,需要的朋友可以參考下2023-03-03
使用vue-element-admin框架從后端動(dòng)態(tài)獲取菜單功能的實(shí)現(xiàn)
​ vue-element-admin是一個(gè)純前端的框架，左側(cè)菜單是根據(jù)路由生成的。實(shí)際開(kāi)發(fā)中經(jīng)常需要根據(jù)當(dāng)前登陸人員的信息從后端獲取菜單進(jìn)行展示，本文將詳細(xì)介紹如何實(shí)現(xiàn)該功能2021-04-04
基于vue+elementPlus的動(dòng)態(tài)導(dǎo)航標(biāo)簽欄tabs具體過(guò)程
這篇文章主要給大家介紹了關(guān)于基于vue+elementPlus的動(dòng)態(tài)導(dǎo)航標(biāo)簽欄tabs的相關(guān)資料,本文主要詳述了在系統(tǒng)上添加導(dǎo)航標(biāo)簽欄功能時(shí),首次嘗試的過(guò)程,并且希望能為同行提供一個(gè)小demo,需要的朋友可以參考下2024-10-10
vue項(xiàng)目如何去掉URL中#符號(hào)的方法
在開(kāi)發(fā)過(guò)程中發(fā)現(xiàn)路徑中帶有/#/的標(biāo)示,而且還去不掉,很丑陋,下面這篇文章主要給大家介紹了vue項(xiàng)目如何去掉URL中#符號(hào)的相關(guān)資料,文中通過(guò)實(shí)例代碼的非常詳細(xì),需要的朋友可以參考下2022-07-07
Element?Table行的動(dòng)態(tài)合并及數(shù)據(jù)編輯示例
這篇文章主要為大家介紹了Element?Table行的動(dòng)態(tài)合并及數(shù)據(jù)編輯示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-07-07
今天小編就為大家?guī)?lái)一篇axios取消請(qǐng)求的實(shí)踐記錄分享，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-09-09
Vue.js中,computed屬性根據(jù)依賴進(jìn)行緩存,只有依賴改變時(shí)才重新計(jì)算,這樣有效提高性能,computed屬性是響應(yīng)式的,可以自動(dòng)更新,并且默認(rèn)是只讀的,它與methods的主要區(qū)別在于計(jì)算屬性具有緩存性,而方法每次調(diào)用都會(huì)執(zhí)行,使用computed可以使模板更加簡(jiǎn)潔,提高應(yīng)用性能2024-09-09
這篇文章主要介紹了vue的雙向綁定和依賴收集，主要是通過(guò)Object.defineProperty() 實(shí)現(xiàn)雙向綁定，具體思路代碼大家跟隨小編一起看看吧2018-11-11