در این آموزش، ما در مورد نحوه ایجاد یک برنامه کاربردی ساده با کامپوننت frontend و backend در Typescript صحبت خواهیم کرد.
قسمت جلویی با استفاده از Next.JS 13.4 (با نسخه جدید ایجاد خواهد شد /app روتر) در حالی که باطن از Node.JS استفاده می کند.
پیش نیاز Node.JS
ابتدا مطمئن شوید که Node.JS را روی لپ تاپ خود نصب کرده اید.
برای تأیید، اجرا کنید:
node --version
و این باید نسخه Node فعلی را به شما بدهد، به عنوان مثال v18.14.2.
اگر نه، توصیه می کنم آن را از طریق Node Version Manager (NVM) نصب کنید تا بتوانید نسخه های جدید Node را به راحتی نصب کنید. برای مثال در لینوکس،
curl https://raw.githubusercontent.com/creationix/nvm/master/install.sh | bash # install the node version manager (nvm)
source ~/.bashrc # restart the Terminal so we can load the nvm environment
nvm install 18
یا این دستورالعمل نصب را بررسی کنید.
پس از آن، به روز رسانی نسخه NPM خود که مدیر بسته Node برای بسته های NPM شما است نیز می تواند مفید باشد:
npm install -g npm@latest
هدف ساختار فایل
هدف ما ایجاد ساختار فایل frontend و backend به شرح زیر است:
📦my-app
┣ 📂backend
┃ ┣ 📜index.js
┃ ┣ 📜package.json
┃ ┗ 📜yarn.lock
┗ 📂frontend
┃ ┣ 📂src
┃ ┃ ┗ 📂app
┃ ┃ ┃ ┣ 📜favicon.ico
...
در این مرحله یک پوشه با نام ایجاد کنید my-app.
Frontend
در my-app/ دایرکتوری، برنامه Next.JS را ایجاد کنید:
npx create-next-app@latest
وقتی از شما خواسته شد این تنظیمات من هستند:
در تازه ایجاد شده frontend/ دایرکتوری، برنامه را با استفاده از:
npm run dev
شما این صفحه را در URL http://localhost:3000 خواهید دید:
ما می توانیم شروع به ایجاد تغییرات در پرونده کنیم frontend/src/app/page.tsx به صفحه ساده زیر:
export default function Home() {
return <main>Hello world</main>;
}
با باز کردن دوباره همان صفحه، خسته کننده را خواهیم دید:
اکنون می توانید تغییراتی در این صفحه ایجاد کنید!
Backend
یک پوشه جدید در my-app/، با عنوان backend/.
این را در backend/ فهرست راهنما:
npm init -y
که یک پروژه NPM ساده برای شما ایجاد می کند. اجازه دهید چند بسته ساده را دوباره نصب کنیم backend/:
npm i cors @types/cors nodemon ts-node express @types/express
ما در اینجا از nodemon استفاده می کنیم تا بتوانیم فایل های پشتیبان را ویرایش کنیم و تغییرات را به طور خودکار بدون نیاز به رفرش صفحه اعمال کنیم. در قسمت جلو، این کار به طور خودکار انجام می شود.
و سپس یک فایل جدید اضافه کنید index.ts داخل backend/:
import express from "express";
import cors from "cors";
// Create express app
const app = express();
app.use(express.json());
app.use(cors());
app.get("/helloText", (req, res) => {
res.send({ myResponse: "Hello World!" });
});
app.listen(8000, () => {
console.log(`Server is running on port ${8000}`);
});
من همچنین توصیه می کنم این را اضافه کنید start خط زیر scripts که در backend/package.json:
...
"scripts": {
"start": "nodemon index.ts",
"test": "echo \"Error: no test specified\" && exit 1"
},
...
اکنون می توانید برنامه را با استفاده از:
npm start
با رفتن به http://localhost:8000/helloText، می‌توانیم Backend را به صورت زنده و ارسال داده‌ها مشاهده کنیم:
اتصال جلو و باطن
اکنون، ما به سادگی برخی از داده ها را از باطن پرس و جو می کنیم و آن را در قسمت جلویی نمایش می دهیم.
ما محتویات را تغییر می دهیم frontend/src/app/page.tsx به موارد زیر:
"use client";
import { useEffect, useState } from "react";
export default function Home() {
const [data, setData] = useState("");
// fetch data from API
useEffect(() => {
fetch("http://localhost:8000/helloText")
.then((res) => res.json())
.then((data) => setData(data));
});
return <main>{`Hello world: ${JSON.stringify(data)}`}</main>;
}
توجه داشته باشید که ما از رندر کلاینت (“استفاده از مشتری”) در اینجا استفاده می کنیم زیرا از قلاب های React استفاده می کنیم.
با بازخوانی صفحه با هر دو قسمت جلویی و باطن در حال اجرا، داده های باطن را مشاهده می کنیم:
همین! موفق باشید!
بیانیه بندر امن
اطلاعات ارائه شده در این کانال/مقاله/داستان صرفاً برای مقاصد اطلاعاتی در نظر گرفته شده است و نمی توان از آن به عنوان بخشی از هیچ قرارداد قراردادی استفاده کرد. محتوا تحویل هیچ ماده، کد یا عملکردی را تضمین نمی کند و نباید تنها مبنای تصمیم گیری خرید باشد. پست های این سایت متعلق به من است و لزوماً منعکس کننده دیدگاه ها یا کارهای Oracle یا Mythics, LLC نیست.
این اثر تحت مجوز یک مجوز بین المللی Creative Commons Attribution 4.0.
