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

Все страницы на моем 5-страничном сайте должны выводиться с использованием сервера Node.js.

Большая часть содержимого страницы статична. В нижней части каждой страницы имеется немного динамического содержимого.

В настоящее время мой Node.js код выглядит следующим образом:

var http = require('http'); 

http.createServer(function (request, response) {

    console.log('request starting...');

    response.writeHead(200, { 'Content-Type': 'text/html' });

    var html = '<!DOCTYPE html><html><head><title>My Title</title></head><body>';
    html += 'Some more static content';
    html += 'Some more static content';
    html += 'Some more static content';
    html += 'Some dynamic content';
    html += '</body></html>';

    response.end(html, 'utf-8');

}).listen(38316);

Я уверен, что в этом примере есть много ошибок. Пожалуйста, просветите меня! Например:

  • Как добавить статический контент в страницы, не сохраняя ее в строке как переменное значение с + = много раз?
  • Каков наилучший способ создания небольшого сайта в Node.js, где все страницы представляют собой смесь между статическим и динамическим контентом?

Ответы

Ответ 1

Лично я использую сервер с конструкциями более высокого уровня. Например, взгляните на фреймворк expressjs - http://expressjs.com/

Конструкции, которые вам интересны из этого пакета:

  • Истинно статические файлы (активы и т.д.): app.use(express.static(__ dirname + '/public'));
  • Язык шаблонов, например, нефрит, усы и т.д.:

Например, в jade:

!!! 5
html(lang="en")
  head
    title= pageTitle
    script(type='text/javascript')
      if (foo) {
         bar()
      }
  body
    h1 Jade - node template engine
    #container
      - if (youAreUsingJade)
        p You are amazing
      - else
        p Get on it!

становится:

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Jade</title>
    <script type="text/javascript">
      if (foo) {
        bar()
      }
    </script>
  </head>
  <body>
    <h1>Jade - node template engine</h1>
    <div id="container">
      <p>You are amazing</p>
    </div>
  </body>
</html>

Если вы предпочитаете что-то немного менее решительное, я бы сказал, посмотрите на усы или один из других движков, который выглядит немного больше, чем обычный html-соус.

Ответ 2

Альтернатива вы можете просто использовать jsDOM. Это означает, что у вас есть объект DOM, который вы можете манипулировать на сервере, чтобы добавить свой динамический контент, тогда вы можете просто очистить DOM как HTML файл/строку

Ответ 3

В наши дни ответ не так прост.

Если вам не нужно индексировать Google, рассмотрите возможность создания одностраничного приложения с помощью socket.io и клиентских шаблонов, таких как jQuery Templates. Существуют даже новые рамки node.js для этого типа архитектуры, например. socketstream.

Если вам нужно проиндексировать Google, нужен ли вам динамический контент для индексирования? Если да, рассмотрите возможность использования express и серверных шаблонов, таких как ejs, jade или mustache. Другой (обескураженный) подход может заключаться в том, чтобы генерировать XML из JSON на сервере и использовать front-end XSLT.

Если вам требуется только статический контент для индексирования, рассмотрите возможность использования express на сервере, но не создавайте динамический HTML на сервере. Вместо этого отправьте свой динамический контент в формате JSON клиенту с помощью AJAX или socket.io и выполните его с использованием клиентских шаблонов, таких как jQuery Templates.

Не рассматривайте серверную DOM: DOM не масштабируется для сложных макетов, вы погружаетесь в море селекторов и вызовов DOM. Даже разработчики на стороне клиента понимали это и реализовали клиентские шаблоны. Новый многообещающий подход - библиотека weld. Он предлагает лучшее из обоих миров, но он еще не созрел для использования в производстве (например, простые вещи, такие как условное рендеринг, еще не поддерживаются).

Ответ 4

