כיצד ליצור חזית מגיב ו- backend של Node / Express ולחבר אותם

תִכנוּת

במאמר זה אדריך אתכם בתהליך יצירת אפליקציית React פשוטה וחיבורה ל- API פשוט של Node / Express אותו גם ניצור.

לא אפרט הרבה על אופן העבודה עם אחת הטכנולוגיות שאזכיר בהדרכה זו, אך אשאיר קישורים, למקרה שתרצה ללמוד עוד.

אתה יכול למצוא את כל הקוד במאגר זה שהכנתי לצורך ההדרכה.

המטרה כאן היא לתת לך מדריך מעשי כיצד להגדיר ולחבר את לקוח הקצה ואת ממשק ה- API האחורי .

לפני שנתלכלך על הידיים, וודא שה- Node.js פועל במחשב שלך.

צור את ספריית הפרויקט הראשי

במסוף שלך, נווט לספרייה שבה ברצונך לשמור את הפרויקט שלך. עכשיו צור ספריה חדשה עבור הפרויקט שלך ונווט לתוכו:

mkdir my_awesome_project cd my_awesome_project

צור אפליקציית תגובה

התהליך הזה ממש פשוט.

אני אשתמש באפליקציית יצירה-תגובה של פייסבוק כדי ... ניחשתם נכון, צרו בקלות אפליקציית תגובה בשם לקוח :

npx create-react-app client cd client npm start

בואו נראה מה עשיתי:

  1. השתמש ב- npx של npm כדי ליצור אפליקציה מגיבה ושמה לקוח.
  2. cd (שינוי ספריה) לספריית הלקוח.
  3. התחיל את האפליקציה.

בדפדפן שלך, נווט אל // localhost: 3000 /.

אם הכל בסדר, תראה את דף קבלת הפנים. מזל טוב! המשמעות היא שיש לך כעת יישום React בסיסי הפועל במחשב המקומי שלך. קל נכון?

כדי לעצור את אפליקציית התגובה שלך, פשוט לחץ Ctrl + cעל המסוף שלך.

צור אפליקציית אקספרס

אוקי, זה יהיה פשוט כמו הדוגמה הקודמת. אל תשכח לנווט לתיקייה העליונה של הפרויקט.

אני אשתמש במחולל היישומים האקספרס כדי ליצור במהירות שלד יישום ולקרוא לו שם API:

npx express-generator api cd api npm install npm start

בואו נראה מה עשיתי:

  1. השתמש ב- npm של npm להתקנת מחולל אקספרס ברחבי העולם.
  2. השתמשו בגנרטור אקספרס ליצירת אפליקציית אקספרס וכינו אותה api.
  3. תקליטור לספריית ה- API.
  4. הותקן כל התלות.
  5. התחיל את האפליקציה.

בדפדפן שלך, נווט אל // localhost: 3000 /.

אם הכל בסדר, תראה את דף קבלת הפנים המפורש. מזל טוב! זה אומר שיש לך כעת יישום אקספרס בסיסי הפועל במחשב המקומי שלך. קל נכון?

כדי לעצור את אפליקציית התגובה שלך, פשוט לחץ Ctrl + cעל המסוף שלך.

קביעת תצורה של מסלול חדש בממשק ה- API

בסדר, בואו ללכלך את הידיים. הגיע הזמן לפתוח את עורך הקודים המועדף עליכם (אני משתמש בקוד VS) ולנווט לתיקיית הפרויקט שלכם.

אם שמנת את אפליקציית התגובה כלקוחה ואת האפליקציה המהירה כ- API , תמצא שתי תיקיות עיקריות: לקוח ו- API.

  1. בתוך ספריית ה- API , עבור אל bin / www ושנה את מספר היציאה בשורה 15 מ 3000 ל- 9000. בהמשך נפעיל את שתי האפליקציות בו זמנית, לכן פעולה זו תמנע בעיות. התוצאה צריכה להיות משהו כזה:

2. ב- API / מסלולים , צור קובץ testAPI.js והדבק קוד זה:

var express = require(“express”); var router = express.Router(); router.get(“/”, function(req, res, next) { res.send(“API is working properly”); }); module.exports = router;

3. בקובץ api / app.js , הכנס מסלול חדש בשורה 24:

app.use("/testAPI", testAPIRouter);

4. אוקי, אתה "אומר" להביע שימוש במסלול זה, אך אתה עדיין צריך לדרוש זאת. בואו נעשה את זה בשורה 9:

var testAPIRouter = require("./routes/testAPI");

השינויים היחידים הם בשורה 9 ובשורה 25. זה אמור להסתיים בערך כך:

