9.8 C
Москва
19.10.2026

из предыдущего столбца и закрывающими тегами для ряда, контейнера и HTML документа. Обязательно оставьте эти теги на месте, когда вы будете добавлять следующий код для создания столбца:
~/node_project/views/getshark.html

Здесь вы используете теги шаблона EJS и метод forEach() для вывода каждого значения в коллекции sharks , включая информацию о последней добавленной акуле.

Весь контейнер со всеми тремя столбцами, включая столбец с коллекцией sharks , будет выглядеть следующим образом после завершения этих действий:

~/node_project/views/getshark.html

. 
Sawshark

Sammy the Shark

    Name:

    Character: ); %>

Сохраните и закройте файл после завершения редактирования.

Чтобы приложение могло использовать созданные вами шаблоны, вам нужно будет добавить несколько строк в файл app.js . Откройте его снова:

Над местом, куда вы добавили функцию express.urlencoded() , добавьте следующие строки:

~/node_project/app.js

. app.engine('html', require('ejs').renderFile); app.set('view engine', 'html'); app.use(express.urlencoded( extended: true >)); app.use(express.static(path)); . 

Метод app.engine указывает приложению на необходимость преобразования движка шаблона EJS в HTML файлы, а app.set определяет движок представления по умолчанию.

Теперь ваш файл app.js будет выглядеть следующим образом:

~/node_project/app.js

const express = require('express'); const app = express(); const router = express.Router(); const db = require('./db'); const path = __dirname + '/views/'; const port = 8080; router.use(function (req,res,next)  console.log('/' + req.method); next(); >); router.get('/',function(req,res) res.sendFile(path + 'index.html'); >); router.get('/sharks',function(req,res) res.sendFile(path + 'sharks.html'); >); app.engine('html', require('ejs').renderFile); app.set('view engine', 'html'); app.use(express.urlencoded( extended: true >)); app.use(express.static(path)); app.use('/', router); app.listen(port, function ()  console.log('Example app listening on port 8080!') >) 

Теперь, когда вы создали представления, которые могут динамически работать с данными пользователя, пришло время создать маршруты вашего проекта для объединения представлений и логики контроллера.

Шаг 6 — Создание маршрутов

Завершающим шагом сборки всех компонентов приложения будет создание маршрутов. Мы разделим наши маршруты согласно функциям, включая маршрут к начальной странице нашего приложения и другой маршрут к нашей странице с акулами. Наш маршрут sharks будет находиться там, где мы будем интегрировать логику нашего контроллера с представлениями, которые мы создали на предыдущем шаге.

Во-первых, создайте директорию routes :

Далее откройте в этой директории файл с именем index.js :

Этот файл будет импортировать объекты express , router и path , позволяющие нам определить маршруты, которые мы хотим экспортировать с объектом router , и делая возможной динамическую работу с путем файла. Добавьте следующую строку вверху файла:

~/node_project/routes/index.js

const express = require('express'); const router = express.Router(); const path = require('path'); 

Далее добавьте следующую функцию router.use , которая загружает промежуточную функцию, которая будет регистрировать запросы маршрутизатора и передавать их на маршрут приложения:

~/node_project/routes/index.js

. router.use (function (req,res,next)  console.log('/' + req.method); next(); >); 

Запросы к корню нашего приложения будут направляться сначала сюда, а уже отсюда пользователи будут направляться на начальную страницу нашего приложения согласно маршруту, который мы определим здесь. Добавьте следующий код под функцией router.use для определения маршрута к начальной странице:

~/node_project/routes/index.js

. router.get('/',function(req,res) res.sendFile(path.resolve('views/index.html')); >); 

Когда пользователи будут посещать наше приложение, первым местом, куда мы будем направлять их, будет начальная страница index.html , которую мы разместили в директории views .

Наконец, чтобы сделать эти маршруты доступными в качестве импортируемого модуля в любом месте приложения, добавьте закрывающее выражение в конце файла для экспорта объекта router :

~/node_project/routes/index.js

. module.exports = router; 

Итоговый файл будет выглядеть примерно так:

~/node_project/routes/index.js

const express = require('express'); const router = express.Router(); const path = require('path'); router.use (function (req,res,next)  console.log('/' + req.method); next(); >); router.get('/',function(req,res) res.sendFile(path.resolve('views/index.html')); >); module.exports = router; 

Сохраните и закройте файл после завершения редактирования.

Далее откройте файл sharks.js для определения того, как приложение будет использовать различные конечные точки и представления, которые мы создали для работы с пользовательским вводом данных об акулах:

Вверху файла импортируйте объекты express и router :

~/node_project/routes/sharks.js

const express = require('express'); const router = express.Router(); 

Далее импортируйте модуль с именем sharks , который позволит нам работать с экспортируемыми функциями, определенными с помощью контроллера:

~/node_project/routes/sharks.js

const express = require('express'); const router = express.Router(); const shark = require('../controllers/sharks'); 

