应用的相关设置可以在【应用设置】模块进行完善和修改,包括基本配置、接口相关设置及环境变量配置。接口相关配置可以配置默认发送格式、API TOKEN 以及适配器等。

基本配置

应用的基本配置支持应用名称、短名字、描述以及 logo 等信息的管理。

image.png

环境变量是方便管理不同环境下应用的一些资源。

接口相关设置

接口相关设置主要是对应用中针对接口有关的功能设置。

image.png

默认发送格式

  • JSON: 发送数据体格式为 application/json
  • Form: 发送数据体格式为 application/x-www-form-urlencoded
  • FormData: 发送数据体格式为 multipart/form-data

当发送内容中有文件时,会自动使用 multipart/form-data 格式

API TOKEN

用来保护开发接口, 设置后爱速搭发出的请求都会带上此 Token 到 Headers 中。

HTTP 签名

选择要使用的 HTTP 签名,目前支持两种。

image.png

全局发送适配器

发送适配器是指在接口请求前,对请求进行一些自定义处理,例如修改发送数据体、添加请求头、等等,而全局适配器将应用到该群组中所有的接口上。

设置后所有的请求都会经过此适配器,接口本身可以单独设置适配器,此适配器会在接口本身发送适配器之前执行。

函数签名:(api) => api, 数据在 api.data 中,修改后返回 api 对象。

  1. // 进行一些操作
  2. let data = api.data;
  3. data.foo = 'bar'; // // 新添加数据
  4. console.log(api); // 可以打日志,打开浏览器开发者工具查看日志
  5. // 将修改后的 api return 出去
  6. return {
  7. ...api,
  8. data: data
  9. }

上例中,我们获取暴露的 api.data 参数,并且为其添加了一个新的字段 foo,并且一起返回出去就可以了,这样我们的请求数据体中就会加上我们这个新的字段。

api 中一般会包含下面几个变量:

  • url:当前接口 Api 地址
  • method:当前请求的方式
  • data:请求的数据体
  • headers:请求的头部信息

操作符为 es6 扩展操作符,js 相关知识请自行学习

全局接收适配器

如果后端返回跟平台要求的数据格式不一致时,可以通过配置自定义 js function 转换。

函数签名:(data, response, api) => data 修改完后返回 data

参数说明:

  • data: 接口返回的数据体
  • response: 接口返回的对象,包含状态值等。
  • api: 接口信息,包含发送地址、方式、数据体。

示例:

例如:我们接口返回的 data 直接是一个数组,而我们的 crud 组件,需要包装一个 items 字段,才可以正常显示数据,那么可以:

  1. // 进行一些操作
  2. const items = payload.data;
  3. console.log(items); // 可以打日志,打开浏览器开发者工具查看日志
  4. // 将修改后的 data return 出去
  5. return {
  6. ...payload,
  7. data: {
  8. items: items
  9. }
  10. }

我们获取 payload.data,并且将该值赋给 items 字段,并且放到要 return 出去的 data 中,payload 其他参数原样返回,这样就可以实现上述效果

设置环境变量

通过 key-value 的形式设置环境变量

开发环境

image.png

其他环境

发布应用时,可以不同环境设置不同的环境变量值,这样发布之后,就可以针对不同环境,使用不同的资源。

image.png

上例中,我们本地使用API_HOST111.111.111.111,我们线上环境使用API_HOST时就是222.222.222.222

使用环境变量

可以在应用中使用环境变量

在页面配置中

在组件搭建页面中,可以通过${xxx}获取当前环境变量,例如:

ab0dc63a5b6b6bb2e42ae013ce0e0bce.png

上图中我们在页面直接显示一段文字,并使用${xxx}获取ENV变量。然后我们发布时,更改这个变量

9a6e53900245c822ff8a3a0131b4ff67.png

上图中我们将正式环境中的ENV变量为正式环境。发布完打开页面我们可以看到文字已经变为"当前环境为【正式环境】"

ed59762b91fa17994d2842c06b72c6cd.png

你几乎可以在任何地方使用${xxx}来获取,你也可以在配置api接口的地方使用环境变量:

294045271c4969cf4f2d042b9a895c89.png

创建数据源中

创建外部数据源也支持填写环境变量,实现不同环境使用不同数据库资源地址的能力。

我们只以数据库地址为例:

首先先添加环境变量DB_HOST

72ee7167d15a459dac595e2e57d83ff6.png

然后在创建数据源的时候,数据库地址填入${DB_HOST

e8986c285060e3276bb901647ce1e3d5.png

这样点击下一步测试联动性的时候会获取111.111.111.111作为数据库地址进行联通

请保证不同资源地址的外部数据库结构保持一致,否则可能会有问题。

主题设置

主题设置主要是对应用主题风格的设置,其中包括基础设置和自定义CSS。

image.png

基础设置

基础设置主要是对基础主题和变量的设置,主题支持云舍和仿 AntD,变量包括颜色、字体、间距、边框、链接、动画、其他变量。

自定义CSS

自定义CSS主要应用于页面元素的样式配置,例如:在这里定义CSS样式的类名,在页面可视化配置中就可以引用这个样式类名。

image.png

image.png

外链 JS/CSS

这个配置主要是为嵌入 Angular 组件提供的外部 JS 和 CSS 链接地址配置,具体可以参考页面设计章节。

image.png