ตั้งค่าและโฮสต์แอป Node.JS บนเซิร์ฟเวอร์ Back4App

โฮสต์แอปพลิเคชันเว็บ node js ของคุณบนเซิร์ฟเวอร์ back4app บทนำ บทช่วยสอนนี้อธิบายวิธีการตั้งค่าโดเมนย่อยและโฮสต์หน้าเว็บแบบสแตติกได้อย่างง่ายดาย หลังจากที่คุณทำตามคู่มือนี้เสร็จแล้ว คุณจะสามารถใช้แอป node js เพื่อลงทะเบียนและเข้าสู่ระบบผู้ใช้ได้ ข้อกำหนดเบื้องต้น ในการทำบทช่วยสอนนี้ให้เสร็จสมบูรณ์ คุณจะต้องมี หากคุณต้องการทดสอบแอปนี้ในเครื่องของคุณ คุณต้องติดตั้ง node js ในสภาพแวดล้อมท้องถิ่นของคุณ คุณสามารถทำตาม แอปที่สร้างด้วย back4app ดูที่ back4app command line ที่กำหนดค่าไว้กับโปรเจกต์ ทำตาม ก่อนอื่น มาพูดคุยเกี่ยวกับแอปพลิเคชันง่ายๆ ใหม่ของเรากัน! เราจะอธิบายตัวอย่างเกี่ยวกับการใช้งานการโฮสต์เว็บด้วย node js! ลองจินตนาการว่าเราต้องสร้างระบบเข้าสู่ระบบ ลงทะเบียน และขอรหัสผ่านจากผู้ใช้ที่รวมอยู่ในแดชบอร์ด back4app ของคุณ เราจะสามารถใช้ bootstrap, ไฟล์สแตติก (css และภาพ) และใช้ express ในโปรเจกต์ได้ ดูแอปสดที่นี่ https //nodeapplication back4app io/ คุณสามารถโคลนแอปพลิเคชันนี้ทั้งหมดได้ในเทมเพลตโค้ดแอปบนแพลตฟอร์ม back4app https //www back4app com/database/back4app/node app template ก่อนอื่น ให้ทำการตั้งค่าผ่านทาง command line interface ( https //www back4app com/docs/js framework/node web server#content prerequisites ) เพื่อให้เข้าใจว่ามันจะทำงานอย่างไรกับโครงสร้างสุดท้ายจากไฟล์ ├── nodejswebapp/ │ ├── cloud/ │ │ ├── app js │ │ ├── routes js │ │ ├── package json │ │ ├── views/ │ │ │ ├── head ejs │ │ │ ├── index ejs │ │ │ ├── reset password ejs │ ├── public/ │ │ ├── images/ │ │ ├── css/ │ │ │ ├── style css 1 เปิดใช้งานชื่อซับโดเมนของคุณบน back4app โปรดเปิดใช้งานฟีเจอร์ web hosting ของคุณ โดยทำตามขั้นตอนที่มีในคู่มือต่อไปนี้ https //www back4app com/docs/platform/parse web hosting 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 ภายในโฟลเดอร์คลาวด์ (ในเทอร์มินัลของคุณ) คุณต้องเขียน $ touch package json ตอนนี้ ให้แทรกโมดูล 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, https //getbootstrap com/ เพื่ออ่านเพิ่มเติมเกี่ยวกับมัน คุณสามารถเพิ่มเนื้อหาไปยังมุมมองที่คุณเกี่ยวข้อง คุณสามารถใช้เทมเพลตด้านล่างได้โดยไม่มีปัญหา 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 สร้างเส้นทางเพื่อแสดงมุมมอง ตอนนี้เราต้องกำหนดเส้นทางเพื่อแสดงมุมมองที่สร้างขึ้นก่อนหน้านี้ เส้นทางจะถูกสร้างขึ้นโดยใช้ 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 สร้างเส้นทางเพื่อบันทึกข้อมูลลงในฐานข้อมูลของคุณ เราจะใช้ 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 อย่างยอดเยี่ยมแล้ว คลิกที่ https //nodeapplication back4app io/ เพื่อเข้าถึงโครงการทั้งหมดใน back4app ได้ตลอดเวลา ด้วยขั้นตอนที่อธิบายไว้ข้างต้น คุณจะสามารถทำงานกับการโฮสต์เว็บเมื่อใช้แอปพลิเคชัน node js!