NodeJS веб-хостинг на Back4App с Express для разработчиков

хостинг вашего веб приложения node js на серверах back4app введение этот учебник объясняет, как вы можете настроить поддомен и легко хостить статические страницы после завершения этого пошагового руководства вы сможете использовать приложение node js для регистрации и входа пользователей предварительные требования чтобы завершить этот учебник, вам потребуется если вы хотите протестировать это приложение локально, вам нужно установить node js в вашей локальной среде вы можете следовать приложение, созданное с помощью back4app посмотрите back4app command line, настроенный с проектом пройдите через во первых, давайте поговорим о нашем новом простом приложении! мы опишем пример использования веб хостинга с node js! представим, что нам нужно создать простой вход, регистрацию и запрос пароля от пользователей, включенных в вашу панель управления back4app мы сможем использовать bootstrap, статические файлы (css и изображения) и использовать express в проекте смотрите живое приложение здесь nodeapplication back4app io вы можете клонировать это полное приложение в шаблонах кода приложений на платформе back4app здесь во первых, завершите настройку с помощью интерфейса командной строки ( см предварительные требования https //www back4app com/docs/js framework/node web server#content prerequisites ), чтобы понять, как это будет работать с окончательной структурой файлов 1 включите ваше поддоменное имя на back4app включите функцию веб хостинга, пожалуйста, следуйте шагам, доступным в руководстве ниже активация вашего веб хостинга и живого запроса 2 создайте и загрузите файлы перед тем как начать этот шаг, мы рекомендуем вам использовать инструмент командной строки ( см требования https //www back4app com/docs/js framework/node web server#content prerequisites ) для легкой загрузки ваших файлов! сначала создайте файлы с именами app js app js и package json package json внутри облачного каталога! установите модули в back4app внутри папки cloud (в вашем терминале) вам нужно написать теперь вставьте модуль 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 почти готово! статические файлы в папке public это еще не конец! в папке public вы можете вставить статические файлы, такие как css и изображения, чтобы использовать их в представлениях ) когда вы добавляете файлы css и изображения, вы можете предоставить разные таблицы стилей для вашего созданного веб сайта! 7 готово! на данный момент вы прекрасно научились создавать приложение node js, используя облачный код нажмите на эту ссылку для доступа к полному проекту в back4app в любое время с описанными выше шагами вы сможете работать с веб хостингом, используя приложение node js!