Как подключить html и css файлы к серверу на node.js?
Как подключить html и css файлы к серверу на node.js не используя Express, Nest, Hapi?
Вот что я написал, но думаю что это не корректно.
let http = require('http'); let fs = require('fs'); let path = require('path'); http.createServer(function(req, res)< if(req.url === "/")< fs.readFile('index.html', null, function(err, html)< res.writeHead(200, ); res.end(html); >); > else if(req.url.match('style.css'))< var cssPath = path.join(__dirname, req.url); var fileStream = fs.createReadStream(cssPath); res.writeHead(200, ); fileStream.pipe(res); > else< res.writeHead(404, ); res.end("404 Not Found"); > >).listen(3000, () => console.log('Server work'));- Вопрос задан более года назад
- 784 просмотра
Как подключить express в HTML файл?
Разрабатываю сайт для oracledb. У меня есть файл index.js в котором хранятся функции на подключение к базе данных. Я хочу вызывать эти функции из HTML документа (К примеру: при нажатии на кнопку). Попробовал подключить через script type = «text/javascript» src=»https://qna.habr.com/q/index.js»> , но не помогло. Так-же express.require не помогло. Может есть какие либо способы ?
- Вопрос задан 07 мая 2023
- 131 просмотр
1 комментарий
Простой 1 комментарий
Не проще ли будет прикрутить к бд apex?
Решения вопроса 1
Иван @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'); >);Как подключить скрипт node js к своему сайту на html?
У меня есть верстка на html и скрипт node.js, который подключается к Базе Данных Mysql, потом должен собирать данные с формы html и отправлять их в Базу Данных MySql. Сейчас скрипт работает при открытии его через термина. Как сделать чтобы при отправке формы(нажатии на кнопку) срабатывал скрипт node js и отправлял данные с формы в БД? PS Попробовал в тупую подключить файл с скриптом node js перед в файле HTML, но выдает ошибку connect.js:1 Uncaught ReferenceError: require is not defined. Мой скрипт:
const mysql = require('mysql'); const conn = mysql.createConnection(< host: "localhost", user: "root", database: "mysestbase", password: "root" >); const name = document.querySelector('#signin_name').value; const mail = document.querySelector('#signin_mail').value; const phone = document.querySelector('#signin_phone').value; document.querySelector('.signin-btn').addEventListener('click', (e)=> < e.preventDefault(); conn.connect(err =>< if (err)< console.log(err); return err; >else < console.log("database --- ok"); >>); let query = "INSERT INTO `test` (`id`, `Name`, `PhoneNum`, `Mail`) VALUES ('', '%name%', '%phone%', '%mail%');"; query = query.replace('%name%', name); query = query.replace('%phone%', phone); query = query.replace('%mail%', mail); conn.query(query, (err, result)=>< console.log(err); console.log(result); >); conn.end(err =>< if (err)< console.log(err); return err; >else < console.log("database --- finished"); >>) >);Подключение скриптов с использованием Express.
Добавлено через 23 минуты
По-видимому, express.static ‘скрепляет’ эти файлы, но в описании я ничего об этом не нашел. К примеру, тут даже в комментариях задали этот вопрос:https://metanit.com/web/nodejs/4.4.php
Лучшие ответы ( 3 )
94731 / 64177 / 26122
Регистрация: 12.04.2006
Сообщений: 116,782
Ответы с готовыми решениями:
Подключение скриптов
Скрипты нужно все сразу при загрузке страницы одним файлом загружать или по мере необходимости -.
Подключение скриптов
Приветствую. Использую динамическую подгрузку скриптов $.getScript(‘../js/script.js’); и возникло.
Подключение скриптов
Здравствуйте! Подскажите что не так, при вызове функции перестает отображать все index.php .
Подключение скриптов
Приветствую, форумчане! Столкнулся с такой проблемой: на определенных страницах не работают js.
364 / 263 / 104
Регистрация: 28.08.2013
Сообщений: 624
Сообщение было отмечено Schulzkafer как решение
Решение
5147 / 2760 / 464
Регистрация: 05.10.2013
Сообщений: 7,284
Записей в блоге: 145
Сообщение было отмечено Schulzkafer как решение
Решение
Надо выкладывать минимальный неработающий пример, который бы демонстрировал проблему. Нужно максимально помочь другим, чтобы они помогли вам. Я например не могу решать проблему если я не могу это позапускать и поэкспериментировать. Я скопировал всё что есть в вашем вопросе себе и запустил. У меня и квадрат выводится
Результат без ошибок:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15
html> head> meta charset="utf-8"> title>JustDoIttitle> link href="/style.css" rel="stylesheet"> head> body> div id="square">div> script src="/script.js"> script> body> html>
1 2 3 4 5
#square { width: 50px; height: 50px; background-color: brown; }
console.log("My script");
1 2 3 4 5 6 7 8 9 10 11 12 13
const express = require("express"); const http = require("http"); const path = require("path"); const app = express(); app.use(express.static(__dirname + "/")); app.get("/", function(request, response) { response.sendFile(__dirname + "/index.html"); // next(); }); const httpServer = http.createServer(app); const port = process.env.PORT || 3000; httpServer.listen(port, () => { console.log("Server started. Port: ", port); });
Нужно отметить, что у метанита сказано, что нужно создавать специальную папку (например, с именем «public») для статики, которая будет доступна браузеру, а не делать серверные скрипты доступные браузеру.
Регистрация: 31.12.2019
Сообщений: 418
Сообщение от 8Observer8 
Надо выкладывать минимальный неработающий пример, который бы демонстрировал проблему.
Вы правы (пытался сократить при этом чтобы было понятно)
Вы правильно поняли мой пример, вопрос был лишь в том почему если убрать фразу app.use(express.static(__dirname + «/»)); перестает работать подключение =>=>=>
Сообщение от 8Observer8
Нужно отметить, что у метанита сказано, что нужно создавать специальную папку (например, с именем «public») для статики, которая будет доступна браузеру, а не делать серверные скрипты доступные браузеру.
Несколько раз обратил внимание на эту фразу, но фраза <а не делать серверные скрипты доступные браузеру.>меня всегда сбивала с толку. Но в целом понятно, для статических файлов всегда должно быть app.use(express.static(__dirname + «/»));
5147 / 2760 / 464
Регистрация: 05.10.2013
Сообщений: 7,284
Записей в блоге: 145
Сообщение от Schulzkafer
Вы правильно поняли мой пример, вопрос был лишь в том почему если убрать фразу app.use(express.static(__dirname + «/»)); перестает работать подключение =>=>=>
Я что-то с первого раза не понял вопрос. Да, действительно, если закомментировать подключение директории статичных файлов, то выскакивает две ошибки:
localhost/:1 Refused to apply style from ‘http://localhost:3000/style.css’ because its MIME type (‘text/html’) is not a supported stylesheet MIME type, and strict MIME checking is enabled.
GET http://localhost:3000/script.js net::ERR_ABORTED 404 (Not Found)
Вторая понятна по тексту, что скрипт «script.js» не был найден. Первая ошибка всегда будет возникать, если браузер не может найти css-файл. Да, index.html вы отослали браузеру. Браузер открывает index.html, в котором написано, что нужно подключить файл style.css и браузер пытается его запросить, но не может его загрузить потому что доступ к этому файлу закрыт. Чтобы открыть доступ ко всем файлам из указанной директории и существует express.static. Заметьте, что если вы открыли доступ пользователей к корней директории, то пользователь может посмотреть код вашего сервера обратившить по адресу: www.ваш_сайт.com Локально можете проверить: http://localhost:3000/app.js
5147 / 2760 / 464
Регистрация: 05.10.2013
Сообщений: 7,284
Записей в блоге: 145
Стили, клиентские скрипты и всё что нужно браузеру должно быть в папке «public». У стилей и у клиентских скриптов должны быть отдельные папки:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15
html> head> meta charset="utf-8"> title>JustDoIttitle> link href="css/style.css" rel="stylesheet"> head> body> div id="square">div> script src="js/script.js"> script> body> html>
1 2 3 4 5 6 7 8 9 10 11 12 13
const express = require("express"); const http = require("http"); const path = require("path"); const app = express(); app.use(express.static(__dirname + "/public")); app.get("/", function(request, response) { response.sendFile(__dirname + "/index.html"); // next(); }); const httpServer = http.createServer(app); const port = process.env.PORT || 3000; httpServer.listen(port, () => { console.log("Server started. Port: ", port); });