Question

编辑AoR的制作者：您的框架遭受了可怕的文档。你应该真正专注于那个，人们会真的采用它。

我无法解读我的生活如何解释“休息”部分的管理权。如果有一个更好的文档更好的框架，我可以接受。

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

我能辨别的是

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

2）然后一个[Resource]标签添加到name =“posts”的路径并创建一个列表，其中（继续转向魔术）基本上对数据库执行wget然后迭代结果。

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

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操作（在他们的元标记中）拍摄。系统会扫描这些休息类型，如果看到它们，则会调用RestClient

GET_LIST
得到一个 CREATE
UPDATE
DELETE
GET_MANY GET_MANY_REFERENCE

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

您可以通过致电来访问它。您还应该进入AOR源代码并查看它是如何工作的。

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

2）X总计数是AOR对GET_LIST类型的所有响应所需的标题字段。您可以在API中简单地设置它。我使用loopback并在远程钩子中手动设置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
      }
  })
}

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

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

1 个答案: