LoopBack4ReactAdminExample
1.0.0
2020 년에 백엔드 개발자가 필요하지 않은 비용과 시간을 절약 할 수있는 쉬운 아키텍처를 원하는 회사를 위해 웹을 쉽게 개발하고자하는 모바일 개발자를위한 코드 및 유연한 아키텍처가 적습니다. API (웹 서비스 및 백 오피스) 만 원한다면 프론트 엔드 개발자 만 필요하지 않으면 프론트 엔드 개발자 만 필요하지 않으면 프론트 엔드 개발자 나 백엔드 개발자가 필요하지 않으면 Weke & Star가 공유 할 수있는 많은 Web Conformances가 될 것입니다. 케이크.
이는 npm install react-admin-loopback4-adapted 와 함께 설치할 수 있도록 Loopback4 제공 업체와 함께 API를 요청하여 products 및 users 에 대한 CRUD 작업을 구현하기위한 React Admin 및 Loopback4가있는 샘플입니다.
로컬 컴퓨터에서 노드를 얻으려면 지침 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 Mongod.service sudo systemctl status mongod.service 명령으로 mongod.service가 활성 상태인지 mongod.service 를 활성화하려면 mongod.service를 활성화 할 수 있다면 mongod.service를 활성화 할 수 있다면 mongod.service 를 활성화하려면 mongod.service를 활성화하려면 mongod.service sudo systemctl start mongod.service 으로 사용하려면 다음과 같은 정서 sudo systemctl enable mongod.service 사용하여 Outcistue를 사용하여 mongod.service 활성화 할 수 있습니다. sudo systemctl enable mongod.service sudo systemctl start mongod.service .
공식 웹 사이트 https://www.mongodb.com/try/download/compass 에서 MongoDB Compass를 설치하고 지침을 따라 로컬 컴퓨터에서 가져 오십시오.이 도구를 사용하면 데이터베이스를 쉽게 관리 할 수 있습니다.
git clone https://github.com/PlanetConectus/LoopBack4ReactAdminExample.git 로 프로젝트를 복제 한 후 Frontreactadmin 및 BackendLoopbackV4 폴더의 ecommerce 폴더 내부에 들어가서 npm install 사용하여 Node 패키지를 설치하십시오.
이 프로젝트에서는 동일한 로컬 컴퓨터에서 Frontend Server와 백엔드 서버를 모두 LoopBack4ReactAdminExample/BackendLoopbackV4/ecommerce/src/index.ts 파일에서 3001 로 강제로 강제로 제공 할 수 있도록 복잡성을 줄이려고 노력했습니다.
const app = new EcommerceApplication ( {
rest : {
port : 3001
}
} ) ; 이 경우 두 프로세스를 동일한 [IP:PORT] 에 바인딩 할 수 없기 때문에, 우리의 경우 바인딩 IP는 127.0.0.1 localhost 로 알려져 있습니다.이 설정은 네비게이터에 의해 CORS blocks 유발합니다.이 문제를 해결 하여이 라인을 "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- 프론트 엔드 서버를 시작하십시오
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 관리를 시작하십시오.
RECT 관리자 응용 프로그램에서 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에서 항목을 해결하는 방법에 대해 알고 싶은 모든 것을 찾을 수 있습니다.
백엔드 서버 http://localhost:3001 에 @param으로 URL을 취하는 lb4Provider :
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 : 00216 26 410 947
Phone : + 33 970 440 431
