Thymeleaf同BootStrap和JQuery集成

最新推荐文章于 2022-04-01 14:44:55 发布

代码就是6

最新推荐文章于 2022-04-01 14:44:55 发布

阅读量4.4k

点赞数 1

分类专栏：操作文档 —— JAVA —— Spring全家桶

本文链接：https://blog.csdn.net/it_oheasy/article/details/93636508

版权

操作文档 —— JAVA —— Spring全家桶专栏收录该内容

2 篇文章 0 订阅

订阅专栏

一、目标

在Thymeleaf模板中集成BootStrap和JQuery

二、效果演示

Bootstrap框架引用成功

Jquery引用成功，登录后跳转，数据传入到LoginController

从LoginController重定向到main.html，完成案例

三、步骤

1、创建Maven工程

2、添加SpringBoot的起步依赖

<?xml version="1.0" encoding="UTF-8"?>
<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>oheasy.thymeleaf</groupId>
    <artifactId>import-static-res</artifactId>
    <version>1.0-SNAPSHOT</version>

    <parent>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-parent</artifactId>
        <version>2.0.1.RELEASE</version>
    </parent>

    <properties>
        <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>
    </dependencies>

</project>

3、在resources文件夹下创建static和templates子文件夹

在static中创建子文件夹css和js，复制BootStrap相关资源至对应的目录下

4、在templates文件下添加模板index.html

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8"></meta>
<title>静态资源导入</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(){
            $("#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>&nbsp;登录
                           </button>
                        </div>
                        <div class="btn-group">
                           <button type="button" class="btn btn-danger" id="registerbtn">
                              <span class="glyphicon glyphicon-edit"></span>&nbsp;注册
                           </button>
                        </div>
                     </div>
                  </div>
               </div>
            </form>
         </div>
      </div>
   </div>
</body>
</html>

5、添加Controller -> LoginController

package oheasy.thymeleaf.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;
    }
}

6、添加结果页面main.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>main</title>
</head>
<body>
main.html
</body>
</html>

7、添加启动类App

package oheasy.thymeleaf;

import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;

/**
 * @Author oheasy
 * @Email oheasy@qq.com
 * @Version 1.0
 */
@SpringBootApplication
public class App {
    public static void main(String[] args) {
        SpringApplication.run(App.class, args);
    }
}

代码就是6

关注

1
点赞
踩
4

收藏

觉得还不错? 一键收藏
打赏
1
评论
Thymeleaf同BootStrap和JQuery集成

一、目标在Thymeleaf模板中集成BootStrap和JQuery二、效果演示Bootstrap框架引用成功Jquery引用成功，登录后跳转，数据传入到LoginController从LoginController重定向到main.html，完成案例三、步骤1、创建Maven工程2、添加SpringBoot的起步依赖<?x...
复制链接

扫一扫