lecen：一个更好的开源可视化系统搭建项目--执行寄连、数据视图、请求链接--全低代码|所见即所得|利用可视化设计器构建你的应用系统-做一个懂你的人

执行寄连

描述

寄连就是一段js代码。

在做页面的时候，会写一些逻辑处理代码，无论是定义一个函数，循环遍历一个对象，还是发起一个请求，或者做一些初始化操作等。

我们都可以将它们封装成一个一个的处理单元，然后在需要它们的时候进行调用。

我们将一个能够重复使用的代码片段抽离出来，并把它叫做执行寄连，他可以是纯净的函数，也可以是一个复杂的逻辑。

一个页面可以配置很多个寄连，可以在页面整个生命周期内的任意位置和时机进行选择调用，它也能够根据配置自己自动执行。

寄连可以在不同的时间节点执行一些预设的功能，可以把它想象成是一个一个的函数，能够在页面中不同的生命周期来做一些事情。

主要是用来减少系统的业务代码，并达到高复用的目的。

根据页面查询寄连

点击页面右上角的放大镜图标，可以输入页面的id，然后查询出该页面所配置的所有寄连。

新建

点击右上角新增图标，即可打开新增弹窗。

寄连包含寄连编码、寄连策略、用途描述、寄连内容等字段。

寄连编码 这个比较重要，但是非必填。因为寄连可以是自动执行的。

但如果需要手动执行寄连，那么在页面中需要通过 P.runIt('code', 参数1, 参数2, ...) 来调用，这里用到的code就是对应的寄连编码。

填写完基本信息之后，可以切换到寄连内容选项卡，在该编辑器中编写寄连内容。

在这里能够获取到页面所有信息和变量、方法等。它的内容为一个函数，有它自己的this，也能够接收参数，并给予返回值。

比如可以填入如下代码：

function _(hot) {
  return this.R.requestData.songList.filter(item => {
    return item.hot > hot
  })
}

其中参数hot就是调用执行寄连时传递过来的，songList 是请求链接返回的数据，它被挂载到 requestData 对象下面，可以通过 this 获取到请求对象 R，然后拿到它下面的请求返回数据对象 requestData。

操作

包含了可以对该寄连进行的各种操作。

1. 查看

可以查看寄连的详细信息。

2. 编辑

可以编辑基础信息与寄连内容。

3. 复制

可以对该寄连进行复制，以达到快速新建并复用的目的。

4. 删除

删除该寄连，并有删除前的信息确认。

5. 视图

如果有视图绑定了该寄连，那么能查看绑定该寄连的所有视图的列表。

5. 页面

如果有页面添加了该寄连，那么能够反查出所有绑定该寄连的页面的列表。

查询

可以通过寄连编码、用途描述、寄连内容以及ID进行寄连的查询，支持模糊查询。

点击空格即可唤出查询窗口，输入条件后按回车键执行查询。

可以多个条件同时输入，支持清空条件。

寄连执行策略

初始化执行(未设置策略)：获取完页面配置，还未发起任何请求，也未解析视图时，执行该部分代码，可以理解为最先执行的代码。只能获取到页面的初始化配置信息以及一些公共方法属性等，无法获取数据视图及接口返回等的数据。

准备完成(before)：此时请求已经发送出去，视图也已经解析完毕，但是还没有开始渲染，执行这部分代码。相比于初始化获取的变量范围，还多了对数据视图的获取，如果一个数据视图绑定了该寄连，那么此阶段执行的寄连将能够直接访问到所绑定的数据视图的配置数据。

最终完成(after)：此时接口已经返回数据，页面也渲染完成，最终执行该处代码。已经能够获取到最大范围内的所有变量的访问。

手动执行(handle)：当需要执行一个函数或者其他逻辑操作的时候，可以通过code来手动触发它们。

{
  /*
   strategy 取值有 before(准备加载)、after(加载完成)、handle(手动触发)。
   除此之外，未设值或者其他值代表初始化执行
  */
  strategy:'before'
}

寄连的内容，在指定为非 handle 值时，寄连的内容直接就是函数体，也就是我们可以直接书写运行的代码即可。

this.collectionData.dialogVisible = true;
...

