Блог

Главная - Вопросы по программированию - Создание форума с использованием Node Express EJS и MongoDB

Создание форума с использованием Node Express EJS и MongoDB

#node.js #ajax #mongodb #express #ejs

#node.js #ajax #mongodb #экспресс #ejs

Вопрос:

Я создаю форум с использованием Node, Express, EJS и MongoDB. В настоящее время я визуализирую страницу форума и передаю данные из базы данных с использованием Node и EJS. Я использую запросы GET и POST. Как только я добавляю комментарий, страница сохраняется в базе данных, а затем перенаправляется обратно на тот же маршрут. Затем я могу прокрутить вниз и увидеть свой комментарий. Однако меня это не устраивает, и я хочу, чтобы комментарии и ответы обрабатывались Ajax, чтобы, как только я прокомментирую, без обновления я создавал запрос post и снова без обновления страницы я мог загрузить новый комментарий. Есть предложения о том, как я могу воплотить это в жизнь?

Проект доступен для просмотра наhttps://github.com/Ibrahim40021974/Forum . (Извините за неаккуратный код. Я все еще работаю над контролем версий). Все предложения приветствуются! Заранее спасибо.

Ответ №1:

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

Я закончил с использованием Reactjs, Nodejs, что довольно легко сделать в Reactjs. Если вам интересно, я могу поделиться репозиторием.

Изучил ваш проект и несколько вещей, которые я отметил.

  1. Если я ссылаюсь на правильный (https://github.com/Ibrahim40021974/Forum/blob/master/views/forum.ejs#L69 ) затем вам нужно остановить отправку формы по умолчанию с помощью e.preventDefault() . Отправка формы по умолчанию всегда обновляет страницу, которая вам не нужна. Та же операция с формой, которую вы должны выполнить с вызовом ajax.Например.
 handleFormSubmit(e) {
    e.preventDefault();
    // <add your ajax call here>
}

Как только вы это сделаете, посмотрите, работает ли что-то без обновления страницы.

  1. Посмотрите, поможет ли это вам с тем, как выполнить вызов ajax. https://www.thetopsites.net/article/53326172.shtml

Комментарии:

1. Большое тебе спасибо, Аджай! Я ценю ваш быстрый ответ. Я принял к сведению ваши замечания и работаю над ними. Я был бы рад, если бы вы могли поделиться репозиторием, на который вы ссылались ранее. Еще раз спасибо!

2. @IbrahimKhalil , это репозиторий github.com/ajaysikdar/reactjs-nodejs-gae . Вы также можете воспользоваться помощью этого блога, если это необходимо medium.com/@ajaysikdar /… . Это пример репозитория с одним простым вызовом rest. Это даст вам хороший старт с basic.

3. Большое тебе спасибо, Аджай. Обязательно доведу проект до конца.

Ответ №2:

Как сказал @Ajay kumar, лучший способ — создать одностраничное приложение: такие фреймворки, как react / angular / vue, довольно хороши, когда речь идет об обновлении только части вашей страницы при вставке новых данных.

Тем не менее, вы могли бы сделать это без использования какого-либо из этих фреймворков, но это будет сложно.

Вы можете добавить в свой шаблон ejs логику javascript, которая при отправке вашего комментария будет выполнять следующее :

  1. Отправьте запрос post для отправки нового комментария
  2. Отправьте запрос get, чтобы получить комментарий, связанный с этим сообщением, как только завершится запрос post
  3. обновите DOM (VanillaJS или Jquery), чтобы отобразить список комментариев.

Первый вариант попросит вас изменить архитектуру вашего проекта, но будет проще в управлении, второй даст вам возможность продолжать использовать ejs, но немного сложнее.