Springboot creates bootstrap login page - resource introduction

Project requirements:

Introduce bootstrap resources and use css sample templates to create landing pages

If you need the source code, please add a WeChat account, enter the technical exchange group, send springboot106, and get the source code of this article for free.

Development steps:

1. Use Spring Assistant to create a project, select Web, thymeleaf module

 

 

2. Create Controller

package com.lulu.controller;

 

import org.springframework.stereotype.Controller;

import org.springframework.web.bind.annotation.RequestBody;

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

@Controller

public class HelloController {

 

    @RequestMapping("login")

    public String goLogin() {

        return "login";

    }

}

3. Introduce resources

(1) https://v3.bootcss.com/getting-started/#downloadDownload   the CSS package

(2) http://jquery.com/download/    download juery package

(2) https://getbootstrap.com/docs/4.3/examples/      download examples template

The bootstrap-4.3.1\bootstrap-4.3.1\site\docs\4.3\assets file is the resource file of the example

The bootstrap-4.3.1\site\docs\4.3\examples file is the example's html page and its own css file

 

(4) Integrate the assert file as follows

 

4. Write the login .html page

 

<!DOCTYPE html>

<html lang="en">

<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>Signin Template for Bootstrap</title>

    <link href="assets/css/bootstrap.min.css" rel="stylesheet">

    <link href="assets/css/signin.css"  rel="stylesheet">

    <script src="assets/js/jquery-3.4.0.min.js"></script>

    <script src="assets/js/bootstrap.min.js"></script>

</head>

<body class="text-center">

<form class="form-signin" method="post">

    <!-- The value replaces the original default value-->

    <img class="mb-4"  src="assets/img/bootstrap-solid.svg" alt="" width="72" height="72">

    <h1 class="h3 mb-3 font-weight-normal">Please sign in</h1>

    <label class="sr-only" >Username</label>

    <input type="text" name="username" class="form-control" placeholder="Username"

           required="" autofocus="">

    <label class="sr-only" >Password</label>

    <input type="password" name="password" class="form-control" placeholder="Password"

           required="">

    <div class="checkbox mb-3">

        <label>

            <input type="checkbox" value="remember-me"/> Remember me

        </label>

    </div>

    <button class="btn btn-lg btn-primary btn-block" type="submit" >Sign in</button>

    <p class="mt-5 mb-3 text-muted">© 2019-2020</p>

</form>

</body>

</html>

 

5. Configuration Properties Page

 

server.servlet.context-path=/tiger

 

6. Run

 

 

 

Guess you like

Origin http://43.154.161.224:23101/article/api/json?id=324221378&siteId=291194637