Node.js-App Hosting auf Back4App: Schritt-für-Schritt Anleitung

hosting ihrer node js webanwendung auf back4app servern einführung dieses tutorial erklärt, wie sie eine subdomain einrichten und statische seiten einfach hosten können nach abschluss dieses schrittweisen leitfadens werden sie in der lage sein, eine node js app zu verwenden, um benutzer zu registrieren und sich anzumelden voraussetzungen um dieses tutorial abzuschließen, benötigen sie wenn sie diese app lokal testen möchten, müssen sie node js in ihrer lokalen umgebung installieren sie können die eine mit back4app erstellte app schauen sie sich back4app befehlszeile, die mit dem projekt konfiguriert ist gehen sie die zuerst sprechen wir über unsere neue einfache anwendung! wir werden ein beispiel für die nutzung von webhosting mit node js beschreiben! stellen sie sich vor, wir müssen ein einfaches anmelde , registrierungs und passwortanforderungssystem für benutzer, die in ihrem back4app dashboard enthalten sind, erstellen wir werden in der lage sein, bootstrap, statische dateien (css und bilder) und express im projekt zu verwenden sehen sie die live app hier https //nodeapplication back4app io/ sie können diese vollständige anwendung in den app code vorlagen auf der back4app plattform https //www back4app com/database/back4app/node app template klonen zuerst schließen sie die einrichtung über die befehlszeilenschnittstelle ab ( https //www back4app com/docs/js framework/node web server#content prerequisites ), um zu verstehen, wie es mit der endgültigen struktur der dateien funktionieren wird ├── nodejswebapp/ │ ├── cloud/ │ │ ├── app js │ │ ├── routes js │ │ ├── package json │ │ ├── views/ │ │ │ ├── head ejs │ │ │ ├── index ejs │ │ │ ├── reset password ejs │ ├── public/ │ │ ├── images/ │ │ ├── css/ │ │ │ ├── style css 1 aktivieren sie ihren subdomain namen auf back4app aktivieren sie ihre webhosting funktion, bitte folgen sie den schritten im folgenden leitfaden https //www back4app com/docs/platform/parse web hosting 2 erstellen und hochladen von dateien bevor sie mit diesem schritt beginnen, empfehlen wir ihnen, das command line tool ( https //www back4app com/docs/js framework/node web server#content prerequisites ) zu verwenden, um ihre dateien einfach hochzuladen! zuerst erstellen sie die dateien mit den namen app js app js und package json package json im cloud verzeichnis! module in back4app installieren im cloud ordner (in ihrem terminal) müssen sie folgendes schreiben $ touch package json jetzt fügen sie das npm modul ‚body parser‘ in die datei package json ein 1 { 2 "dependencies" { 3 "body parser" " " 4 } 5 } fehlerbehebung es ist nicht notwendig, npm install npm install im cloud ordner auszuführen, da der back4app server es automatisch installieren wird app js 1 // modul anfordern 2 var bodyparser = require("body parser"); 3 4 // verzeichnis für die ansichten einrichten 5 app set('views', dirname + '/views'); 6 app set('view engine', 'ejs'); 7 8 // body parser für ihre app einrichten 9 app use(bodyparser json()); 10 app use(bodyparser urlencoded({extended true})); 11 12 // routes js datei anfordern 13 14 require(' /routes'); 3 erstellen sie die ansichten für ihre app wir werden ejs vorlagendateien bereitstellen, um die vorlagen app zu erstellen, die sie jederzeit an ihrem ende ändern können ) zurück zum terminal im cloud verzeichnis ist es notwendig, den ordner views zu erstellen und die folgenden ejs dateien head ejs head ejs wir werden es verwenden, um inhalte zum kopf der html struktur hinzuzufügen index ejs index ejs wir werden es verwenden, um benutzer zu registrieren und anzumelden reset password ejs reset password ejs wir werden es verwenden, damit der benutzer die passwortzurücksetzung anfordern kann hinweis wir werden die ansichten mit bootstrap erstellen, https //getbootstrap com/ um mehr darüber zu lesen sie können inhalte zu ihren jeweiligen ansichten hinzufügen sie können die untenstehenden vorlagen ohne probleme verwenden 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 erstellen sie die routen, um die ansichten darzustellen jetzt müssen wir die routen konfigurieren, um die zuvor erstellten ansichten darzustellen die routen werden mit https //expressjs com/ erstellt 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 }); hinweis wie sie sehen können, konfigurieren wir variablen als parameter, die verwendet werden, um warnungen auf der seite anzuzeigen 5 erstellen sie die routen, um die informationen in ihrer datenbank zu speichern wir werden die https //docs parseplatform org/js/guide/ als referenz für die entwicklung unserer funktionen für registrierung, anmeldung und anforderung des passworts verwenden 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 fast geschafft! statische dateien im öffentlichen ordner es ist noch nicht vorbei! im öffentlichen ordner können sie statische dateien wie css und bilder einfügen, um dies in den ansichten zu verwenden ) wenn sie dateien zu css und bildern hinzufügen, können sie verschiedene stylesheets für ihre erstellte website bereitstellen! 7 es ist erledigt! bis zu diesem punkt haben sie hervorragend gelernt, wie man eine node js anwendung mit cloud code erstellt klicken sie auf https //nodeapplication back4app io/ um jederzeit auf das vollständige projekt in back4app zuzugreifen mit den oben beschriebenen schritten können sie mit dem webhosting arbeiten, wenn sie eine node js anwendung verwenden!