LoopBack4ReactAdminExample

ตัวอย่างตัวอย่าง Backoffice และ API Generator 2020

รหัสน้อยลงและสถาปัตยกรรมที่ยืดหยุ่นสำหรับนักพัฒนามือถือที่ต้องการพัฒนาเว็บได้อย่างง่ายดายสำหรับ บริษัท ที่ต้องการสถาปัตยกรรมที่ง่ายที่ประหยัดเงินและเวลาไม่จำเป็นต้องใช้นักพัฒนา Back End อีกต่อไปในปี 2020 เพียงต้องการนักพัฒนาส่วนหน้าหากคุณมีเว็บแอปพลิเคชันหากคุณต้องการพัฒนาเว็บ ความสงบของเค้ก

React Admin และ Loopback 4 ตัวอย่าง CRUD

เริ่มต้น

นี่คือตัวอย่างที่มี React Admin และ Loopback4 เพื่อใช้การดำเนินการ CRUD กับ products และ users โดยขอ APIs กับผู้ให้บริการ LoopBack4 ที่คุณสามารถติดตั้งด้วย npm install react-admin-loopback4-adapted

การติดตั้ง

ติดตั้ง Node 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

ติดตั้งตัวจัดการแพ็คเกจโหนดด้วยคำสั่ง sudo apt install npm และตรวจสอบเวอร์ชัน npm ด้วย npm -v

การตั้งค่า MongoDB

ติดตั้ง MongoDB จากเว็บไซต์อย่าง MongoDB 4.4 https://docs.mongodb.com/manual/tutorial/install-mongodb-on-ubuntu/

หมายเหตุ : หากมีข้อผิดพลาดเกิดขึ้นเมื่อคุณพยายามเปิดคอนโซล MongoDB ด้วยคำสั่ง mongo ตรวจสอบว่า mongod.service อยู่ในสถานะที่ใช้งานอยู่กับคำสั่ง sudo systemctl status mongod.service mongod.service สามารถ sudo systemctl start mongod.service ใช้งาน mongod.service ด้วยคำสั่ง sudo systemctl enable mongod.service จากนั้น sudo systemctl start mongod.service

การตั้งค่าเข็มทิศ MongoDB

ติดตั้ง MongoDB Compass จาก https://www.mongodb.com/try/download/compass อย่างเป็นทางการ

ติดตั้งการอ้างอิง

หลังจากโคลนนิ่งโครงการด้วย git clone https://github.com/PlanetConectus/LoopBack4ReactAdminExample.git เข้ามาในโฟลเดอร์ ecommerce ทั้งในโฟลเดอร์ Frontreactadmin และโฟลเดอร์ BackendLoopbackV4 และ 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 โดย Navigator ของคุณเพื่อแก้ปัญหานี้เราใช้ "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 เป็นเรื่องง่ายเพียงใด

ฉันเริ่มเซิร์ฟเวอร์แบ็กเอนด์

รับใน 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 ไปยังเบราว์เซอร์ของคุณเพื่อรับในแอพ Admin React และเริ่มจัดการ products และ users

แอปพลิเคชันไฟล์แอปพลิเคชัน

ในแอปพลิเคชันผู้ดูแลระบบ 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 คุณจะพบสิ่งที่คุณต้องการทราบเกี่ยวกับวิธีที่แอปพลิเคชันแก้ไขรายการจาก APIs โดยการนำเข้าโมดูล 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