＜Spring整合系列＞ Spring Boot整合Bootstrap页面实现登录页面

最新推荐文章于 2024-06-30 12:00:24 发布

CSRAWD

最新推荐文章于 2024-06-30 12:00:24 发布

阅读量1k

点赞数

分类专栏： Spring整合系列文章标签： bootstrap spring boot

本文链接：https://blog.csdn.net/CSRAWD/article/details/113906441

版权

Spring整合系列专栏收录该内容

3 篇文章 0 订阅

订阅专栏

这两天接了个项目，结果发现手里居然都没有能直接套用的模板（之前做的直接改贼烦，还不如网上参考），但是网上参考的总是有一些烦人的小问题，所以总结一个模板

1、效果图：
在这里插入图片描述

2、目录结构
在这里插入图片描述
3、添加依赖 pom.xml

<?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 https://maven.apache.org/xsd/maven-4.0.0.xsd">
    <modelVersion>4.0.0</modelVersion>
    <parent>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-parent</artifactId>
        <version>2.2.4.RELEASE</version>
        <relativePath/> <!-- lookup parent from repository -->
    </parent>
    <groupId>com.luojay</groupId>
    <artifactId>springboot-thymeleaf-bootstrapui</artifactId>
    <version>0.0.1-SNAPSHOT</version>
    <name>springboot-thymeleaf-bootstrapui</name>
    <description>thymeleaf bootstrap Demo project for Spring Boot</description>

    <properties>
        <java.version>1.8</java.version>
    </properties>

    <dependencies>
        <!--模板引擎-->
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-thymeleaf</artifactId>
        </dependency>
       <!-- Web开发-->
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-web</artifactId>
        </dependency>
        <!--jquery-->
        <dependency>
            <groupId>org.webjars</groupId>
            <artifactId>jquery</artifactId>
            <version>3.3.1</version>
        </dependency>
        <!--bootstrap-->
        <dependency>
            <groupId>org.webjars</groupId>
            <artifactId>bootstrap</artifactId>
            <version>3.3.7</version>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-test</artifactId>
            <scope>test</scope>
            <exclusions>
                <exclusion>
                    <groupId>org.junit.vintage</groupId>
                    <artifactId>junit-vintage-engine</artifactId>
                </exclusion>
            </exclusions>
        </dependency>
    </dependencies>

    <build>
        <plugins>
            <plugin>
                <groupId>org.springframework.boot</groupId>
                <artifactId>spring-boot-maven-plugin</artifactId>
            </plugin>
        </plugins>
    </build>

</project>

4、登录页面（thymeleaf+Bootstrap）

<!DOCTYPE html>
<html lang="en"  xmlns:th="http://www.thymeleaf.org">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description" content="">
    <meta name="author" content="">
    <title>账单管理系统登录界面</title>
    <!-- Bootstrap core CSS -->
    <link th:href="@{webjars/bootstrap/3.3.7/css/bootstrap.css}" rel="stylesheet">
    <!-- Custom styles for this template -->
    <link th:href="@{/css/signin.css}" rel="stylesheet">
</head>

<body class="text-center">
<form class="form-sign-in" action="dashboard.html">
    <img class="mb-4" th:src="@{img/bootstrap-solid.svg}" alt="" width="72" height="72">
    <h1 class="h3 mb-3 font-weight-normal">请登录</h1>
    <!--    placeholder是html5的新特性，用于实现输入框里那个浅色的输入提示-->
    <label class="sr-only">Username</label>
    <input type="name" class="form-control" placeholder="用户名" required="" autofocus="">
    <label class="sr-only">Password</label>
    <input type="password" class="form-control" placeholder="密码" required="">
    <div class="checkbox mb-3">
        <label>
            <input type="checkbox" value="remember-me"> 记住我
        </label>
    </div>
    <button class="btn btn-lg btn-primary btn-block" type="submit">登录</button>
    <p class="mt-5 mb-3 text-muted">© 2020-2021</p>
    <a class="btn btn-sm">中文</a>
    <a class="btn btn-sm">English</a>
</form>

</body>

</html>

5、LoginController.java

package com.luojay.springbootthymeleafbootstrapui.controller;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;

@Controller
public class LoginController {
    @RequestMapping({"/","/login.html"})
    public String login(){
        return "login";
    }
}

6、singin.css

html,
body {
  height: 100%;
}

body {
  display: -ms-flexbox;
  display: -webkit-box;
  display: flex;
  -ms-flex-align: center;
  -ms-flex-pack: center;
  -webkit-box-align: center;
  align-items: center;
  -webkit-box-pack: center;
  justify-content: center;
  padding-top: 40px;
  padding-bottom: 40px;
  /*background-color: #f5f5f5;*/
}

.form-signin {
  width: 100%;
  max-width: 330px;
  padding: 15px;
  margin: 0 auto;
}
.form-signin .checkbox {
  font-weight: 400;
}
.form-signin .form-control {
  position: relative;
  box-sizing: border-box;
  height: auto;
  padding: 10px;
  font-size: 16px;
}
.form-signin .form-control:focus {
  z-index: 2;
}
.form-signin input[type="email"] {
  margin-bottom: -1px;
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
}
.form-signin input[type="password"] {
  margin-bottom: 10px;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

7、application.properties

spring.thymeleaf.cache=false
#设置端口
server.port=8081

CSRAWD

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
1
评论
＜Spring整合系列＞ Spring Boot整合Bootstrap页面实现登录页面

这两天接了个项目，结果发现手里居然都没有能直接套用的模板（之前做的直接改贼烦，还不如网上参考），但是网上参考的总是有一些烦人的小问题，所以总结一个模板1、效果图：2、目录结构3、添加依赖 pom.xml<?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-insta
复制链接

扫一扫

专栏目录