Перейти к содержимому

Как подключить node js к html

  • автор:

HTML/CSS/JS + Node.js + node-webkit = Кроссархитектурные приложения

С ростом популярности node.js он становится всё более привлекательным для разработки приложений. По крайней мере я в последнее время очень часто использую эту технологию для быстрой разработки оных. И на данный момент, технологически нет никаких препятствий для разработки кроссплатформенных приложений на одном языке. И не только классических Web-приложений (клиент-сервер) но и десктопных.

1. Если нужен быстрый старт, ставим express 

npm install express

2. Создаём файл server.js примерно следующего содержания: 

 var express = require('express'); var http = require('http'); var index = require('./routes/index.js'); var app = express(); // Куча всяких настроек express`а app.get('/', index.index); http.createServer(app).listen(app.get('port'), function()< console.log('Express server listening on port ' + app.get('port')); >);

3. Создаём файл index.js и кладём его в папку routes 

exports.index = function(req, res)< res.render('index', <>); >;

4. Создаём index.ejs (я использую ejs как шаблонизатор) и кладём его в папку view 

    Hello world  Hello world!   
node server.js

Остаётся скопировать файлы на сервер, настроить nginx на проксирование запросов к нашему сервису… ну это Вы знаете. Но ведь не всегда есть желание или возможность возится с сервером. И даже если запускать проект локально… много возни. Хочется чего-нибудь «из коробки». Чтобы кликнул мышкой на ярлыке и приложение запустилось.

Проект node-webkit, анонсирование которого имеется на хабре, пригодится для сборки подобного.
Суть технологии в том, чтобы можно было внедрить api node.js в клиентский javascript-код. Т.е. вы можете соединяться с БД и файловой системой из клиентского кода напрямую, без посредников. Звучит заманчиво, и кстати работает, но мне не очень по душе такое смешение. Получается исключительно десктопное приложение. Мне по нраву другой вариант.
Приложение выполнено в классическом для web-приложений стиле: клиентский код и серверный. И я должен иметь возможность запускать его как на сервере, предоставляя многопользовательский доступ и как локальное (однопользовательское) приложение.

Вот рецепт:
1. node-webkit должен знать о стартовой html-странице которую он будет отображать первой.
дописываем в package.json следующее 

"main": "nw-start.html"

2. nw-start.html будет следующего содержания 

       
Loading.

3. Весь код server.js сделаем immediate-функцией. 

(function startServer()< var express = require('express'); var app = express(); . http.createServer(app).listen(app.get('port'), function()< console.log('Express server listening on port ' + app.get('port')); >); >)();

4. Упаковываем весь проект в zip-архив nw-project.zip
5. Запускаем 

nw nw-project.zip


После недолгой паузы во время которой загружается «серверная» часть

