用節點構建一個基本的CRUD應用程序-js教程-PHP中文網

用節點構建一個基本的CRUD應用程序

Jennifer Aniston

發布： 2025-02-15 08:26:12

原創

604 人瀏覽過

>該教程通過使用OKTA進行身份驗證來構建安全的React Frontend和Node.js後端應用程序。前端具有主頁和帖子經理，僅適用於經過身份驗證的用戶。後端為後創建和編輯執行身份驗證。 Okta的OpenID Connect（OIDC）處理身份驗證，利用前端上的Okta React SDK和後端上的Okta JWT驗證器。後端利用Express.js，續集進行數據建模，以及用於簡化REST API創建的結語。

Build a Basic CRUD App with Node and React

為什麼反應？

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和身份驗證 Build a Basic CRUD App with Node and React

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

Build a Basic CRUD App with Node and React 構建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

Build a Basic CRUD App with Node and React