Vue項(xiàng)目中接口調(diào)用的詳細(xì)講解
在企業(yè)開發(fā)過程中，往往有著明確的前后端的分工，前端負(fù)責(zé)接收、使用接口，后端負(fù)責(zé)編寫、處理接口。
對于前端如何使用接口，今天在Vue中進(jìn)行講解。
一個項(xiàng)目往往由這幾個部分組成。
其中在src文件夾中，
，有這么些內(nèi)容。
我們常常把接口文件，新建一個文件夾在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)
}
})
}
這個就是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中，每個頁面設(shè)一個文件夾，其中index.vue 內(nèi)容則是本頁面的內(nèi)容
在頁面中，如果我們需要使用某個接口。則需要進(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如何判斷數(shù)組中的對象是否包含某個值，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-08-08
基于vue、react實(shí)現(xiàn)倒計(jì)時效果
這篇文章主要為大家詳細(xì)介紹了基于vue、react實(shí)現(xiàn)倒計(jì)時效果，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-08-08
最近工作中有需要將一些前端頁面(如報(bào)表頁面等)導(dǎo)出為pdf的需求,下面這篇文章主要給大家介紹了關(guān)于vue3 如何將頁面生成 pdf 導(dǎo)出,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-07-07
下面小編就為大家?guī)硪黄獀ue引入jq插件的實(shí)例講解。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-09-09
這篇文章主要介紹了Vue 解決路由過渡動畫抖動問題，本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價值,需要的朋友可以參考下2020-01-01
解決Echarts2豎直datazoom滑動后顯示數(shù)據(jù)不全的問題
這篇文章主要介紹了解決Echarts2豎直datazoom滑動后顯示數(shù)據(jù)不全的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-07-07
Vue提供了一種更通用的方式來觀察和響應(yīng)當(dāng)前活動的實(shí)例上的數(shù)據(jù)變動:偵聽屬性,下面這篇文章主要給大家介紹了關(guān)于Vue3.0多種偵聽方式的相關(guān)資料,需要的朋友可以參考下2021-10-10
這篇文章主要介紹了vue基于element的區(qū)間選擇組件，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-09-09
vue3.x lodash在項(xiàng)目中管理封裝指令的優(yōu)雅使用
這篇文章主要為大家介紹了vue3.x lodash在項(xiàng)目中管理封裝指令的優(yōu)雅使用示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-09-09
router-view組件作為vue最核心的路由管理組件,在項(xiàng)目中作為路由管理經(jīng)常被使用到,本文主要為大家詳細(xì)介紹了router-view具體使用,希望對大家有所幫助2023-12-12