Один хороший способ - использовать шаблонный движок. Вы можете хранить шаблоны в виде отдельных файлов, а механизм шаблонов может сделать динамический контент. Лично я использую yajet (http://www.yajet.net/), который написан для Интернета, но отлично работает с node, и существует множество шаблонов для node для npm.

Ответ 5

Одна из лучших вещей, которые я нашел, - использовать NodeJS, Express и Mustache...

Вы можете создавать свои HTML-страницы, как обычно, используя синтаксис Mustache для заполнителей для ваших переменных {{name}}...

Когда пользователь нажимает на ваш сайт, выражайте путь к правильному шаблону... NodeJS получить файл... NodeJS получает набор данных из базы данных... Запустите его через Mustache на сервере... Отправьте завершенную страницу клиенту...

Вот небольшая версия, которую я написал в своем блоге. Это просто, но идея довольно хорошая. Я использую его для быстрого развертывания страниц на моем сайте.

http://devcrapshoot.com/javascript/nodejs-expressjs-and-mustachejs-template-engine

Я пошел по этому маршруту, потому что не хотел изучать весь дополнительный синтаксис для написания языка, который я уже знал (html). Это имеет больший смысл и больше соответствует истинному шаблону MVC.

Ответ 6

Сначала доставляйте только статические файлы HTML с сервера на клиент. Затем используйте что-то вроде AJAX/server.io для обслуживания динамического содержимого. IMO Jade действительно уродлив для написания HTML-кода и его лучше использовать механизм шаблонов.

Я сделал несколько Google и нашел код этого парня, это хорошо, если вы делаете это для PoC/learning.

var server = require('./server'); 
var controller = require("./controller"); 
var urlResponseHandlers = require("./urlResponseHandlers");   

var handle = {};   
handle["/"] = urlResponseHandlers.fetch; 
handle["/fetch"] = urlResponseHandlers.fetch; 
handle["/save"] = urlResponseHandlers.save;   
server.start(controller.dispatch, handle);

Вот как отображается логика обработки URL-адресов -

var staticHandler = require('./staticHandler');

function dispatch(handler, pathname, req, res) {
  console.log("About to dispatch a request for " + pathname);
  var content = "Hey " + pathname;
  if (typeof handler[pathname] === 'function') {
      content += handler[pathname](req);
      res.writeHead(200, {
          'Content-Type': 'text/html'
      });
      res.write(content);
      res.end();
  } else {
      console.log("No request handler found for " + pathname);
      staticHandler.handleStatic(pathname, res);
  }

}

Вот как можно обрабатывать статические файлы -

function handleStatic(pageUrl, response) {
    var filename = path.join(process.cwd(), pageUrl);
    path.exists(filename, function (exists) {
        if (!exists) {
            console.log("not exists: " + filename);
            response.writeHead(404, {
                'Content-Type': 'text/html'
            });
            response.write('404 Not Found\n');
            response.end();
            return;
        }
        //Do not send Content type, browser will pick it up. 
        response.writeHead(200);
        var fileStream = fs.createReadStream(filename);
        fileStream.on('end', function () {
            response.end();
        });
        fileStream.pipe(response);
        return;
    });
}
exports.handleStatic = handleStatic;

Мне понравилась эта идея. Весь код скопирован из эта ссылка! .

Ответ 7

Я делал то же самое в своем приложении, размещенном в интрасети. Сначала я поставляю статический файл с использованием локального сервера CDN kinda, чем я вызываю Nodejs для извлечения динамического содержимого.

Ответ 8

Обнаружено это решение без использования каких-либо других модулей и/или других script, чтобы сделать вызов script в модуль и включить его с помощью функции require().
С помощью этого решения я могу использовать javascript, который когда-либо мне нужен
То, что я сделал бы, это сделать ajax-вызов nodejs script (www.example.com/path/script.js)
script.js нужно будет построить как модуль с exports.functionName=function(){...}
После этого включите его в свою функцию веб-сервера require(pathToTheScript).functionName(res,req)
Вам также нужно будет закончить ответ в функцииName (res, req), выполнив res.end();