Архитектура для одностраничного приложения (JavaScript)

Я хотел понять общую архитектуру для разработки одностраничного приложения (главным образом через JavaScript).

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

Как я могу создать такую ​​страницу?

Ответы

Ответ 1

Это такой широкий вопрос, что все книги могут быть написаны, чтобы ответить на него подробно.

В основном вам нужно использовать AJAX вместо перезагрузки страниц. Вам все равно необходимо подключиться к серверу для проверки подлинности пользователей, но вместо повторной загрузки всей страницы каждый раз, когда вы это делаете, вам необходимо сделать вызов AJAX на ваш сервер и в зависимости от того, был ли вход в систему успешным или не изменил некоторые части содержимого на странице (например, изменение кнопки "Вход" в сообщение "Вы вошли как пользователь xxx" и т.д.).

Ответ 2

Если вы еще этого не видели, у Джона Папы очень популярный курс по разработке Single Pages Applications on Pluralsight: http://www.pluralsight.com/training/Courses/TableOfContents/single-page-apps-jumpstart

Для этого требуется подписка Pluralsight, но вы можете получить 10-дневную бесплатную пробную версию, чтобы подтвердить, что контент ценен для вас. (Я не связан с Pluralsight, кстати.)

Ответ 5

Я просто добавил проект SourceForge, который может помочь. Я развиваю эту библиотеку уже около года, и я думаю, что она готова к прайм-тайму. Этот проект позволяет вам ссылаться на asp.net MVC из JavaScript.

https://sourceforge.net/projects/peachajax/

Эта библиотека генерирует динамический код JavaScript для использования для операций AJAX. Для библиотеки требуется jQuery. Например, если вы используете метод Action в контроллере для операции AJAX, вы можете быстро получить доступ к нему через динамически созданный файл JavaScript следующим образом:

peach.ControllerName.ActionMethodName(parameter1, parameter2, parameter3); // javascript

Отображаемые параметры напрямую связаны с параметрами ActionMethods.

Возможности настройки включают в себя:

  • Пользовательские параметры
  • Пользовательские обратные вызовы
  • Пользовательские функции обработки на стороне клиента для параметров (для сериализации специализированных типов моделей)
  • Пользовательские процессоры предварительного запроса
  • Пользовательские процессоры после запроса

Ответ 6

Если вы больше похожи на MVC, я лично использовал chaplinjs.org, основанный на основе магистрали, и hbs для одностраничного приложения. У меня есть несколько модификаций для использования websockets вместо длинных опросов, но это довольно неплохо, и если вы знакомы с mvc, достаточно легким для входа (вы столкнетесь с большими проблемами с позвоночником, чем с Чаплином)

Ответ 7

Вам нужна страница index.html, как показано ниже

<html>
  <body>
    <div id="header"><!-- something cool here --></div> 
      <div id="login" class="view"> ... </div> 
      <div id="home" class="view" style="display:none;"> ... </div>
      <div id="page3" class="view" style="display:none;"> ... </div>
      <div id="page4" class="view" style="display:none;"> ... </div>

     <div id="footer"><!-- something cool here --></div>
  </body>
</html>

Когда приложение загружено, все представления (div с классом представления) скрыты (display: none), кроме представления входа в систему. Вид входа в систему должен иметь форму входа в систему, когда он отправляется пользователем, он инициирует запрос ajax. Когда успешное приложение ajax скрывает страницу входа и отображает домашнюю страницу.

Вы можете структурировать свой код следующим образом. Для каждого модуля у вас будут файлы модели, вида и контроллера.

Например, для модуля входа в систему у вас могут быть loginModel.js, loginView.js, loginCtrl.js. В файле модели вы будете подключаться к БД и проверять предоставленные учетные данные. В связи с этим вы будете привязывать слушателей к элементам управления. В контроллере вы будете реагировать на нажатие пользователем кнопки "Отправить".