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 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