opentiny/tiny-engine

🐛 [Bug]: 从数据源抓取数据函数有fetchData.api.apply is not a function

Closed this issue · 6 comments

Cynwell commented

Environment

win11, Command Prompt

Version

v20.10.0

Version

`-- (empty)

Link to minimal reproduction

Step to reproduce

  1. 自建一个数据 server, 安装 express 包并且用 node.js 运行:
const express = require('express');
const app = express();

const data = [
    { data_id: '1', data_name: 'data1' },
];

app.get('/data', (req, res) => {
    res.json(data);
});

app.listen(8000, () => {
    console.log('Listening on port 8000');
});
  1. 在终端机验证数据 server 正在运行
    image
  • 输入：
curl http://localhost:8000/data
  • 输出：
[{"data_id":"1","data_name":"data1"}]
  1. 在 tiny-engine 新增数据源，然后选获取远程字段，然后提供一个范本，label_name 与 field name 一样，完成后把两个保存按钮都按了
    image
    image
名 值
数据源名称 FakeDataSource
描述 Fake Data Source
请求地址 http://localhost:8000/data
请求结果 {"data_id":"1","data_name":"data1"}
  1. 新增物料到版面，选取 content 里的表格并拖曳到版面里，然后把预填的表格列资料都删了，把 title 和 field 改成一样的
    image
title field
data_id data_id
data_name data_name

  1. 从 fetchData 编辑代码旁边的代码按钮，出现变量绑定，然后在选单里选取数据源，选取刚刚新建的数据源，然后按确定
    image

  2. 完成后应该可以看到 fetchData 已绑定数据源
    image

  3. 保存，然后按预览，出现以下错误
    image

TypeError: fetchData.api.apply is not a function
    at Proxy.handleFetch (tiny-vue.mjs:37526:32)
    at Proxy.commitProxy (tiny-vue.mjs:37679:14)
    at Proxy.mounted13 (tiny-vue.mjs:37334:12)
    at callWithErrorHandling (vue.runtime.esm-browser.js:1651:22)
    at callWithAsyncErrorHandling (vue.runtime.esm-browser.js:1660:21)
    at hook.__weh.hook.__weh (vue.runtime.esm-browser.js:4145:29)
    at flushPostFlushCbs (vue.runtime.esm-browser.js:1848:47)
    at render (vue.runtime.esm-browser.js:7601:9)
    at mount (vue.runtime.esm-browser.js:5845:25)
    at app.mount (vue.runtime.esm-browser.js:10755:23)

about:srcdoc:168

What is expected

预期在预览页面里，可以从数据源正常抓取数据，并且显示在表格里

What is actually happening

No response

Any additional comments (optional)

No response

yaoyun8 commented

@Cynwell 表格组件的fetchData要求是function，可以通过如下途径：

  1. 拖入Collection组件，选择绑定的数据源；
    image

  2. 往Collection组件中拖入表格

  3. 保存页面，预览

Cynwell commented

@yaoyun8 我按照官方教程尝试了：https://opentiny.design/tiny-engine#/help-center/course/engine/11

  1. 首先拖了个 Collections，然后在 Collections 里面放一个 content 组件的表格组件。系统提示侦测到现有的数据源，我选择了预填充自动填进去。接着，我在空荡荡的表格里重新创建了两个表格列 data_id 和 data_name，每个列的 title 和 field 分别为：
title field
data_id data_id
data_name data_name

创建完成后，右边的属性栏看起来是这个样子的：
image

  1. 打开 JS，里面有一些自动产生的代码：
image 
function getTableData25644f43({ page, sort, sortBy, filters }) {
  /**
   * @param {Object} sort 排序数据
   * @param {Array} sortBy 排序方式
   * @param {Object} page 分页数据
   * @param {Array} filters 筛选数据
   * @returns {Object} 返回一个promise对象，并且resolve格式为{ result: Array, page: { total: Number } }
   */
  return new Promise((resolve, reject) => {
    this.dataSourceMap.undefined.load().then((res) => {
      // 如果按照数据源面板的建议格式编写dataHandler
      // 那么dataSourceMap的res格式应该是：{ code: string, msg: string, data: {items: any[], total: number} }
      resolve({ result: res.data.items, page: { total: res.data.total } })
    })
  })
}
  1. 保存后有一个错误信息弹出，估计是跟上面代码的 this.dataSourceMap.undefined.load() 有关：
image
  1. 所以我把 this.dataSourceMap.undefined.load() 换成 this.dataSourceMap.FakeDataSource.load()，其中 FakeDataSource 是编辑器自动建议弹出来的，所以应该不存在大小写的分别：
image
  1. 再次保存后预览，没有报错，但也没有载入数据：
image
yaoyun8 commented

@Cynwell

  1. 数据源可以编辑字段，这些字段会自动填充到表格的列中，绑定数据源就不需要手动添加列
    image

  2. this.dataSourceMap.undefined.load()这里推测是没有选择数据源，在拖入collection组件的时候在右侧属性面板选择数据源datasource

Cynwell commented

@yaoyun8 解决了 undefined 的问题了。发现是要先对 Collections 选取数据源，之后再拉表格，才会自动填入。
image

目前的问题是数据没有在表格里显示。Console 显示预览状态下，应用有访问到 API 伺服器，也没有报错。以下是我的数据源的配置，是跟着这个教程配的 https://opentiny.design/tiny-engine#/help-center/course/engine/9：
image

名 值
数据源名称 FakeDataSource
描述 Fake Data Source
请求地址 GET; http://localhost:8000/fakeData
请求完成回调函数（dataHandler） function dataHandler(data) { return data.map(v => { return { name: v.aa.ss, status: v.status } }) }
请求结果 {"data_id":"1","data_name":"data1"}

我使用的自建 API 伺服器是这样的：

const express = require('express');
const app = express();

const data = [{ data_id: '1', data_name: 'data1' }];

app.get('/fakeData', (req, res) => {
    res.json(data);
});

app.get('/fakeDataWellFormatted', (req, res) => {
    res.json({
        "code": "200",
        "msg": "OK",
        "data": {
            "items": data,
            "total": data.length
        }
    });
});

app.listen(8000, () => {
    console.log('Listening on port 8000');
});

访问结果是这样的：
image

是 API 伺服器返回的结果有问题，导致表格无法读取数据吗？还是哪一步配置了呢？谢谢！

Issues-translate-bot commented

Bot detected the issue body's language is not English, translate it automatically.

The problem of undefined is solved. I found that I had to select the data source for Collections first, and then pull the table before it would be filled in automatically.
image

The current problem is that the data is not displayed in the table. When the console displays the preview state, the application has accessed the API server and no error was reported. The following is the configuration of my data source, which is configured following this tutorial https://opentiny.design/tiny-engine#/help-center/course/engine/9:
image

name value
Data source name FakeDataSource
Description Fake Data Source
Request address GET; http://localhost:8000/fakeData
Request completion callback function (dataHandler) function dataHandler(data) { return data.map(v => { return { name: v.aa.ss, status: v.status } }) }
Request result {"data_id":"1","data_name":"data1"}

The self-built API server I use is like this:

const express = require('express');
const app = express();

const data = [{ data_id: '1', data_name: 'data1' }];

app.get('/fakeData', (req, res) => {
    res.json(data);
});

app.get('/fakeDataWellFormatted', (req, res) => {
    res.json({
        "code": "200",
        "msg": "OK",
        "data": {
            "items": data,
            "total": data.length
        }
    });
});

app.listen(8000, () => {
    console.log('Listening on port 8000');
});

The access result is as follows:
image

Is there a problem with the results returned by the API server, causing the form to be unable to read data? Or which step is configured? Thanks!

yaoyun8 commented

@Cynwell 在预览页面可以打开源代码查看和调试：找到class="left"的元素，默认是display：none的，将其显示出来。然后就是js代码的调用，可以在代码中输出或打断点
image