Започнете с Express.JS

Започнете с Express.JS

Създаването на приложения за браузър с Node.JS става досадно. Express.JS е JavaScript рамка посветени на едностранични и многостранични приложения, хоствани в средата Node.JS.

Той осигурява тънък слой от основни функции на уеб приложението, които няма да скрият функциите на Node.JS, с които вече сте запознати, така че можете да сте сигурни, че готовото ви приложение ще надраска производителността. Освен това е чудесно за създаване на стабилни API, благодарение на куп методи на HTTP помощни програми и междинен софтуер, готов за употреба.



Искате ли да започнете? Ето какво трябва да знаете.



01. Генериране на работеща структура

Започнете с Express.JS: Генерирайте работеща структура

Въведете правилните работни опции, за да започнете

Express.JS се гордее с това, че е „неинфориран“ - тоест рамката позволява на разработчика да се смесва и съчетава по отношение на архитектури, шаблони и маркиращи машини. За съжаление, с голяма сила идва голямата отговорност.



Екипът на разработчиците на Express се стреми да смекчи удара, като въведе генератор на проекти. Той идва на вашата работна станция под формата на NPM пакет и ще подпомогне нашите експерименти със следната рамка:

tamhan@tamhan-thinkpad:~/Desktop/ Stuff/2018Aug/FutureExpressJS/ workspace$ sudo npm install express-generator -g

Генераторът също така съдържа десетки опции за проекти - фигурата, придружаваща тази стъпка, показва пълния изход за помощ. За улеснение ще се ограничим до проект въз основа на настройките по подразбиране. Започнете процеса на генериране с:

tamhan@tamhan-thinkpad:~/Desktop/ Stuff/2018Aug/FutureExpressJS/ workspace$ express futuretest

Предупреждение: механизмът за изглед по подразбиране няма да бъде Jade в бъдещи версии.

Когато приключите, текущата работна директория съдържа нова папка, наречена „futuretest“. Той е дом на нашия тестов проект и трябва да бъде конфигуриран с помощта на командата за изтегляне на пакета на NPM. По време на писането, генераторът включва генератор на изглед Jade - проектът планира да промени това в близко бъдеще, като ви задължава да предадете параметър, избиращ предвидения механизъм за изглед. Като алтернатива поискайте използването на Pug - той е официалният наследник на двигателя Jade:

cd futuretest/ npm install

02. Разберете структурата на приложението

Сега, когато генераторът на проекти свърши своето, нека отворим App.js в избран редактор. Неговата - много съкратена - структура се представя, както следва:

мокър на мокър маслена живопис урок
var indexRouter = require('./ routes/index'); var usersRouter = require('./ routes/users'); var app = express(); // view engine setup app.set('views', path.join(__ dirname, 'views')); app.set('view engine', 'jade'); app.use(logger('dev')); app.use(express.json()); app.use(express.urlencoded({ extended: false })); app.use(cookieParser()); app.use(express.static(path. join(__dirname, 'public')));

Express.JS е силно модулен. App.js служи като входна точка, където една или повече функции 'use ()' позволяват добавянето на компоненти, предназначени да обработват различни заявки. Извикванията на 'set ()' ви позволяват да регулирате параметрите в двигателя - един от които е инсталирането на Jade view engine, споменато в предишната стъпка.

Действителното излъчване на уеб съдържание се извършва в класовете на рутера. За краткост, нека се ограничим до Index.js:

var express = require('express'); var router = express.Router(); router.get('/', function(req, res, next) { res.render('index', { title: 'Express' }); }); module.exports = router;

'get ()' е снабден със съвпадащ низ и манипулатор на събития, който се извиква всеки път, когато възникне съответно събитие. В нашия случай на метода за рендиране на избрания механизъм за шаблони се казва да връща съдържание в браузъра на потребителя, който е влязъл в системата.

03. Стартирайте уеб страницата

На този етап ние сме готови да разгледаме уебсайта за първи път. Върнете се в терминала, съдържащ инсталацията на Express.JS, и се обадете при стартиране на NPM с зададен флаг за отстраняване на грешки:

DEBUG=myapp:* npm start

Когато приключите, въведете http: // localhost: 3000 / в избран браузър, за да разгледате скелето, създадено от генератора на проекти. Когато сте готови, натиснете ctrl + ° С за да затворите прозореца и да върнете контрола към интерпретатора на командния ред - имайте предвид, че това също затваря уеб сървъра за отстраняване на грешки.

04. Всичко е свързано с маршрутизиране и крайни точки

Започнете с Express.JS: Маршрутизиране и крайни точки

Сортирайте правилните входни точки, добавете нови маршрути и въведете поддръжка на регулярни изрази

За улеснение, нека се съгласим, че уеб приложението обикновено се състои от поредица от входни точки. Express.JS се справя с тях чрез класа на рутера - мислете за това като за хранилище на методи, които се извикват в отговор на входяща заявка.

Добавянето на нова крайна точка към приложение се осъществява чрез добавяне на нов работник в опашката. Нашият автоматично генериран пример създава два типа рутери, всеки от които е повдигнат с помощта на метода 'require':

