如何编写mock接口

开启mock

修改环境变量文件(.env.development .env.production .env.test)中VITE_USE_MOCK=true

以系统mock示例账户管理为例说明

定义mock数据

在mock/demo/system.ts 文件中定义如下代码

//模拟接口数据
const accountList = (() => {
    const result: any[] = [];
    for (let index = 0; index < 20; index++) {
        result.push({
            id: `${index}`,
            account: '@first',
            email: '@email',
            nickname: '@cname()',
            role: '@first',
            createTime: '@datetime',
            remark: '@cword(10,20)',
            'status|1': ['0', '1'],
        });
    }
    return result;
})();

mock 的值可以直接使用mockjs的语法。

//导出接口定义
export default [
  {
    url: `${baseUrl}/system/getAccountList`,
    timeout: 100,
    method: 'get',
    response: ({ query }) => {
      const { page = 1, pageSize = 20 } = query;
      return resultPageSuccess(page, pageSize, accountList);
    },
  }
]

定义mock地址

在src/api/demo/system.ts 文件中定义接口访问地址如下所示

注：接口地址必须以mock开头(目的是和正式接口进行区分,如果mock地址和正式地址接口名称不相同也可以不用加mock,mock标识符的定义在baseUrl中)

enum Api {
    AccountList = '/mock/system/getAccountList',
    ....
}

export const getAccountList = (params: AccountParams) =>
    defHttp.get<AccountListGetResultModel>({url: Api.AccountList, params});

使用mock接口

系统提供内置示例,路径如下 src/views/demo/system/account/index.vue

baseUrl说明,为mock请求的统一父路径,在mock/_util.ts文件中定义，本例示例值为/jeecgboot/mock