Вчера написал мало, потому что случился затык с тем, что те уроки, которые я слушал (а я предпочитаю видеоуроки), были слишком разные: в одном запускали сервер, но он работал только с консолью; в другом дошли до POST-запросов, выводили их на страницу, но не в базу данных; в третьем работали только с базой данных в собственной консоли; в четвертом делали всё, что нужно, но подключали дополнительный пакет mongoose, который часть необходимой работы делал неочевидной. В итоге я запутался и решил сделать всё сначала, самостоятельно, по возможности без дополнительных пакетов. Задача приложения - показывать пользователю страницу с формой и собирать введенные им данные в базу данных. Сегодня - первая часть.
1. Поскольку всё с самого начала, то создаём папку с проектом и в консоли переходим в неё.
2. С помощью комманды npm init создаём package.json.
3. Создаём файл index.js и пишем в нём сервер - такой, который писали в первом посте про JavaScript. Кстати там мой код (а не из Википедии), который должен создавать и запускать веб-сервер, не должен работать, потому что там не указан адрес '127.0.0.1' - простите, не проверил. Правильный код вот:
Если всё в порядке, в консоли видим Web-server is working, а в браузере по адресу 127.0.0.1:3000 - HTML.
4. Как показали беглые разыскания, совсем без дополнительных пакетов ничего не получится. Поэтому решил всё-таки вернуться к express, а с тем, как работать без него, разберусь потом. Для начала его надо установить: npm install express. Тот же самый сервер с использованием express выглядит так:
Единственное отличие - он пока ничего не показывает в браузере.
5. Чтобы исправить это, установим и укажем шаблонизатор - ejs. Создадим папку views, в которой будут лежать шаблоны. Далее - создадим шаблоны (файлы с расширением .ejs вместо .html - я о них упоминал уже) и сделаем маршрутизацию. Теперь наш код выглядит так:
и отображает страницу /views/404.ejs
6. Это, разумеется, тренировка - давайте всё-таки переименуем файл в form.ejs. Теперь зададим код для шаблона, например, такой:
Выглядит вот так (стили и прочее я не прикручивал - только функционал):
7. Добавим обработчик для POST-запроса (как в прошлом посте) и сделаем вывод, пока что в консоль. Для этого просто добавим в обработчик строку console.log(req.body); Ура!
Не работает... Сервер запускается, страница ввода видна, но в обработчик не заходит. Почему?
Проверяем всё. Оказывается, забыли добавить в код формы указание на метод. Добавляем:
Не работает. Хотя в обработчик запроса уже заходит, но в консоли показывает пустое тело {}. То есть не парсит. Почему?
Потому что в строки, где описывается ввод имейла и пароля не добавили атрибут name. Добавляем:
name="email"
name="pass"
Проверяем - работает!
Итак - повторение пройденного получилось в целом неплохим. На сегодня хватит, пожалуй.
1. Поскольку всё с самого начала, то создаём папку с проектом и в консоли переходим в неё.
2. С помощью комманды npm init создаём package.json.
3. Создаём файл index.js и пишем в нём сервер - такой, который писали в первом посте про JavaScript. Кстати там мой код (а не из Википедии), который должен создавать и запускать веб-сервер, не должен работать, потому что там не указан адрес '127.0.0.1' - простите, не проверил. Правильный код вот:
Если всё в порядке, в консоли видим Web-server is working, а в браузере по адресу 127.0.0.1:3000 - HTML.
4. Как показали беглые разыскания, совсем без дополнительных пакетов ничего не получится. Поэтому решил всё-таки вернуться к express, а с тем, как работать без него, разберусь потом. Для начала его надо установить: npm install express. Тот же самый сервер с использованием express выглядит так:
Единственное отличие - он пока ничего не показывает в браузере.
5. Чтобы исправить это, установим и укажем шаблонизатор - ejs. Создадим папку views, в которой будут лежать шаблоны. Далее - создадим шаблоны (файлы с расширением .ejs вместо .html - я о них упоминал уже) и сделаем маршрутизацию. Теперь наш код выглядит так:
и отображает страницу /views/404.ejs
6. Это, разумеется, тренировка - давайте всё-таки переименуем файл в form.ejs. Теперь зададим код для шаблона, например, такой:
Не работает... Сервер запускается, страница ввода видна, но в обработчик не заходит. Почему?
Проверяем всё. Оказывается, забыли добавить в код формы указание на метод. Добавляем:
Не работает. Хотя в обработчик запроса уже заходит, но в консоли показывает пустое тело {}. То есть не парсит. Почему?
Потому что в строки, где описывается ввод имейла и пароля не добавили атрибут name. Добавляем:
name="email"
name="pass"
Проверяем - работает!
Итак - повторение пройденного получилось в целом неплохим. На сегодня хватит, пожалуй.
Комментариев нет:
Отправить комментарий