react app 端调试_在15分钟内为React App设置一个后端

react app 端调试

最近，我在Hackernoon上介绍了Directual（请参阅针对黑客的低码 ）。 现在，我想继续发表绝对实用的文章。 首先，我将展示结合Directual和React的一般方案，然后您将找到从头构建应用程序到可用于生产就绪的Docker容器的现场演示。

用于构建后端的低代码方法

快速回顾。 由于后端部分，开发经常会卡住。 更新API方法，设置身份验证并弄乱基础架构花费的时间太长。 有一种方法可以使其更简单。 Directual提供了用于为您的应用配置整个后端的可视化工具。 它包括云数据库，API构建器，基于角色的帐户控制，工作流自动化和集成功能。 这种可视化方法称为低码。

为什么要React？

我们并没有因为“流行”而使用任何技术。 我们应该Swift有效地解决问题。 没有用于构建前端的任何代码平台，但是如果您需要相当复杂的界面，那么使用React是最佳选择。 干净，灵活，快速。 根据StateofJS的最新研究 ，React是最受信任的JS库：

React + Directual

使用Directual，您可以在15分钟内设置整个后端，然后，如果需要对数据库或API进行任何更改，则几乎可以立即进行更改。

使用者介面（UI）

像过去一样随意构建UI组件：类，钩子等。在那里，您可以在组件中使用以下Directual功能：

• 身份验证方法：登录，注销，身份验证上下文等；
• 从数据库中获取数据；
• 将数据发布到数据库中。

看一下这些代码模式：

import Directual from 'directual-api' ;
import { useAuth } from '../auth' // auth.js is a React-wrapper for directual-api authentication methods
//...
const api = new Directual({ apiHost : '/' })
const auth = useAuth();
//...
const dataStructure = '' // todo: insert here Sysname of your data structure
const endpoint = '' // todo: insert here Method name of your API-endpoint
//...
// Auth context:
auth.user // returns user ID
auth.sessionID // returns user session ID
auth.isAutorised() // returns true if user is authorised
auth.hasRole( 'role' ) // returns true if user.role == 'role' (see user management further)
//...
// GET request:
function getData ()  {
    api
      // Name of Data structure (table) in the Database
      .structure(dataStructure)
      // GET request + query params (sessionID)
      .getData(endpoint, { sessionID : auth.sessionID})
      // other possible query params: page, pageSize, sort and any custom parameter for Filtering
      .then( ( response ) => {
        // handling response
      })
      .catch( ( e ) => {
        // handling errors
      })
  }
//...
// POST-request:
let payload = {} // Request payload
function postData ()  {
    api
      // Name of Data structure (table) in the Database
      .structure(dataStructure)
      // POST request + payload + query params
      .setData(endpoint, payload, { sessionID : auth.sessionID })
      .then( ( response ) => {
        // handling response
      })
      .catch( ( e ) => {
        // handling errors
      })
  }
//...

低代码云后端

现在，让我们看看如何在Directual上设置数据库，API端点和工作流。 首先，您需要一个帐户 -免费，直到该应用程序不会产生大量负载（每月最多1万个请求）为止。

数据库

有表（ 数据结构 ）。 每个数据结构都包含对象 。

每个数据结构都可以配置以下字段类型：字符串，数字，十进制，布尔值，json，数组，链接和arrayLink。

有特定的系统数据结构。 一开始对我们来说至关重要的是App用户（系统名称WebUsers ）。 它的对象是您的应用程序的用户。 属性id是用户名， password是加密用户的密码。 属性role可用于基于角色的安全性和应用程序中的特定功能（请参阅上面的代码片段中的.hasRole方法）。

这是有关在Directual上配置数据库的简短视频教程：

API构建器

API层是数据库和UI之间的必需介质。 每个API方法都必须提供基于用户安全性的数据。 对于每个API端点，您都将设置数据结构，以及可用于GET和POST请求的属性列表。

工作流程（场景）

任何重要的应用程序都需要后端逻辑。 有一些直接方案可以实时和按计划处理数据。 基本方案步骤只是对象下的操作，因此这些步骤非常通用。 这些方案还可以通过API将您的应用程序后端与第三方系统集成。

定向React模块

Directual React Module包含两个文件：

• auth.js提供以下方法： .user ， .sessionID ， .isAutorised()和.hasRole() 。
• setupProxy.js创建指向directual-api中间件代理，以解决与CORS关联的问题。 我们需要安装http-proxy-middleware软件包。

另外，您还需要在根目录中具有.env文件。 此文件必须包含直接应用ID： APP_ID=_YOUR_APP_ID_

您可以在平台的API部分中找到（或创建）您的App ID：

现场演示

我希望我的朋友能够向我推荐电影。 因此，该应用程序解决了该问题。 有“观看”和“观看”电影列表以及用于提交推荐的表格（需要登录）。 结果是MyMovieList ， 在GitHub上找到其代码。

我们将介绍：

• 基于直接样板代码引导React应用;
• 使用React钩子来处理状态；
• 建立身份验证和专用路由；
• 在Directual中配置数据库和所需的API；
• 从数据库获取数据/向数据库发布数据；
• 连接第三方API以丰富数据；
• 将我们的产品构建并打包到Docker容器中。

我已经记录了整个开发过程。 花费了2小时53分钟，没有任何绒毛。 我试图将其编写为面向初学者的教程，所以我什么也没做。 如果您是经验丰富的前端开发人员，则可以考虑观看所有细节，这有些无聊，因此，请使用Youtube上的时间戳。

希望对您有用！ 我很高兴收到反馈。

翻译自: https://hackernoon.com/setting-up-a-backend-for-react-app-in-15-minutes-yg1n3wmd

react app 端调试