当指定为 handle 值时，我们可以把寄连内容设定为一个函数，可以通过 P.runIt('code',参数) 来进行传参，第一个参数为 code，也就是要执行的寄连，从第二个参数开始，都是传递进寄连函数的参数。

function(a, b){
  //处理逻辑
}

寄连代码手动执行的需要写在 function(){} 中，可给 function 添加参数。

寄连中可以访问所有暴露出来的对象：

比如在一个点击事件中可以使用如下方式调用寄连。

this.P.runIt("寄连编码", 参数a, 参数b)

可参考 示例

数据视图

描述

视图主要是用来控制页面中绘制的组件，以及组件的各个属性、方法、事件等，通过编辑视图，可以修改页面的呈现与交互。

由于使用页面设计器可以直接设计页面，配置组件，操作视图更简单，也更为方便直观。

因此不建议在此页面管理视图，最好只做查询功能。

如果想要直接修改视图的源代码，那么可以按照下面的说明来操作。

或者想了解页面配置的运行机制以及源码结构，也可以阅读该章内容进行参考。

操作

1. 查看

可以查看视图的详细信息。

2. 编辑

可以编辑基础信息。

也可以对视图内容进行友好的可视化代码编辑。

3. 复制

可以对该视图进行复制，以达到快速新建并复用的目的。

4. 删除

删除该视图，并有删除前的信息确认。

5. 寄连

可以查看绑定的寄连，数据视图在绑定了执行寄连之后，页面加载的时候，如果该寄连是在 before 阶段执行的，那么在寄连执行的时候可以直接获取到当前视图内容对象。

5. 页面

可以查看所有使用该视图的页面，方便修改视图的的时候知道会受到影响的页面。

查询

可以通过视图编码、用途描述、数据内容以及ID进行查询，支持模糊查询。

点击空格即可唤出查询窗口，输入条件后按回车键执行查询。

可以多个条件同时输入，支持清空条件。

规范

1. 设计原则

我们将页面中的各个区域进行划分，以行为单位，也就是一个页面由多个行组成，所有的页面元素全部都归属于一个对应的行里面。

每个行可以分成多列，每个列中可以继续包含多行和多列，我们将页面中的元素全部都放到对应的列里面，每个元素都对应着我们预置的某个组件，这样就形成了整个页面。

2. 设计理念

通过json的形式对这些行、列、元素进行描述，可以指定属性、事件、方法、权限等等。页面加载时通过一个或多个这样的json就能够知道该页面的结构，从而进行页面的渲染，以及其他行为的处理。

我们将由此设计出来的json称之为数据视图，因为它通过数据的描述，能够决定页面视图的呈现。

行列

存在最外层的数组中对象的个数，即表示该数据视图包含的行数，如：[{}] 表示一行，[{},{}] 表示两行.

每一行可以包含列，列用col表示，对应数组中包含的对象个数，即表示列数，如：

[{
  col: [{
  }]
}]

上面代码表示有一行一列。

每一行是一个对象，对象中可以包含任意属性，通过col来标识包含的列。

每一列也是一个对象，列或者任意组件都具有插槽，通过以 # 开头，来表示这是一个插槽，比如：#default、#header 等等。

其中default插槽可以省略#标识，相当于关键字。

[{
  col: [{
    _span: 12,   //所占列数
    default: []  //表示行内的元素，也可理解为 default 插槽
  },{
    _span: 12,
    default: [{
      col: [{}]
    }]
  }]
}]

表示有一行两列，第二列中又包含了一行一列。关于 default 的更多信息 详见

可以给行列添加任意的属性、事件等，其中key的第一个字符为 _ 的属性，将会自动绑定到该元素上面。

key中带有前缀on_的属性将被作为事件来进行处理。

[{
  _class: 'c-red b',   //所使用的样式
  '_data-role': 'first-row',  //绑定的 dataRole 属性值
  col: [{
    _class: 'p-c',
    _span: 12,
    //绑定 click 事件
    on_click: function() {
      console.log('点击了该列')
    },
    default: []
  }]
}]

其中以下划线开头的属性都会被绑定为组件的属性，以on加下划线开头的属性自动绑定为组件的事件

示例 如下放入一个文字组件在列中，并居中显示。is 属性表示该组件是什么组件。

