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

13min
Хостинг вашего веб-приложения Node.JS на серверах Back4App
Введение
Этот учебник объясняет, как вы можете настроить поддомен и легко хостить статические страницы. После завершения этого пошагового руководства вы сможете использовать приложение Node JS для регистрации и входа пользователей.
Предварительные требования
Чтобы завершить этот учебник, вам потребуется:
Если вы хотите протестировать это приложение локально, вам нужно установить Node JS в вашей локальной среде. Вы можете следовать
Приложение, созданное с помощью Back4App.
Посмотрите
Back4App Command Line, настроенный с проектом.
Пройдите через
Во-первых, давайте поговорим о нашем новом простом приложении!
Мы опишем пример использования веб-хостинга с Node JS!
Представим, что нам нужно создать простой вход, регистрацию и запрос пароля от пользователей, включенных в вашу панель управления Back4App. Мы сможем использовать Bootstrap, статические файлы (CSS и изображения) и использовать Express в проекте.
Смотрите живое приложение здесь: nodeapplication.back4app.io.
Вы можете клонировать это полное приложение в шаблонах кода приложений на платформе Back4App здесь.
Во-первых, завершите настройку с помощью интерфейса командной строки (см. предварительные требования), чтобы понять, как это будет работать с окончательной структурой файлов:
├── NodeJSWebApp/
│  ├── cloud/
│  │   ├── app.js
│  │   ├── routes.js
│  │   ├── package.json
│  │   ├── views/
│  │   │   ├── head.ejs
│  │   │   ├── index.ejs
│  │   │   ├── reset_password.ejs
│  ├── public/
│  │   ├── images/
│  │   ├── css/
│  │   │   ├── style.css
1 - Включите ваше поддоменное имя на Back4app
Включите функцию веб-хостинга, пожалуйста, следуйте шагам, доступным в руководстве ниже:
                                   Активация вашего веб-хостинга и живого запроса﻿
2 - Создайте и загрузите файлы
Перед тем как начать этот шаг, мы рекомендуем вам использовать инструмент командной строки (см. требования) для легкой загрузки ваших файлов!
Сначала создайте файлы с именами app.js и package.json внутри облачного каталога!
Внутри папки cloud (в вашем терминале) вам нужно написать:
$ touch package.json
Теперь вставьте модуль npm ‘body-parser’ в файл package.json:
JSON
1   {
2     "dependencies": {
3       "body-parser": "*"
4     }
5   }
1   {
2     "dependencies": {
3       "body-parser": "*"
4     }
5   }
﻿
Устранение неполадок: Не обязательно запускать npm install внутри облачной папки, потому что сервер Back4App установит его автоматически
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');
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- Мы будем использовать его для добавления контента в заголовок HTML структуры.
﻿index.ejs- Мы будем использовать его для регистрации и входа пользователей.
﻿reset_password.ejs- Мы будем использовать его для запроса пользователем сброса пароля.
Подсказка: Мы будем строить представления с использованием Bootstrap, нажмите здесь чтобы узнать больше об этом.
Вы можете добавлять контент в свои соответствующие представления. Вы можете использовать приведенные ниже шаблоны без каких-либо проблем:
head.ejs
index.ejs
reset_password.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">
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">
﻿
4 - Создайте маршруты для отображения представлений
Теперь нам нужно настроить маршруты для отображения представлений, которые были созданы ранее. Маршруты будут построены с использованием Express.
Node.js
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   });
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 в качестве справочного материала для разработки наших функций для Регистрации, Входа и Запроса пароля.
JS
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  });
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!
Angular: Настройка и запуск шаблона приложения
Инициализация проекта Ionic с шаблоном приложения