HTML简单的登录页面--实例

小鱼儿 2023-10-01 09:13 9阅读 0赞

原文网址：[HTML简单的登录页面--实例\_IT利刃出鞘的博客-CSDN博客][HTML_--_IT_-CSDN]

## 简介 ##

本文用示例展示简单的登录页面的写法。

会包括如下几种方案：纯HTML、HTML+jQuery(form data)格式、HTML+jQuery(json)格式。

## 公共代码(后端接口) ##

用SpringBoot写一个最简单的登录接口。

**Controller**

package com.example.controller;
    
    import com.example.entity.LoginVO;
    import org.springframework.web.bind.annotation.CrossOrigin;
    import org.springframework.web.bind.annotation.PostMapping;
    import org.springframework.web.bind.annotation.RequestParam;
    import org.springframework.web.bind.annotation.RestController;
    
    //跨域
    @CrossOrigin
    //Rest风格：返回JSON
    @RestController
    public class LoginController {
        @PostMapping("login")
        public LoginVO login() {
            //省略对用户名和密码的判断
            LoginVO loginVO = new LoginVO();
            loginVO.setSuccess(true);
            loginVO.setData("This is data");
            return loginVO;
        }
    }

**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.3.0.RELEASE</version>
            <relativePath/> 
        </parent>
        <groupId>com.example</groupId>
        <artifactId>demo_SpringBoot</artifactId>
        <version>0.0.1-SNAPSHOT</version>
        <name>demo_SpringBoot</name>
        <description>Demo project for Spring Boot</description>
    
        <dependencies>
            <dependency>
                <groupId>org.springframework.boot</groupId>
                <artifactId>spring-boot-starter-web</artifactId>
            </dependency>
        </dependencies>
    </project>

## 示例1：最简(纯HTML) ##

### **代码** ###

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>登录页</title>
    </head>
    
    <body>
    
    <form action="http://localhost:8080/login" method="post">
        <label for="username">用户名：</label>
        <input type="text" name="username" id="username">
    
        <label for="password">密码：</label>
        <input type="password" name="password" id="password">
    
        
    
        
        <button type="submit">登录</button>
    </form>
    
    </body>
    </html>

### **测试** ###

1.访问login.html

![49c28de4c54045688c09455feaafaa46.png][]

2.输入用户名和密码

用户名：输入abc；密码：输入 1234

结果

![b2aab4e2d8e8440e8fcab593f69e42cd.png][]

## 示例2：HTML+jQuery(form data) ##

### **代码** ###

**login.html**

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>登录页</title>
        <script src="https://cdn.staticfile.org/jquery/1.11.3/jquery.min.js"></script>
    </head>
    
    <body>
    
    <form id="login-form">
        <label for="username">用户名：</label>
        <input type="text" name="username" id="username">
    
        <label for="password">密码：</label>
        <input type="password" name="password" id="password">
    
        
    </form>
    
    <div id="error-message"></div>
    <button onclick="loginViaFormData()">登录</button>
    
    <script>
        function loginViaFormData() {
            $.ajax(
                {
                    type: "post",
                    url: "http://localhost:8080/login",
                    data: $("#login-form").serialize(), // 序列化form表单里面的数据传到后台
                    //dataType: "json", // 指定后台传过来的数据是json格式
                    success: function (result) {
                        if (!result.success) {
                            $("#errormessage").text("用户名或密码错误");
                        } else if (result.success) {
                            alert("登录成功");
                            // 跳到index.html页面
                            window.location.href="index.html";
                        }
                    }
                }
            )
        }
    </script>
    
    </body>
    </html>

**index.html**

<!doctype html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <title>This is title</title>
    </head>
    
    <body>
    
    <div class="container">
        登录成功后的页面
    </div>
    
    <script>
    
    </script>
    </body>
    </html>

### 测试 ###

1.访问login.html

![c2c79595a8724383bdd4d1bd22e04d5f.png][]

2.输入用户名和密码

用户名：输入abc；密码：输入 1234

![ac57d8c52a034775ac21caa81d415283.png][]

3.点击登录

![a5a082b6a03049eab569562cf3d991e9.png][]

4.点击确定

![14542e45862c4873b3232955d46c8521.png][]

## 示例3：HTML+jQuery(json) ##

### 代码 ###

**login.html**

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>登录页</title>
        <script src="https://cdn.staticfile.org/jquery/1.11.3/jquery.min.js"></script>
    </head>
    
    <body>
    
    <form id="login-form">
        <label for="username">用户名：</label>
        <input type="text" name="username" id="username">
    
        <label for="password">密码：</label>
        <input type="password" name="password" id="password">
    
        
    </form>
    
    <div id="error-message"></div>
    <button onclick="loginViaJson()">登录</button>
    
    <script>
        function loginViaJson() {
            $.post("http://localhost:8080/login",
                //发送给后端的数据
                {
                    "userName": $(".username").val(),
                    "password": $(".password").val()
                },
                //回调函数
                function (result) {
                    if (!result.success) {
                        $("#errormessage").text("用户名或密码错误");
                    } else if (result.success) {
                        alert("登录成功");
                        // 跳到index.html页面
                        window.location.href="index.html";
                    }
                }
            )
        }
    </script>
    
    </body>
    </html>

**index.html**

### 测试 ###

测试结果和前边“示例2：HTML+jQuery(form data)”一样

1.访问login.html

![c2c79595a8724383bdd4d1bd22e04d5f.png][]

2.输入用户名和密码

用户名：输入abc；密码：输入 1234

![ac57d8c52a034775ac21caa81d415283.png][]

3.点击登录

![a5a082b6a03049eab569562cf3d991e9.png][]

4.点击确定

![14542e45862c4873b3232955d46c8521.png][]

## 其他网址 ##

[基于Jquery实现登录功能的前端页面\_阳菜-CSDN博客\_jquery登录页面][Jquery_-CSDN_jquery]

[web登录页面jquery校验的简单实现（一）\_Mr.wang的博客-CSDN博客\_jquery登录页面验证][web_jquery_Mr.wang_-CSDN_jquery]

[HTML_--_IT_-CSDN]: https://knife.blog.csdn.net/article/details/121867005
[49c28de4c54045688c09455feaafaa46.png]: https://img-blog.csdnimg.cn/49c28de4c54045688c09455feaafaa46.png
[b2aab4e2d8e8440e8fcab593f69e42cd.png]: https://img-blog.csdnimg.cn/b2aab4e2d8e8440e8fcab593f69e42cd.png
[c2c79595a8724383bdd4d1bd22e04d5f.png]: https://img-blog.csdnimg.cn/c2c79595a8724383bdd4d1bd22e04d5f.png
[ac57d8c52a034775ac21caa81d415283.png]: https://img-blog.csdnimg.cn/ac57d8c52a034775ac21caa81d415283.png
[a5a082b6a03049eab569562cf3d991e9.png]: https://img-blog.csdnimg.cn/a5a082b6a03049eab569562cf3d991e9.png
[14542e45862c4873b3232955d46c8521.png]: https://img-blog.csdnimg.cn/14542e45862c4873b3232955d46c8521.png
[Jquery_-CSDN_jquery]: https://blog.csdn.net/qq_43084297/article/details/82256415
[web_jquery_Mr.wang_-CSDN_jquery]: https://blog.csdn.net/qq_34209528/article/details/71082001