LoopBack4ReactAdminExample

示例示例向後和API發電機2020

Less Code and Flexible Architecture for a Mobile Developer who want to develop Web Easily , for companies who want an easy architecture that save money and time No more need for Back End Developer at 2020, Only Need a Front End Developer If you have a Web Application If you want only an API (Web Services & BackOffice) no need for neither a Front End Developer or a BackEnd Developer you can just CLic on Watch & Star We will Share many UseCases that simplify Web Development after this Web Development will be a peace of 蛋糕。

React Admin和Loopback 4 Crud樣本

入門

這是一個帶有React Admin和Loopback4的示例，可以通過請求使用Loopback4提供商API來實現對products和users CRUD操作，您可以使用npm install react-admin-loopback4-adapted 。

安裝

使用NVM安裝節點v12.18.3

請按照說明在本地計算機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

使用命令sudo apt install npm節點軟件包管理器，並使用npm -v檢查NPM版本。

設置MongoDB

從官方網站https://docs.mongodb.com/manual/tutorial/install-mongodb-on-ubuntu/安裝mongoDB，並遵循指南以獲取最終版本MongoDB 4.4 。

注意： mongod.service您嘗試使用命令sudo systemctl status mongod.service mongo mongod.service sudo systemctl start mongod.service sudo systemctl enable mongod.service ，然後sudo systemctl start mongod.service 。

設置MongoDB指南針

從官方網站https://www.mongodb.com/try/download/compass安裝MongoDB Compass，並按照說明在本地機器上獲取該說明。該工具可幫助您輕鬆管理數據庫。

安裝依賴項

用git clone https://github.com/PlanetConectus/LoopBack4ReactAdminExample.git將項目克隆後。 GIT進入Frontreactadmin和BackendLoopbackV4文件夾中的ecommerce文件夾，並安裝NPM npm install 。

啟動應用程序

在此項目中，我們試圖降低您在同一本地機器中獲得前端服務器和後端服務器的複雜性，以執行此操作，我們將loopback4服務器的綁定端口迫使3001 LoopBack4ReactAdminExample/BackendLoopbackV4/ecommerce/src/index.ts文件：

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

這是因為您不能將兩個過程綁定到相同的[IP:PORT] ，在我們的情況下，綁定的IP為127.0.0.1它被稱為localhost ，此設置將導致導航器的CORS blocks ，以解決此問題，我們使用集成節點Proxy通過添加此線路"proxy": "http://localhost:3001" LoopBack4ReactAdminExample/Frontreactadmin/ecommerce/package.json ：

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

啟動服務器

設置了我們在上一節中提到的更改後，我們開始轉動服務器，發現create和modify或delete product或user容易

i-啟動後端服務器

進入LoopBack4ReactAdminExample/BackendLoopbackV4/ecommerce並運行命令npm start

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

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

ii-啟動前端服務器

進入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 Admin應用程序並開始管理products和users 。

應用程序文件app.js

在React Admin應用程序中， 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的所有內容
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/reaeact-admin/readme.html

接觸

如果您有任何疑問或想對我們的服務有優勢，請與我們聯繫

 Site : https : //planetconectus . com

E - mail : mohamedali . chaabani @planetconectus . com

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