Эта статья изменена из «Руководства по началу работы» Feiyu для разработчиков фронт-энда, «Создание Node.js», Express, Jade, Mongodb Server с нуля. Причина, по которой Jade был заменен EJS, заключается в том, что я думаю, что EJS больше соответствует привычкам веб-программистов, или, скорее, это должно быть больше в соответствии с использованием Habits of Php и ASP-программистов.
Часть 1 установка за 15 минут
Если вы действительно учитесь с нуля, потратьте некоторое время на то, чтобы сначала построить окружающую среду. Это не сложно, я использую Win8, так что это выглядит немного отличающимся от этих учебных пособий, используя Mac и Ubuntu или другие системы NIX, но это примерно одинаково.
Шаг 1 Установите node.js
Легко перейти на официальный веб -сайт node.js и нажать кнопку «Зеленая большая установка», которая автоматически обнаружит вашу систему и даст вам загрузку правильного файла установки. (Если нет, нажмите кнопку загрузки, чтобы выбрать необходимую загрузку). Запустите установщик, и это нормально. Вы установили node.js и npm (диспетчер пакетов узлов), чтобы легко установить различные полезные пакеты в узлы.
Шаг 2 Установить экспресс
Теперь, когда мы позволили узлу запустить, нам нужно что -то еще, чтобы мы могли фактически создать доступный сайт. Далее нам нужно установить Express, которая представляет собой фреймворк, которая превращает узел из исходного приложения в более похожий веб -сервер, который мы обычно используем. Нам нужно начать с Express, потому что нам нужны функции лесов, которые он предоставляет. Давайте введем эту команду:
Кода -копия выглядит следующим образом:
c:/node> npm install -g Express
Таким образом, Express правильно установлен в нашем узле и был установлен на глобальном уровне. Вы увидите кучу вывода в окне командной строки, в основном HTTP 304 и получите запросы, что нормально. Экспресс должен быть установлен и доступен.
Шаг 3 Создайте экспресс -проект
Мы собираемся использовать Express и EJS, но не для предварительной обработки CSS. Мы написали вручную несколько CSS. Нам нужно использовать EJS или другие шаблонные двигатели для обработки узлов и выражения данных. Если вы знаете HTML, EJS не сложно. Просто помните, что вам нужно сосредоточиться, или вещи могут быть подвержены ошибкам.
Теперь введите в одном и том же окне командной строки:
Кода -копия выглядит следующим образом:
C:/node> Express Sessions Nodetest1
Введите, и вы увидите кучу таких вещей, как это:
Кода -копия выглядит следующим образом:
C:/node> Express - -сеанс Nodetest1
Создать: Nodetest1
Create: Nodetest1/package.json
Create: Nodetest1/app.js
Создать: Nodetest1/Маршруты
Create: Nodetest1/Routes/index.js
CREATE: NODETEST1/routes/user.js
Создать: Nodetest1/Views
Create: Nodetest1/Views/index.ejs
Create: Nodetest1/public/Images
Create: Nodetest1/public/javascripts
Создать: Nodetest1/public
Create: Nodetest1/public/styleShips
Create: Nodetest1/public/styleShips/style.css
установить зависимости:
$ cd nodetest1 && npm install
Запустите приложение:
$ Node App
Шаг 4 Редактировать зависимости
Хорошо, сейчас у нас есть некоторые основные структуры проекта, но еще не закончено. Вы заметите, что процесс установки Express создает файл с именем package.json в вашем каталоге Nodetest1. Откройте файл с помощью текстового редактора. Это должно выглядеть так.
Кода -копия выглядит следующим образом:
{
"Имя": "Приложение-имени",
"Версия": "0,0,1",
«Частный»: правда,
"Скрипты": {
"Start": "node app.js"
},
"Зависимости": {
"Express": "3.4.8",
"EJS": "*"
}
}
Это стандартный файл формата JSON, который указывает наше приложение и его зависимости. Нам нужно что -то добавить. Например, вызовы в Mongodb и Monk. Изменить часть зависимостей на это:
Кода -копия выглядит следующим образом:
"Зависимости": {
"Express": "3.4.8",
"EJS": "*",
"mongodb": "*",
"Монах": "*"
}
Шаг 5 Установите зависимости
Теперь мы определили зависимости проекта. * Позвольте NPM «Установить последнюю версию». Вернитесь в окно командной строки, введите каталог Nodetest1 и введите:
Кода -копия выглядит следующим образом:
C:/node/nodetest1> npm install
Это выводит кучу вещей. Это связано с тем, что он напрямую считывает наш модифицированный файл JSON, распознает зависимости в нем и устанавливает необходимые файлы. После завершения установки NPM у вас должен быть каталог node_modules, содержащий все файлы зависимости, необходимые для нашего проекта.
Теперь у нас есть полнофункциональное приложение, и оно готово к запуску. Давайте попробуем! Убедитесь, что ваш текущий каталог является каталогом Nodetest1, введите:
Кода -копия выглядит следующим образом:
C:/node/nodetest1> node app.js
После въезда в машину вы увидите:
Кода -копия выглядит следующим образом:
Экспресс -сервер прослушивание на порту 3000
чудесный. Откройте браузер и введите http: // localhost: 3000, и вы сможете увидеть приветственную страницу в Express.
Теперь вы начали запускать свой Webserver Webserver JS с Express Engine и EJS HTML. Не очень сложно, верно?
Часть 2 здесь, давайте напишем «Привет, мир!»
Откройте свой широко используемый текстовый редактор или другую IDE, мне лично нравится использовать превосходный текст. Откройте App.js в вашем каталоге Nodetest1, и этот файл является ядром вашего приложения. Вы должны увидеть что -то вроде этого:
Кода -копия выглядит следующим образом:
var Express = require ('Express');
var Routes = require ('./ Routes');
var user = require ('./ routes/user');
var http = require ('http');
var path = require ('path');
Это просто определяет кучу переменных JavaScript и указывает на некоторые пакеты и зависимости, функции узлов и маршруты. Маршруты эквивалентны набору моделей и контроллеров в MVC. Он отвечает за пересылку запросов, а также содержит некоторую логику обработки. Express создал все эти вещи для нас, и теперь мы игнорируем маршрут пользователя и начинаем писать маршрут верхнего уровня (контролируемый routs/index.js).
В конце вышеперечисленного файла:
Кода -копия выглядит следующим образом:
var app = express ();
Это предложение имеет решающее значение. Он создает экспресс и присваивает значение нашей переменной приложения. Следующее содержание должно использовать эту переменную для настройки куча экспресс -параметров. Продолжайте войти:
Кода -копия выглядит следующим образом:
// все среды
app.set ('port', process.env.port || 3000);
app.set ('views', path.join (__ dirname, 'views'));
app.set ('view Engine', 'ejs');
app.use (express.favicon ());
app.use (express.logger ('dev'));
app.use (express.bodyParser ());
app.use (express.methodoverride ());
app.use (app.router);
app.use (express.static (path.join (__ dirname, 'public')));
Здесь мы настроили порт, ищите каталог представлений, какой шаблонный двигатель использовать для обработки этих представлений и некоторых других вещей. Также обратите внимание на последнюю строку, которая сообщает Express для размещения статических файлов в публике/ каталоге в качестве файлов в каталоге верхнего уровня. Например, ваш каталог изображений хранится в C:/node/Nodetest1/public/Images/, но фактический адрес доступа http: // localhost: 3000/images/.
Примечание: вам нужно поместить эту линию
Кода -копия выглядит следующим образом:
app.use (express.bodyParser ());
Изменить на
Кода -копия выглядит следующим образом:
app.use (express.urlencoded ());
Это должно игнорировать информацию о предупреждении в окне узла во время работы некоторых приложений. В основном некоторые экспресс и его плагин могут быть изменены в будущем. Если вы не внесете эту модификацию, вы получите кучу предупреждений о том, что определенная функция скоро истекает, когда программа запустится.
Затем добавьте:
Кода -копия выглядит следующим образом:
// только разработка
if ('разработка' == app.get ('env')) {
app.use (Express.ErrorHandler ());
}
Таким образом, вы можете сделать некоторые проверки ошибок во время разработки.
Продолжать увеличиваться:
Кода -копия выглядит следующим образом:
app.get ('/', routes.index);
app.get ('/users', user.list);
Это сообщит маршруту, какой маршрут использовать, когда прибывает запрос URI. Обратите внимание, что пользовательская переменная определена ранее и отображается по /routes/user.js. Мы позвоним в функцию списка, определенную в этом файле. Здесь можно отобразить список пользователей.
Продолжать увеличиваться:
Кода -копия выглядит следующим образом:
http.createserver (app) .listen (app.get ('port'), function () {
console.log ('Express Server Suild on Port' + app.get ('port'));
});
Наконец, создайте HTTP -сервер и запустите его. Это все.
(Вышеуказанный контент завершен в шаблоне, сгенерированном новым экспрессом, и не нужно писать в нем сами)
Теперь давайте напишем что -нибудь полезное. Мы не будем писать "Привет, мир!" прямо на нашей странице индекса. Мы воспользуемся этой возможностью, чтобы узнать, как использовать маршрутизацию маршрутов, и узнать, как работает двигатель EJS. Добавьте строку после параграфа App.get () из приведенного выше файла app.js:
app.get ('/helloworld', routes.helloworld);
Если вы нажмете Ctrl+C в окне командной строки, чтобы завершить процесс App.js и перезапустить его, а затем используйте браузер для доступа к http: // localhost: 3000/helloworld, вы получите захватывающую ошибку узла и кучу подсказок сбоя в окне командной строки. Это потому, что мы не изменили маршрут для обработки этого пути. Приходите и сделайте это. В своем редакторе перейдите в каталог маршрутов, найдите index.js и откройте его. Это должно выглядеть так:
Кода -копия выглядит следующим образом:
/*
* Получите домашнюю страницу.
*/
exports.index = function (req, res) {
res.render ('index', {title: 'Express'});
};
Давайте добавим новую страницу. Я предпочитаю создавать независимый файл маршрута для каждого каталога первого уровня, но теперь мы не планируем создавать полную структуру каталогов для Helloworld под представлениями, поэтому мы в настоящее время используем индексные маршруты. Добавьте в конце этого файла:
Кода -копия выглядит следующим образом:
exports.helloworld = function (req, res) {
res.render ('helloworld', {title: 'Привет, мир!'});
};
Он будет нести ответственность за обработку этого запроса URI, но теперь у нас нет реальной страницы, чтобы сделать Res.Render Render, за что отвечает EJS. Перейдите в каталог своих взглядов, откройте index.ejs и сохраните его как файл helloworld.ejs. Теперь это должно выглядеть так:
Кода -копия выглядит следующим образом:
<! Doctype html>
<html>
<голова>
<title> < %= title %> </title>
<link rel = 'styleSheet' href = '/styleSheets/style.css'/>
</head>
<тело>
<h1> < %= title %> </h1>
<p> Добро пожаловать в < %= title %> </p>
</body>
</html>
Это должно быть легко понять.
Сохраните файл. Нажмите Ctrl+C в окне командной строки, чтобы прервать app.js, а затем введите node app.js, чтобы перезапустить его. Совет: Когда вы изменяете файл шаблона EJS, вам не нужно перезагрузить сервер. Но когда вы измените файл JS, такой как app.js или файл маршрутизации JS, вы должны перезапустить сервер, чтобы увидеть эффект.
После запуска сервера сервер открывает http: // localhost: 3000/helloworld, и вы сможете увидеть этот красивый интерфейс:
хорошо! Теперь, когда у нас есть маршруты, которые могут обрабатывать наши шаблоны, мы видим эффект, который мы хотим. Далее, давайте сделаем несколько моделей (уровень данных).
Часть 3 Создайте базу данных и чтение данных
Шаг 1 Установите mongodb
Давайте сначала закроем текстовый редактор и вернемся в окно командной строки. Сначала используйте свой браузер, откройте http://mongodb.org/ и загрузите Mongo. Нажмите на ссылку загрузки в главном меню, чтобы найти версию, которая вам подходит. Для 64-разрядного Win8 загрузите 64-битную *2008R2+ версию. После загрузки это zip -файл, и он несущественен C:/mongo, c:/программа файлов/mongo или чем угодно. Это не имеет значения. Мы сохраняем данные в нашем каталоге Nodetest1.
Шаг 2 запустить Mongod и Mongo
Создайте подкаталогные данные в нашем каталоге Nodetest1, а затем введите каталог бин вашего каталога MongoDB в окне командной строки и введите:
Кода -копия выглядит следующим образом:
Mongod dbpath c:/node/nodetest1/data
Вы увидите, что сервер Mongo запускается, а первый стартап занимает немного времени, потому что это требует предварительного выделения некоторого жесткого диска и некоторых других задач. Когда он побуждает «[initandListen] ожидание соединений на порту 27017», это сделано. Больше нечего делать, сервер уже работает. Теперь вам нужно открыть еще одно окно командной строки, введите каталог бин каталога Mongo и введите
Кода -копия выглядит следующим образом:
монго
Вы увидите несколько советов, подобных этим:
Кода -копия выглядит следующим образом:
C:/mongo> Mongo
MongoDB Shell Версия: 2.4.5
Подключение к: тест
В настоящее время, если вы посмотрите на окно Mongod, вы увидите подсказку, что соединение было подключено. Далее мы будем использовать эту клиенту командной строки для вручную обработать нашу базу данных, но это не обязательно для нашего веб -сайта.
Шаг 3 Создайте базу данных
Не беспокойтесь о приведенной выше подключении для подключения к тестированию. Это просто база данных, которая по умолчанию Mongo по умолчанию, когда вы не указываете базу данных, и она даже не создаст эту базу данных, называемую Test, если вы не добавите в нее запись. Давайте создадим нашу собственную базу данных. В окне командной строки Mongo введите:
Кода -копия выглядит следующим образом:
Используйте Nodetest1
Он не будет создавать эту базу данных, если мы не введем в нее некоторые данные.
Шаг 4 Добавьте некоторые данные
Моя любимая особенность MongoDB заключается в том, что он использует JSON в качестве структуры данных, что означает, что я очень знаком с ним. Если вы не знакомы с JSON, сначала прочитайте несколько соответствующих материалов, которые выходят за рамки этого учебника.
Мы добавляем некоторые данные в сбор. В этом уроке у нас есть только простая база данных, два поля: имя пользователя и электронная почта. Наши данные выглядят так:
Кода -копия выглядит следующим образом:
{
"_id": 1234,
«Имя пользователя»: «Cwbuecheler»,
«Электронная почта»: «[email protected]»
}
Вы можете создать свою собственную ценность поля _id, но я думаю, что лучше позволить Монго сделать это. Это создает уникальное значение для каждой записи. Посмотрим, как это работает. В окне Монго введите:
Кода -копия выглядит следующим образом:
db.usercollection.insert ({"username": "testuser1", "email": "[email protected]"})
Важный совет: DB - это база данных Nodetest1, которую мы создали выше, а UserCollection - это наша коллекция, которая эквивалентна таблице данных. Обратите внимание, что нам не нужно заранее создавать эту коллекцию, она будет автоматически создана, когда используется в первый раз. ОК, нажмите Enter. Если все пойдет хорошо, вы увидите ... ничего. Это не очень хорошо, введите:
Кода -копия выглядит следующим образом:
db.usercollection.find (). pretty ()
Если вам любопытно, симпатичный метод будет отформатировать выходной контент и добавить новую линию. Он должен отображать:
Кода -копия выглядит следующим образом:
{
"_id": ObjectId ("5202B481D2184D390CBF6ECA"),
«Имя пользователя»: «Testuser1»,
«Электронная почта»: «[email protected]»
}
Конечно, объект, который вы получаете, должен быть другим, Mongo автоматически генерирует один. Если вы использовали услуги интерфейса JSON раньше, как вы думаете, вау, вызывание этого в Интернете должно быть очень простым! Ну, ты прав.
Совет: как официальная служба, вы не должны хотеть, чтобы все данные были на верхнем уровне. Что касается дизайна структуры данных MongoDB, взгляните на Google.
Теперь, когда у нас есть часть данных, давайте добавим больше очков. Входить:
Кода -копия выглядит следующим образом:
NewsStuff = [{"username": "testuser2", "email": "[email protected]"}, {"username": "testuser3", "email": "[email protected]"}]
db.usercollection.insert (newStuff);
Обратите внимание, что мы передаем несколько деталей данных сразу по одному по одному. Как просто! Затем используйте команду «Найти выше», и вы увидите эти три части данных.
Теперь давайте интегрируем веб -сервер и базу данных, созданные ранее.
Шаг 5 Подключите Mongo к узлу
Теперь давайте создадим страницу и отобразим записи в базе данных в красивую таблицу. Вот контент HTML, который мы готовим к созданию:
Кода -копия выглядит следующим образом:
<ul>
<li> <a href = "mailto: [email protected]"> testuser1 </a> </li>
<li> <a href = "mailto: [email protected]"> testuser2 </a> </li>
<li> <a href = "mailto: [email protected]"> testuser3 </a> </li>
</ul>
Я знаю, что это не очень научно, но вы можете понять это. Мы просто пытаемся создать простую программу чтения и записи базы данных, а не полный веб -сайт. Во -первых, мы добавляем небольшой контент в app.js (сердце и душа нашей программы), чтобы мы могли связать Mongodb. Откройте C: /node/nodetest1/app.js, вверху вы увидите:
Кода -копия выглядит следующим образом:
var Express = require ('Express');
var Routes = require ('./ Routes');
var user = require ('./ routes/user');
var http = require ('http');
var path = require ('path');
Добавить ниже:
Кода -копия выглядит следующим образом:
// новый код
var mongo = require ('mongodb');
var monk = require ('monk');
var db = monk ('localhost: 27017/nodetest1');
Эти строки сообщат приложению, что нам нужно подключиться к MongoDB. Мы используем Monk, чтобы нести ответственность за это соединение. Наша база данных местоположение Localhost: 27017/Nodetest1. Обратите внимание, что 27017 - порт по умолчанию MongoDB. Если вы измените порт по какой -то причине, вы также должны изменить запись здесь. Теперь посмотрите на нижнюю часть файла:
Кода -копия выглядит следующим образом:
app.get ('/', routes.index);
app.get ('/users', user.list);
app.get ('/helloworld', routes.helloworld);
Добавьте строку ниже:
Кода -копия выглядит следующим образом:
app.get ('/userlist', routes.userlist (db));
Эта строка сообщает приложению, что, когда пользователь обращается к пути /пользователя, нам необходимо передать переменную DB в маршрут пользователя. Но у нас еще нет маршрута пользователя, так что давайте создадим его сейчас.
Шаг 6 Прочитайте данные в Mongo и отобразите их
Используйте свой редактор, чтобы открыть C: /node/nodetest1/routes/idnex.js, который имеет два маршрута: Index и Hello World. Теперь давайте добавим третий:
Кода -копия выглядит следующим образом:
exports.userlist = function (db) {
возврат функции (req, res) {
var collection = db.get ('usercollection');
collection.find ({}, {}, function (e, docs) {
res.render ('userlist', {
«Пользовательский список»: документы
});
});
};
};
Ну, все становится немного сложным. Здесь мы сначала определяем функцию, получаем переменную DB, которую мы передаем, а затем вызовом рендеринга страницы, которая совпадает с двумя предыдущими двумя маршрутами. Мы говорим, что нам нужно прочитать UserCollection, сделать поиск, и возвращаемые данные сохраняются в переменной DOCS. После того, как мы прочитали контент, мы называем рендеринг, чтобы отобразить страницу шаблона пользователя и передавать полученную переменную DOCS в качестве переменной userlist в механизм шаблона.
Затем создайте наш шаблон EJS. Откройте index.ejs в каталоге представлений, сохраните как userlist.ejs и измените его HTML на это:
Кода -копия выглядит следующим образом:
<! Doctype html>
<html>
<голова>
<Teal> userList </title>
<Link rel = 'styleSheet' href = '/styleSheets/style.css'/>
</head>
<тело>
<h1> пользовательский список </h1>
<ul>
<%
для (var i in userlist) {
%>
<li> <a href = ”mailto: <%= userlist [i] .email%>”> <%= userlist [i] .username%> </a> </li>
< %} %>
</ul>
</body>
</html>
Сохраните файл и перезапустите сервер узлов. Надеюсь, вы все еще помните, как перезапустить. Откройте браузер и посетите http: // localhost: 3000/userlist, и вы должны увидеть интерфейс, подобный этому:
Нажмите кнопку «Отправить», и вы увидите ошибку «Не могу публиковать в /Adduser». Давайте исправим это.
Шаг 2 Создайте функцию обработки базы данных
Как и прежде, мы изменяем app.js, затем маршрут файл, а затем шаблон EJS. Тем не менее, здесь нет необходимости в шаблоне EJS, потому что мы будем прыгать, чтобы отправиться позже. Добавьте строку после App.get () абзаца app.js:
Кода -копия выглядит следующим образом:
app.post ('/adduser', routes.adduser (db));
Обратите внимание, что это app.post, а не app.get. Давайте установим маршрут. Вернитесь к routes/index.js и создайте нашу функцию вставки базы данных. Это довольно много, поэтому я предлагаю вам написать хороший комментарий.
Кода -копия выглядит следующим образом:
exports.adduser = function (db) {
возврат функции (req, res) {
// Получить значения нашей формы. Они полагаются на атрибуты «имя»
var username = req.body.username;
var usermail = req.body.useremail;
// Установить нашу коллекцию
var collection = db.get ('usercollection');
// подчиняться БД
collection.insert ({
«Имя пользователя»: имя пользователя,
«Электронная почта»: пользовательские почты
}, function (err, doc) {
if (err) {
// Если это не удалось, вернуть ошибку
res.send («Была проблема добавления информации в базу данных»);
}
еще {
// Если это сработало, установите заголовок, чтобы адресная панель все еще не говорила /Adduser
res.location ("пользовательский список");
// и пересылать страницу успеха
res.redirect ("пользовательский список");
}
});
}
}
Очевидно, что в реальных проектах вам все еще нужно провести много проверки, таких как имя пользователя и электронная почта, не разрешают дублирование, а адрес электронной почты должен соответствовать определенным правилам формата. Но теперь давайте не будем заботиться об этих вещах. Вы можете видеть, что когда будет выполнена база данных вставки, мы позволяем пользователю возвращаться на страницу пользователя, где он должен увидеть вновь вставленные данные.
Это лучший способ?
Шаг 3 Подключитесь к базе данных и напишите данные
Убедитесь, что ваш Mongod работает! Затем перезапустите сервер узлов. Откройте http: // localhost: 3000/newuser с вашим браузером. Теперь мы заполняем какой -то контент и нажимаем кнопку «Отправить». Если все пойдет хорошо, мы должны вернуться на страницу пользователя и увидеть новые данные, которые мы только что добавили.
Теперь мы официально завершили чтение и запись в базу данных MongoDB, используя node.js, exress и ejs. Мы уже программист NIU X.
Поздравляю, правда. Если вы серьезно закончили этот урок и очень серьезно относитесь к обучению, а не просто копировать код, у вас должна быть полная концепция маршрутов, просмотров, чтения данных и написания данных. Вот все знания, которые вам нужно использовать для разработки любого другого полного веб -сайта! Независимо от того, что вы думаете, я думаю, что это действительно круто.
Часть 5 Следующий шаг
Теперь начните, у вас есть неограниченные возможности. Вы можете взглянуть на Mongoose, еще один пакет узлов, который обрабатывает базы данных MongoDB. Это немного больше, чем монаха, и имеет больше функций. Вы также можете взглянуть на стилус, экспресс -двигатель CSS. Вы можете Google Node Express Mongo Tutorial и посмотреть, что будет дальше. Учиться усердно и улучшать каждый день.
Я надеюсь, что это руководство поможет, я написал это, потому что, когда я начал учиться, мне действительно нужно что -то подобное, но я действительно не мог его найти. Если вы видели это здесь, большое спасибо!