Как организовать навигацию одностраничного приложения с помощью JQuery и ColdFusion 2016? - PullRequest
Новая
       41

Как организовать навигацию одностраничного приложения с помощью JQuery и ColdFusion 2016?

0 голосов
/ 14 сентября 2018

Я запустил свое новое одностраничное приложение.До сих пор я смог создать процесс входа в систему / аутентификации и создать шаблоны для страницы Home.cfm.Просматривая веб-страницы, я вижу, что JQuery может предоставить шаблон навигации для одностраничного приложения.Мой текущий кодекс - старая мода, и вот что у меня есть.Итак, в корневой папке у меня есть index.html, и вот содержимое этой страницы: 

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="Refresh" content="0; URL=Login.cfm" />
</head>
<body></body>
</html>

Вы можете увидеть url в метатеге, перенаправляющем на Login.cfm.Первым делом я хотел бы, чтобы на моем веб-сайте отображалось только имя веб-сайта вместо того, что у меня сейчас: 

https://example.com/Login.cfm

После того, как пользователь введет имя пользователя и пароль в Login.cfm, я буду обрабатывать аутентификацию с помощью Auth.cfc, где япроверьте учетные данные пользователя.Если они успешно пройдут этот шаг, я приведу их к Home.cfm.Эта страница является главной страницей моего SPA.Тогда мой URL выглядит так: 

https://example.com/Home.cfm

В Home.cfm у меня есть код, который организован и загружен в разные .html файлы.Код работает, и у меня приличная производительность, но я хотел бы использовать метод шаблона навигации JQuery, например MVC.Я бы предпочел использовать свои текущие технологии Stak JQuery, Bootstrap 3, HTML5, CSS и ColdFusion 2016. Я просмотрел несколько примеров, но все еще не понимал, как реорганизовать мое приложение.Я использую IIS веб-сервер на моем сайте.Вот пример моей Home.cfm страницы: 

#main-container {
  padding-top: 20px;
}

.nav-tabs {
  margin-bottom: 0;
}

.tab-content {
  padding-bottom: 10px;
}

div.tab-box {
  background-color: #f8f8f8;
  ;
}

ul.nav-tabs>li.active>a,
ul.nav-tabs>li.active>a:focus,
ul.nav-tabs>li.active>a:hover {
  background-color: #f8f8f8;
}
<!DOCTYPE html>
<html lang="en">

<head>
  <title>SPA</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <script language="javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script language="javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>

<body>
  <div id="main-container" class="container">
    <nav class="navbar navbar-default">
      <div class="container-fluid">
        <p class="navbar-text"><span class="glyphicon glyphicon-home"></span> <b>Welcome to My Application!</b></p>
        <ul class="nav navbar-nav navbar-right">
          <li class="dropdown">
            <a class="dropdown-toggle" data-toggle="dropdown" href="#">Menu<span class="caret"></span></a>
            <ul id="main-menu" class="dropdown-menu">
              <li class="active"><a href="/tab1-page" data-container="tab1-container">Tab 1</a></li>
              <li><a href="/tab2-page" data-container="tab2-container">Tab 2</a></li>
              <li><a href="/tab3-page" data-container="tab3-container">Tab 3</a></li>
            </ul>
          </li>
          <li>
            <a href="#" data-toggle="popover" role="button">
              <span class="glyphicon glyphicon-user"></span>
            </a>
          </li>
          <li>
            <a href="#" data-toggle="confirmation" data-popout="true" role="button" id="log_out">
              <span class="glyphicon glyphicon-log-in"></span> Logout</a>
          </li>
        </ul>
      </div>
    </nav>
    <div id="tab1-container">
      <cfinclude template="Includes/Tab1.html">
    </div>
    <div id="tab2-container">
      <cfinclude template="Includes/Tab2.html">
    </div>
    <div id="tab3-container">
      <cfinclude template="Includes/Tab3.html">
    </div>
  </div>
  <script language="javascript" src="JS/Tab1.js"></script>
  <script language="javascript" src="JS/Tab2.js"></script>
  <script language="javascript" src="JS/Tab3.js"></script>
</body>

</html>

Я использую JQuery для перехода пользователя к другому шаблону, когда они нажимают на меню.В основном это покажет / скроет элементы на экране.Если кто-то может предоставить хороший учебник или пример того, как это можно организовать, пожалуйста, дайте мне знать.

...