vue如何實(shí)現(xiàn)接口統(tǒng)一管理
更新時(shí)間：2022年09月21日 14:37:48 作者：酷jjs
這篇文章主要介紹了vue如何實(shí)現(xiàn)接口統(tǒng)一管理，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
vue接口統(tǒng)一管理
1.在src文件夾下面新建api文件夾，新建api.js
// let apiUrl = 'http://192.168.8.134:8081';
let apiUrl = '/apiapi';
let API={
api:{
//應(yīng)用表
applist:apiUrl+'/app/list', //查詢應(yīng)用列表
appadd:apiUrl+'/app/add', //新增應(yīng)用列表
appdelete:apiUrl+'/app/delete', //刪除應(yīng)用列表
appupdate:apiUrl+'/add/update', //修改應(yīng)用列表
},
}
export default {
API: API,
}2.在main.js引用
import api from './api/api' Vue.prototype.API1url=api;
3.在vue中使用
vue中api接口管理總結(jié)
默認(rèn)vue項(xiàng)目中已經(jīng)使用vue-cli生成，安裝axios，基于element-ui開發(fā)，axiosconfig目錄和api目錄是同級(jí)，主要記錄配置的相關(guān)。
1. 在axiosconfig目錄下的axiosConfig.js
import Vue from 'vue'
import axios from 'axios'
import qs from 'qs'
import { Message, Loading } from 'element-ui'
// 響應(yīng)時(shí)間
axios.defaults.timeout = 5 * 1000
// 配置cookie
// axios.defaults.withCredentials = true
// 配置請(qǐng)求頭
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded;charset=UTF-8'
// 靜態(tài)資源
Vue.prototype.$static = ''
?
// 配置接口地址
axios.defaults.baseURL = ''
var loadingInstance
// POST傳參序列化(添加請(qǐng)求攔截器)
axios.interceptors.request.use(
?config => {
? loadingInstance = Loading.service({
? ?lock: true,
? ?text: '數(shù)據(jù)加載中，請(qǐng)稍后...',
? ?spinner: 'el-icon-loading',
? ?background: 'rgba(0, 0, 0, 0.7)'
? })
? if (config.method === 'post') {
? ?config.data = qs.stringify(config.data)
? }
? return config
?},
?err => {
? loadingInstance.close()
? Message.error('請(qǐng)求錯(cuò)誤')
? return Promise.reject(err)
?}
)
// 返回狀態(tài)判斷(添加響應(yīng)攔截器)
axios.interceptors.response.use(
?res => {
? if (res.data.code === 200) {
? ?loadingInstance.close()
? ?return res
? } else {
? ?loadingInstance.close()
? ?Message.error(res.data.msg)
? }
?},
?err => {
? loadingInstance.close()
? Message.error('請(qǐng)求失敗，請(qǐng)稍后再試')
? return Promise.reject(err)
?}
)
// 發(fā)送請(qǐng)求
export function post (url, params) {
?return new Promise((resolve, reject) => {
? axios
? ?.post(url, params)
? ?.then(
? ? res => {
? ? ?resolve(res.data)
? ? },
? ? err => {
? ? ?reject(err.data)
? ? }
? ?)
? ?.catch(err => {
? ? reject(err.data)
? ?})
?})
}
export function get (url, params) {
?return new Promise((resolve, reject) => {
? axios
? ?.get(url, {
? ? params: params
? ?})
? ?.then(res => {
? ? resolve(res.data)
? ?})
? ?.catch(err => {
? ? reject(err.data)
? ?})
?})
}2. 在api目錄下的index.js,api1.js,api2.js
api1.js
import { post } from '../axiosconfig/'
export default {
? login(params) {
? ? return post('/users/api/login', params)
? }
}
api2.js
import { post } from '../axiosconfig/'
export default {
? regist(params) {
? ? return post('/users/api/regist', params)
? }
}
index.js
import user from './api1.js'
import active from './api2.js'
export default {
?api1,
?api2
}3. main.js 配置
import api from './api/' Vue.prototype.$api = api
4. 在組件中使用
登錄組件中
doLongin() {
?let params={}
?this.$api.api1.login(params).then(res => {
? console.log(res)
?})
}注冊(cè)組件中
doRegist() {
?let params={}
?this.$api.api2.regist(params).then(res => {
? console.log(res)
?})
}以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
使用md5在vue中的axios請(qǐng)求時(shí)加密API問題
這篇文章主要介紹了使用md5在vue中的axios請(qǐng)求時(shí)加密API問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-01-01
這篇文章給大家詳細(xì)介紹了Vue強(qiáng)制組件重新渲染的正確方法,非常的實(shí)用,有需要的小伙伴可以參考下2020-02-02
Editor.js是一個(gè)用于構(gòu)建具有完全可定制化塊結(jié)構(gòu)的現(xiàn)代編輯器的開源庫,它提供了一個(gè)簡潔、可擴(kuò)展和易于使用的接口,使開發(fā)人員能夠創(chuàng)建擁有豐富內(nèi)容和互動(dòng)性的編輯器,這篇文章主要給大家介紹了關(guān)于vue3使用富文本編輯器Editor.js的簡單方法,需要的朋友可以參考下2024-04-04
下面小編就為大家分享一篇iview中Select 選擇器多選校驗(yàn)方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-03-03
最近工作上經(jīng)常操作數(shù)組數(shù)據(jù),并且要求實(shí)時(shí)更新視圖數(shù)據(jù),這個(gè)時(shí)候首先想到的是?vue.set(),下面這篇文章主要給大家介紹了關(guān)于vue中this.$set()的基本用法實(shí)例,需要的朋友可以參考下2023-01-01
深入了解vue中一鍵復(fù)制功能的實(shí)現(xiàn)
在現(xiàn)代的Web應(yīng)用中,用戶體驗(yàn)至關(guān)重要,而提供簡單易用的復(fù)制功能是改善用戶體驗(yàn)的一項(xiàng)關(guān)鍵功能,本文將為大家詳細(xì)介紹Vue實(shí)現(xiàn)一鍵復(fù)制功能的具體方法,需要的可以參考下2023-11-11
axios進(jìn)階實(shí)踐之利用最優(yōu)雅的方式寫ajax請(qǐng)求
之前給大家介紹了jQuery利用最優(yōu)雅的方式寫ajax請(qǐng)求的相關(guān)內(nèi)容，這篇文章主要給大家介紹了關(guān)于axios進(jìn)階實(shí)踐之利用最優(yōu)雅的方式寫ajax請(qǐng)求的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來一起看看吧。2017-12-12
這篇文章主要介紹了vue數(shù)組雙向綁定問題及$set用法說明，具有很好的參考價(jià)值，希望大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-09-09
這篇文章主要為大家詳細(xì)介紹了基于vue.js實(shí)現(xiàn)購物車，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-01-01
淺談在vue-cli3項(xiàng)目中解決動(dòng)態(tài)引入圖片img404的問題
這篇文章主要介紹了淺談在vue-cli3項(xiàng)目中解決動(dòng)態(tài)引入圖片img404的問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-08-08