javascript - 我需要使用 React 和 MongoDB 创建管理页面

Question

我在亚马逊服务器和前端安装了 mongoDB，用 React.js 编写。我需要使用 'react-admin' 创建管理页面，但我不知道如何使用我的 mongoDB 创建它，因为它们不提供 'react-admin' 用于工作的 dataProvider 函数 https://marmelab.com/react-admin/DataProviders.html 。

我尝试编写自己的 dataProvider 来路由和管理我的查询和响应，但由于缺乏经验，我失败了。

import { stringify } from 'query-string';
import {
    fetchUtils,
    GET_LIST,
    GET_ONE,
    GET_MANY,
    GET_MANY_REFERENCE,
    CREATE,
    UPDATE,
    UPDATE_MANY,
    DELETE,
    DELETE_MANY,
} from 'react-admin';

/**
 * Maps react-admin queries to a json-server powered REST API
 *
 * @see https://github.com/typicode/json-server
 * @example
 * GET_LIST     => GET http://my.api.url/posts?_sort=title&_order=ASC&_start=0&_end=24
 * GET_ONE      => GET http://my.api.url/posts/123
 * GET_MANY     => GET http://my.api.url/posts/123, GET http://my.api.url/posts/456, GET http://my.api.url/posts/789
 * UPDATE       => PUT http://my.api.url/posts/123
 * CREATE       => POST http://my.api.url/posts/123
 * DELETE       => DELETE http://my.api.url/posts/123
 */

export default (apiUrl, httpClient = fetchUtils.fetchJson) => {

/**
 * @param {String} type One of the constants appearing at the top if this file, e.g. 'UPDATE'
 * @param {String} resource Name of the resource to fetch, e.g. 'posts'
 * @param {Object} params The data request params, depending on the type
 * @returns {Object} { url, options } The HTTP request parameters
 */
const convertDataRequestToHTTP = (type, resource, params) => {

    let url = '';
    const options = {};
    switch (type) {
        case GET_LIST: {
            const { page, perPage } = params.pagination;
            const { field, order } = params.sort;
            const query = {
                ...fetchUtils.flattenObject(params.filter),
                _sort: field,
                _order: order,
                _start: (page - 1) * perPage,
                _end: page * perPage,
            };
            url = `${apiUrl}/${resource}?${stringify(query)}`;
            break;
        }
        case GET_ONE:
            url = `${apiUrl}/${resource}/${params.id}`;
            break;
        case GET_MANY_REFERENCE: {
            const { page, perPage } = params.pagination;
            const { field, order } = params.sort;
            const query = {
                ...fetchUtils.flattenObject(params.filter),
                [params.target]: params.id,
                _sort: field,
                _order: order,
                _start: (page - 1) * perPage,
                _end: page * perPage,
            };
            url = `${apiUrl}/${resource}?${stringify(query)}`;
            break;
        }
        case UPDATE:
            url = `${apiUrl}/${resource}/${params.id}`;
            options.method = 'PUT';
            options.body = JSON.stringify(params.data);
            break;
        case CREATE:
            url = `${apiUrl}/${resource}`;
            options.method = 'POST';
            options.body = JSON.stringify(params.data);
            break;
        case DELETE:
            url = `${apiUrl}/${resource}/${params.id}`;
            options.method = 'DELETE';
            break;
        case GET_MANY: {
            const query = {
                [`id_like`]: params.ids.join('|'),
            };
            url = `${apiUrl}/${resource}?${stringify(query)}`;
            break;
        }
        default:
            throw new Error(`Unsupported fetch action type ${type}`);
    }
    console.log(url);
    return { url, options };
};

/**
 * @param {Object} response HTTP response from fetch()
 * @param {String} type One of the constants appearing at the top if this file, e.g. 'UPDATE'
 * @param {String} resource Name of the resource to fetch, e.g. 'posts'
 * @param {Object} params The data request params, depending on the type
 * @returns {Object} Data response
 */
const convertHTTPResponse = (response, type, resource, params) => {
    const { headers, json } = response;
    switch (type) {
        case GET_LIST:
        case GET_MANY_REFERENCE:
            if (!headers.has('x-total-count')) {
                throw new Error(
                    'The X-Total-Count header is missing in the HTTP Response. The jsonServer Data Provider expects responses for lists of resources to contain this header with the total number of results to build the pagination. If you are using CORS, did you declare X-Total-Count in the Access-Control-Expose-Headers header?'
                );
            }

            return {
                data: json,
                total: parseInt(
                    headers
                        .get('x-total-count')
                        .split('/')
                        .pop(),
                    10
                ),
            };
        case CREATE:
            return { data: { ...params.data, id: json.id } };
        default:
            return { data: json };
    }
};

/**
 * @param {string} type Request type, e.g GET_LIST
 * @param {string} resource Resource name, e.g. "posts"
 * @param {Object} payload Request parameters. Depends on the request type
 * @returns {Promise} the Promise for a data response
 */

return (type, resource, params) => {
    console.log(type, resource, params);
    // json-server doesn't handle filters on UPDATE route, so we fallback to calling UPDATE n times instead
    if (type === UPDATE_MANY) {
        return Promise.all(
            params.ids.map(id =>
                httpClient(`${apiUrl}/${resource}/${id}`, {
                    method: 'PUT',
                    body: JSON.stringify(params.data),
                })
            )
        ).then(responses => ({
            data: responses.map(response => response.json),
        }));
    }
    // json-server doesn't handle filters on DELETE route, so we fallback to calling DELETE n times instead
    if (type === DELETE_MANY) {
        return Promise.all(
            params.ids.map(id =>
                httpClient(`${apiUrl}/${resource}/${id}`, {
                    method: 'DELETE',
                })
            )
        ).then(responses => ({
            data: responses.map(response => response.json),
        }));
    }
    const { url, options } = convertDataRequestToHTTP(
        type,
        resource,
        params
    );

    httpClient(url, options).then(response =>
        convertHTTPResponse(response, type, resource, params)
    );
};

};

此功能执行以下操作:

GET_LIST => GET http://my.api.url/posts?_sort=title&_order=ASC&_start=0&_end=24

GET_ONE => GET http://my.api.url/posts/123

GET_MANY => 获取 http://my.api.url/posts/123 ，获取 http://my.api.url/posts/456 ，获取 http://my.api.url/posts/789

更新 => PUT http://my.api.url/posts/123

创建 => 发布 http://my.api.url/posts/123

删除 => 删除 http://my.api.url/posts/123
*/

但是我需要 :

GET_LIST => GET https://r8p7az51jd.execute-api.us-east-1.amazonaws.com/test/viewpoint ?$filter={}&$limit={}&$skip={}&$sort={}

GET_ONE => GET https://r8p7az51jd.execute-api.us-east-1.amazonaws.com/test/viewpoint ?$filter={_id: '1'}

更新 => PUT https://r8p7az51jd.execute-api.us-east-1.amazonaws.com/test/viewpoint ?$filter={_id: '1'}

CREATE => POST https://r8p7az51jd.execute-api.us-east-1.amazonaws.com/test/viewpoint ?$filter={_id: '1'}

删除 => 删除 https://r8p7az51jd.execute-api.us-east-1.amazonaws.com/test/viewpoint ?$filter={_id: '1'}
*/

Answer 1

你必须编写自己的 dataProvider.js 文件来支持你的 API 服务器，只要保持所有函数名称和返回数据和数据类型相同，React 管理员已经在他们的文档中描述了这一点。请引用:https://marmelab.com/react-admin/Tutorial.html本页的结尾你会看到它