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 端调试