Суть происходящего достаточно проста. node-webkit загружает стартовую страницу. После этого выполняется клиентская функция bodyOnLoad. bodyOnLoad загружает модуль server.js (вызов node.js require). Вызов приводит к исполнению кода в server.js и, следственно, запуску http-сервера. Осталось только сменить URL страницы, что и делает window.location.assign(‘http://localhost:3000/’).

Подобный подход позволяет не меняя архитектуры web-приложения сделать его desktop-версию. Правда надо понимать, что за эту простоту придётся заплатить некоторой производительностью… ведь обмен данными будет происходить не напрямую, а через сетевые запросы.

Как подключить express в HTML файл?

Разрабатываю сайт для oracledb. У меня есть файл index.js в котором хранятся функции на подключение к базе данных. Я хочу вызывать эти функции из HTML документа (К примеру: при нажатии на кнопку). Попробовал подключить через script type = «text/javascript» src=»https://qna.habr.com/q/index.js»> , но не помогло. Так-же express.require не помогло. Может есть какие либо способы ?

  • Вопрос задан 07 мая 2023
  • 124 просмотра

1 комментарий

Простой 1 комментарий

GeraJet

Не проще ли будет прикрутить к бд apex?
Решения вопроса 1

Starina_js

Иван @Starina_js
full-stack web dev

Эм, не очень понятен вопрос. Express является фреймворком для разработки серверных приложений на языке JavaScript, который работает на Node.js. Вы не можете подключить Express напрямую в HTML файл

Чтобы делать нужные вам вещи, вам нужно через javascript на фронте обращаться к серверу , который как раз написан на Express

В данном примере мы обращаемся к странице / роут — /connect
Этот роут слушает Express и на запрос отвечает / что-то делает

// index.js (серверное приложение с использованием Express) const express = require('express'); const app = express(); // Функции для подключения к базе данных // . // Обработка GET-запроса на /connect app.get('/connect', (req, res) => < // Вызов функции подключения к базе данных // . // Отправка ответа клиенту res.send('Подключение к базе данных выполнено успешно'); >); // Запуск сервера на порту 3000 app.listen(3000, () => < console.log('Сервер запущен на порту 3000'); >);

Запуск HTTP-сервера и выдача HTML-файла

Node не только содержит возможность обрабатывать JS-файлы, как мы только что сделали, он также может создать HTTP-сервер. Мы собираемся рассмотреть создание HTTP-сервера с Node-фреймворком Express для обработки HTML-файла.

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

Давайте придерживаться того же приложения, добавив фреймворк Express с выдачей HTML-файла. Нам понадобятся те же файлы (package.json, server.js) и к ним мы добавим новый файл index.html.

Express: Node-фреймворк

Одним из самых больших преимуществ Node является то, что он содержит поддержку множества пакетов. Сообщество отправляет много пакетов в npm и на момент написания в нём хранится 129257 пакетов, которые загрузили свыше 17694831 раз за последний день. Это большое достижение!

Пакеты расширяют функциональность нашего приложения и найдутся пакеты для многих разных случаев применения.

Вы, возможно, слышали о Grunt, Gulp или даже препроцессорах CSS вроде Less — всё это может быть пакетом.

Express — лёгкая платформа для создания веб-приложений с использованием Node.js. Express помогает организовать веб-приложение на стороне сервера. Сайт ExpressJS описывает его как «минимальной и гибкий Node-фреймворк для веб-приложений».

Express скрывает много внутренней работы Node, которая позволяет вам погрузиться в код приложения, получать всякие штуки и работать намного быстрее. Он прост для изучения и ещё даёт вам немного гибкости с его структурой.

Существует причина, почему в настоящее время это самый популярный фреймворк для Node. Вот несколько больших имён использующих Express:

Для просмотра полного списка зайдите на эту страницу.

Express поставляется с несколькими замечательными возможностями, которые добавят лёгкости в вашу разработку:

  • маршрутизация;
  • обработка запросов;
  • настройки приложения;
  • связующее программное обеспечение.

Не волнуйтесь, если эти термины являются для вас новыми. Просто знайте, что Express делает разработку намного проще и работать с ним в радость.

Установка Express

Пакеты для конкретного приложения Node определяются в package.json. Для получения установленных пакетов вы можете использовать один из двух методов:

  • Метод 1: Написать пакет в package.json.
  • Метод 2: В командной строке использовать npm install.

Мы собираемся использовать второй метод. Перейдите в командную строку и наберите:

$ npm install express --save

Модификатор —save сообщает npm, что он должен записать этот пакет в ваш файл package.json. Если вы выполните эту команду и посмотрите файл package.json, то заметите, что пакет появился в разделе dependencies. Вы также заметите, что была создана новая папка с именем node_modules. В ней Node хранит пакеты для конкретного проекта.

Меняться проектами между разработчиками и сотрудниками очень легко. Просто отправьте другим пользователям ваш проект и они запустят npm install чтобы установить всё из раздела dependencies.

Поскольку у нас уже есть Node и готов Express, используем их для создания HTTP-сервера и выдачи HTML-файла нашим пользователям.

Создание HTTP-сервера и отправка HTML-файла

Начнём с лёгкой части на нашем пути — с HTML-файла. В проекте создайте новый файл index.html и поместите внутрь следующее:

    Моё Node-приложение!   body Моё приложение!

Мы будем ссылаться на CSS из фреймворка Bootstrap через Bootstrap CDN, это поможет нам быстро сделать стилизацию для этой демонстрации.

Двинемся вперёд и создадим наш HTTP-сервер в Node с помощью Express. Удалите всё из файла server.js и добавьте то что нам понадобится:

// берём Express var express = require('express'); // создаём Express-приложение var app = express(); // создаём маршрут для главной страницы // http://localhost:8080/ app.get('/', function(req, res) < res.sendfile('index.html'); >); // запускаем сервер на порту 8080 app.listen(8080); // отправляем сообщение console.log('Сервер стартовал!');

Кроме этого файла больше ничего не требуется, чтобы использовать Express для запуска HTTP-сервера и отправки HTML-файла!

require() является основным путём вызова пакета в Node. После создания Express-приложения в app , мы можем определить маршрут с помощью переменной HTTP. app.get() создаёт GET маршрут /.

При создании маршрутов, мы всегда будем иметь доступ к req (запрос) и res (ответ). Запрос содержит информацию из браузера. Ответ — это то, что мы отправим обратно пользователю. Мы используем sendfile() , но гораздо больше вещей можно сделать, отправляя данные обратно в формате JSON с помощью res.json() .

Сервер запускается через app.listen() и туда же передаётся желаемый порт 8080.

Чтобы убедиться что всё работает, перейдите в командную строку, чтобы обработать этот файл и запустить сервер.

$ nodemon server.js

Теперь мы можем посмотреть на наш сайт в браузере по адресу http://localhost:8080.

Всякий раз, когда мы запускаем сервер с Node, он будет размещён по адресу http://localhost:НОМЕР_ПОРТА.

Это очень лёгкий и быстрый способ создать HTTP-сервер и начать разработку. Node и Express могут применяться для создания удивительных приложений или при необходимости они просто запускают простой сервер для работы.

Отлично! Мы уже много сделали с Node:

  • установили Node;
  • обработали очень простой файл;
  • использовали npm для установки пакета;
  • создали HTTP-сервер с Express;
  • отобразили HTML-файл.

Давайте сделаем следующий шаг и создадим приложение, которое на самом деле показывает соответствующие данные.

Как подключить node js к html

Рассмотрим, как в Node.js + Express отправлять пользователю статические файлы html. Для работы со статическими файлами в Express определен специальный компонент express.static() , который указывает на каталог с файлами.

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

  • app.js : главный файл приложения
  • node_modules
  • package.json
  • public : папка где будет определен один файл
    • about.html

    В папке public будет располагаться файл about.html со следующим содержимым:

    О сайте

    О сайте

    Теперь определим в файле app.js следующий код:

    const express = require("express"); const app = express(); app.use(express.static("public")); app.use("/", function(_, response)< response.send("
    Главная страница
    "); >); app.listen(3000);

    Чтобы встроить компонент express.static в процесс обработки запроса, вызывается функция app.use() . Эта функция позволяет добавлять различные компоненты, которые еще называются middleware, в конвейер обработки запроса:

    app.use(express.static("public"));

    Причем данный вызов помещается до всех остальных вызовов функции app.get() .

    В саму же функцию express.static() передается путь к папке со статическими файлами. В данном случае мы указываем относительный путь — к папке «public» внутри текущей папки проекта. При необходимости также можно задать абсолютный путь:

    app.use(express.static(__dirname + "/public"));

    Здесь специальное выражение __dirname позволяет получить полный путь к папке, к которому далее добавляется путь «/public».

    Запустим приложение на выполнение и обратимся в браузере по пути «http://localhost:3000/about.html»:

    Статические файлы html в Express и Node.js

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

    Дополнительно мы можем изменить путь к каталогу статических файлов:

    const express = require("express"); const app = express(); app.use("/static", express.static("public")); app.use("/", function(_, response)< response.send("
    Главная страница
    "); >); app.listen(3000);

    Теперь чтобы обратиться к файлу about.html , необходимо отправить запрос http://localhost:3000/static/about.html .

    В заключение стоит отметить, что таким образом мы можем определить различные пути к статическим файлам. Например, у нас файлы html располагаются в однйо папке, стили — в другой, а клиентские скрипты javascript — в третьей:

    app.use(express.static("html")); app.use(express.static("styles")); app.use(express.static("scripts"));
    Похожие публикации:
    1. Input signal not found монитор hp что делать
    2. Как изменить размер слайда в powerpoint
    3. Как удалить программу в ubuntu
    4. Куда вкручивается буксировочный крюк фольксваген т5

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *