Как отправить содержимое браузера, например изображения, CSS и JS, используя Node, Express в HTML через браузер?

Question

Работа над проектом и попытка использовать nodejs и express для использования API.Возникают проблемы при отображении информации.

При открытии файла index.html напрямую в браузере он отображается идеально.Но при попытке сделать это с node и express, получите следующее:

server.js:

var Access_token = 'ACCESS_TOKEN';

var AirTable = require('airtable');
var base = new AirTable({apiKey:Access_token}).base('BASE');
var TableName = 'TABLE_NAME';
var ViewName = 'Grid view';

var express = require('express');
var app = express();


app.get('/', function(request, response){
  console.log(__dirname);
  response.sendFile(__dirname + '/index.html');
});

var listener = app.listen(process.env.PORT || '3000', function(){
  console.log("Your app is listening to port " + listener.address().port);
});

Вот так выглядит каталог моих файлов

Что происходит и что мне делать?Он ясно показывает index.html, но никогда не тянет css, scripts или images.

Answer 1

добавив к ответу esqew, вы должны переместить все статические файлы в папку (например, public) и реализовать app.use:

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

из вашего кода вы ссылаетесь на него со статическим и в файловой системе имя папки "public"

Answer 2

Возможно, вы захотите перейти к одностраничному приложению по мере роста проекта или обучения новым вещам.

используйте это в своем server.js, это поможет вам несколькими способами в долгосрочной перспективе.

const path  = require('path');

// Setup views directory, file type and public filder.
app.set('views', __dirname + '/views');

// ejs is just like html, stands for Embedded JavaScript templates. 
app.set('view engine', 'ejs');

// This will allow all your files in public folder available on browser.
// Files like JS, CSS, and Images
app.use(express.static(path.join(__dirname, 'public')));

app.get('/', (req, res) => {
    res.render('login');
});

Структура папки:

1. public
├─ 1. css
|  ├─ 1. app.css
|  ├─ 2. bootstrap.min.css
|  └─ 3. jquery-modal.min.css
├─ 2. js
|  ├─ 1. app.js
|  ├─ 2. jquery-modal.min.js
|  └─ 3. jquery.min.js
└─ 3. logo.jpg
2. views
├─ 1. index.ejs
└─ 2. login.ejs
6. .gitignore
7. app.js
8. package.lock.json
9. package.json

Все ejs - это просто HTML с расширением .ejs вместо .html.

Answer 3

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

app.use(express.static('css'));
app.use(express.static('fonts'));
app.use(express.static('img'));
app.use(express.static('js'));

Документы: Обслуживание статических файлов в Express