Vue

Vue - Api接口模块化

Posted on 10-31 2019,2 min read

文件介绍

了解并新建以下目录文件

@apis api管理文件夹

@apis/index.js api接口的通一出口

@apis/base.js 接口域名管理

@apis/xxx.js 更多接口模块

@apis/filing.js 示例接口模块 用于定义filing模块接口列表

index

/**
* @author City
* @description api接口的通一出口
*/

//  导出接口
//  归档模块接口
import filing from '@/apis/filing'



//  导出接口
export default{
    filing
}

base

/**
 * @author City
 * @description 接口域名管理
 */


const base = {
    anLink: '/api'
}


 export default base;

filing

/**
* @author City
* @description filing模块接口列表
*/

import base from './base'; // 导入接口域名列表
import axios from '@/utils/http' // 导入http中创建的axios实例
import qs from 'qs' // 根据需求导入qs模块,序列化post数据

const filing = {
    // 归档菜单
    Menu () {
        return axios.get(`${base.anLink}/menu`);
    },
    // 归档列表
    List () {
        return axios.get(`${base.anLink}/list`)
    }
    // 新闻详情,演示    
    // articleDetail (id, params) {        
    //     return axios.get(`${base.sq}/topic/${id}`, {            
    //         params: params        
    //     });    
    // },
    // // post提交    
    // login (params) {        
    //     return axios.post(`${base.sq}/accesstoken`, qs.stringify(params));    
    // }

}


export default filing;

下一篇: Vue - 封装axios