LoopBack4ReactAdminExample
1.0.0
Weniger Code und flexible Architektur für einen mobilen Entwickler, der das Web problemlos entwickeln möchte, für Unternehmen, die eine einfache Architektur möchten, die Geld und Zeit sparen, müssen nicht mehr für den Back End -Entwickler um 2020 benötigt werden, wenn Sie eine Webanwendung haben, wenn Sie nur eine API wünschen. von Kuchen.
Dies ist eine Probe mit einem React Admin und Loopback4, um CRUD-Vorgänge für products und users zu implementieren, indem APIs mit dem Loopback4-Anbieter angefordert werden, den Sie mit npm install react-admin-loopback4-adapted .
Befolgen Sie die Anweisungen, um den Knoten in Ihrem lokalen Maschinen sudo apt install curl , curl https://raw.githubusercontent.com/creationix/nvm/master/install.sh | bash zu erhalten. curl https://raw.githubusercontent.com/creationix/nvm/master/install.sh | bash , source ~/.profile , nvm install v12.18.3 , nvm use v12.18.3 .
Installieren Sie den Knotenpaket -Manager mit dem Befehl sudo apt install npm und überprüfen Sie die NPM -Version mit npm -v .
Installieren Sie MongoDB von der offiziellen Website https://docs.mongodb.com/manual/tutorial/install-mongodb-on-ubuntu/ und folgen Sie dem Handbuch, um die endgültige Veröffentlichung MongoDB 4.4 zu erhalten.
HINWEIS : Wenn Sie versuchen, die MongoDB -Konsole mit dem Befehl mongo zu öffnen, ob der mongod.service mit dem Befehls sudo systemctl status mongod.service ist , können Sie den mongod.service aktivieren. Der Befehl sudo systemctl enable mongod.service sudo systemctl start mongod.service mongod.service sudo systemctl enable mongod.service und dann sudo systemctl start mongod.service .
Installieren Sie MongoDB Compass auf der offiziellen Website https://www.mongodb.com/try/download/compass und befolgen Sie die Anweisungen, um sie auf Ihrem lokalen Computer zu erhalten. Mit diesem Tool können Sie Ihre Datenbank einfach verwalten.
Nach dem Klonen des Projekts mit git clone https://github.com/PlanetConectus/LoopBack4ReactAdminExample.git in den ecommerce -Ordner in den Ordnern von Frontreactadmin und BackendLoopbackV4 und installieren die Knotenpakete mit der Kommande npm install .
In diesem Projekt haben wir versucht, die Komplexität zu verringern, damit Sie sowohl den Frontend -Server als auch den Backend -Server in derselben lokalen Maschine dazu bringen, den Bindungsport des Loopback4 -Servers in der LoopBack4ReactAdminExample/BackendLoopbackV4/ecommerce/src/index.ts -Datei zu 3001 zu erzwingen:
const app = new EcommerceApplication ( {
rest : {
port : 3001
}
} ) ; this is because you cant bind two processes to the same [IP:PORT] , in our case the binding IP is 127.0.0.1 it's known as localhost , this setup will cause CORS blocks by you navigator,to solve this problem we use the integrated node proxy by adding this line "proxy": "http://localhost:3001" in the LoopBack4ReactAdminExample/Frontreactadmin/ecommerce/package.json :
{
.
.
.
. ,
"proxy" : "http://localhost:3001" , // <~~~ here we add the proxy field in package . json
.
.
.
} Nachdem delete die Änderungen eingerichtet product create die wir im vorherigen user modify
Ich starte den Backend-Server
Holen Sie sich in LoopBack4ReactAdminExample/BackendLoopbackV4/ecommerce und führen Sie den Befehl npm start
> node - r source - map - support / register .
Server is running at http :/ / [ :: 1 ] : 3001
Try http : // [ :: 1 ] : 3001 / pingII-Start den Frontend-Server
Steigen Sie in den LoopBack4ReactAdminExample/Frontreactadmin/ecommerce ein und führen Sie den Befehl 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 .
`Iii- testen Sie Ihre Bewerbung
Kopieren Sie diesen Link http://localhost:3000 in Ihren Browser, um in die React Admin -App zu gelangen und die products und users zu verwalten.
In der React Admin -Anwendung wird src/app.js in den Einstiegspunkt src/index.js exportiert, in dem der Knoten die imports und exports auflöst und zuordnen, siehe oben in der index.js -Datei, um den Import der App -Funktion anzuzeigen:
import React from 'react' ;
import ReactDOM from 'react-dom' ;
import './index.css' ;
import App from './App' ;
import * as serviceWorker from './serviceWorker' ; In der app.js finden Sie alles react-admin-loopback4-adapted was Sie darüber wissen möchten, wie die Anwendung die Elemente von APIs auflöst
Der lb4Provider , der als @Param die URL zum Backend Server http://localhost:3001 dauert:
const dataProvider = lb4Provider ( 'http://localhost:3001' ) ;Dies ist der Inhalt von 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 ;
Beachten Sie in diesem Beispiel Die Authentifizierung ist nicht integriert. Wir werden sie im nächsten Tutorial vervollständigen
HINWEIS Um mehr über React Admin zu erfahren
Site : https : //planetconectus . com
E - mail : mohamedali . chaabani @planetconectus . com
Phone : 00216 26 410 947
Phone : + 33 970 440 431
