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