Это руководство предназначено для новичков, которые хотели начать с Node.js. Мы создадим простой веб-сайт с помощью Node.js и платформы Express и будем использовать механизм просмотра EJS для управления нашим HTML-кодом.
Предварительные требования
Шаг 1. Установите nodejs и npm.
Следуйте ссылкам в соответствии с вашей средой разработки
Если все установлено правильно, откройте терминал и введите node -v и npm -v, и вы должны получить следующий вывод в зависимости от версии, которую вы установили.
node -v 8.9.1 npm -v 5.8.0
Шаг 2. Установите пакет экспресс-генератора глобально (g означает глобальную команду в)
npm install express-generator -g
Узнайте больше об экспрессе на https://expressjs.com/
Шаг 3: Чтобы запустить наш сервер узлов, мы установим пакет nodemon глобально.
npm install nodemon -g
Узнайте больше о nodemon на https://www.npmjs.com/package/nodemon
Я надеюсь, что до сих пор мы находимся на одной и той же странице, пора поработать руками с кодом. Пристегните ремень безопасности. Поехали…
Откройте терминал и перейдите в свой каталог, в котором вы хотите разместить код, и введите
express --view=ejs mywebsite
Как я уже сказал, мы будем использовать ejs view engine для управления нашим HTML-кодом на протяжении всего руководства, и эта команда создаст скелет нашего приложения узла и установит ejs в качестве нашего механизма представления по умолчанию.
Следующим шагом будет установка всех зависимостей, перечисленных в файле mywebsite / package.json. Перейдите в каталог myapp и введите
npm install
Теперь у нас все готово для запуска нашего сервера узлов, введите команду
nodemon start
Если вы видите следующий вывод в своем терминале, вуаля !!! сервер узла запущен и работает
[nodemon] 1.11.0 [nodemon] to restart at any time, enter `rs` [nodemon] watching: *.* [nodemon] starting `node ./bin/www start`
Теперь откройте свой браузер и настройтесь на следующий URL-адрес
http://localhost:3000
Вы увидите следующую страницу
3000 - это порт no, который настроен по умолчанию, вы можете изменить его, отредактировав файл mywebsite / bin / www.
Откройте файл mywebsite / app.js, вы увидите
var index = require('./routes/index');
Итак, это место, где мы будем определять все маршруты нашего веб-сайта, то есть файлы маршрутов / индекса.
Откройте файл routes / index.js и замените запись маршрута.
Old
/* GET home page. */
router.get('/', function(req, res, next) {
res.render('index', { title: 'Express' });
});
New
/* GET home page. */
router.get('/', function(req, res, next) {
res.render('index', {page:'Home', menuId:'home'});
});
мы передаем переменную page и menuId в индексный файл представления.
Теперь откройте файл views / index.ejs и замените свой код следующим
<!DOCTYPE html>
<html lang="en">
<head>
<% include partials/head %>
</head>
<body>
<% include partials/menu %>
<div class="container-fluid bg-3 text-center">
<h3><%= page %></h3><br>
<div class="row">
<div class="col-sm-4">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
<div class="col-sm-4">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
<div class="col-sm-4">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
</div>
</div>
</body>
<% include partials/script %>
</html>
Создайте каталог partials в каталоге mywebsite / views и создайте следующие файлы в каталоге partials
- head.ejs
<title>Static Website | <%= page %></title> <meta charset="utf-8"> <meta name="active-menu" content="<%= menuId %>"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <link rel="stylesheet" href="./stylesheets/style.css">
2. menu.ejs
<nav class="navbar navbar-default">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">LOGO</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav navbar-right">
<li id="home"><a href="/">HOME</a></li>
<li id="about"><a href="/about">ABOUT US</a></li>
<li id="contact"><a href="/contact">CONTACT US</a></li>
</ul>
</div>
</div>
</nav>
3. script.ejs
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <script src="./javascripts/menu.js"></script>
Если вы заметили, мы разделили код нашего заголовка, меню верхней панели и основных скриптов (javascript, который должен быть загружен на всех страницах). И все файлы partials включены в файл views / index.ejs.
<% include partials/head %> <% include partials/menu %> <% include partials/script %>
Создайте каталог javascripts и таблиц стилей внутри каталога mywebsite / public и создайте новый файл menu.js внутри каталога javascript и style.css внутри каталога таблиц стилей. Я создал эти 2 файла, чтобы показать, как мы можем загрузить внешний файл CSS и js в наше приложение.
4. menu.js
$(document).ready(function(){
var element = $('meta[name="active-menu"]').attr('content');
$('#' + element).addClass('active');
});
5. style.css
.bg-3 {
background-color: #ffffff;
color: #555555;
}
.container-fluid {
padding-top: 70px;
padding-bottom: 70px;
}
.navbar {
padding-top: 15px;
padding-bottom: 15px;
border: 0;
border-radius: 0;
margin-bottom: 0;
font-size: 12px;
letter-spacing: 5px;
}
.navbar-nav li a:hover {
color: #1abc9c !important;
}
.active>a {
color: #1abc9c !important;;
}
Теперь снова настройтесь на URL http://localhost:3000, наша обновленная домашняя страница будет загружена аналогичным образом, вы можете создать несколько статических представлений, как мы это делали для индексной страницы.
Вы можете найти полный код на GitHub.
