来自520的礼物 ----------- 实现一个登录界面_html-js-css

目录要求1、前端（index.html）2、后端3、抓包情况

要求

实现一个登录界面
后端：Spring Boot
前端：HTML + CSS + jQuery
前后端均使用 JSON 格式传递参数

1、前端（index.html）

无需下载jQuery的代码文件，只需要引用其网络链接即可

doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>登录页面title>

    
    <script src="https://code.jquery.com/jquery-1.9.1.min.js">script>
head>
<body>
    <style>
        html {
            background-image: url(background.jpg);
        }
        .login {
            width: 300px;
            height: 300px;
            margin: 200px auto;
            background-color: rgba(170, 167, 182, 0.8);
            border-radius: 8px;
            
        }
        .username, .password {
            display: flex;
            justify-content: space-between;
            padding: 25px 25px 0;
            font-size: 15px;
            font-weight: 600;
        }

        h2 {
            text-align: center;
            padding-top: 40px;
        }

        .submit {
            padding-top: 20px;
            display: flex;
            justify-content: space-between;
            padding-left: 62px;
            padding-right: 62px;
        }
        .submit input{
            height: 37px;
            width: 74px;
        }

        .username input,
        .password input {
            height: 30px;
        }

        .username span, 
        .password span{
            line-height: 35px;
        }
    style>
    <div class="login">
        <h2>登录界面h2>
        <div class="username">
            <span>用户名:  span> 
            <input type="text" name="username" id="username">
        div>
        
        <div class="password">
            <span>密码:  span>  
            <input type="password" name="password" id="password">
        div>
        <div class="submit">
            <input type="button" value="提交" onclick="submit()">
            <input type="button" value="重置" onclick="reset()">
        div>
    div>
    <script>
        function submit(){
            let username = jQuery("#username");
            let password = jQuery("#password");

            // trim 去掉空格，进行非空校验
            if(jQuery.trim(username.val()) == "" || jQuery.trim(password.val()) == ""){
                alert("用户名或密码不能为空，请重新输入");
                // 让光标显示到用户名称
                username.focus();
                return;
            }

            // 向后端传递参数
            jQuery.ajax({
                url: 'login',
                type: 'POST',
                contentType: 'application/json',
                data: JSON.stringify({
                    username: username.val(),
                    password: password.val()
                }),

                // 前端 收到响应为JSON对象 {"succ": 200, "result": 1, "mes": ""}
                // succ 表示响应是否成功
                // result 表示登录是否成功
                // mes 打印错误信息
                success: function(data){
                    if(data != null && data.succ == 200 && data.result == 1){
                        alert("登录成功");
                    }else{
                        alert(data.mes);
                    }
                }
            });
        }

        function reset(){
            if(confirm("确定清空?")){
                jQuery("#username").val("");
                jQuery("#password").val("");

                // 让光标显示到用户名称
                let username = jQuery("#username");
                username.focus();
            }
        }
    script>
body>
html>

2、后端创建Spring Boot 项目，引入Spring Web框架、lombok框架将静态页面（index.html）及它用到的相关资源，放到 resource --> static 目录下面创建 Customer 普通类，接收 JSON 对象在 Controller 包中，创建 Login 类（@Controller修饰，需要存储到 Spring 容器中），设置 @ResponseBody

目录结构

Customer类

package com.example.demo.model;
import lombok.Data;

@Data
public class Customer {
    private String username;
    private String password;
}

Login类

package com.example.demo.Controller;

import com.example.demo.model.Customer;
import org.springframework.stereotype.Controller;
import org.springframework.util.StringUtils;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;
import java.util.HashMap;


@Controller
@ResponseBody
public class Login {
    @RequestMapping("/login")
    public HashMap<String, Object> login(@RequestBody Customer customer) {
        HashMap<String, Object> map = new HashMap<>();
        int succ = 200;
        int result = 0;
        String mes = "";

        String username = customer.getUsername();
        String password = customer.getPassword();
        if (StringUtils.hasLength(username) && StringUtils.hasLength(password)) {
            if (username.equals("admin") && password.equals("admin")) {
                result = 1;
            } else {
                mes = "用户名或密码错误";
            }
        } else {
            mes = "用户名或密码为空";
        }

        map.put("succ", succ);
        map.put("result", result);
        map.put("mes", mes);
        return map;
    }
}

3、抓包情况

欢迎分享，转载请注明来源：内存溢出

原文地址: http://outofmemory.cn/web/1296569.html

来自520的礼物 ----------- 实现一个登录界面

发表评论

评论列表（0条）