JS Framework
ตั้งค่าและโฮสต์แอป Node.JS บนเซิร์ฟเวอร์ Back4App
12 นาที
โฮสต์แอปพลิเคชันเว็บ node js ของคุณบนเซิร์ฟเวอร์ back4app บทนำ บทช่วยสอนนี้อธิบายวิธีการตั้งค่าโดเมนย่อยและโฮสต์หน้าเว็บแบบสแตติกได้อย่างง่ายดาย หลังจากที่คุณทำตามคู่มือนี้เสร็จแล้ว คุณจะสามารถใช้แอป node js เพื่อลงทะเบียนและเข้าสู่ระบบผู้ใช้ได้ ข้อกำหนดเบื้องต้น ในการทำบทช่วยสอนนี้ให้เสร็จสมบูรณ์ คุณจะต้องมี หากคุณต้องการทดสอบแอปนี้ในเครื่องของคุณ คุณต้องติดตั้ง node js ในสภาพแวดล้อมท้องถิ่นของคุณ คุณสามารถทำตาม แอปที่สร้างด้วย back4app ดูที่ back4app command line ที่กำหนดค่าไว้กับโปรเจกต์ ทำตาม ก่อนอื่น มาพูดคุยเกี่ยวกับแอปพลิเคชันง่ายๆ ใหม่ของเรากัน! เราจะอธิบายตัวอย่างเกี่ยวกับการใช้งานการโฮสต์เว็บด้วย node js! ลองจินตนาการว่าเราต้องสร้างระบบเข้าสู่ระบบ ลงทะเบียน และขอรหัสผ่านจากผู้ใช้ที่รวมอยู่ในแดชบอร์ด back4app ของคุณ เราจะสามารถใช้ bootstrap, ไฟล์สแตติก (css และภาพ) และใช้ express ในโปรเจกต์ได้ ดูแอปสดที่นี่ nodeapplication back4app io คุณสามารถโคลนแอปพลิเคชันนี้ทั้งหมดได้ในเทมเพลตโค้ดแอปบนแพลตฟอร์ม back4app ที่นี่ ก่อนอื่น ให้ทำการตั้งค่าผ่านทาง command line interface ( ดูข้อกำหนดเบื้องต้น https //www back4app com/docs/js framework/node web server#content prerequisites ) เพื่อให้เข้าใจว่ามันจะทำงานอย่างไรกับโครงสร้างสุดท้ายจากไฟล์ 1 เปิดใช้งานชื่อซับโดเมนของคุณบน back4app โปรดเปิดใช้งานฟีเจอร์ web hosting ของคุณ โดยทำตามขั้นตอนที่มีในคู่มือต่อไปนี้ การเปิดใช้งาน web hosting และ live query ของคุณ 2 สร้างและอัปโหลดไฟล์ ก่อนเริ่มขั้นตอนนี้ เราขอแนะนำให้คุณใช้ command line tool ( ดูข้อกำหนดเบื้องต้น https //www back4app com/docs/js framework/node web server#content prerequisites ) เพื่ออัปโหลดไฟล์ของคุณได้อย่างง่ายดาย! เริ่มต้นด้วยการสร้างไฟล์ที่เรียกว่า app js app js และ package json package json ภายในไดเรกทอรีคลาวด์! ติดตั้งโมดูลใน back4app ภายในโฟลเดอร์คลาวด์ (ในเทอร์มินัลของคุณ) คุณต้องเขียน ตอนนี้ ให้แทรกโมดูล npm ‘body parser’ ลงในไฟล์ package json 1 { 2 "dependencies" { 3 "body parser" " " 4 } 5 } การแก้ไขปัญหา ไม่จำเป็นต้องรัน npm install npm install ภายในโฟลเดอร์คลาวด์ เพราะเซิร์ฟเวอร์ back4app จะติดตั้งโดยอัตโนมัติ app js 1 // ต้องการโมดูล 2 var bodyparser = require("body parser"); 3 4 // ตั้งค่าไดเรกทอรีมุมมอง 5 app set('views', dirname + '/views'); 6 app set('view engine', 'ejs'); 7 8 // ตั้งค่า body parser ให้กับแอปของคุณ 9 app use(bodyparser json()); 10 app use(bodyparser urlencoded({extended true})); 11 12 //ต้องการไฟล์ routes js 13 14 require(' /routes'); 3 สร้างมุมมองสำหรับแอปของคุณ เราจะจัดเตรียมไฟล์ ejs แบบฟอร์มเพื่อสร้างแอปแบบฟอร์ม คุณสามารถเปลี่ยนแปลงได้ทุกเมื่อที่คุณต้องการ ) กลับไปที่เทอร์มินัล ภายในไดเรกทอรี cloud จำเป็นต้องสร้างโฟลเดอร์ views และไฟล์ ejs ต่อไปนี้ head ejs head ejs เราจะใช้มันเพื่อเพิ่มเนื้อหาไปยังหัวของโครงสร้าง html index ejs index ejs เราจะใช้มันเพื่อสมัครสมาชิกและเข้าสู่ระบบผู้ใช้ reset password ejs reset password ejs เราจะใช้มันสำหรับผู้ใช้ที่ขอรีเซ็ตรหัสผ่าน คำแนะนำ เราจะสร้างมุมมองโดยใช้ bootstrap, คลิกที่นี่ เพื่ออ่านเพิ่มเติมเกี่ยวกับมัน คุณสามารถเพิ่มเนื้อหาไปยังมุมมองที่คุณเกี่ยวข้อง คุณสามารถใช้เทมเพลตด้านล่างได้โดยไม่มีปัญหา head ejs 1 \<title>back4app node js application\</title> 2 \<meta charset="utf 8"> 3 \<meta name="viewport" content="width=device width, initial scale=1"> 4 \<link rel="shortcut icon" type="image/png" href="/favicon png"/> 5 \<! bootstrap css > 6 \<link rel="stylesheet" href="https //maxcdn bootstrapcdn com/bootstrap/3 3 7/css/bootstrap min css" integrity="sha384 bvyiisifek1dgmjrakycuhahrg32omucww7on3rydg4va+pmstsz/k68vbdejh4u" crossorigin="anonymous"> 7 8 \<! jquery > 9 \<script src="https //cdnjs cloudflare com/ajax/libs/jquery/3 3 1/jquery min js">\</script> 10 11 \<! bootstrap js > 12 \<script src="https //maxcdn bootstrapcdn com/bootstrap/3 3 7/js/bootstrap min js" integrity="sha384 tc5iqib027qvyjsmfhjomalkfuwvxzxupncja7l2mcwnipg9mgcd8wgnicpd7txa" crossorigin="anonymous">\</script> 13 14 \<! stylesheet pages > 15 \<link rel="stylesheet" type="text/css" href="/css/style css"> index ejs 1 \<!doctype html> 2 \<html> 3 \<head> 4 <% include head ejs %> 5 \</head> 6 \<body> 7 \<section id="header"> 8 \<div class="container"> 9 \<div class="row"> 10 \<div class="col sm 6"> 11 \<div class="box settings box register"> 12 \<div class="wrap login100"> 13 \<form class="validate form" method="post" action="/users/register"> 14 \<h2 class="title screen"> 15 register a new account 16 \</h2> 17 \<div class="form group"> 18 \<input type="text" name="usernameregister" placeholder="username" class="form control" value="<%= infouser usernameregister %>"> 19 \</div> 20 \<div class="form group"> 21 \<input type="text" name="emailregister" placeholder="email" class="form control" value="<%= infouser emailregister %>"> 22 \</div> 23 \<div class="form group"> 24 \<input type="password" name="passwordregister" placeholder="password" class="form control" value="<%= infouser passwordregister %>"> 25 \</div> 26 <% if (registermessage != 'undefined' ? registermessage '' ) { %> 27 \<div class="alert alert <%= typestatus %>" role="alert"> 28 \<p><%= registermessage %>\</p> 29 \</div> 30 <% } %> 31 \<div class="form group"> 32 \<button class="btn login btn"> 33 register 34 \</button> 35 \</div> 36 \</form> 37 \</div> 38 \</div> 39 \</div> 40 \<div class="col sm 6"> 41 \<div class="box settings box login"> 42 \<div class="wrap login100"> 43 \<form class="validate form" method="post" action="/users/login"> 44 \<h2 class="title screen"> 45 access your account 46 \</h2> 47 \<div class="form group"> 48 \<input type="text" name="usernamelogin" placeholder="username" class="form control" value="<%= infouser usernamelogin %>"> 49 \</div> 50 51 \<div class="form group"> 52 \<input type="password" name="passwordlogin" placeholder="password" class="form control" value="<%= infouser passwordlogin %>"> 53 \</div> 54 <% if (loginmessage != 'undefined' ? loginmessage '' ) { %> 55 \<div class="alert alert <%= typestatus %>" role="alert"> 56 \<p><%= loginmessage %>\</p> 57 \</div> 58 <% } %> 59 \<div class="form group"> 60 \<button class="btn login btn"> 61 login 62 \</button> 63 \</div> 64 65 \<div class="text forgot"> 66 \<a href="/users/forgot password"> 67 forgot password? click here to retrive your access! 68 \</a> 69 \</div> 70 \</form> 71 \</div> 72 \</div> 73 \</div> 74 \</div> 75 \</div> 76 \</section> 77 \</body> 78 \</html> reset password ejs 1 \<!doctype html> 2 \<html> 3 \<head> 4 <% include head ejs %> 5 \</head> 6 \<body> 7 \<section id="header"> 8 \<div class="container"> 9 \<div class="row"> 10 \<div class="col sm offset 3 col sm 6" align="center"> 11 \<div class="box settings box password"> 12 \<div class="wrap login100"> 13 \<form class="validate form" method="post" action="/users/forgot password"> 14 \<h2 class="title screen"> 15 retrieve your access 16 \</h2> 17 \<p>insert your email address\</p> 18 \<div class="form group"> 19 \<input type="text" name="email" placeholder="email" class="form control" value="<%= infouser email %>"> 20 \</div> 21 <% if (resetpass != 'undefined' ? resetpass '' ) { %> 22 \<div class="alert alert <%= typestatus %>" role="alert"> 23 \<p><%= resetpass %>\</p> 24 \</div> 25 <% } %> 26 \<div class="form group"> 27 \<button class="btn login btn"> 28 reset password 29 \</button> 30 \</div> 31 \</form> 32 \</div> 33 \</div> 34 \</div> 35 \</div> 36 \</div> 37 \</section> 38 \</body> 39 \</html> 4 สร้างเส้นทางเพื่อแสดงมุมมอง ตอนนี้เราต้องกำหนดเส้นทางเพื่อแสดงมุมมองที่สร้างขึ้นก่อนหน้านี้ เส้นทางจะถูกสร้างขึ้นโดยใช้ express https //expressjs com/ 1 // index 2 app get('/', (req, res) => { 3 res render('index', {loginmessage '', registermessage '', typestatus '', infouser ''}); 4 }); 5 // request password 6 app get('/users/forgot password', (req, res) => { 7 res render('reset password', { resetpass '', typestatus '', infouser ''}); 8 }); คำแนะนำ ตามที่คุณเห็น เรากำลังตั้งค่าตัวแปรเป็นพารามิเตอร์ ซึ่งจะใช้เพื่อแสดงการแจ้งเตือนบนหน้าเว็บ 5 สร้างเส้นทางเพื่อบันทึกข้อมูลลงในฐานข้อมูลของคุณ เราจะใช้ คู่มือ parse server javascript https //docs parseplatform org/js/guide/ เป็นข้อมูลอ้างอิงในการพัฒนาฟังก์ชันสำหรับการลงทะเบียน, เข้าสู่ระบบ และขอรหัสผ่าน 1 // request the log in passing the email and password 2 app post('/users/login', async(req, res) => { 3 let infouser = req body; 4 5 try{ 6 let user = await parse user login(infouser usernamelogin, infouser passwordlogin) 7 res render('index', { loginmessage "user logged!", registermessage '', typestatus "success", infouser infouser }); 8 } catch (error){ 9 res render('index', { loginmessage error message, registermessage '', typestatus "danger", infouser infouser}); 10 } 11 }); 12 13 // register the user passing the username, password and email 14 app post('/users/register', async(req, res) => { 15 let infouser = req body; 16 let user = new parse user(); 17 18 user set("username", infouser usernameregister); 19 user set("password", infouser passwordregister); 20 user set("email", infouser emailregister); 21 22 try{ 23 await user signup(); 24 res render('index', { loginmessage '', registermessage "user created!", typestatus "success", infouser infouser}); 25 } catch (error) { 26 res render('index', { loginmessage '', registermessage error message, typestatus "danger", infouser infouser}); 27 } 28 }); 29 30 // request the password reset passing the email 31 app post('/users/forgot password', function(req, res) { 32 let infouser = req body; 33 try{ 34 await parse user requestpasswordreset(infouser email); 35 res render('reset password', { resetpass "check your email!", typestatus "success", infouser infouser}); 36 } catch (e){ 37 res render('reset password', { resetpass error message, typestatus "danger", infouser infouser}); 38 } 39 }); 6 เกือบเสร็จแล้ว! ไฟล์สแตติกในโฟลเดอร์สาธารณะ ยังไม่จบ! ในโฟลเดอร์สาธารณะ คุณสามารถใส่ไฟล์สแตติก เช่น css และภาพ เพื่อเรียกใช้สิ่งนี้ในมุมมอง ) เมื่อคุณเพิ่มไฟล์ css และภาพ คุณจะสามารถให้สไตล์ชีตที่แตกต่างกันกับเว็บไซต์ที่คุณสร้าง! 7 เสร็จสิ้น! จนถึงจุดนี้ คุณได้เรียนรู้วิธีสร้างแอปพลิเคชัน node js โดยใช้ cloud code อย่างยอดเยี่ยมแล้ว คลิกที่ ลิงก์นี้ เพื่อเข้าถึงโครงการทั้งหมดใน back4app ได้ตลอดเวลา ด้วยขั้นตอนที่อธิบายไว้ข้างต้น คุณจะสามารถทำงานกับการโฮสต์เว็บเมื่อใช้แอปพลิเคชัน node js!