如何使用Spring开发单页应用程序

时间:2018-08-20 06:47:30

标签: spring spring-mvc

我是Spring MVC的初学者,并且正在开发单页应用程序。

在我的应用程序中,我使用了JSP和Bootstrap以及Spring MVC。 我的要求是使我的主页始终对用户可见,并且有导航栏,用户可以从中选择选项。

在导航栏中有下拉菜单,当用户从下拉菜单中选择一个选项时,我正在使用引导程序“模态形式”输入用户输入。这些模式形式通过使用“ jquery”显示,并且它们的代码在同一JSP页面(即我的主页)中。

现在,我的问题是每当我从下拉菜单中选择一个选项并显示相应的模态形式时。我无法在我的“ Spring MVC Controller”之间建立链接,从而无法通过“ Spring Modal Attribute”并链接我的Java类以在后端处理表单。

enter image description here

prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@taglib prefix="form" uri="http://www.sprin    <%@taglib gframework.org/tags/form"%>

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->

    <title>DATALINK SYSTEM</title>

    <!-- Javascript Files -->
    <script src="${pageContext.request.contextPath}/webjars/jquery/3.2.0/jquery.min.js"></script>
    <script src="${pageContext.request.contextPath}/webjars/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<script>
    $(document).ready(function() {

        /*-- Handling PFM Form ---*/
        $('#pfmModal').modal('hide');
        $("li.pfm").click(function() {          
            $('#pfmModal').modal('show');           
        });
    });
</script>


<!-- Bootstrap core CSS -->       
    <link rel="stylesheet" 
        href="${pageContext.request.contextPath}/resources/css/bootstrap.css"/>

    <!-- Custom Style for this template -->
   <link rel="stylesheet"
        href="${pageContext.request.contextPath}/resources/css/style.css" />
  </head>

  <body>

  <!--The Content for Navbar taken from "Cerulean" Theme from "bootswatch.com"--> 
  <nav class="navbar navbar-inverse">
    <div class="container-fluid">
      <div class="navbar-header">   
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
            <span class="sr-only">Toggle Navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
        </button>     
        <a class="navbar-brand" href="#">DATALINK SYSTEM</a>
      </div>

      <div class="navbar-collapse collapse navbar-responsive-collapse">
        <ul class="nav navbar-nav">
          <li class="active"><a href="#">System Info</a></li>

          <li class="dropdown">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown">System Config<span class="caret"></span></a>
                <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">                     

                    <li class="dropdown-submenu">
                        <a tabindex="-1" href="#">CBDL</a>
                            <ul class="dropdown-menu">

                                <li class="pfm"><a tabindex="-1" href="#">Pre-Flight Message</a></li>   
                                <li><a tabindex="-1" href="#">Frequency Selection</a></li>
                                <li><a tabindex="-1" href="#">Select Voice</a></li>
                                <li><a tabindex="-1" href="#">Select Video</a></li>
                                <li><a tabindex="-1" href="#">Select Data Rate</a></li>
                                <li><a tabindex="-1" href="#">Change State</a></li>
                            </ul>               
                    </li> 

                    <li class="dropdown-submenu">
                        <a tabindex="-1" href="#">KBDL</a>
                            <ul class="dropdown-menu">
                                <li><a tabindex="-1" href="#">Pre-Flight Message</a></li>
                                <li><a tabindex="-1" href="#">Frequency Selection</a></li>
                                <li><a tabindex="-1" href="#">Select Voice</a></li>
                                <li><a tabindex="-1" href="#">Select Video</a></li>
                                <li><a tabindex="-1" href="#">Select Data Rate</a></li>
                                <li><a tabindex="-1" href="#">Change State</a></li>
                            </ul>               
                    </li>                                           

                </ul>           
          </li>

          <li class="dropdown">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown">System Maintenance<span class="caret"></span></a>
            <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">

                <li><a href="#">Full Loop Test</a></li>                     

                <li class="dropdown-submenu">
                    <a tabindex="-1" href="#">Built In Test</a>
                        <ul class="dropdown-menu">
                            <li><a tabindex="-1" href="#">Continous-BIT</a></li>
                            <li><a tabindex="-1" href="#">Maintenance-BIT</a></li>
                            <li><a tabindex="-1" href="#">Initiated-BIT</a></li>                                
                        </ul>                   
                </li>
            </ul>          
          </li>

          <li><a href="#">System Log</a></li>          
        </ul>

      </div>
    </div>
  </nav>

  <!-- Bootstrap Modal for PFM Form Starts -->
  <div class="modal fade" id="pfmModal" role="dialog">
    <div class="modal-dialog">

      <!-- Modal content-->
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal">&times;</button>
          <h4 class="modal-title">Pre-Flight Message</h4>
        </div>

        <div class="modal-body">        
            <!-- Adding PFM-Form using Bootstrap-Modal -->
            <form>
            Pre-Flight Message Id : <input type="text" name="messageId">
            <br><br>

            Mode Of Operation :    
                            <input type="radio" name="modeOfOperation" value="CLEAR" checked> Clear Mode
                            <input type="radio" name="modeOfOperation" value="AJ"> AJ Mode
            <br><br>

            Channel Coding :    
                            <input type="radio" name="channelCoding" value="YES" checked> YES
                            <input type="radio" name="channelCoding" value="NO"> NO
            <br><br>

            Primary GES Id : 
            <select name="priGesId">
                <option value="1">1</option>
                <option value="2">2</option>
                <option value="3">3</option>
                <option value="4">4</option>
            </select>

            Aircraft Id : 
            <select name="aircraftId">
                <option value="1">1</option>
                <option value="2">2</option>
                <option value="3">3</option>
                <option value="4">4</option>
            </select>

            <br><br>

            Voice Channel Selection : 
            <select name="voiChSelect">
                <option value="1">Ch-1</option>
                <option value="2">Ch-2</option>
                <option value="3">Ch-3</option>
                <option value="4">Ch-4</option>
                <option value="4">Ch-5</option>
                <option value="4">Ch-6</option>
            </select>

            Frequency Selection : 
            <select name="voiChSelect">
                <option value="1">Freq-1</option>
                <option value="2">Freq-2</option>
                <option value="3">Freq-3</option>
                <option value="4">Freq-4</option>
            </select>


            <br><br>

            <input type="submit" value="Submit">
            </form> 
            <!-- Form Ends -->               
        </div>

        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        </div>
      </div>

    </div>
  </div>
 <!-- Bootstrap Modal for PFM Form Ends  -->   


  </body>
</html>

0 个答案:

没有答案