Хобрук: Ваш путь к мастерству в программировании

Дерево проекта для приложения с динамическим бэкендом HTML и интерфейсом javascript

У меня есть небольшой домашний проект, представляющий собой одностраничное приложение (Node.js + express.js + представления EJS), которое также включает javascript на стороне клиента. Я начал внутреннюю часть структуры проекта, используя простую структуру проекта, состоящую из структуры ./src, объединяющей весь серверный javascript, и структуры ./public для обслуживания всех статических битов. Однако мне не ясно, как клиентский javascript должен вписываться в эту структуру проекта.

Другие вопросы о stackoverflow на Node.js, , такие как этот, предлагаю хранить код на стороне сервера в ./lib, а код на стороне клиента в ./app, но мне не имеет смысла называть код на стороне сервера библиотечным кодом. Другие источники, такие как неавторитетные сообщения в блогах, заменяют ./lib на ./server и заканчивают работу. Однако это не похоже на улучшение.

Поскольку javascript на стороне клиента обслуживается вместе с представлениями EJS, нет особого смысла разделять проект на проекты на стороне сервера и на стороне клиента.

Имея это в виду, как лучше всего организовать структуру проекта для приложения одной эпохи на основе представлений Node.JS+EJS+template?

node.js express single-page-application
05.11.2020

Ответы:


1

С упомянутой структурой разделения вашего проекта на ./client и ./server я уже видел, что она использовалась с одностраничным приложением в проектах React. Но для этого требуется дважды запустить узел или использовать новый пакет, чтобы позаботиться об этом.

Я использую тот же стек, что и вы, и рекомендую то же, что и в другой теме, для профессиональных экспресс-приложений, упростите его, используя:

/
  /bin - scripts, helpers, binaries
  /lib - your application
  /config - your configuration
  /public - your public files
  /test - your tests

Теперь есть другой вариант, когда я рекомендую оставить файлы на стороне сервера, .gitignore и .env в корневой папке. А в остальном вы помещаете все в папку клиента или любое другое имя, которое вы выберете для своего приложения. Для быстрого обновления вашего проекта вы можете добавить пакет Express Generator и установить его глобально. В настоящее время он поставляется со следующими зависимостями:

  "dependencies": {
    "cookie-parser": "~1.4.4",
    "debug": "~2.6.9",
    "ejs": "~2.6.1",
    "express": "~4.16.1",
    "http-errors": "~1.6.3",
    "mongodb": "^3.6.6",
    "morgan": "~1.9.1"
  }

Используя эту команду: экспресс -e клиент

У вас должна получиться такая структура проекта:

client/
  /bin - scripts, helpers, binaries
  /public - your public files
  /routes - exporting your home route
  /views - your views and partials for EJS

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

18.05.2021
Новые материалы
Создание кнопочного меню с использованием HTML, CSS и JavaScript
Вы будете создавать кнопочное меню, которое имеет состояние наведения, а также позволяет вам выбирать кнопку при нажатии на нее. Финальный проект можно увидеть в этом Codepen . Шаг 1..
Внедрите OAuth в свои веб-приложения для повышения безопасности
OAuth — это широко распространенный стандарт авторизации, который позволяет приложениям получать доступ к ресурсам от имени пользователя, не раскрывая его пароль. Это позволяет пользователям..
Классы в JavaScript
class является образцом java Script Object. Конструкция «class» позволяет определять классы на основе прототипов с чистым, красивым синтаксисом. // define class Human class Human {..
Как свинг-трейдеры могут использовать ИИ для больших выигрышей
По мере того как все больше и больше профессиональных трейдеров и активных розничных трейдеров узнают о возможностях, которые предоставляет искусственный интеллект и машинное обучение для улучшения..
Как построить любой стол
Я разработчик программного обеспечения. Я люблю делать вещи и всегда любил. Для меня программирование всегда было способом создавать вещи, используя только компьютер и мое воображение...
Обзор: Машинное обучение: классификация
Только что закончил третий курс курса 4 часть специализации по машинному обучению . Как и второй курс, он был посвящен низкоуровневой работе алгоритмов машинного обучения. Что касается..
Разработка расширений Qlik Sense с qExt
Использование современных инструментов веб-разработки для разработки крутых расширений Вы когда-нибудь хотели кнопку для установки переменной в приложении Qlik Sense? Когда-нибудь просили..