[{
  //行样式，其中有字体和字体大小等样式，详细解释后面再说。
   _class: 'mt-50 ff-zhongsong fw-700 c-red fs-33 mb-10',
  col: [{
    _span:24,
    _class: 'ta-c', //居中样式
    default: [{
      is: 'lc-text', //渲染一个 text 文本
      default: '生知安行、学知利行、困知勉行'
    }]
  }]
}]

is属性代表需要渲染的组件，以lc-开头，加上元素名， 比如要渲染一个element-plus的按钮组件可以这样写：is:'lc-button'

注意: 这部分内容仅做理解页面结构使用，不推荐采用编辑JSON配置去开发页面，正常开发页面仅在页面设计器中拖拽组合即可完成页面搭建。

如想要知道某个页面用到的所有数据视图，可点击数据视图管理页面右上角的

输入页面的id进行查找。

项目代码中预置好了各种可能用到的组件，我们只需要指定组件名称即可将该组件渲染到页面中。

组件

我们的所有组件全部都是放在列中的，某些特殊组件可能还包含一些其他组件。

所有组件的默认内容都是用default字段来指定，如需绑定数据则用_data来绑定。

下面我们来看一个简单的例子：

首先，我们新建一行一列，并填入一些文字。

[{
  col: [{
    default: [{
      is: 'lc-text',
      default: '可视化设计页面真的是太酷啦'
    }]
  }]
}]

其中is字段是用来指定要渲染的组件，所有需要引用的组件，需要在组件名前面加上lc-前缀，如text组件的引用就是lc-text。

我们来看下页面中的渲染效果。

然后我们添加一些样式，来改变页面呈现。

[{
  _class: 'mt-50 ff-zhongsong fw-700 c-red fs-33 mb-10',
  col: [{
    _class: 'ta-c',
    default: [{
      is: 'lc-text',
      default: '可视化设计页面真的是太酷啦'
    }]
  }]
}]

再看下效果。

让我们再追加一列，并在第二列中添加两个元素，一个下拉框和一段文字。

[{
  _class: 'mt-50 ff-zhongsong fw-700 c-red fs-33 mb-10',
  col: [{
    _span: 15,
    _class: 'ta-c',
    default: [{
      is: 'lc-text',
      default: '可视化设计页面真的是太酷啦'
    }]
  }, {
    _span: 9,
    default: [{
      is: 'lc-select',
      _class: 'w-240 mr-10',
      model: 'learnBegin'
    }, {
      is: 'lc-text',
      default: '开始学习'
    }]
  }]
}]

看看现在的效果。

可以看到通过我们构造的json，页面已经能够成功解析并渲染出来，其中model字段表示如果要提交到后端的话，这个下拉框对应的key。

现在的下拉框暂时是还没有数据的，因为我们没有配置它。通过指定default我们可以对下拉框构造数据。

让我们重新设定一个json，并对下拉框添加数据。

[{
  _class: 'mt-50 ff-zhongsong fw-700 c-red fs-33 mb-10',
  col: [{
    _span: 15,
    _class: 'ta-c',
    default: [{
      is: 'lc-text',
      default: '可视化设计页面真的是太酷啦'
    }]
  }, {
    _span: 9,
    default: [{
      is: 'lc-select',
      _class: 'w-240 mr-10',
      model: 'learnBegin',
      default: [{
        is: 'lc-list',
        _data: [{
          label: '今天',
          value: 'today'
        },{
          label: '明天',
          value: 'tomorrow'
        },{
          label: '以后',
          value: 'later'
        }],
        default: [{
          is: 'lc-option',
          _label: '#label',
          _value: '#value'
        }]
      }]
    }, {
      is: 'lc-text',
      default: '开始学习'
    }]
  }]
}]

这是给下拉框添加了一个 list 组件，用来渲染选项列表，然后再给它赋值一个列表数据，并把它的默认插槽添加上 option 组件。关于 _data 更多的配置和使用信息 详见

看下页面效果

让我们再简单的添加一个事件，在选项发生改变的时候执行操作。

