Vue項(xiàng)目中接口調(diào)用的詳細(xì)講解
在企業(yè)開發(fā)過程中，往往有著明確的前后端的分工，前端負(fù)責(zé)接收、使用接口，后端負(fù)責(zé)編寫、處理接口。
對于前端如何使用接口，今天在Vue中進(jìn)行講解。
一個(gè)項(xiàng)目往往由這幾個(gè)部分組成。
其中在src文件夾中，
，有這么些內(nèi)容。
我們常常把接口文件，新建一個(gè)文件夾在src下，命名為api，api內(nèi)的文件便是接口文件。
通常把后端的接口寫在api文件夾下，自己命名為xxx.js
// 登錄
export function login(data) {
return request({
url: '/api/court/login',
method: 'post',
data
})
}
// 獲取驗(yàn)證碼
export function captchaImage(params) {
return request({
url: '/api/captchaImage',
method: 'get',
params
})
}
對于需要添加信息在頭部的，可以這么寫
// 獲取登錄用戶信息
export function getInfo(params) {
return request({
url: '/api/court/getInfo',
method: 'get',
params,
headers: {
'Authorization': JSON.parse(localStorage.Authorization)
}
})
}
這個(gè)就是request.js 文件的內(nèi)容
import axios from 'axios'
// import { getToken } from '@/utils/auth'
// create an axios instance
const service = axios.create({
// 外網(wǎng)更新
// baseURL: 'http://xxxxx',
baseURL: '/xxxxx',
timeout: 5000 // request timeout
})
export default service
項(xiàng)目的頁面往往寫在views中，每個(gè)頁面設(shè)一個(gè)文件夾，其中index.vue 內(nèi)容則是本頁面的內(nèi)容
在頁面中，如果我們需要使用某個(gè)接口。則需要進(jìn)行引入操作。通過 import {接口名1、接口名2} from ’ api文件地址 ’
import { login,captchaImage,getInfo,logOut,reset } from '@/api/login'
from后所跟的就是api中文件的地址路徑
接口往往是在方法中進(jìn)行調(diào)用，對于不同接口 ，需要的參數(shù)也不一樣，根據(jù)需求，我們傳入對應(yīng)的參數(shù)即可。圖中的 captchaImage、以及l(fā)ogin就是接口信息。
接口的使用格式：
接口名({參數(shù)1:頁面中的參1，參數(shù)2：頁面中的參數(shù)2}).then(res => {
console.log(res)//res就是調(diào)用接口后，后臺返回過來的結(jié)果，一般數(shù)據(jù)儲存在res.data.data中，具體情況而論
})
這樣就是接口調(diào)用的全部過程了。附上控制臺信息圖以及apipost接口圖。
總結(jié)
到此這篇關(guān)于Vue項(xiàng)目中接口調(diào)用的文章就介紹到這了,更多相關(guān)Vue項(xiàng)目接口調(diào)用內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
vue基于Teleport實(shí)現(xiàn)Modal組件
Teleport 提供了一種干凈的方法，允許我們控制在 DOM 中哪個(gè)父節(jié)點(diǎn)下渲染了 HTML，而不必求助于全局狀態(tài)或?qū)⑵洳鸱譃閮蓚€(gè)組件。2021-05-05
vue?parseHTML?函數(shù)源碼解析AST基本形成
這篇文章主要為大家介紹了vue?parseHTML?函數(shù)源碼解析AST基本形成，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-07-07
Vue3實(shí)現(xiàn)登錄表單驗(yàn)證功能
這篇文章主要介紹了Vue3實(shí)現(xiàn)登錄表單驗(yàn)證功能,本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2022-06-06
這篇文章主要介紹了Vue組件解析之如何自定義彈窗組件ByDialog問題,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-01-01
vue基于input實(shí)現(xiàn)密碼的顯示與隱藏功能
這篇文章主要介紹了vue基于input實(shí)現(xiàn)密碼的顯示與隱藏功能,文末給大家介紹了vue?如何實(shí)現(xiàn)切換密碼的顯示與隱藏效果，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，需要的朋友可以參考下2022-01-01
這篇文章主要介紹了詳解Vue This$Store總結(jié)，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-12-12
這篇文章主要介紹了vue實(shí)現(xiàn)lodop打印功能的示例，幫助大家更好的理解和使用vue框架，感興趣的朋友可以了解下2020-11-11
本文詳細(xì)介紹了VueRouter 路由的概念、規(guī)則、基礎(chǔ)等相關(guān)內(nèi)容，文中運(yùn)用大量的圖片進(jìn)行講解，感興趣的小伙伴可以看一看這篇文章2021-08-08
這篇文章主要為大家詳細(xì)介紹了Vue實(shí)現(xiàn)炫酷的代碼瀑布流背景，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-08-08
vue實(shí)現(xiàn)同一個(gè)頁面可以有多個(gè)router-view的方法
今天小編就為大家分享一篇vue實(shí)現(xiàn)同一個(gè)頁面可以有多個(gè)router-view的方法，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09