var indexRouter = require('./ routes/ index'); var usersRouter = require('./ routes/ users');

В следващата стъпка 'app.use' регистрира рутерите и ги свързва към низовете на заявката. Освен това нашият код добавя манипулатор на грешки, който се извиква, ако в системата е въведен несъществуващ URL адрес:

app.use('/', indexRouter); app.use('/users', usersRouter); app.use(function(req, res, next) { next(createError(404)); });

05. Създайте нов маршрут

Отворете Users.js и променете кода му, както е показано по-долу:

router.get('/user1', function(req, res, next) { res.send('Future says Hello 1'); }); router.get('/', function(req, res, next) { res.send('respond with a resource'); });

Добавянето на нови маршрути към Express.JS е механичен процес. Вземете избрания обект на рутера и извикайте метода, съответстващ на HTTP глагола, който искате да обработите. След това предайте низ, който ще бъде добавен към „отместването“, регистрирано с „app.use“. От този момент нататък http: // localhost: 3000 / users / user1 и http: // localhost: 3000 / users / връщат валиден отговор.

Имайте предвид, че Express.JS не се ограничава до боравене с ресурси „GET“. 'post ()', 'put ()' и 'delete ()' обработват традиционните четири HTTP заявки, с десетки допълнителни глаголни методи, обслужващи по-необичайни нужди. И накрая, обектът 'req' осигурява достъп до заглавката на заявката - използвайте го добре при анализиране на параметри или клиентска информация.

06. Разширено съвпадение

Ръчното добавяне на маршрути става досадно с нарастването на сложността на програмата. Express.JS се грижи за този проблем, като въвежда поддръжка на заместващи символи и регулярни изрази. Например, погледнете следната декларация, която използва регулярен израз, за ​​да съвпада с различни низове, съдържащи кучето за последователност от символи.

app.get(/.*dog$/, function (req, res) { ... })

07. Ненормално маршрутизиране

Докато обработката на четирите HTTP заявки трябва да е достатъчна за всеки (съвет на Бил Гейтс), Express.JS може да работи и с допълнителни протоколи. Express-WS е особено вкусен кандидат за този раздел - той разширява обхвата на Express.JS, за да включва WebSocket комуникации.

След като приставката бъде добавена към основния проект Express.JS, което позволява това да се осъществи чрез повикване „изискване“. Той връща помощен обект, съдържащ всички освен един метод - извикайте го, за да установите връзка между рутера и приставката:

var expressWs = require('express- ws') app); After that, a new method called 'ws()' can be invoked to add new routes based on WebSocket technology: app.ws('/', function(ws, req) { ws.on('message', function(msg) { console.log(msg); }); console.log('socket', req. testing); });

Техният прототип се различава от нормалните маршрути поради наличието на обекта 'ws' - той осигурява достъп до основния екземпляр WebSocket, свързан с клиента, отговорен за връзката.

08. Интегрирайте бази данни и механизми за шаблониране

Започнете с Express.JS: Интегрирайте бази данни и шаблониращи машини

Не забравяйте да използвате силата на богатата екосистема на приставките

Базирането на Node.JS означава, че богатата екосистема на приставките е на ваша команда, когато работите върху уеб базирани приложения. Например с достъпа до бази данни на SQL и NoSQL - обикновено извънредно досадна задача - може да се работи с помощта на приставки, предоставени от доставчиците на базата данни. Реалното внедряване е толкова лесно, колкото инсталирането на необходимия NPM модул - ако вашият код е за достъп до база данни Redis, просто добавете следното:

var redis = require('redis') var client = redis.createClient() client.set('stringKey', 'aVal', redis.print) . . .

Разбира се, в паметта се поддържа и SQLite:

var sqlite3 = require('sqlite3'). verbose() var db = new sqlite3. Database(':memory:') db.serialize(function () { db.run('CREATE TABLE lorem (info TEXT)')

Имайте предвид, че интеграцията на Node.JS не се ограничава до приставки за база данни. Разработчиците на приключения могат да стигнат дотам, че да включват продукти като Tessel, като по този начин създават уеб приложения, които също могат да взаимодействат Интернет на нещата устройства.

09. Шаблониране със стил

Една област, в която прости и реални програми се различават, е създаването на изгледи. Докато малък примерен проект обикновено използва ръчно изработени низове, сглобяването на големи части от HTML с низ от свързани неща е силно досадно.

Двигателите на шаблони осигуряват добро решение. Те позволяват създаването на предварително дефинирани схеми, които могат да бъдат попълнени програмно при изпълнение.

В случая с нашата примерна програма изгледите са в .jade файлове. Откриващият индекс разкрива следната структура:

extends layout block content h1= title p Welcome to #{title}

Изразите, затворени в къдрави скоби, действат като полета на шаблона, чиито стойности трябва да бъдат заменени по време на изпълнение. Index.js извиква рендериране с обект на параметър, което води до рендиране на началната страница, показана на фигурата, придружаваща тази стъпка:

router.get('/', function(req, res, next) { res.render('index', { title: 'Express' }); });

Повечето механизми за шаблониране също могат да анализират масиви, когато са предоставени с шаблон на елемент. В този случай всеки ред от масива се показва с един екземпляр на модела DOM - приликите с модела за показване на списък, намерен в Android, са съвсем случайни. Express.JS не се ограничава до предварително зададените механизми за шаблониране. Ако искате да пуснете своя собствена по някаква причина, просто следвайте описаните стъпки тук - по принцип трябва да замените всички функции с изключение на една.

забавни снимки, в които да се фотошопирате

10. Обработвайте статично съдържание

Приложенията Express.JS обикновено съдържат CSS файлове и снимки. Обслужването им чрез функцията Render е неефективно - по-интелигентен начин би включвал изпращането им по техния весел начин с традиционна HTTP заявка. Това може да се постигне чрез функцията 'express.static ()', която може да маркира цели папки за експортиране:

app.use(express.static('public')) app.use(express.static('files'))

11. Променете потока от събития

И накрая, позволете ни да споменем накратко термина Middleware. На езика Express.JS междинен софтуер е набор от един или повече компоненти, които се интегрират в диаграмата, показана напротив. Тогава те могат да се използват за модифициране на заявки при преминаването им през системата за маршрутизиране - когато се внедрят правилно, може да се постигне неограничена функционалност.

Освен това могат да бъдат намерени някои готови компоненти тук - посетете този сайт, преди да започнете мащабен проект за развитие.

12. Как да хоствате приложение Express.JS

Започнете с Express.JS: Как да хоствате приложението Express.JS

Помислете за платформите, където можете да хоствате новото си творение

Тестването на приложения, базирани на Express.JS, е лесно. Проблеми възникват, след като искате страницата да стане достъпна за трети страни - поради това, че е генерирана от средата Node.JS, няма начин да получите статично изображение, годно за внедряване на FTP в услуги за уеб хостинг.

На теория няма нищо против използването на Raspberry Pi, OrangePi, специален сървър или виртуална машина, наета от облачна услуга или доставчик на уеб хост, който предлага виртуален хостинг. Наемането на пълна виртуална машина обаче може да ви натовари с отговорностите да поддържате актуалната среда за изпълнение и операционна система.

Ако тази задача не е по ваш вкус, доставчикът на платформа като услуга може да бъде по-привлекателен (макар и в повечето случаи доста скъп) избор.

Много разработчици смятат Heroku, с ценообразуването му, показано на фигурата, придружаваща тази рамка, за златен стандарт за всички неща, свързани с хостинга на Node.JS.

Това обаче е малко несправедливо в действителност - Elastic Beanstalk на Amazon, Cloud Platform на Google и Azure на Microsoft предоставят подобна поддръжка за дистанционно изпълнение на полезни натоварвания, базирани на Node.JS. Във всички тези системи основният проблем е обработката - докато Azure е известен със своето бавно внедряване, други доставчици натоварват разработчиците с трудни за използване back-end услуги на изключително сложни конфигурационни системи.

Освен това поддържаната версия на средата Node.JS се различава от доставчика до доставчика. Разбира се, нямаме достатъчно място, за да разгледаме темата в дълбочина. Посетете Урок за внедряване на Mozilla и Express.JS ' производителност и надеждност и сигурност страници с най-добри практики за някои от засегнатите проблеми. Не забравяйте да погледнете документацията на доставчика, за да съберете повече добри практики.

13. Бъдещи доказателства за вашите приложения

Започнете с Express.JS: Защитете вашите приложения в бъдеще

Трябва да се отбележат множество нови допълнения

Цикълът на разработка на Express.JS далеч не е гладък: разработчиците са добре известни с честите промени в API, изискващи пренаписване на клиентски код. Преминаването от 3.x на 4.x беше особено болезнено, поради което предстоящото освобождаване на 5.x може да остави доста от вас да се чувстват неудобно.

Докато Express.JS 5.0 носи няколко пробивни промени, въздействието им е по-ограничено. На първо място, набор от вече остарели функции се премахва реално - ако кодът все още ги използва, надстройването до 5.x изисква поддръжка.

Дизайнерите на изгледни машини трябва да проверят „res.render ():“ ръст на ранга по отношение на визуализатори на изгледи, което е довело до пропускане на някои синхронни реализации. Версия 5 на рамката подобрява производителността чрез налагане на асинхронно изобразяване.

В допълнение към това са документирани набор от различни подобрения и промени тук вижда връщането на някои изчезнали функции от предишните версии - освен това, някои дългогодишни грешки ще бъдат отстранени в новата версия.

И накрая, имайте предвид, че вече можете да изпробвате новата версия. Просто създайте копие на изходния си код, вземете терминал и въведете следната команда, за да изтеглите един едва тестван JavaScript с кървящ ръб в архив. Пази се.

$ npm install express@>=5.0.0- alpha.1 --save

Тази статия първоначално е публикувана в брой 279 на списанието за уеб дизайн за уеб дизайн. Купете брой 279 тук или абонирайте се за Web Designer тук .

Свързани статии: