LoopBack4ReactAdminExample

Пример примера Backoffice и Generator API 2020

Меньше кода и гибкой архитектуры для мобильного разработчика, который хочет легко разработать Интернет, для компаний, которым хочет легкую архитектуру, которая экономит деньги и больше не нужно для разработчика Back End в 2020 торт.

React Admin и Loopback 4 CRUD образец

Начиная

Это образец с Admin Admin и Loopback4 для реализации операций CRUD на products и users , запрашивая API с поставщиком Loopback4, который вы можете установить с помощью npm install react-admin-loopback4-adapted .

Установки

Установите узел V12.18.3 с NVM

Следуйте инструкциям, чтобы получить узел в вашей локальной машине sudo apt install curl , curl https://raw.githubusercontent.com/creationix/nvm/master/install.sh | bash , source ~/.profile , nvm install v12.18.3 , nvm use v12.18.3 .

Установите NPM

Установите диспетчер пакетов Node с помощью команды sudo apt install npm и проверьте версию NPM с помощью npm -v .

Настройка MongoDB

Установите MongoDB с официального веб-сайта https://docs.mongodb.com/manual/tutorial/install-mongodb-on-ubuntu/ и следуйте руководству, чтобы получить окончательный выпуск MongoDB 4.4 .

ПРИМЕЧАНИЕ . Если ошибка возникает при попытке открыть консоль mongod.service mongo sudo systemctl status mongod.service mongod.service sudo systemctl enable mongod.service mongod.service sudo systemctl start mongod.service sudo systemctl enable mongod.service , затем sudo systemctl start mongod.service .

Настройка Mongodb Compass

Установите MongoDB Compass с официального веб -сайта https://www.mongodb.com/try/download/compass и следуйте инструкциям, чтобы получить его на вашей локальной машине. Этот инструмент помогает вам легко управлять вашей базой данных.

Установите зависимости

После клонирования проекта с помощью git clone https://github.com/PlanetConectus/LoopBack4ReactAdminExample.git Получите папку ecommerce в папках Frontreactadmin и BackendLoopbackV4 и установите пакеты узлов с помощью npm install .

Запуск приложений

В этом проекте мы попытались уменьшить сложность для вас, чтобы получить как сервер Frontend, так и сервер Backend в одной и той же локальной машине, чтобы сделать это, мы заставляем привязывать порт сервера Loopback4 в 3001 в LoopBack4ReactAdminExample/BackendLoopbackV4/ecommerce/src/index.ts .

 const app = new EcommerceApplication ( {
    rest : {
      port : 3001
    }
  } ) ;

Это связано с тем, что вы не можете связать два процесса с одним и тем же [IP:PORT] , в нашем случае привязка IP - 127.0.0.1 "proxy": "http://localhost:3001" известен как localhost , эта установка приведет к CORS blocks , навигатору, чтобы решить эту проблему, мы используем интегрированный узел. LoopBack4ReactAdminExample/Frontreactadmin/ecommerce/package.json :

 {
 .
 .
 .
 . ,
  "proxy" : "http://localhost:3001" , // <~~~ here we add the proxy field in package . json
 
.
.
.
}

Запустить серверы

После настройки изменений, которые мы упоминаем в предыдущем разделе, мы начинаем поворачивать серверы и обнаруживаем, насколько легко create и modify или delete product или user

Я запускаю бэкэнд-сервер

Get in LoopBack4ReactAdminExample/BackendLoopbackV4/ecommerce и запустите команду npm start

> node - r source - map - support / register .

Server is running at http :/ / [ :: 1 ] : 3001
Try http : // [ :: 1 ] : 3001 / ping

Ii- запустить сервер Frontend

Получить в LoopBack4ReactAdminExample/Frontreactadmin/ecommerce и запустите команду npm start

 Compiled successfully!

You can now view ecommerce in the browser .

  Local :            http : //localhost : 3000
  On Your Network :  http :// 172.18 . 25.22 :3000

Note that the development build is not optimized .
To create a production build , use npm run build .

`

II- Проверьте ваше приложение

Скопируйте эту ссылку http://localhost:3000 в ваш браузер, чтобы получить приложение React Admin и начать управление products и users .

Application App.js

В приложении Adment React src/app.js экспортируется в точку входа src/index.js , где начало разрешения узла и отображение imports и exports , посмотрите на верхнюю часть файла index.js , чтобы увидеть импорт функции App :

 import React from 'react' ;
import ReactDOM from 'react-dom' ;
import './index.css' ;
import App from './App' ;
import * as serviceWorker from './serviceWorker' ;

Внутри app.js react-admin-loopback4-adapted
lb4Provider , который принимает в качестве @param URL -адрес на бэкэнд -сервере http://localhost:3001 :

 const dataProvider = lb4Provider ( 'http://localhost:3001' ) ;

Это содержание app.js

 import * as React from 'react' ;
import { Admin , Resource } from 'react-admin'
import PostIcon from '@material-ui/icons/Book'
import './App.css' ;

import Dashboard from './dashboard'
import { ProductList , ProductCreate , Productedit } from './productlist'
import { Userlist , Useredit , Usercreate } from './user'

import lb4Provider from 'react-admin-loopback4-adapted'

const dataProvider = lb4Provider ( 'http://localhost:3001' ) ;

const App = ( ) => (
  < Admin dataProvider = { dataProvider } dashboard = { Dashboard } >
    < Resource name = "products" list = { ProductList } create = { ProductCreate }
      edit = { Productedit } icon = { PostIcon } />
    <Resource name="users" list={Userlist} edit={Useredit}
      create={Usercreate} / >
  </ Admin >
)
export default App ;

ПРИМЕЧАНИЕ В этом примере аутентификация не интегрирована

Примечание , чтобы узнать больше о React Admin, перейдите по этой ссылке: https://marmelab.com/react-admin/readme.html

КОНТАКТ

Если у вас есть какие -либо вопросы или вы хотите получить преимущество наших услуг, пожалуйста, свяжитесь с нами

 Site : https : //planetconectus . com

E - mail : mohamedali . chaabani @planetconectus . com

Phone : [phone]
Phone : + 33 970 440 431