Web Development прошла долгий путь с момента WWW Boom в конце 90-х годов. Мы, как разработчики теперь имеют бесконечные ресурсы и инструменты в нашем распоряжении. Чистая универсальность у нас есть, – это дурака.
С ростом Node.js и NPM JavaScript стал самым часто используемым языком программирования де-факто в мире. Это как каждый день появляется новая рамка. Раздражаясь как ад, я знаю. Но давайте нанесемся на поезду обмана и проверить, как построить прохладные вещи с Node.js. Если вы еще не попробовали, вам понравится, я уверен!
Сегодня мы создадим четыре различных типа приложений, использующих Express.js Самый популярный Node.js Framework.
Прежде чем мы прыгаем, есть пара вещей, которые нам нужно перейти в отношении Nodejs и Express, просто чтобы получить подшипники прямо.
Получите ноги влажные
Узел – это асинхронное время выполнения JavaScript событий, построенное на двигатель Chrome’s V8 JavaScript. Он предназначен для создания масштабируемых сетевых приложений. JavaScript – это однопоточный, поэтому сила узла лежит в своей асинхронной природе. Он обрабатывает события, не блокируя основную нить выполнения. Вот почему узел быстро быстро, потому что он может обрабатывать соединения одновременно.
Настоящая причина Node.js взорвалась и стала популярной, так как сегодня – это менеджер пакетов, который приходит на поездку. NPM – это главное место встречи для всех пакетов узлов, следовательно, его название. Узел пакета менеджера, дух? Здесь вы можете найти различные кодовые модули для использования в ваших приложениях или публиковать свои собственные, если хотите.
Одной из этих модулей является Express.js, супер популярный минималистский веб-каркас для быстрого построения приложений Node.js. Express сегодня – это перведифицированная основная основа для использования с Node.js. С большой причиной действительно. Он обеспечивает только тонкий слой фундаментальной абстракции, не изменяя основные функции узла известен. Это облегчает создание как веб-приложений, и отдохнуть API с небольшим количеством без проблем. Так просто на самом деле, что многие другие рамки основаны на Express!
Теперь вам интересно, какие приложения вы можете даже построить с Express? Давайте поговорим об этом. Что основные типы веб-поддержки? Существуют приложения со сервером, представленными HTML-страницами, которые будут знакомы некоторыми из вас некоторых программистов. Это был способ по умолчанию создание приложений в эпоху Hype Pre-JavaScript.
Тогда у нас есть API. Они обычно используются для отправки и получения полезных нагрузок JSON, обычно в базу данных или в базе данных или другой службе.
Наконец у нас есть простые статические сайты. В этом сценарии экспресс используется для раскрутки сервера и служить этим файлам. Это быстрый способ создания посадочных страниц или маркетинговых страниц для компаний и запуска.
Сначала прыгает в голову
Обучение, делая, безусловно, является лучшим принципом для изучения чего-либо нового, особенно в программировании. Давайте погрузимся и объяснить вещи по пути.
Представленные сервер приложения
Вы можете догадаться, как эти приложения работают из названия правильно? Страницы HTML, представленные в браузере пользователя, генерируются и отображаются на сервере. Этот процесс называется рендерингом сервера. Такие приложения состоят из шаблонных двигателей и шаблонов. Двигатели генерируют окончательную HTML-страницу для отображения. Некоторые популярные двигатели включают Джейд, мопс и EJ.
Что такое особенное в этих двигателях? У них есть модная вещь, называемая интерполяцией. Это позволяет вставлять переменные в шаблон или строку. Как этот пример с Джейд: Здравствуйте # {World} где Мир это переменная.
Давайте проверим это в действии.
Создайте новый каталог и откройте окно терминала. INIT NPM в каталоге и установите следующие модули.
$ npm init $ npm install --save express jade
Структура этого проекта очень проста. Файл app.js для всех конфигураций приложений, файл Server.js для вращения сервера HTTP и папку Views, где будут храниться все наши шаблоны. Во-первых, создайте файл App.js и вставьте этот фрагмент кода в него.
// copy this into your app.js
const express = require('express');
const path = require('path');
const app = express();
// view engine setup
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'jade');
app.get('/', function(req, res, next) {
res.render('index', { title: 'Hello World!' });
});
module.exports = app;
Хорошо, что здесь происходит? Мы требуем Экспресс и мстительствуя приложение объект. путь Модуль представляет собой встроенный модуль узла, который обеспечивает способ работы с файлами и каталогами. Мы используем его в этом примере, чтобы убедиться, что наши файлы работают на всех платформах.
Затем мы устанавливаем двигатель View и папку, в которой расположены наши шаблоны. Двигатель View мы будем использовать в этом образце, будет Джейд , но здесь любой двигатель зрения в порядке.
Теперь приходит веселая часть, см. .get () Метод на объекте приложения? Требуется 2 параметра. Сначала маршрут, затем функция обратного вызова. Когда маршрут «/» попал, обратный вызов будет вызван. Это будет вызвать рендеринг шаблона индекса, с интерполированной переменной с именем Название со значением «Hello World!». Наконец мы экспортируем приложение, чтобы иметь доступ к нему в других файлах.
Потрясающие! С помощью этого давайте создадим файл Server.js и добавить этот фрагмент.
const app = require('./app');
const port = 3030;
app.listen(port, function() {
console.log('Express server listening on port ' + port);
});
Здесь нам нужна файл app.js и расскажет, чтобы прослушать порта 3030.
Есть только еще одна вещь, создайте папку «Просмотров» с некоторыми шаблонами. Продолжайте и добавьте папку «Виды» сейчас и бросьте эти две шаблоны.
doctype html
html
head
title= title
body
block content
extends layout
block content
h1= title
p Welcome to #{title}
Как вы можете видеть синтаксис для Джейд-шаблонного двигателя, довольно причудливый по сравнению с обычным HTML. Но не позволяйте этому обмануть вас. В конце концов, он будет отображаться как обычный HTML в браузере. Смотрите забавный вид # {Название} ? Это интерполяция, которую я упомянул выше. Название Переменная от функции обратного вызова была передана на просмотр, отображаемая как значение, которое было предоставлено.
Ваша окончательная структура папки приложения приложения должна выглядеть что-то подобное.
> node_modules > views - index.jade - layout.jade - app.js - package.json - package-lock.json // this file will be present only if you have NPM version 5 or above. - server.js
Посмотрите на репо Чтобы догнать, если вы пропустили некоторые шаги.
Феве, наконец, мы можем запустить приложение, чтобы увидеть, как выглядит так. Перепрыгивайте обратно в свой терминал и запустите:
$ node server.js
Вы должны увидеть «Express Server, прослушивание порта 3030», войдите в систему обратно на свой терминал. В вашем браузере перейдите в http://localhost: 3030 И вы должны увидеть текст «Hello World!» и “Добро пожаловать в Hello World!” на экране.
Отдых APIS.
Готов, чтобы ваш мир перевернулся с ног на голову? Добро пожаловать в Отдых Апис Аббревиатура обозначает Re презентативный S Тейт T ransfer. Но вам никогда не нужно помнить это. Что важно, чтобы понять логику позади того, как работает отдых, и почему это предпочтительный тип доставки данных.
Ядро лежит в создании API , А Пликация P Rogram Я Nterface, отправлять и получать данные в формате JSON. API для отдыха используются для взаимодействия с базами данных для хранения данных постоянным образом. К счастью для нас, используя отдых с Express легко.
Давайте проверим это в действии.
Для этого примера нам нужны только два модуля. Экспресс и Тело-парсер Отказ Создайте новый каталог проекта и запустите:
$ npm init && npm install --save express body-parser
Нам нужны два файла только для того, чтобы пример приложений работать, чтобы выполнить работу и создать app.js и server.js.
Скопируйте эти фрагменты в файлы.
'use strict';
//
// app.js
//
const express = require('express');
const app = express();
const bodyParser = require('body-parser');
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: false }));
app.get('/', function(req, res) {
let data = {
message: 'Hello World!'
};
res.status(200).send(data);
});
app.post('/', function(req, res) {
let data = {
response: 'You sent: ' + req.body.message
};
// Do something, like query a database or save data
res.status(200).send(data);
});
module.exports = app;
'use strict';
//
// server.js
//
const app = require('./app');
const port = 4040;
app.listen(port, function() {
console.log('Express server listening on port ' + port);
});
Макет App.js очень похож на пример, визуализированный сервером. Единственная реальная разница в том, что мы отправляем обратно объект JSON как ответ Получить () метод. Давайте сломаемся.
Наверхм мы снова требуем Экспресс и создать приложение объект. Но мы также требуем Тело-парсер Отказ Это круто Express Mardware Модуль для анализа тела входящего HTTP-запроса. Это добавляет объект для Express ‘ req объект внутри приложение методы. Поэтому, когда мы публикуем некоторые данные в маршрут «/», у нас есть доступ к этому данным в req .body объект. Потрясающие!
Чтобы проверить этот выпускной инструмент, такой как почтальон или любой другой инструмент тестирования клиента Client Client. Если вы никогда не слышали об этом раньше, не паникуйте, Вы можете проверить это здесь. Отказ
Выпустите сервер.js и откройте почтальон.
$ node server.js
В Postman (или любой другой инструмент для отдыха) начинается, отправив запрос на получение http://localhost: 4040/:
Теперь отправьте сообщение запроса на тот же URL:
Введите «сообщение» в качестве данных JSON в тело запроса (используйте «X-www-форма-орленкадированный» в этом случае) и нажмите «Отправить». Сообщение, которое вы отправляете на конечную точку, должны отправлять вам понравиться:
{
"response": "You sent: Hello World!"
}
Переключитесь обратно в код и давайте объясним, что происходит. В почтовом маршруте мы берем ценность от req.body.message и назначить его данные переменная с нашим собственным коротким сообщением. Затем мы отправляем данные обратно в ответ с статусом 200.
Подобные запросы, которые используются исключительно в качестве средства передачи данных в и с сервера, используются для хранения данных в постоянном хранении, таком как базы данных. Это то, что apis apit потрясающие. В сегодняшнем мире они процветают, потому что они работают в унисон с мобильными, так и веб-приложениями в качестве хранения данных.
Если вы пропустили какие-либо шаги, вы можете проверить код здесь Отказ
Статические сайты
Что, если нам не нужна прохладный рендеринг шаблона, ни взаимодействия с базой данных? Что, если мы просто хотим классную страницу посадки, удивительное доказательство концептуальной страницы или статический файловый сервер?
Давайте игнорируем все сложные случаи использования, которые мы упомянули выше, и сосредоточены на фондах, на основе всемирной паутины основаны. Обслуживание HTML-документов.
Экспресс можно превратить в простой HTTP-сервер для обслуживания статических HTML-страниц. Процесс простым. Необходимо указать местоположение, которое будет рассматриваться как статический каталог.
Давайте погрузиться в.
Создайте новый каталог, создайте те же два файла, что и приведенные выше примеры, App.js и server.js. Вам нужно только установить Express для этого примера.
$ npm init && install express --save
// app.js
const express = require('express');
const app = express();
app.use('/', express.static('html'));
module.exports = app;
Приложение установлено на .use () Папка HTML для обслуживания статических файлов. Это означает, что маршрут к ресурсу в URL не будет искать маршруты в приложении Express, вместо этого ищите файловую систему для запрошенного файла.
Вы можете просто использовать Server.js из примеров выше.
// server.js
const app = require('./app');
const port = 5050;
app.listen(port, function() {
console.log('Express server listening on port ' + port);
});
Создайте папку «HTML» и добавьте два файла с именем «index.html» и «over.html». Содержание файлов не имеет значения, я только что добавил какой-то текст, чтобы знать, какой из них.
index
about
Это все. Идите вперед, раскрутите сервер и откройте браузер и отправьтесь до http://localhost: 5050 , что должно показать страницу со словом «индекс» на нем.
Вы можете увидеть, запрашивая маршрут «/» Индекс .HTML был загружен по умолчанию. Вы можете переключиться на «/about.html», и будет загружен «о ‘HTML-файл. Этот принцип работает с любым типом файла. Вы также можете добавить изображение в эту папку, а также будет отображаться так же, если вы перемещаетесь к нему, хотя URL.
Если вы пропустили какие-либо шаги, сделайте перерыв и проверьте код здесь Отказ
Гибридные приложения
Нет, мы не собираемся говорить говорить о Toyota Prius. Это другой тип гибрида. Допустим, вы хотите универсальность, мощность и простоту использования API отдыха, но и скорость приложения одной страницы (SPA).
Быстрая информация: SPA – это приложения для переднего конца JavaScript, которые имеют только один основной файл index.html. Все остальные файлы HTML являются шаблонами, которые вводятся в основной файл при необходимости. Поскольку логика и маршрутизация обрабатываются на переднем конце, они невероятно быстро. Но в конце концов они ведут себя как простое статическую веб-страницу, когда речь идет о том, чтобы служить им.
Если это так, вы можете подумать об этом сценарии. Почему бы не запустить API для отдыха, с статически обслуживаемым спа на одном сервере. Звучит неплохо.
Выпустите терминал, создайте новый каталог и введите:
$ npm init && npm install --save express body-parser
Давайте познакомимся с структурой папки.
> app // folder that will hold all of our files for the SPA > node_modules - app.js - package-lock.json - package.json - server.js
Структура такая же, как в приведенном в примере статического файла, с разницей в имени папки, где мы будем держать наши статические файлы.
Вот какой-то код:
// app.js
const express = require('express');
const app = express();
const path = require('path');
const bodyParser = require('body-parser');
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: false }));
/**
* API
*/
app.get('/api', function(req, res, next) {
let data = {
message: 'Hello World!'
};
res.status(200).send(data);
});
app.post('/api', function(req, res, next) {
let data = req.body;
// query a database and save data
res.status(200).send(data);
});
/**
* STATIC FILES
*/
app.use('/', express.static('app'));
// Default every route except the above to serve the index.html
app.get('*', function(req, res) {
res.sendFile(path.join(__dirname + '/app/index.html'));
});
module.exports = app;
Эта структура кажется знакомой сейчас не так. Мы объединили API отдыха с сервировочными статическими файлами. Единственное исключение, являющееся последним .get () на дне. * Соответствует каждому маршруту, за исключением того, что вышеперечисленные будут отклонены для отправки index.html обратно к клиенту. Это означает, что каждый маршрут будет служить основным индексом .HTML. Именно то, что мы хотим!
Теперь, когда мы хотим получить некоторые данные из API, мы можем просто ударить маршрут «/API» и вернуть данные JSON. В противном случае приложение всегда будет служить основным HTML-файлом, расположенным в папке приложения.
Если вы хотите получить более подробно, то вы можете проверить полный пример, используя Angular.js over здесь Отказ
Когда использовать что?
Ни один тип приложения не является лучшим в каждом сценарии. У них все есть свое место в мире программирования. Все зависит от вашего случая использования и то, что вы хотите построить.
Если вы хотите надежный задний конец, не слишком беспокоитесь о том, что передний конец будет действительно любить серверные приложения. Они имеют отличные шаблонные двигатели, которые упрощают то, как вы пишете HTML, что делает его очень легко создавать сложные шаблоны. Они также обеспечивают большую поддержку для хранения и получения данных.
Остальные API – это приложения выбора, когда у вас есть несколько передних концов для управления. Получаемые данные могут быть запрошены как мобильные, так и веб-приложения. Разве это не круто, что вы можете построить один конец, который можно потреблять всеми вами приложениями клиента? Я уверен, что думаю!
Обслуживание статических файлов используется в различных случаях. Служа HTML-файлов, изображений, стилей CSS и сценарии JavaScript. Все рассматриваются как статические файлы, и все они могут быть поданы с Express. Это наиболее часто используется для создания посадочных страниц и других приложений для передних конечностей, таких как приложения для одиночных страниц. Не стесняйтесь использовать эту технику для всех ваших приложений. Всегда будет полезно знать, как служить статические файлы, такие как изображения и CSS!
Что там, чтобы сказать о гибридных приложениях? Ну, прежде всего. Пожалуйста, если у вас есть доступ к двум веб-серверам, сохраните приложения отдельно. Создайте остальные API на один и спа на другой. Но если у вас нет этой роскоши, нормально держать его на одном. В противном случае это приложение Combo – лучшее относительно производительности.
Иди начать строить вещи!
Все эти методы действительны и идеально подходят для использования. Просто выберите один и начните здание! Вы узнаете больше всего, делая это сами.
Надеюсь, вы, ребята, и девочки наслаждались читать это так же сильно, как мне нравилось писать. До следующего раза, будь любопытно и повеселиться.
Как вы думаете, что это учебное пособие будет поможет кому-то? Не стесняйтесь делиться. Если вам это понравилось, дайте мне знать в комментариях ниже.