Vue—— Vue3 API 接口管理

26. API 接口管理

背景问题：
需要合理组织 API 接口。

方案思考：
按模块组织 API 接口。

具体实现：
API 接口分层管理：

// api/index.jsimportuserApifrom'./user'importmenuApifrom'./menu'importroleApifrom'./role'importdictApifrom'./dict'export{userApi,menuApi,roleApi,dictApi}

用户模块 API：

// api/user.jsimportrequestfrom'@/utils/request'constuserApi={// 获取用户列表getUserList:(params)=>request.get('/system/user/list',{params}),// 获取用户详情getUserDetail:(id)=>request.get(`/system/user/${id}`),// 创建用户createUser:(data)=>request.post('/system/user',data),// 更新用户updateUser:(data)=>request.put('/system/user',data),// 删除用户deleteUser:(id)=>request.delete(`/system/user/${id}`),// 批量删除用户batchDeleteUser:(ids)=>request.delete('/system/user',{data:{ids}}),// 导出用户exportUser:(params)=>request({url:'/system/user/export',method:'get',params,responseType:'blob'}),// 导入用户importUser:(data)=>request({url:'/system/user/importData',method:'post',data,headers:{'Content-Type':'multipart/form-data'}}),// 重置用户密码resetUserPwd:(id,password)=>request.put('/system/user/resetPwd',{userId:id,password}),// 获取部门树getDeptTree:()=>request.get('/system/dept/treeselect')}exportdefaultuserApi

菜单模块 API：

// api/menu.jsimportrequestfrom'@/utils/request'constmenuApi={// 获取菜单列表getMenuList:(params)=>request.get('/system/menu/list',{params}),// 获取菜单详情getMenuDetail:(id)=>request.get(`/system/menu/${id}`),// 创建菜单createMenu:(data)=>request.post('/system/menu',data),// 更新菜单updateMenu:(data)=>request.put('/system/menu',data),// 删除菜单deleteMenu:(id)=>request.delete(`/system/menu/${id}`),// 获取路由信息getRouters:()=>request.get('/getRouters'),// 获取菜单树getMenuTree:()=>request.get('/system/menu/treeselect')}exportdefaultmenuApi

API 工具类：

// utils/api-helper.jsimport{ElMessage}from'element-plus'// API 响应处理工具类exportclassApiHelper{// 处理成功响应statichandleSuccess(response,successMsg='操作成功'){if(response.code===200){ElMessage.success(successMsg)returnresponse.data}thrownewError(response.message||'操作失败')}// 处理文件下载statichandleDownload(response,filename){constblob=newBlob([response],{type:'application/octet-stream'})consturl=window.URL.createObjectURL(blob)constlink=document.createElement('a')link.href=url link.download=filename link.click()window.URL.revokeObjectURL(url)}// 处理上传进度statichandleUploadProgress(progressEvent,onProgress){constprogress=Math.round((progressEvent.loaded*100)/progressEvent.total)if(onProgress){onProgress(progress)}}// 批量操作staticasyncbatchOperation(apiFunc,items,options={}){const{successCallback,errorCallback,finallyCallback,concurrency=5// 并发数}=optionsconstresults=[]constchunks=this.createChunks(items,concurrency)for(constchunkofchunks){constpromises=chunk.map(item=>apiFunc(item).catch(error=>({error,item})))constchunkResults=awaitPromise.all(promises)results.push(...chunkResults)if(successCallback){successCallback(chunkResults)}}if(finallyCallback){finallyCallback(results)}returnresults}// 创建分片staticcreateChunks(array,size){constchunks=[]for(leti=0;i<array.length;i+=size){chunks.push(array.slice(i,i+size))}returnchunks}}