0

编辑给 AoR 的制造者：你的框架受到可怕的文档的影响。你应该真正关注这一点，人们会真正采用它。

我终其一生都无法理解 admin-on-rest 是如何完成“休息”部分的。如果有更好的框架和更好的文档，我愿意接受。

我很新的反应，所以这可能是它的一部分。

我能看出的是

1) [Admin] 标签接受一个 prop 'restClient'，这是一个将您的基本路径设置为 JSON 源的函数，然后返回一个具有特定签名的函数（接受 3 个参数，返回一个 Promise）。

2) 然后一个 [Resource] 标记添加到 name="posts" 的路径并创建一个列表，该列表（这里变成魔法）基本上对您的数据库执行 wget 然后迭代结果。

我想做的是：将 couchDB 连接到 admin-on-rest。我已经在 localhost 上制作了一些测试文档。couchDB url 看起来像：

http://127.0.0.1:5984/myproject/_design/getclients/_view/getclient/

这在邮递员中有效，给了我一个像这样的json对象：

{ 
"total_rows": 4,
"offset": 0,
"rows": [
    {
        "id": "afc3bb9218d1a5c1e81ab3cc9f004467",
        "key": {
            "status": "active",
            "rating": 9.1,
            "bio": {
                "fname": "Sam",
                "mname": "TestMName",
                "lname": "TestLName",
                "address": "712347 B Street",
                "state": "CA",
                "city": "Los Santos",
                "zip": "90211",
                "phone": "123-456-7890",
                "email": "sam@samsemail.com",
                "username": "TestSam",
                "password": "abc123"
            }
        },
        "value": null
    },

在这一点上，我很困惑，我不知道在哪里看。

现在是我的代码：

//App.js

import React from 'react';
import { jsonServerRestClient, Admin, Resource } from 'admin-on-rest';

import { PostList } from './Posts.js';

const App = () => (

    <Admin restClient={jsonServerRestClient('http://127.0.0.1:5984/myproject/')}>
        <Resource name="_design/getclients/_view/getclient" list={PostList} />
    </Admin>
);

export default App;

和

//Posts.js
export const PostList = (props) => (
    <List {...props}>
        <Datagrid>
            <TextField source="status" />
            <TextField source="rating" />
        </Datagrid>
    </List>
);

页面加载，但底部弹出一个粉红色的小框，上面写着：

The X-Total-Count header is missing in the HTTP Response. The jsonServer REST client expects responses
4

1 回答 1

1

RestClient 有点像一头阴暗的野兽。肯定没有完美记录。

但是，如果您知道整个事情是如何协同工作的，那么它最终会非常简单。

1) Admin-On-Rest 定义了一些 REST 类型（如下）。这些通常由 Redux 操作（在它们的元标记中）触发。系统扫描这些休息类型，如果看到它们，则调用 RestClient

GET_LIST
GET_ONE 创建
更新
删除
GET_MANY GET_MANY_REFERENCE

使用这些类型和其他一些参数调用 REST 客户端。其余客户端的工作是解释类型，然后使用参数向您的 API 发出请求。对于此 AOR，使用浏览器内置的新 Fetch API。

您可以通过调用访问它。您还应该查看 AOR 源代码并查看它是如何工作的。

import { fetchUtils } from 'admin-on-rest';

2) X 总计数是 AOR 对 GET_LIST 类型的所有响应所需的头字段。您可以在您的 API 中非常简单地设置它。我使用环回并在远程挂钩中手动设置 X-Total-Count（如果您不知道，请不要担心） 看来您的 api 仍在使用 JSON 服务器。JSON 服务器是一个虚拟 API。所以你的应用程序现在没有连接到你的 couchDB。

https://github.com/typicode/json-server

如果你没有使用像 express 或 loopback 这样的 api 服务器，那么你也可以配置你的 restClient 来做所有的请求和响应处理。您必须构建 URL。阅读下面的链接，以便您可以进一步了解我的示例代码。

https://marmelab.com/admin-on-rest/RestClients.html#decorating-your-rest-client-example-of-file-upload

所以像这样。

    if (type === 'GET_LIST' && resource === 'posts') {        
const url = http://127.0.0.1:5984/myproject/_design/getclients/_view/getclient/
        options.method = 'GET';
        return fetchUtils.fetchJson(url, options)
          .then((response) => {
            const {headers, json} = response;
            //admin on rest needs the {data} key
            return {data: json,
                    total: parseInt(headers.get('x-total-count').split('/').pop(), 10)}

    })

您还可以编写这样的函数来处理请求和响应。

function handleRequestAndResponse(url, options={}) {
  return fetchUtils.fetchJson(url, options)
    .then((response) => {
      const {headers, json} = response;
      //admin on rest needs the {data} key
      const data = {data: json}
      if (headers.get('x-total-count')) {
        data.total = parseInt(headers.get('x-total-count').split('/').pop(), 10)
      } else {
        data.total = json.length // this is why the X-Total-Count is needed by Aor

}
}
      }
      // handle get_list responses
        return {data: json,
                total: } else {
        return data
      }
  })
}

上面的代码已在窗口中格式化，因此可能无法直接使用。但我希望你能明白。

于 2017-07-04T07:13:53.827 回答