Я хотел понять общую архитектуру для разработки одностраничного приложения (главным образом через JavaScript).
Скажем, у меня есть страница входа в систему (Usernam/Password), и при успешной аутентификации мне показана домашняя страница. Теперь и экраны входа в систему и на главной странице должны быть частью одной страницы.
Как я могу создать такую страницу?
Это такой широкий вопрос, что все книги могут быть написаны, чтобы ответить на него подробно.
В основном вам нужно использовать AJAX вместо перезагрузки страниц. Вам все равно необходимо подключиться к серверу для проверки подлинности пользователей, но вместо повторной загрузки всей страницы каждый раз, когда вы это делаете, вам необходимо сделать вызов AJAX на ваш сервер и в зависимости от того, был ли вход в систему успешным или не изменил некоторые части содержимого на странице (например, изменение кнопки "Вход" в сообщение "Вы вошли как пользователь xxx" и т.д.).
Если вы еще этого не видели, у Джона Папы очень популярный курс по разработке Single Pages Applications on Pluralsight: http://www.pluralsight.com/training/Courses/TableOfContents/single-page-apps-jumpstart
Для этого требуется подписка Pluralsight, но вы можете получить 10-дневную бесплатную пробную версию, чтобы подтвердить, что контент ценен для вас. (Я не связан с Pluralsight, кстати.)
Вы можете посмотреть эту бесплатную Отдельную страницу приложения. Я нашел его, когда я открыл Google Apps для отдельных страниц.
Вы можете вдохновляться существующими решениями, которые вы можете найти в Интернете:
Я просто добавил проект SourceForge, который может помочь. Я развиваю эту библиотеку уже около года, и я думаю, что она готова к прайм-тайму. Этот проект позволяет вам ссылаться на asp.net MVC из JavaScript.
https://sourceforge.net/projects/peachajax/
Эта библиотека генерирует динамический код JavaScript для использования для операций AJAX. Для библиотеки требуется jQuery. Например, если вы используете метод Action в контроллере для операции AJAX, вы можете быстро получить доступ к нему через динамически созданный файл JavaScript следующим образом:
peach.ControllerName.ActionMethodName(parameter1, parameter2, parameter3); // javascript
Отображаемые параметры напрямую связаны с параметрами ActionMethods.
Возможности настройки включают в себя:
Если вы больше похожи на MVC, я лично использовал chaplinjs.org, основанный на основе магистрали, и hbs для одностраничного приложения. У меня есть несколько модификаций для использования websockets вместо длинных опросов, но это довольно неплохо, и если вы знакомы с mvc, достаточно легким для входа (вы столкнетесь с большими проблемами с позвоночником, чем с Чаплином)
Вам нужна страница 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. В файле модели вы будете подключаться к БД и проверять предоставленные учетные данные. В связи с этим вы будете привязывать слушателей к элементам управления. В контроллере вы будете реагировать на нажатие пользователем кнопки "Отправить".