IDEA creates a SpringBoot project to do a simple login interaction

Test HelloWorld and Zhihu login interface interaction

Check JDK and Maven

Environment to prepare

JDK 1.7 or above
maven 3.x

Checking the Jdk Version

Open the DOS interface to check: “win+R” then enter “CMD” enter “java-version”

The IDEA of setting up

To open IDEA, choose “File “->” Other Settings “-> “Setup for New Projects…”

Configuring Maven Content

Create a SpringBoot project

3. Directory structure and file description

Java directoryTo write a Java program, create good HelloWorldApplication. Java is the main program of the project.Directory structure in the Resources folderStatic: Saves all static resources, js CSS images. Templates: Store all template pages (Spring Boot default JAR package uses embedded Tomcat, JSP pages are not supported by default). You can use a template engine (freemarker, Thymeleaf). Application. properties: Configuration file for the Spring Boot application that allows you to modify some of the default Settings.

4. “HELLO WORLD” test

1, in springboot. Create a controller in the helloworld package, create a HelloWorldController. Java. 2, the HelloWorldController. Write a hello method in Java.3. Run the main method of the main program4. After the successful operation, the project will start on port 8080 by default. Enter it in the browser address barhttp://localhost:8080/hello,If the following information is displayed, the browser succeeds.

V. Test of “Zhihu Login Interface”

1. Create an index. HTML in the static folder as the home page or welcome screen and type it in the browser address barhttp://localhost:8080, you can visit the home page. 2. Perform the “Zhihu login interface” response test in the Controller package, create a loginController.java controller class

Enter any password and click login to get a response

Improved versionLogincontroller. Java can be accessed only when the password is sunbujianzuishuaiPassword errorWhen the password is correct

Note:Create the following three folders (static resources folders) in the Resources folder, and make index.html or any other static resources (CSS, JS, images) accessible by default. Attached: Zhihu login interface source code


<! DOCTYPEhtml>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="Width = device - width, initial - scale = 1.0">
    <title>Zhihu. - There's a problem. Zhihu</title>
    <link rel="icon" type="image/x-icon" href="img/favicon.ico">
    <link rel="stylesheet" href="CSS/reset.css">
    <style>
        body {
            background-color: #B8E5F8;
            background-image: url("Background 3. Jpeg");background-size: 100vw 100vh;
            background-attachment: fixed;
        }

        #logo > img {
            width: 128px;
            height: 81px;
        }

        #logo {
            text-align: center;
            margin-top: 115px;
            margin-bottom: 24px;
        }

        #content {
            width: 350px;
            height: 312px;
            background-color: white;
            margin: auto;
            padding: 0px 24px;
            border-radius: 4px 4px 0px 0px;
            position: relative;
        }

        #content_login_select {
            font-size: 16px;
        }

        #content_login_select > span {
            height: 18px;
            padding: 0px 24px;
            display: inline-block;
        }

        #content_login_select > span:first-child {
            margin-right: 20px;
        }

        .chick {
            padding: 20px 0px 18px 0px ! important;
            font-weight: 700;
            border-bottom: #0084FF solid;
        }

        #ewm {
            position: absolute;
            width: 52px;
            top: 0px;
            right: 0px;
            border-radius: 0px 4px 0px 0px;
        }

        #img_div {
            position: absolute;
            border: 26px #fff solid;
            border-top: 26px rgba(0.0.0.0) solid;
            border-right: 26px rgba(0.0.0.0) solid;
            top: 0px;
            right: 0px;
            border-radius: 0px 2px 0px 0px;
        }

        #content_login_form input:not([type=submit]) {
            width: 100%;
            height: 42px;
            border: none;
            border-bottom: 1px rgba(0.0.0.1) solid;
            outline: none;
            margin: 7px 0px;
            font-size: 14px;
        }

        #content_login_form {
            position: relative;
            padding-top: 20px;
        }

        #content_login_form > form > div {
            padding: 5px 0px;
        }

        #content_login_form > form > div > a {
            font-size: 0.9 em;
            color: # 175199;
        }

        #content_login_form > form > div > a:last-of-type {
            float: right;
            color: #8792a8;
        }

        #content a:hover {
            color: # 677288 ! important;
        }

        #content_login_form input[type=submit] {
            width: 100%;
            height: 36px;
            border: none;
            background-color: #0084FF;
            color: white;
            margin-top: 30px;
            font-size: 14px;
            border-radius: 3px;
        }

        #content_login_form input[type=submit]:hover {
            background-color: #0074dd;
        }

        #content_login_form img {
            position: absolute;
            right: 0px;
            top: 100px;
        }

        #content_login_bottom {
            width: 356px;
            height: 26px;
            background-color: #F6F6F6;
            border-radius: 0px 0px 4px 4px;
            margin: auto;
            font-size: 13px;
            padding: 17px 21px;
            color: #8792a8;
        }

        #content_login_bottom > div:first-of-type {
            float: left;
        }

        #content_login_bottom > div:last-of-type {
            padding: 6px 0px;
            float: right;
        }

        #content_login_bottom > div:last-of-type > a {
            color: #8792a8;
        }

        #content_login_bottom a {
            color: #8792A8;
        }

        #content_login_bottom > div:last-of-type > a:hover {
            color: #1751a5;
        }

        #social_contact_login {
            width: 350px;
            height: 16px;
            border-radius: 3px;
            background-color: #fff;
            padding: 22px 24px;
            margin: auto;
            margin-top: 24px;
            color: #8A95AA;
            text-decoration: none;
        }

        #social_contact_login a {
            display: inline-block;
            margin: 0px 6px;
            color: #8A95AA;
        }

        #social_contact_login > div {
            float: right;
        }

        #social_contact_login > span {
            float: left;
        }

        #btn_dow_app {
            text-align: center;
        }

        #btn_dow_app > a {
            width: 400px;
            height: 22px;
            display: inline-block;
            border-radius: 3px;
            background-color: #fff;
            margin-top: 24px;
            padding: 10px 0px;
            color: #0E8BFF;
        }

        #btn_dow_app > a > img {
            width: 22px;
        }

        #btn_dow_app span {
            position: relative;
            bottom: 5px;
            left: 7px;
        }
        #content_bottom{
            text-align: center;
            margin-top: 150px;
            font-size: 13px;
            color: #fff;
        }
        #content_bottom a:hover{
            text-decoration: underline;
        }
        #content_bottom img{
            width: 16px;
        }
        #content_bottom a{
            color: #fff;
        }
        #content_bottom>div{
            margin: 8px;
        }
        #content_bottom>div>*:after{
            content:', '
        }
        #content_bottom>div> *:last-child:after{
            content: ' ';
        }

    </style>
