Question

我已经启动了新的单页应用程序。到目前为止，我已经能够创建登录/身份验证过程并为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的主页。然后我的网址看起来像这样：

https://example.com/Home.cfm

在Home.cfm中，我有组织并加载到不同.html文件中的代码。代码可以正常工作，并且性能不错，但是我想使用MVC之类的JQuery导航模板方法。我更喜欢使用当前的技术stak JQuery，Bootstrap 3，HTML5，CSS和ColdFusion2016。我查看了几个示例，但仍然不了解如何重新组织应用程序。我在网站上使用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将其导航到其他模板。基本上，这将显示/隐藏屏幕上的元素。如果有人可以提供一些很好的教程或示例，说明如何进行组织，请告诉我。

如何使用JQuery和ColdFusion 2016组织单页应用导航？

0 个答案: