用节点构建一个基本的CRUD应用程序

>该教程通过使用OKTA进行身份验证来构建安全的React Frontend和Node.js后端应用程序。 前端具有主页和帖子经理，仅适用于经过身份验证的用户。后端为后创建和编辑执行身份验证。 Okta的OpenID Connect（OIDC）处理身份验证，利用前端上的Okta React SDK和后端上的Okta JWT验证器。 后端利用Express.js，续集进行数据建模，以及用于简化REST API创建的结语。

为什么反应？

React的受欢迎程度源于其有效的虚拟DOM操纵，从而可以快速更新。 与传统的JavaScript渲染相比，它使用JSX（一种允许HTML的语法允许HTML）简化了可读性并增强了可读性。 此示例演示了JSX的简明语法：

等效的普通JavaScript代码更为详细：

const Form = () => (
  <form>
    <label>Name</label><input value="Arthur Dent" />
    <label>Answer to life, the universe, and everything</label><input type="number" value={42} />
  </form>
);

构建React App

const Form = () => React.createElement(
  "form",
  null,
  React.createElement(
    "label",
    null,
    "Name",
    React.createElement("input", { value: "Arthur Dent" })
  ),
  React.createElement(
    "label",
    null,
    "Answer to life, the universe, and everything",
    React.createElement("input", { type: "number", value: 42 })
  )
);

创建React App Champlines React Development。使用：

安装它

这将启动default App

>。

npm i -g create-react-app@1.5.2 yarn@1.7.0
create-react-app my-react-app
cd my-react-app
yarn start

>

http://localhost:3000

添加材料UI和身份验证

材料UI增强了应用程序的外观。安装它：

包括

中的roboto字体：

yarn add @material-ui/core@1.3.1 @material-ui/icons@1.1.0

>

OKTA简化了安全的身份验证。创建一个免费的开发人员帐户，并在Okta开发人员控制台中添加单页应用程序，并指出您的客户ID和组织URL。 将它们存储在public/index.html>中：

<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500">

安装Okta的React SDK和React Router：> .env.local

>在

<code>REACT_APP_OKTA_CLIENT_ID={yourClientId}
REACT_APP_OKTA_ORG_URL=https://{yourOktaDomain}</code>

中配置Okta，然后在

中添加路由来处理身份验证和回调。 创建一个

组件来管理登录/注销功能。 将此按钮集成到您的应用程序标题中。

yarn add @okta/okta-react@1.0.2 react-router-dom@4.3.1

src/index.js src/App.js LoginButton

构建node.js后端 >安装后端依赖项：

const Form = () => (
  <form>
    <label>Name</label><input value="Arthur Dent" />
    <label>Answer to life, the universe, and everything</label><input type="number" value={42} />
  </form>
);

在src/server/index.js中创建服务器。这可以设置Express，使用OKTA处理JWT验证，定义了帖子的续集模型，并使用结语来创建REST端点。 配置package.json以同时运行前端和后端。

>

添加帖子经理

安装react最终表格和相关软件包：

const Form = () => React.createElement(
  "form",
  null,
  React.createElement(
    "label",
    null,
    "Name",
    React.createElement("input", { value: "Arthur Dent" })
  ),
  React.createElement(
    "label",
    null,
    "Answer to life, the universe, and everything",
    React.createElement("input", { type: "number", value: 42 })
  )
);

创建用于管理单个帖子的组件和PostEditor页面以显示和与帖子列表进行交互。 将它们集成到您的路由中。PostsManager

测试和进一步的学习

>运行

测试完整的应用程序。源代码可在yarn start> https://www.php.cn/link/44f455185e5e5e730f5e12534aaaaaaaaaaaaaa5e02中获得。 在Okta开发人员博客上探索其他资源，以深入研究React，Node.js和Okta。

以上是用节点构建一个基本的CRUD应用程序的详细内容。更多信息请关注PHP中文网其他相关文章！