Spring Boot、Bootstrap和jQuery的综合应用

约定不等于承诺〃 2021-07-25 00:42 159阅读 0赞

**一 Pom文件**

<project xmlns="http://maven.apache.org/POM/4.0.0"
         xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemaLocation="http://maven.apache.org/POM/4.0.0  http://maven.apache.org/xsd/maven-4.0.0.xsd">
         <modelVersion>4.0.0</modelVersion>
         <groupId>org.fkit</groupId>
         <artifactId>logintest</artifactId>
         <version>0.0.1-SNAPSHOT</version>
         <packaging>jar</packaging>
         <name>logintest</name>
         <url>http://maven.apache.org</url>
         
         <parent>
               <groupId>org.springframework.boot</groupId>
               <artifactId>spring-boot-starter-parent</artifactId>
               <version>2.0.0.RELEASE</version>
               <relativePath />
         </parent>
         <properties>
               <project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
               <project.reporting.outputEncoding>UTF-8</project.reporting.outputEncoding>
               <java.version>1.8</java.version>
         </properties>
         <dependencies>
               
               <dependency>
                    <groupId>org.springframework.boot</groupId>
                    <artifactId>spring-boot-starter-web</artifactId>
               </dependency>
               
               <dependency>
                    <groupId>org.springframework.boot</groupId>
                    <artifactId>spring-boot-starter-thymeleaf</artifactId>
               </dependency>
               <dependency>
                    <groupId>junit</groupId>
                    <artifactId>junit</artifactId>
                    <scope>test</scope>
               </dependency>
         </dependencies>
    </project>

**二 启动类**

package org.fkit.logintest;
    
    import org.springframework.boot.SpringApplication;
    import org.springframework.boot.autoconfigure.SpringBootApplication;
    
    // @SpringBootApplication指定这是一个 spring boot的应用程序.
    @SpringBootApplication
    public class App {
        public static void main(String[] args) {
            // SpringApplication 用于从main方法启动Spring应用的类。
            SpringApplication.run(App.class, args);
        }
    }

**三 控制器**

1 IndexController

package org.fkit.logintest.controller;
    
    import org.springframework.stereotype.Controller;
    import org.springframework.ui.Model;
    import org.springframework.web.bind.annotation.RequestMapping;
    
    // Controller注解用于指示该类是一个控制器
    @Controller
    public class IndexController {
        // 映射"/"请求
        @RequestMapping("/")
        public String index(Model model){
            System.out.println("IndexController index方法被调用......");
            // 根据Thymeleaf默认模板，将返回resources/templates/index.html
            return "index";
        }
    }

2 LoginController

package org.fkit.logintest.controller;
    
    import org.springframework.stereotype.Controller;
    import org.springframework.web.bind.annotation.PostMapping;
    import org.springframework.web.bind.annotation.RequestParam;
    import org.springframework.web.servlet.ModelAndView;
    
    @Controller
    public class LoginController {
        
        @PostMapping("login")
        public ModelAndView login(
                @RequestParam("loginName") String loginName,
                @RequestParam("password") String password,
                ModelAndView mv){
            System.out.println("LoginController login方法被调用......");
            System.out.println("LoginController 登录名:"+loginName + " 密码:" + password);
            // 重定向到到main请求
            mv.setViewName("redirect:/main");
            return mv;
        }
    }

3 MainController

package org.fkit.logintest.controller;
    
    import org.springframework.stereotype.Controller;
    import org.springframework.web.bind.annotation.RequestMapping;
    
    @Controller
    public class MainController {
        @RequestMapping(value="/main")
        public String main(){
            System.out.println("MainController main方法被调用......");
            // 根据Thymeleaf默认模板，将返回resources/templates/main.html
            return "main";
        }
    }

**四 视图**

1 index.html

