Membina aplikasi crud asas dengan nod dan bertindak balas

Tutorial ini membimbing anda melalui membina aplikasi backend yang selamat dan node.js yang selamat menggunakan Okta untuk pengesahan. Frontend mempunyai laman utama dan pengurus jawatan, hanya boleh diakses untuk pengguna yang disahkan. Backend menguatkuasakan pengesahan untuk penciptaan pasca dan penyuntingan. Okta's OpenID Connect (OIDC) mengendalikan pengesahan, memanfaatkan Okta React SDK pada frontend dan Okta JWT Verifier di backend. Backend menggunakan Express.js, Sequel untuk pemodelan data, dan epilog untuk penciptaan API REST yang diselaraskan.

kenapa bertindak balas?

populariti React berpunca dari manipulasi DOM maya yang cekap, membolehkan kemas kini pantas. Penggunaan JSX, sintaks yang membolehkan HTML dalam JavaScript, memudahkan pembangunan dan meningkatkan kebolehbacaan berbanding dengan rendering JavaScript tradisional. Contoh ini menunjukkan sintaks ringkas JSX:

<code class="language-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>
);</code>

Kod JavaScript Plain bersamaan jauh lebih jelas:

<code class="language-javascript">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 })
  )
);</code>

Membina aplikasi React

Buat React App Streamlines React Development. Pasangnya menggunakan:

Ini melancarkan aplikasi lalai di

<code class="language-bash">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</code>

.

http://localhost:3000

menambahkan bahan UI dan pengesahan

bahan UI meningkatkan penampilan aplikasi. Pasangnya dengan:

termasuk font roboto dalam

:

<code class="language-bash">yarn add @material-ui/core@1.3.1 @material-ui/icons@1.1.0</code>

public/index.html Okta memudahkan pengesahan selamat. Buat akaun pemaju percuma dan tambahkan aplikasi satu halaman dalam konsol pemaju Okta anda, dengan mencatat UD pelanggan dan URL organisasi anda. Simpan ini dalam

:

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

.env.local Pasang SDK React SDK dan React OKTA:

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

Konfigurasi okta dalam

dan tambahkan penghalaan dalam

<code class="language-bash">yarn add @okta/okta-react@1.0.2 react-router-dom@4.3.1</code>

untuk mengendalikan pengesahan dan panggilan balik. Buat komponen

untuk menguruskan fungsi login/logout. Mengintegrasikan butang ini ke tajuk aplikasi anda. src/index.js src/App.js LoginButton

Membina backend node.js

Pasang kebergantungan backend:

<code class="language-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>
);</code>

Buat pelayan dalam src/server/index.js. Ini menetapkan Express, mengendalikan pengesahan JWT menggunakan Okta, mentakrifkan model sekuel untuk jawatan, dan menggunakan epilog untuk mewujudkan titik akhir rehat. Konfigurasikan package.json untuk menjalankan kedua -dua frontend dan backend secara serentak.

Menambah Pengurus Siaran

Pasang Borang Akhir React dan Pakej Berkaitan:

<code class="language-javascript">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 })
  )
);</code>

Buat komponen PostEditor untuk menguruskan jawatan individu dan halaman PostsManager untuk memaparkan dan berinteraksi dengan senarai pos. Mengintegrasikannya ke dalam penghalaan anda.

ujian dan pembelajaran selanjutnya

RUN Untuk menguji aplikasi lengkap. Kod sumber boleh didapati di yarn start https://www.php.cn/link/44f455185e5ae730f5e12534aaaa5e02 . Terokai sumber tambahan di blog pemaju Okta untuk menyelam yang lebih mendalam ke dalam React, Node.js, dan Okta.

Atas ialah kandungan terperinci Membina aplikasi crud asas dengan nod dan bertindak balas. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!