Как отправить информацию о файле из серверной части в интерфейсную с помощью NodeJS.

Бывают случаи, когда вы, как разработчик, создаете веб-сайт / приложение, где вам потребуется доступ к определенным файлам, например изображениям, на которые можно ссылаться в файлах JavaScript. Однако JavaScript работает только во внешнем интерфейсе. Из-за этого нет постоянного способа связаться с серверной частью. Вот где пригодится NodeJS с сервером Express.

Начнем с простого файла index.js, содержащего наши маршруты:

var express = require('express');
var router  = express.Router();
router.get('/', function(req, res, next) {
    res.send('Hello, world!');
});

Для этого нужен только один пакет, но знаете что. Вам даже не нужно его устанавливать! Он встроен. Это пакет fs, также известный как Файловая система. Мы будем использовать функцию синхронизации readdirSync (), чтобы захватывать файлы, которые нам нужны. Вверху файла запросите пакет, например:

var fs = require('fs');

А теперь в функцию маршрутизатора мы добавим нашу функцию readdirSync ():

var folders = fs.readdirSync('/path/to/folders');

Это сохранит имена папок всех папок из параметра пути в переменную массива с именем папки. Просто как тот! Что нам теперь делать с этой переменной массива? Что ж, давайте создадим массив объектов. У каждого объекта будет два свойства. Свойство папка, которое будет именем полученной папки, и свойство files, которое будет массивом каждого файла из свойства папки. Давайте сделаем цикл forEach () для создания нашего массива в функции маршрутизатора:

var objArray = [];
folders.forEach((folder) => {
    var obj    = {};
    var files  = fs.readdirSync('/path/to/folders/' + folder);
    obj.folder = folder;
    obj.files  = files;
    objArray.push(obj);
});

Теперь у нас есть массив объектов, которые выглядят так (красиво):

[
  {
    "folder": "FOLDER_01",
    "files": [
      "FILE_01.jpg",
      "FILE_02.jpg",
      "FILE_03.jpg",
      "FILE_04.jpg"
    ]
  },
  {
    "folder": "FOLDER_02",
    "files": [
      "FILE_05.jpg",
      "FILE_06.jpg",
      "FILE_07.jpg",
      "FILE_08.jpg"
    ]
  },
  {
    "folder": "FOLDER_03",
    "files": [
      "FILE_09.jpg",
      "FILE_10.jpg",
      "FILE_11.jpg",
      "FILE_12.jpg"
    ]
  },
  {
    "folder": "FOLDER_04",
    "files": [
      "FILE_13.jpg",
      "FILE_14.jpg",
      "FILE_15.jpg",
      "FILE_16.jpg"
    ]
  },
  {
    "folder": "FOLDER_05",
    "files": [
      "FILE_17.jpg",
      "FILE_18.jpg",
      "FILE_19.jpg",
      "FILE_20.jpg"
    ]
  }
]

Потрясающие! Теперь следующее, что нужно сделать, - это отправить эти данные с нашего сервера Express на интерфейсную часть. В функции маршрутизатора отправьте objArray в функции JSON.stringify () в наше представление индекса. В этом примере мы будем использовать Мопс (мой любимый):

res.render('index', { data: JSON.stringify(objArray) });

Это так просто. Теперь мы можем манипулировать этими данными, как мы хотим, во внешнем интерфейсе, верно? Еще не совсем (вроде). Теперь, если вы будете манипулировать этими данными только через Pug или любой другой интерфейсный фреймворк / шаблонизатор, который вы используете, технически да, это действительно все, что вам нужно сделать. Однако, если вы хотите использовать эти данные в своих файлах JavaScript, у них нет доступа к этим данным. Поэтому нам нужно сохранить его в DOM, чтобы мы могли получить к нему доступ. Есть несколько способов, но давайте выберем самый простой и сохраним его в атрибуте данных элемента. В нашем представлении index.pug просто создайте элемент и сохраните его:

div(data-objData=data)

Поскольку мы отправили переменную objArray с нашего сервера Express в качестве имени data, мы просто устанавливаем для атрибута данных элемента значение «data». Вот так, мы все закончили! Теперь ваши данные доступны для ваших файлов JavaScript. Давайте посмотрим, что мы только что сделали с нашими данными.

Express server -> Pug template -> DOM

Теперь вы можете манипулировать данными, как хотите, в своем JavaScript. Если вы что-то пропустили, вот полный код:

var fs      = require('fs');
var express = require('express');
var router  = express.Router();
router.get('/', function(req, res, next) {
    var folders  = fs.readdirSync('/path/to/folders');
    var objArray = [];
    folders.forEach((folder) => {
        var obj    = {};
        var files  = fs.readdirSync('/path/to/folders/' + folder);
        obj.folder = folder;
        obj.files  = files;
        objArray.push(obj);
    });
    res.render('index', { data: JSON.stringify(objArray) });
});

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