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