如何使用 couchDB 设置 admin-on-rest？

Question

编辑 AoR 的制作者：您的框架有糟糕的文档。你应该真正关注它，那时人们真的会采用它。

我一辈子都无法理解 admin-on-rest 是如何完成 'rest' 部分的。如果有更好的框架和更好的文档，我愿意接受。

我对反应还很陌生，所以这可能是其中的一部分。

我能看出的是

1) [Admin] 标签接受一个属性 'restClient'，这是一个将基本路径设置为 JSON 源的函数，然后 returns 一个带有具体签名（接受 3 个参数，returns 一个承诺）。

2) 然后一个 [Resource] 标签添加到 name="posts" 的路径中并生成一个列表，它（在这里它变成了魔法）基本上对你的数据库执行 wget 然后迭代结果。

我想做的事：将 couchDB 连接到 admin-on-rest。我已经在本地主机上制作了一些测试文档。 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

Answer 1

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

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

1) Admin-On-Rest 定义了一些 REST 类型（如下）。这些通常由 Redux 操作（在它们的元标记中）触发。系统扫描这些 rest 类型，如果它看到它们，则调用 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 类型的所有响应所需的 header 字段。您可以在 API 中非常简单地设置它。我使用环回并在远程挂钩中手动设置 X-Total-Count （如果您不知道，请不要担心）您的 api 似乎仍在使用 JSON 服务器。 JSON 服务器是虚拟服务器 API。所以你的应用程序现在没有连接到你的 couchDB。

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

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

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
      }
  })
}

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

如何使用 couchDB 设置 admin-on-rest？

How to set up admin-on-rest with couchDB?

reactjs

admin-on-rest