隐藏
换装

Vue / 前端 · 2022年5月10日 0

Vue自动加载文件夹下所有接口

适用于多人开发,自动加载model文件夹下所有模块并自动挂载到Vue实例,无需考虑冲突问题,每个人单独管理自己的接口模块

最近在多人开发的时候经常遇到几个人的代码冲突,谁谁谁新增了一个模块动了公共接口文件类似的问题,查阅了一些网站找了个自动读取文件的方法,做了些调整,上代码

使用方法直接 this.$+模块名+Api.模块下方法 this.$commonApi.login

公共请求文件apiAllModel.js
import Vue from 'vue'
/**
 * 自动引入当前文件夹下所有module 并挂载到Vue实例
 * 使用方法直接 this.$+模块名+Api.模块下方法 this.$commonApi.logi
 * @alias 木头人下士
 * @param {String} modulesFiles 检索的目录
 * @param {Boolean} useSubdirectories 表示是否检索子文件夹
 * @param {regExp} regExp 读取文件的路径
 */
const modulesFiles = require.context('./model', true, /.js$/)
const modules = modulesFiles.keys().reduce((modules, modulePath) => {
	//截取到模块名
	const moduleName = modulePath.substring(2, modulePath.length - 3)
	//拿到文件暴露的口
	const value = modulesFiles(modulePath)
	//获取每个文件下方法 此处暂时不需要
	// modules[moduleName] = value.default
	//挂载
	Vue.prototype[`$${moduleName}Api`] = value;
	return modules
}, {})
模块common.js
/**
 * @alias 木头人下士
 * @time 2020-04-21
 * @description 公共请求文件
 */
import request from '@/config/axios'
//登录接口
export function login(data){
	return request({
		url: '/meeting-platform-admin/admin/sys/user/login',
		method: 'get',
		params: data
	})
}

//退出登录
export function logout(data){
	return request({
		url: '/meeting-platform-admin/admin/sys/user/logout',
		method: 'post',
		data
	})
}

不要忘记暴露出axios!!!!!!

axios