LoopBack4ReactAdminExample
1.0.0
2020年にバックエンド開発者のお金と時間を節約する簡単なアーキテクチャを望んでいる企業のために、Webを簡単に開発したいモバイル開発者向けのコードと柔軟なアーキテクチャを減らすことができます。API（Webサービスとバックオフィスのみが必要な場合はWebアプリケーションが必要な場合にのみフロントエンド開発者が必要です。ケーキの平和。
これはnpm install react-admin-loopback4-adapted products usersたサンプルです。
指示に従って、ローカルマシンでノードを取得する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 。
コマンドsudo apt install npmを使用してノードパッケージマネージャーをインストールし、 npm -vでNPMバージョンを確認します。
公式ウェブサイトhttps://docs.mongodb.com/manual/tutorial/install-mongodb-on-ubuntu/からmongodbをインストールし、ガイドに従って最終リリースMongoDB 4.4取得します。
注：コマンドmongoでMongoDBコンソールを開こうとするとエラーが発生した場合、 mongod.serviceがコマンドsudo systemctl status mongod.service Mongod.Serviceでアクティブ状態であるかどうかを確認しますmongod.service sudo systemctl start mongod.service sudo systemctl enable mongod.service mongod.serviceすることができます。 sudo systemctl enable mongod.serviceから、 sudo systemctl start mongod.service 。
公式ウェブサイトhttps://www.mongodb.com/try/download/compassからMongodbコンパスをインストールし、ローカルマシンで取得するための手順に従ってください。このツールは、データベースを簡単に管理するのに役立ちます。
git clone https://github.com/PlanetConectus/LoopBack4ReactAdminExample.git FrontreactadminとBackendLoopbackV4フォルダーの両方でecommerceフォルダー内に入り、コマンドnpm installのあるノードパッケージをインストールします。
このプロジェクトでは、同じローカルマシンのフロントエンドサーバーとバックエンドサーバーの両方を取得してこれを行うための複雑さを減らしようとしました。これを行うとLoopBack4ReactAdminExample/BackendLoopbackV4/ecommerce/src/index.tsファイルでループバック4サーバーのバインディングポートを3001に強制しました。
const app = new EcommerceApplication ( {
rest : {
port : 3001
}
} ) ;これは、2つのプロセスを同じ[IP:PORT]にバインドできないためです。この場合、バインディングIPはlocalhostとして知られています。このセットアップにより、このセットアップはナビゲーターによってCORS blocks 127.0.0.1 、この問題を解決します"proxy": "http://localhost:3001" LoopBack4ReactAdminExample/Frontreactadmin/ecommerce/package.json ：
{
.
.
.
. ,
"proxy" : "http://localhost:3001" , // <~~~ here we add the proxy field in package . json
.
.
.
}前のセクションで言及した変更を設定した後、サーバーの回転を開始し、 productまたはuser createおよびmodifyまたはdeleteのがどれほど簡単かを発見します
i-バックエンドサーバーを起動します
LoopBack4ReactAdminExample/BackendLoopbackV4/ecommerceを入力して、コマンドnpm start実行します
> node - r source - map - support / register .
Server is running at http :/ / [ :: 1 ] : 3001
Try http : // [ :: 1 ] : 3001 / pingii-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 .
`iii-アプリケーションをテストします
このリンクhttp://localhost:3000ブラウザにコピーして、React管理者アプリに入り、 productsとusers管理を開始します。
React Admin Applicationでは、 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をインポートして、アプリケーションがAPIからアイテムをどのように解決するかについて、すべての知りたいことがあります。
@paramとして@paramを使用するlb4Providerは、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管理者の詳細については、このリンクをフォローしてください：https：//marmelab.com/react-admin/readme.html
Site : https : //planetconectus . com
E - mail : mohamedali . chaabani @planetconectus . com
Phone : 00216 26 410 947
Phone : + 33 970 440 431
