Блог

Не так давно мы рассматривали возможность по генерации API к любой базе данных. Сегодня мы пойдем в обратную сторону от того же места, и посмотрим как можно запрограммировать веб-интерфейс к этим данным.

Тем временем в параллельной Вселенной...

Если у вас еще нет loopback-api, создайте проект loopback командами

npm install --global loopback-cli
lb
# при создании выберите вариант тестовой базы, либо уже готовое loopback api
# перейдите в созданную директорию проекта
lb datasource
# нацельте loopback api на вашу базу данных или создайте c моделями notes
# Измените server/model-config.json, установив хранение моделей
# в созданном источнике данных.
npm install loopback3-xtotalcount --save # понадобится позже...
node . # запустим наш api-сервер и проверим его на порту 3000 /explorer

Затем уже в нашей Вселенной

# в директории с loopback-проектом
npm install --global create-react-app
create-react-app client
cd client; npm install --save admin-on-rest
npm run build

var path = require('path');
app.use('/api', loopback.rest());
app.use('/', loopback.static(path.resolve(__dirname, '../client/build')));
app.use('*', loopback.static(path.resolve(__dirname, '../client/build/index.html')));
require('loopback3-xtotalcount')(app);

и удаляем (удаляем, да) файл server/boot/root.js. Пишем код в файл client/src/App.js

import React from 'react';
import { jsonServerRestClient, Admin, Resource } from 'admin-on-rest';
import { NotesList } from './notes';
const App = () => ( 
<Admin restClient={jsonServerRestClient('http://your.server.ru:3000/api')}> 
<Resource name="notes" list={NotesList} /> 
</Admin>
);
export default App;

и создаем файл client/src/notes.js с таким содержимым:

import React from 'react';
import { List, Datagrid, TextField } from 'admin-on-rest';
export const NotesList = (props) => (
<List {...props}>
<Datagrid>
<TextField source="id" />
<TextField source="title" />
<TextField source="content" />
</Datagrid>
</List>
);

И....

npm run build; cd ..
node . # сервер по умолчанию на порту 3000

Смотрим результат :)

Еще больше крутых настроек ищите в документации admin-on-rest. Там их много! :)