[{
  _class: 'mt-50 ff-zhongsong fw-700 c-red fs-33 mb-10',
  col: [{
    _span: 15,
    _class: 'ta-c',
    default: [{
      is: 'lc-text',
      default: '可视化设计页面真的是太酷啦'
    }]
  }, {
    _span: 9,
    default: [{
      is: 'lc-select',
      _class: 'w-240 mr-10',
      model: 'learnBegin',
      default: [{
        is: 'lc-list',
        _data: [{
          label: '今天',
          value: 'today'
        },{
          label: '明天',
          value: 'tomorrow'
        },{
          label: '以后',
          value: 'later'
        }],
        default: [{
          is: 'lc-option',
          _label: '#label',
          _value: '#value'
        }]
      }],
      on_change: function(e) {
        console.log(e)
        console.log('选项值发生改变')
      },
    }, {
      is: 'lc-text',
      default: '开始学习'
    }]
  }]
}]

看下效果

说明

所有在数据视图中指定的组件默认都是由 element-plus 中的组件来渲染的，如果需要使用 naive-ui 组件渲染，可以通过category属性来指定。

所有组件可以绑定的属性和事件都由渲染组件来决定，只要渲染组件支持，那么就可以任意绑定，除此之外，只要是vue支持的属性、方法或事件也可以指定方式进行设定。

我们还可以额外指定一些不带下划线的附加属性，之后我们可以通过对视图的引用来对这些属性进行访问。

关于更多的属性配置可以浏览 参考

请求链接

描述

在加载页面阶段以及之后的交互过程中，所有需要后端接口数据的情况，都需要执行请求来完成。

请求主要是用来加载页面中的各种数据，以及发送数据到后端。

我们可能需要获取列表数据、字典数据、用户数据、表单数据、统计数据等等等等

请求链接与数据视图、执行寄连是页面中有且仅有的三大组成部分之一

通过配置请求链接，能够发起任何请求，也能处理任何返回的数据结构，更能自动绑定到页面中的字段，以供使用

既可以自己执行回调函数，也可以配合执行寄连，甚至能够关联mock来模拟任意的数据

展示了接口地址、用途描述、请求参数、绑定数据四个字段内容，其中操作是一个功能列表。

类似第二行的高亮显示，表示该请求链接绑定了mock数据，只要绑定了mock数据，那么执行该请求的时候就会直接根据mock的配置返回内容，关于 mock 的更多配置详见 mock配置

显示未同步按钮，表示该条数据处于新建或者被修改过的状态，还未进行版本暂存，没有同步接口信息到代码仓库。

点击未同步即可将此条请求链接进行版本管理，点击不同步将跳过本次信息同步，可以在下次再次修改之后再同步。

页面右上角的两个按钮分别为：【通过 formId 搜索】、【新建】。

以页面的 formId 进行搜索的话会搜索到该页面所使用的全部请求链接。

操作

查看

可以查看请求链接的详细信息。

编辑

可以编辑请求链接的信息。

复制

可以对该请求进行复制，以达到快速新建并复用的目的。默认回显为当前请求链接的所有信息，点击完成之后会新生成一条请求链接的记录。

删除

删除该请求，并有删除前的信息确认。

页面

可以查看所有使用该请求的页面。

mock

如果一个接口目前无法返回数据，或者想要自己动态加载一些数据，或者想要根据某种结构模拟数据，那么可以通过系统配置中的数据模拟配置功能，新建相应的mock数据，然后就可以通过该功能配置相应的mock。

比如我们的歌单列表是通过数据模拟配置出来的，然后就可以点击mock：

通过下拉框检索出需要mock数据，然后选择它，就能够给该接口配置出模拟数据，并在下方会自动展示数据结构。

所有的配置都满足mock语法，并且实时展示动态生成的数据，也可以刷新查看

这样每次返回的数据都满足所配置的数据结构，便于调试。

想要知道如何配置mock数据可参见 mock配置

查询

在列表页使用【空格】键，唤起模糊搜索

可以通过接口地址、接口编码、用途描述以及ID进行查询，支持模糊查询。

点击空格即可唤出查询窗口，输入条件后按回车键执行查询。

可以多个条件同时输入，支持清空条件。

新建

点击右上角新增图标，即可打开新增弹窗。

链接数据中最主要的有：接口地址、服务地址、请求方式，这三项是必填项。

• 接口地址：要请求的接口名，URL的后半部分，可以理解为接口路径，每个接口都存在于对应的服务下面