Теперь вы можете создавать маршруты с помощью функций index , create и list , определенных в файле контроллера sharks . Каждый маршрут будет ассоциироваться с соответствующим методом HTTP: GET в случае отображения главной страницы с информацией об акулах и возврата списка акул пользователю, и POST в случае создания новой записи акулы:

~/node_project/routes/sharks.js

. router.get('/', function(req, res) shark.index(req,res); >); router.post('/addshark', function(req, res)  shark.create(req,res); >); router.get('/getshark', function(req, res)  shark.list(req,res); >); 

Каждый маршрут использует соответствующую функцию в controllers/sharks.js , поскольку мы сделали этот модуль доступным, импортировав его в верхней части этого файла.

После этого закройте файл, привязав эти маршруты к объекту router и выполнив их экспорт:

~/node_project/routes/index.js

. module.exports = router; 

Итоговый файл будет выглядеть примерно так:

~/node_project/routes/sharks.js

const express = require('express'); const router = express.Router(); const shark = require('../controllers/sharks'); router.get('/', function(req, res) shark.index(req,res); >); router.post('/addshark', function(req, res)  shark.create(req,res); >); router.get('/getshark', function(req, res)  shark.list(req,res); >); module.exports = router; 

Сохраните и закройте файл после завершения редактирования.

Последний шаг на пути к предоставлению доступа к этим маршрутам для вашего приложения будет состоять в их добавлении в app.js . Откройте этот файл снова:

Под вашей константой db добавьте следующий импорт для ваших маршрутов:

~/node_project/app.js

. const db = require('./db'); const sharks = require('./routes/sharks'); 

Далее замените функцию app.use , которая в настоящее время монтирует ваш объект router , на следующую строку, которая будет монтировать модуль маршрута sharks :

~/node_project/app.js

. app.use(express.static(path)); app.use('/sharks', sharks); app.listen(port, function ()  console.log("Example app listening on port 8080!") >) 

Теперь вы можете удалить маршруты, которые были определены в этом файле ранее, поскольку вы импортируете маршруты вашего приложения с помощью модуля маршрутизации sharks .

Окончательная версия файла app.js будет выглядеть следующим образом:

~/node_project/app.js

const express = require('express'); const app = express(); const router = express.Router(); const db = require('./db'); const sharks = require('./routes/sharks'); const path = __dirname + '/views/'; const port = 8080; app.engine('html', require('ejs').renderFile); app.set('view engine', 'html'); app.use(express.urlencoded( extended: true >)); app.use(express.static(path)); app.use('/sharks', sharks); app.listen(port, function ()  console.log('Example app listening on port 8080!') >) 

Сохраните и закройте файл после завершения редактирования.

Теперь вы можете снова запустить tree для просмотра окончательной структуры вашего проекта:

Теперь структура проекта будет выглядеть следующим образом:

Output
├── Dockerfile ├── README.md ├── app.js ├── controllers │ └── sharks.js ├── db.js ├── models │ └── sharks.js ├── package-lock.json ├── package.json ├── routes │ ├── index.js │ └── sharks.js └── views ├── css │ └── styles.css ├── getshark.html ├── index.html └── sharks.html

После создания и добавления всех компонентов вашего приложения вы можете добавить тестовую акулу в базу данных!

Если вы следовали указаниям руководства по начальной настройке сервера из предварительных требований, вам нужно будет изменить ваш брандмауэр, поскольку в настоящее время он пропускает только трафик SSH. Чтобы разрешить трафик на порт 8080 , выполните команду:

Откройте в браузере адрес http:// your_server_ip :8080 . Вы увидите следующую начальную страницу:

Начальная страница приложения

Нажмите кнопку Get Shark Info (Получить информацию об акулах). Вы увидите следующую информационную страницу с добавленной формой ввода акулы:

Форма информации об акуле

В этой форме добавьте акулу по вашему выбору. В демонстрационных целях мы добавим Megalodon Shark в поле Shark Name (Имя акулы) и Ancient в поле Shark Character (Тип акулы):

Заполненная форма акулы

Нажмите кнопку Submit (Отправить). Вы увидите страницу с информацией об акуле, отображаемая для вас:

Вывод акулы

Также вы увидите вывод в консоли, указывающий, что акула добавлена в вашу коллекцию:

Output
Example app listening on port 8080!

Если вы хотите создать новую запись акулы, вернитесь на страницу Sharks и повторите процесс добавления акулы.

Теперь у вас есть рабочее приложение с информацией об акулах, позволяющее пользователям добавить информацию о своих любимых акулах.

Заключение

В этом обучающем руководстве вы создали приложение Node, выполнив интеграцию с базой данных MongoDB и переписав логику приложения с помощью шаблона архитектуры MVC. Это приложение может выступать в качестве хорошей начальной точки для полномасштабного CRUD приложения.

Дополнительную информацию о работе с MongoDB см. в нашей библиотеке обучающих материалов для MongoDB.

Thanks for learning with the DigitalOcean Community. Check out our offerings for compute, storage, networking, and managed databases.

Читать:
Что такое var в java

Похожие записи

Как отключить https в wordpress

admin

Сколько оперативной памяти нужно для windows 10

admin

Как задать класс в css

admin