</head>
<body>
    <div id="logo">
        <img class="SignFlowHomepage-logo" src="https://pic2.zhimg.com/80/v2-f6b1f64a098b891b4ea1e3104b5b71f6_720w.png">
    </div>
    <div id="content">
        <div id="content_login_select">
            <span class="chick">Password-free login</span>
            <span>Password to login</span>
        </div>
        <img src="Img/qr code.png" alt="" id="ewm">
        <div id="img_div"></div>
        <div id="content_login_form">
            <form action="#" method="post">
                <input type="text" name="telephone" placeholder=China +86 Mobile Phone Number>
                <input type="password" name="password" placeholder="Password"><br>
                <a href="#">Obtain the SMS verification code</a>
                <div>
                    <a href="#">Receive voice verification code</a><br>
                </div>
                <input type="submit" value="Register/Login">
            </form>
        </div>
    </div>
    <div id="content_login_bottom">
        <div>Unregistered mobile phone Automatically logs in after authentication<br>Registration means consent<a href="#">Zhihu Agreement</a>
            <a href="#">Privacy Guidelines</a>
        </div>
        <div>
            <a href="#">Registered Organization No.</a>
        </div>
    </div>
    <div id="social_contact_login">
        <span>Social Account Login</span>
        <div>
        <a href="#">
            <img src="img/wx.png" alt="">
            <span>WeChat</span>
        </a>
        <a href="#">
            <img src="img/qq.png" alt="">
            <span>QQ</span>
        </a>
        <a href="#">
            <img src="img/vb.png" alt="">
            <span>weibo</span>
        </a>
    </div>
    </div>
    <div id="btn_dow_app">
        <a href="#">
            <img src="img/zhi.png" alt="">
            <span>Download zhihu App</span>
        </a>
    </div>
    <div id="content_bottom">
        <div>
            <a href="#">Zhihu column</a>
            <a href="#">The round table</a>
            <a href="#">found</a>
            <a href="#">Contact us</a>
            <a href="#">To zhihu work</a>
            <a href="#">Registered Organization No.</a>
        </div>
        <div>
            <span >Zhihu © 2021</span>
            <a href="#">Beijing ICP certificate 110745</a>
            <img src="img/ga.png" alt="">
            <a href="#">Beijing Wan Network is ready for 11010802010035</a>
            <a href="#">Publication Operation License</a>
        <div>
             <a href="#">Internet Drug Information Service Qualification Certificate (Beijing)</a>
            <a href="#">- Non-operating - 2017-0067</a>
        </div>
           
        </div>
        <div>
            <a href="#">Infringement report</a>
            <a href="#">Online harmful information reporting area</a>
            <a href="#">Child pornography reporting area</a>
            <span>Illegal and bad information report: 010-82716601</span>
        </div>
    </div>
</body>
</html>
Copy the code

IDEA creates a SpringBoot project to do a simple login interaction

Check JDK and Maven

Environment to prepare

Checking the Jdk Version

The IDEA of setting up

Create a SpringBoot project

3. Directory structure and file description

4. “HELLO WORLD” test

V. Test of “Zhihu Login Interface”

Related Posts

DDD domain-driven constraint framework POto-framework

Data Structure — Tree (3)

SpringCloud OpenFeign (2)