• 服务地址：要请求的服务地址，URL的前半部分，一个服务地址有多个接口，可以写成绝对的域名或ip的形式，也可以直接简写对应的服务名称， 服务的名称可以通过基本信息配置页面来配置

• 请求方式：可选择是GET或者POST等

请求编码

主要用来标识一个请求，当需要手动调用请求链接的时候，可以通过传递该编码来发起请求。

如果请求策略设置为自动发起请求，那么可以不用设置编码，但是如果想要在之后某个时机再一次或者多次调用该接口，那么需要设置请求编码来手动调用它

一般配合 trigger 或者 prepare 使用。

trigger 主要表示会根据设定的参数及其他配置直接发起请求

prepare 主要表示先对接口做一个预准备，比如修改传递的参数，然后可以手动使用请求对象的 run 方法来发起请求

现在假设我们有一个获取课程字典的接口，设定它的请求编码为 courseDict

然后在一个按钮的点击事件中可以以如下方式调用这个接口：

function _() {
  this.R.trigger('courseDict').then(res => {
    console.log(res)
  })
}

看下接口的返回值

上面的代码表示了触发请求编码为 courseDict 的请求链接，获取到课程的字典。

通过 this 拿到当前对象，然后就可以取到请求对象 R，通过 trigger 方法来触发所传入的请求编码对应的请求。

如果我们接口的参数是动态的，想要在每次请求时手动修改参数的值，那么可以使用 prepare 来做一些处理

function _() {
  this.R.prepare('getDict').then(req => {
    // 可以在这修改request对象的属性
    req.request.params.code = 'sex'
    req.run().then((res) => {
      // 处理逻辑，res为接口的返回值
      console.log(res)
    })
  })
}

先看下打印出的接口返回数据

上面的代码表示先预调用请求编码为 getDict 的获取字典项的请求链接，拿到该请求实例，然后将参数 code 设置为 sex，最后发起请求获得返回值。

1. 通过 this.R 拿到请求对象，调用 prepare 方法执行请求预处理，预处理完成之后返回req对象。

2. 再通过 req.request 拿到当前请求，然后就可以设置它的参数。

3. 调用 req.run 方法发起请求，之后就可以对返回值进行操作。

我们再用同样的示例，换一个请求参数

function _() {
  this.R.prepare('getDict').then(req => {
    // 可以在这修改request对象的属性
    req.request.params.code = 'job'
    req.run().then((res) => {
      // 处理逻辑，res为接口的返回值
      console.log(res)
    })
  })
}

这时就可以获取到职业的字典

设置参数的时候，可以获取页面上面的任何变量，比如 collectionData 中的属性。

除此之外，也可以通过 requestData.handle 对象获取对应编码的接口的信息。

请求参数

需要向接口提交的参数，以JS对象形式编辑并可使用变量，可从this中取值。

不区分get、post请求等方式，全部统一使用对象编写，可以对代码部分进行友好的可视化编辑。

如果没有请求体，那么请求参数会自动作为查询参数拼接在地址的后面，如果有请求体，那么请求参数将作为请求体发送出去，对于查询参数可以直接写在接口地址上面

{
  //可获取系统用户信息及 collectionData 中的变量值
  userId: this.user.id,
  code: 'foo', 
  //支持表达式
  type: this.collectionData.is_vip == 'yes' ? 1 : 0
}

实际发出去的请求参数将会变成实际的值

甚至可以配置 header

{
  objectId: '',
  realName: '',
  Headers: {
  'Content-Type': 'application/x-www-form-urlencoded',
  'custom-header': 'a.b.c'
  }
}

这样就添加到了请求头上

正常情况下，接口的返回值符合下面的形式：

{
  code: 20000,//表示成功
  data: [],//可以是任意值
  message: ''//如果有问题的提示消息
}

因为我们有统一的请求拦截和响应拦截，对于不同的code码会有不同的含义以及不同的处理方式

因此对于请求一些不符合该返回值形式的接口，将会造成误判，针对这种情况我们可以做相应的处理

如果调用外部服务接口，或者有不符合上面约定的格式，可以通过 NonStandard 字段来标识：

{
  //在请求参数中添加这对属性
  //可以是任意truthy的值
  NonStandard: true
}

