# api

在上一章节我们用到了$api方法，这一章我们来讲解如何使用它。

# 模块配置

在sys/hos-app-base/axios目录下有个modulesConfig文件，该文件用于设置模块名，在上面接口配置我们提过，要在调用接口的地方添加模块前缀，该文件就是用于配置模块前缀。以base为例，base为前缀代表了sys/hos-app-base这个路径。

# 接口配置

接口配置文件保存于项目的相关模块下的api文件中，以员工管理模块为例，后端提供的模块名为 staff，因此我们的文件命名为 staff.js。

文件由$config和其他接口定义构成。

# `$config`

$config可配置该模块使用的后端服务地址, 使用场景: 一个前端项目调用多个后端服务.

不同模块接口配置可请求不同的后端服务,可在配置文件将所需的后端服务定义上,在接口配置的js里的$config里配置此模块需要调用的后端服务地址. 例如:

// staff.js
export const $config = {
	baseURL: process.env.VUE_APP_BASE_URL_STAFF, //  存放于环境变量文件
}

在接口配置文件里如若不定义$config,默认使用环境配置文件里定义的VUE_APP_BASE_URL后端服务地址

# 接口定义

url: 请求地址
method: 请求方式多为get/post
params: 适用于GET/POST请求,参数添加到url的请求字符串中, 后端直接使用参数名接收或者使用@RequestParam修饰接收入参
data: 适用于POST请求,参数在请求体中,后端使用@RequestBody修饰接收入参

# GET 请求示例


// 前端:
export const selectPage = (param) =>{
    return {
        url: '/user/staff/selectPage',
        method: 'get',
        params: param
    }
}

// 后端:
@ApiOperation("根据实体属性条件分页查询")
@GetMapping("/selectPage")
public BaseResponse<IPage<Staff>> selectPage(Staff staff) {
    IPage<T> pageData = staffService.selectPage(new Page((long)staff.getCurrent(), (long)staff.getSize()), staff);
    return BaseResponse.success(pageData);
}

或者

@ApiOperation("根据实体属性条件分页查询")
@GetMapping("/selectPage")
public BaseResponse<IPage<Staff>> selectPage(@RequestParam Staff staff) {
    IPage<T> pageData = staffService.selectPage(new Page((long)staff.getCurrent(), (long)staff.getSize()), staff);
    return BaseResponse.success(pageData);
}

# POST 请求示例:

// 1. 所有参数都在请求体中
// 前端:
export const insert = (param) => {
    return {
        url: '/user/staff/insert',
        method: 'post',
        data: param
    }
};

// 后端:
@ApiOperation("保存实体")
@PostMapping("/insert")
public; BaseResponse; insert(@RequestBody; Staff; s;) {
    staffService.insert(s);
    return BaseResponse.success();
}

// 2. 一部分参数在请求体中,一部分参数在url上

// 前端:
export const insert = (param) => {
    return {
        url: '/user/staff/insert',
        method: 'post',
        data: param.staff,
        params: {
            'code': param.code
        }
    }
};

// 后端:
@ApiOperation("保存实体")
@PostMapping("/insert")
public; BaseResponse; insert(@RequestBody; Staff; s, String; code;) {
    System.out.println("------入参code = " + code);
    staffService.insert(s);
    return BaseResponse.success();
}

# 调用

首先，$api 方法已经在框架内注册，使用时不需要单独引用。使用过程请看下面的代码：

let params = { ...this.form, ...this.page };
this.$api('base.account.getTreeNodes', params)
	.then((response) => {
		if (response) {
			this.tableData = response.data.records;
			let { total, current, size } = response.data;
			this.page = {
				total,
				current,
				size,
			}
		}
	})
	.catch((err) => {
		console.log('出错了', err)
	})