用節點構建一個基本的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中文網其他相關文章！