/
64mb
/
node-labs-ru
Обзор
Документация
Войти
/
64mb
/
node-labs-ru
Код
Запросы
0
Пакеты
0
Релизы
0
Аналитика
master
express.html
142 строки
12 KB
Georgy Malkov
init
03 ноя 2021, 12:02
03 ноя 2021, 12:02
49d714e
Код
Авторство
О чём код?
<!DOCTYPE html> <html> <!-- Mirrored from www.nodelabs.org/express.html by HTTrack Website Copier/3.x [XR&CO'2014], Mon, 04 Sep 2017 18:01:56 GMT --> <!-- Added by HTTrack --><meta http-equiv="content-type" content="text/html;charset=utf-8" /><!-- /Added by HTTrack --> <head> <title>Экспресс-платформа веб-приложений - Node Labs</title> <link href="css/post.css" rel="stylesheet" type="text/css"/> <link href="css/pygments.css" rel="stylesheet" type="text/css"/> <link href='http://fonts.googleapis.com/css?family=Droid+Sans:400,700|Droid+Sans+Mono' rel='stylesheet' type='text/css' /> <script src="../ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <script src="../cdn.jsdelivr.net/jquery.cookie/1.3.1/jquery.cookie.js"></script> <script src="../nodelabs.herokuapp.com/socket.io/socket.io.html"></script> <script src="js/unlock.js"></script> <script type="text/javascript"> (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){ (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o), m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m) })(window,document,'script','../www.google-analytics.com/analytics.js','ga'); ga('create', 'UA-35011668-1', 'nodelabs.org'); ga('require', 'linkid', 'linkid.html'); ga('send', 'pageview'); </script> </head> <body> <div id="header"> <a href="index.html" title="Take me home!"><img src="css/img/logotype_dark.png" /></a> </div> <h1 id="express-web-application-framework">Экспресс-платформа веб-приложений</h1> <p>Express - простой фреймворк для создания веб-приложений на Node. Эта лаба продемонстрирует, как структурировать простое Express приложение.</p> <h2 id="bootstrapping-express">Bootstrapping Express</h2> <p>Express требует небольшой конфигурации для того, чтобы начать. Для начала давайте приглядимся к обслуживанию HTML-страницы. Это не требует никаких аддонов к Express'у или сложным конфигурациям.</p> <p>Создайте новый каталог для этой лабы. Нам нужно установить Express NPM модуль. Для начала этого процесса сгенерируем файл <code>package.json</code>, используя следующие команды из нового каталога:</p> <div class="highlight"><pre><code class="language-bash" data-lang="bash">> npm init</code></pre></div> <p>Запустите, подставля любые значения, которые вам нравятся. Следуем дальше с установкой Express модуля:</p> <div class="highlight"><pre><code class="language-bash" data-lang="bash">> npm install express --save</code></pre></div> <p>Добавим Express модуль в ваш файл <code>package.json</code> (подому что предусмотрена –save). Это позволит вам просто установить npm в будущем, чтобы вытащить необходимые зависимости для старта приложения.</p> <p>Сейчас создайте файл <code>server.js</code> – этот файл будет бутстрапом нашего Express-базированного приложения.</p> <p>Здесь простейшее приложение:</p> <div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="kd">var</span> <span class="nx">express</span> <span class="o">=</span> <span class="nx">require</span><span class="p">(</span><span class="s1">'express'</span><span class="p">);</span> <span class="kd">var</span> <span class="nx">app</span> <span class="o">=</span> <span class="nx">express</span><span class="p">();</span> <span class="nx">app</span><span class="p">.</span><span class="nx">get</span><span class="p">(</span><span class="s1">'/'</span><span class="p">,</span> <span class="kd">function</span> <span class="p">(</span><span class="nx">req</span><span class="p">,</span> <span class="nx">res</span><span class="p">)</span> <span class="p">{</span> <span class="nx">res</span><span class="p">.</span><span class="nx">send</span><span class="p">(</span><span class="s1">'Hello World!'</span><span class="p">);</span> <span class="p">});</span> <span class="nx">app</span><span class="p">.</span><span class="nx">listen</span><span class="p">(</span><span class="mi">3000</span><span class="p">);</span></code></pre></div> <p>Сейчас запустим сервер простым запуском со следующими командами в <code>http://localhost:3000/</code>.</p> <div class="highlight"><pre><code class="language-bash" data-lang="bash">> node server.js</code></pre></div> <h2 id="we-need-more">Мы можем больше!</h2> <p>Все верно, так мы отвечаем на каждый запрос из корневого пути с <code>Hello World!</code>, сейчас попробуем ввести шаблонный движок.</p> <p>Выберем популярный шаблонный движок <a href="https://www.npmjs.org/package/jade">Jade</a>. Чтобы добавить Jade функционал, давайте установим модуль и сохраним его в <code>package.json</code>.</p> <div class="highlight"><pre><code class="language-bash" data-lang="bash">> npm install jade --save</code></pre></div> <p>Сейчас, когда модуль установлен, нужно настроить Express для отображения наших представлений. Сделаем это, используя функцию <code>app.engine</code>.</p> <div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="kd">var</span> <span class="nx">express</span> <span class="o">=</span> <span class="nx">require</span><span class="p">(</span><span class="s1">'express'</span><span class="p">);</span> <span class="kd">var</span> <span class="nx">app</span> <span class="o">=</span> <span class="nx">express</span><span class="p">();</span> <span class="nx">app</span><span class="p">.</span><span class="nx">engine</span><span class="p">(</span><span class="s1">'jade'</span><span class="p">,</span> <span class="nx">require</span><span class="p">(</span><span class="s1">'jade'</span><span class="p">).</span><span class="nx">__express</span><span class="p">);</span> <span class="nx">app</span><span class="p">.</span><span class="nx">get</span><span class="p">(</span><span class="s1">'/'</span><span class="p">,</span> <span class="kd">function</span> <span class="p">(</span><span class="nx">req</span><span class="p">,</span> <span class="nx">res</span><span class="p">)</span> <span class="p">{</span> <span class="nx">res</span><span class="p">.</span><span class="nx">render</span><span class="p">(</span><span class="s1">'index.jade'</span><span class="p">);</span> <span class="p">});</span> <span class="nx">app</span><span class="p">.</span><span class="nx">listen</span><span class="p">(</span><span class="mi">3000</span><span class="p">);</span></code></pre></div> <p>В этой точке нам нужно добавить каталог <code>views</code> и создать файл <code>index.jade</code> со следующим содержанием:</p> <div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="nx">html</span> <span class="nx">head</span> <span class="nx">title</span> <span class="nx">The</span> <span class="nx">page</span> <span class="nx">title</span> <span class="nx">body</span> <span class="nx">Hello</span> <span class="nx">world</span> <span class="nx">from</span> <span class="nx">Jade</span><span class="o">!</span></code></pre></div> <p>Сейчас пополним данными для представления. Это можно сделать, передавая второй аргумент к <code>render</code>, вызванный в <code>server.js</code>.</p> <div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="kd">var</span> <span class="nx">express</span> <span class="o">=</span> <span class="nx">require</span><span class="p">(</span><span class="s1">'express'</span><span class="p">);</span> <span class="kd">var</span> <span class="nx">app</span> <span class="o">=</span> <span class="nx">express</span><span class="p">();</span> <span class="nx">app</span><span class="p">.</span><span class="nx">engine</span><span class="p">(</span><span class="s1">'jade'</span><span class="p">,</span> <span class="nx">require</span><span class="p">(</span><span class="s1">'jade'</span><span class="p">).</span><span class="nx">__express</span><span class="p">);</span> <span class="nx">app</span><span class="p">.</span><span class="nx">get</span><span class="p">(</span><span class="s1">'/'</span><span class="p">,</span> <span class="kd">function</span> <span class="p">(</span><span class="nx">req</span><span class="p">,</span> <span class="nx">res</span><span class="p">)</span> <span class="p">{</span> <span class="nx">res</span><span class="p">.</span><span class="nx">render</span><span class="p">(</span><span class="s1">'index.jade'</span><span class="p">,</span> <span class="p">{</span><span class="nx">name</span><span class="o">:</span> <span class="s1">'Joe'</span><span class="p">});</span> <span class="p">});</span> <span class="nx">app</span><span class="p">.</span><span class="nx">listen</span><span class="p">(</span><span class="mi">3000</span><span class="p">);</span></code></pre></div> <p> Сейчас используем этот объект в <code>index.jade</code>. Возьмем на заметку знак <code>=</code>. Это позволит вам вывести значение с правой стороны страницы.</p> <div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="nx">html</span> <span class="nx">head</span> <span class="nx">title</span> <span class="nx">The</span> <span class="nx">title</span> <span class="nx">goes</span> <span class="nx">here</span><span class="o">!</span> <span class="nx">body</span> <span class="nx">p</span> <span class="nx">Hello</span> <span class="nx">h2</span><span class="o">=</span> <span class="nx">name</span></code></pre></div> <p>Существует множество информации для изучения Jade и Express. Посетите соответствующие сайты, чтобы узнать больше.</p> <div id="next"> <div class="continue"> <a href="javascript-must-knows.html"> <!-- Please don't just skip through these, actually do the labs! --> Так держать! Продолжение в следующей лабе. <span>Обязательный JavaScript</span> </a> </div> </div> <div id="footer"> <p>Labs created by <a href="https://twitter.com/joeandaverde">@joeandaverde</a></p> <p>Учебный материал переведен <a href="https://t.me/Rat_Z">@Rat_Z</a> и <a href="https://t.me/Alex_Ebenrode">@Alex_Ebenrode</a></p> </div> </body> <!-- Mirrored from www.nodelabs.org/express.html by HTTrack Website Copier/3.x [XR&CO'2014], Mon, 04 Sep 2017 18:01:57 GMT --> </html>