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