<!DOCTYPE html>
    <html xmlns:th="http://www.thymeleaf.org">
    <head>
    <meta charset="UTF-8"></meta>
    <title>Spring Boot Web开发测试</title>
    <link rel="stylesheet" th:href="@{css/bootstrap.min.css}" />
    <link rel="stylesheet" th:href="@{css/bootstrap-theme.min.css}"  />
    <script type="text/javascript"  th:src="@{js/jquery-1.11.0.min.js}"></script>
    <script type="text/javascript"  th:src="@{js/bootstrap.min.js}"></script>
    <script type="text/javascript">
         $(function() {
               $("#loginbtn").click(function() {
                    var loginName = $("#loginName");
                    var password = $("#password");
                    var msg = "";
                    if (loginName.val() == "") {
                         msg = "登录名不能为空!";
                         loginName.focus();
                    } else if (password.val() == "") {
                         msg = "密码不能为空!";
                         password.focus();
                    }
                    if (msg != "") {
                         alert(msg);
                    } else {
                         $("#loginform").submit();
                    }
               })
         })
    </script>
    </head>
    <body>
         
         <div class="container">
               
               <div class="row">
                    
                    <div class="page-header">
                         <h2>用户登录</h2>
                         
                         <form class="form-horizontal"  action="login" method="post"
                               id="loginform">
                               <div class="form-group">
                                    
                                    <div class="input-group  col-md-4">
                                         
                                         <span  class="input-group-addon"><i
                                               class="glyphicon  glyphicon-user"></i></span> <input
                                               class="form-control"  placeholder="用户名/邮箱" type="text"
                                               name="loginName"  id="loginName" />
                                    </div>
                               </div>
                               <div class="form-group">
                                    <div class="input-group  col-md-4">
                                         <span  class="input-group-addon"><i
                                               class="glyphicon  glyphicon-lock"></i></span> <input
                                               class="form-control"  placeholder="密码" type="password"
                                               name="password"  id="password" />
                                    </div>
                               </div>
                               <div class="form-group">
                                    <div class="col-md-4">
                                         
                                         <div class="btn-group  btn-group-justified">
                                               <div  class="btn-group">
                                                    <button type="button" class="btn btn-success" id="loginbtn">
                                                         <span  class="glyphicon glyphicon-log-in"></span> 登录
                                                    </button>
                                               </div>
                                               <div  class="btn-group">
                                                    <button  type="button" class="btn btn-danger" id="registerbtn">
                                                         <span  class="glyphicon glyphicon-edit"></span> 注册
                                                    </button>
                                               </div>
                                         </div>
                                    </div>
                               </div>
                         </form>
                    </div>
               </div>
         </div>
    </body>
    </html>

2 main.html

<!DOCTYPE html>
    <html xmlns:th="http://www.thymeleaf.org">
    <head>
    <meta charset="UTF-8"></meta>
    <link rel="stylesheet" th:href="@{css/bootstrap.min.css}" />
    <link rel="stylesheet"  th:href="@{css/bootstrap-theme.min.css}"/>
    <script type="text/javascript"  th:src="@{js/jquery-1.11.0.min.js}"></script>
    <script type="text/javascript"  th:src="@{js/bootstrap.min.js}"></script>
    <title>网站首页</title>
    </head>
    <body>
    <div class="panel panel-primary">
         
         <div class="panel-heading">
               
               <h3 class="panel-title">第一个Spring Boot Web开发示例</h3>
         </div>
    </div>
         <br />
         <br />
         <div class="container">
               <div class="panel panel-primary">
                    
                    <div class="panel-heading">
                         
                         <h3 class="panel-title">图书信息列表</h3>
                    </div>
                    <div class="panel-body">
                         <div class="container">
                               <div class="row">
                                    <div class="col-md-4 col-sm-6">
                                         <a href=""> <img  src="img/java.jpg" alt="图书封面"/>
                                         </a>
                                         <div class="captio">
                                               <h4>疯狂Java讲义</h4>
                                               <p>李刚</p>
                                               <p>电子工业出版社</p>
                                               <p>109.00</p>
                                         </div>
                                    </div>
                                    <div class="col-md-4 col-sm-6">
                                         <a href=""> <img  src="img/ee.jpg" alt="图书封面"/>
                                         </a>
                                         <div class="caption">
                                               <h4>轻量级Java EE企业应用实战</h4>
                                               <p>李刚 编著</p>
                                               <p>电子工业出版社</p>
                                               <p>108.00</p>
                                         </div>
                                    </div>
                                    <div class="col-md-4 col-sm-6">
                                         <a href=""> <img  src="img/SpringMyBatis.jpg" alt="图书封面"/>
                                         </a>
                                         <div class="caption">
                                               <h4>Spring+MyBatis应用实战</h4>
                                               <p>疯狂软件 编著</p>
                                               <p>电子工业出版社</p>
                                               <p>58.00</p>
                                         </div>
                                    </div>
                                    <div class="col-md-4 col-sm-6">
                                         <a href=""> <img  src="img/android.jpg" alt="图书封面"/>
                                         </a>
                                         <div class="caption">
                                               <h4>疯狂Android讲义</h4>
                                               <p>李刚 编著</p>
                                               <p>电子工业出版社</p>
                                               <p>108.00</p>
                                         </div>
                                    </div>
                                    <div class="col-md-4 col-sm-6">
                                         <a href=""> <img  src="img/ajax.jpg" alt="图书封面"/>
                                         </a>
                                         <div class="caption">
                                               <h4>疯狂Ajax开发</h4>
                                               <p>李刚 编著</p>
                                               <p>电子工业出版社</p>
                                               <p>79.00</p>
                                         </div>
                                    </div>
                               </div>
                         </div>
                    </div>
               </div>
         </div>
    </body>
    </html>

**五 测试**

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NoZW5ncWl1bWluZw_size_16_color_FFFFFF_t_70][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NoZW5ncWl1bWluZw_size_16_color_FFFFFF_t_70 1][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NoZW5ncWl1bWluZw_size_16_color_FFFFFF_t_70]: /images/20210724/f1596210c05940b8bbd16f64acdcf8c9.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NoZW5ncWl1bWluZw_size_16_color_FFFFFF_t_70 1]: /images/20210724/b15d189fa44d446187c184180b469197.png