这样，接口返回之后就会具有统一的数据格式：

{
  // 在这里包裹一层以统一格式，具体处理规则由调用者处理
  code: 20000,
  // 接口的实际返回值responseData作为data的值
  data: responseData
}

如果需要一段稍微复杂的逻辑处理，可以通过一个自执行函数来返回一个对象，这个对象就作为请求参数对象。

比如这样：

(() => {
  // 如果开始时间大于结束时间，那么调换这两个的值，并根据时间降序排列
  if(this.collectionData.startDate > this.collectionData.endDate) {
    return {
      startDate: endDate,
      endDate: startDate,
      sort: 'desc'
    }
  }else{
    // 否则按照时间升序排列
    return {
      startDate: startDate,
      endDate: endDate,
      sort: 'asc'
    }
  }
})()

这时我们的请求参数就能够根据具体的执行时间来实时的获取参数的值

这里只推荐写一些不太复杂的逻辑，如果有更复杂的需求，那么完全可以在实际调用的时候，使用 prepare 的方式来进行处理，也更灵活，甚至可以在某些条件下取消发送请求

除了可以在请求参数下面写，我们也可以把一些参数写在接口地址中，并且能够支持模板占位符，这样不但能够参数动态化，也能够路径动态化，可以根据具体的需求来实际操作

1. 路径中有请求参数

getUserList?deleted=0

获取用户列表，查询未注销的

2. 请求参数中有动态参数

getUserById?userId={this.user.id}

根据用户id获取用户信息，请求参数是动态获取的

3. 地址中有动态路径

userInfo/{this.user.id}

可以是restful风格的接口

所有的动态参数都是用双花括号 {} 包裹，里面的 this 可以访问请求对象以及其他所有信息

绑定数据

接口请求之后的返回值data，需要绑定到一个或多个变量中。以供使用，比如返回的字典数据绑定给下拉框，返回的列表数据绑定给表格等等

可以使用多种绑定方式，将接口的返回值绑定给页面中的变量，这样就能在页面变量中获取到接口返回的数据了。

所有接口返回的数据，都默认绑定到 requestData 对象上面。

比如选择性别的下拉框的选项是从 requestData.sexList 中取值，那么当获取到接口数据的时候，就可以把返回的内容绑定到 sexList 上面。在编辑器中直接写就行。

// 绑定数据为字符串形式
sexList

也可以写成数组的形式：

// 绑定数据为数组形式
['sexList']
// 这样就可以同时绑定给多个值
['sexList', 'sexData']

只要接口一返回值就会自动进行绑定，如果未设置绑定数据，那么接口返回之后将默认不做处理，可以手动在回调函数中进行自由绑定

由于我们不用手动初始化变量，系统会自动将接口数据绑定到变量上面，因此在页面初始化加载但是接口没返回的时候，系统会自动给所有绑定的变量进行初始化。

所有默认绑定的数据，初始化的值都是数组，也就是说，在接口返回之前，默认变量的值为数组，相当于 requestData.sexList = []，当接口返回数据之后，再对这个数组进行填充

如果接口返回值为对象类型，那么可以通过json的形式进行指定。

// 绑定数据为对象形式
{
  bookInfo: {
    type: 'object',
    value: ''
  }
}

上面这个可以理解为：初始化一个变量 requestData.bookInfo = {}。

当接口返回数据时，将会变成 requestData.bookInfo = res.data

其中type可以取 string、array、object 三种类型的值。非这三种类型，将被初始化为null。

value字段不是指的默认值，而是指的从返回值的哪个属性里面取值，如果为空就表示默认从返回数据的 data 里面取值。

如果需要深层次取值的话，支持深层选择。例如需取返回结果的 data.a.b 的值，那么可以这样写：

{
  someInfo: {
    type: 'object',
    value: 'a.b'
  }
}

就相当于是 requestData.someInfo = res.data.a.b 这样。

如果需要把返回的data数据绑定到 requestData.a.b 这种形式的变量上面，那么可以这样写：

{
  'a.b': {
    type: 'object',
    value: ''
  }
}

这样就变成了 requestData.a.b = res.data。

如果需要data中的多个数据绑定到多个变量中，常见的就是返回值是一个对象，这个对象里面有很多对属性。

如 data.a、data.b、data.c 都是数据，对应绑定到 requestData.a、requestData.b、requestData.c 上面，那么可以简写一下：

{
  'a': 'a',
  'b': 'b',
  'c': 'c',
}

这时的数据绑定就成了 requestData.a = res.data.a、requestData.b = res.data.b、requestData.c = res.data.c

也就是说属性key表示赋值给 requestData 的路径，属性值表示从 data 中取值的路径

同理我们也可以写成这样：

{
  someInfo: 'a.b'
}

属性值是字符串就直接按照路径取值，属性值是对象，那么就先根据type设定类型，然后再根据value的路径进行取值

触发策略

请求链接的调用时机，以及一些其他触发选项，是否在页面初始化阶段调用或者只在页面中通过事件手动调用等。

也是以 js 对象形式配置。

{
  immediate: true,
  sync: true,
  strategy: 'separate',
  mapping: {},
  cancel() {}
}

immediate: true 表示页面初始化时立即执行，直接发起请求，否则就只做接口的初始化，而不发送请求，在之后可以通过请求编码进行手动调用。

sync: true 表示将请求变成同步请求，只有该请求完成之后才会继续后面的逻辑。手动触发的接口该参数无效。

strategy: 'separate' 主要应用在设计页面的场景，如果一个接口没有动态参数，那么可以设置为 separate，表示不依赖其他状态，可以单独使用，从而在配置的时候就可以直接发起请求，否则需要手动设定参数。 配置该属性可方便在页面设计器中直接调用请求链接，方便设计页面时可实时查看接口返回效果。

mapping：设置接口返回字段的映射，如：下拉框绑定的属性为 label、value，但是接口返回的数据对应标识为 dicName 、dicCode，那么我们就可以设置为：

{
  mapping: {
    label: 'dicName',
    value: 'dicCode'
  }
}

也就是说我们可以把不同的返回数据的字段都改成统一的格式以方便处理和使用

我们既可以写任意多个属性对，也可以给每个属性对起任意的名字

{
  mapping: {
    newField: 'currentField'
    ...
  }
}

mapping中还可以指定一个额外的关键字 resultPath，表示取值的路径

{
  mapping: {
    resultPath: 'a.b',
    newField: 'currentField'
    ...
  }
}

这样就会从返回数据进行深层查找，相当于给 res.data.a.b 数据应用mapping设定的转换规则

拿刚才获取性别的接口来举例，未设置 mapping 时，接口本来的返回值应该是这样的：

现在我们把 code 转化成 value，name 转化成 label

{
  mapping: {
    label: 'name',
    value: 'code'
  }
}

那么返回之后的数据在 requestData.sexList 中将会是这样：

cancel：有一种情况就是，虽然页面配置了自动触发的请求，但是目前该页面不需要发送该请求。

换句话说如果不满足某些条件就不请求接口，那么我们可以用它来取消接口的发送，值为一个函数，当返回 truthy 的值时，那么该请求将被过滤掉，否则正常发送请求。例如：

{
  cancel: () => {
    return !this.user.id
  }
}

假如上面表示一个获取历史浏览记录的接口，那么当用户还未登录时，将不触发请求。

回调函数 请求完成之后的回调函数，直接写方法体即可，主要用来做接口调用完毕后的处理，当一个接口返回数据时，会执行回调函数，可以进行一个额外的处理。

会先于其他处理，回调函数处理完成后，才会完成数据的绑定操作等等，可以理解成是对返回数据的拦截。

可以访问 data 和 result 字段，data 表示返回数据的 data 值，result 表示接口返回的原始数据，也就是 result.data === data 恒成立，可以在这里面使用 runIt 来执行寄连。

// 接口返回值，包含code、data、message等
console.log(result);
// 接口返回的数据，对应data
console.log(data);
// 调用编码为setInitData的执行寄连，并传递参数
this.P.runIt('setInitData', data);
// 也可以访问collectionData
console.log(this.collectionData)

接口回调函数代码无需要包在 function 中。可以通过 this 访问页面中的任意变量。

【项目体验】

系统管理端地址 ：www.lecen.top/manage

系统用户端地址 ：www.liudaxianer.com/user

系统文档地址 ：www.lnsstyp.com/web