5. מזל טוב! יצרת מסלול חדש.

אם תפעיל את אפליקציית ה- API שלך (במסוף שלך, תעבור לספריית ה- API ו"התחל npm " ) ותעבור אל // localhost: 9000 / testAPI בדפדפן שלך, תראה את ההודעה: API פועל כראוי.

חיבור לקוח תגובה לממשק ה- API

  1. בעורך הקוד שלך, בוא נעבוד בספריית הלקוחות . Open app.js קובץ הממוקם my_awesome_project / לקוח / app.js .
  2. כאן אשתמש ב- Fetch APIכדי לאחזר נתונים מה- API. פשוט הדבק קוד זה לאחר הצהרת הכיתה ולפני שיטת העיבוד:
constructor(props) { super(props); this.state = { apiResponse: "" }; } callAPI() { fetch("//localhost:9000/testAPI") .then(res => res.text()) .then(res => this.setState({ apiResponse: res })); } componentWillMount() { this.callAPI(); }

3. בתוך שיטת העיבוד תמצאו תג < ; p>. בואו נשנה את זה כך שיעבד את התגובה apiRes :

;{this.state.apiResponse}

בסוף, קובץ זה אמור להיראות כך:

אני יודע!!! זה היה קצת יותר מדי. העתק הדבק הוא חבר שלך, אבל אתה צריך להבין מה אתה עושה. בוא נראה מה עשיתי כאן:

  1. בשורות 6 עד 9 הכנסנו קונסטרוקטור שמאתחל את מצב ברירת המחדל.
  2. בשורות 11 עד 16 הכנסנו את השיטה callAPI () שתביא את הנתונים מממשק ה- API ותאחסן את התגובה ב- this.state.apiResponse.
  3. בשורות 18 עד 20, הכנסנו שיטת מחזור חיים תגובה הנקראת componentDidMount (), שתבצע את שיטת callAPI () לאחר הרכבת הרכיב.
  4. אחרון, בשורה 29, השתמשתי בתג < ; p> כדי להציג פסקה בעמוד הלקוח שלנו, עם הטקסט שאחזרנו מה- API.

מה לעזאזל !! CORS?

הו כן מותק! כמעט סיימנו. אך אם נפעיל את שתי האפליקציות שלנו (לקוח ו- API) וננווט אל // localhost: 3000 /, עדיין לא תמצא את התוצאה הצפויה המוצגת בדף. אם תפתח כלים לפיתוח כרום, תגלה מדוע. במסוף תראה שגיאה זו:

הטעינה נכשלה // localhost: 9000 / testAPI: לא נמצא כותרת 'בקרת גישה-אפשר-מקור' על המשאב המבוקש. לכן מקור גישה '// localhost: 3000' אינו מורשה. אם מענה אטום משרת את צרכיך, הגדר את מצב הבקשה ל'לא-קורס 'כדי להביא את המשאב עם CORS מושבת.

זה פשוט לפתרון. עלינו רק להוסיף CORS ל- API שלנו כדי לאפשר בקשות מקוריות. בואו נעשה בדיוק את זה. כדאי לבדוק כאן כדי לברר פרטים נוספים על CORS.

  1. במסוף שלך נווט לספריית ה- API והתקן את חבילת CORS :
npm install --save cors

2. בעורך הקוד שלך עבור לספריית ה- API ופתח את הקובץ my_awesome_project / api / app.js.

3. על קו 6 דורשים CORS:

var cors = require("cors");

4. עכשיו בשורה 18 "ספר" אקספרס להשתמש ב- CORS :

app.use(cors());

הקובץ API app.js אמור בסופו של דבר להיות כזה:

עבודה נהדרת. הכל נעשה !!

בסדר! כולנו מסודרים!

כעת הפעל את שתי האפליקציות שלך (לקוח ו- API), בשני מסופים שונים, באמצעות הפקודה npm start .

אם תנווט אל // localhost: 3000 / בדפדפן שלך, עליך למצוא משהו כזה:

כמובן, הפרויקט הזה כמו שהוא לא יעשה הרבה, אלא הוא ההתחלה של יישום Full Stack. אתה יכול למצוא את כל הקוד במאגר זה שיצרתי עבור ההדרכה.

לאחר מכן, אעבוד על מספר מדריכים משלימים, כמו כיצד לחבר זאת למסד נתונים של MongoDB ואפילו, כיצד להריץ את הכל בתוך מכולות Docker.

כמו שחבר טוב שלי אומר:

להיות חזק ולקודד !!!

... ואל תשכח להיות מדהים היום;)