一、效果展示

在这里插入图片描述

二、前端html/css代码

(1)regist.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登录页面</title>
    <link rel="stylesheet" type="text/css" href="CSS3.css" />
  	<script src="js/jQuery-3.4.1.js"></script>
  	
  		<script type="text/javascript">
		//昵称验证
		$(function(){
			$("#bt").click(function() {
				//1.创建Ajax对象
				var xhr;
				if (window.XMLHttpRequest) {
					xhr = new XMLHttpRequest();
				} else {
					xhr = new ActiveXObject("Microsoft.XMLHTTP");
				}
				//2.创建请求数据,通过open()方法
				//获得username和password的值
				var username = $("#username").val();
				var password = $("#password").val();
				xhr.open('get', encodeURI('textregist?username='+username+'&password='+password), true);//encodeURI,设置客户端编码为utf-8
				//3.设置回调函数
				xhr.onreadystatechange = function() {
					if (xhr.readyState == 4 && xhr.status == 200) {
						//获得服务器响应的文本内容
						var txt = xhr.responseText;
						$("#sp").text(txt);
					}
				}
				//4.调用send()方法 
				xhr.send(null);
			})	
		})
	</script>
</head>

<body>
    <div class="login">
    	<form action="login.do" method="post" align="center" style="font-size:30px">	
        <div class="login-top">
            登录
        </div>

        <div class="login-center">
            <div class="center-img"><img src="name.png"></div>
            <div class="input">
                <input type="text" id="username" placeholder="请输入您的用户名"  autofocus>
            </div>
        </div>
        <div class="login-center">
            <div class="center-img"><img src="password.png"></div>
            <input type="password" id="password" placeholder="请输入您的密码">
        </div>
        <div class="login-button">
      
           <div id="bt">登录</div> 
        </div>
        <font color='red'><span id="sp" > </span> <font>
        
       </form>
    </div>
</body>
</html>

(2)CSS3.css

.login {
    width: 350px;
    height: 500px;
    position: absolute;/*绝对定位*/
    border-radius: 5px;/*圆角边框*/
    background: #ffffff;/*背景色为白色*/
    box-shadow: 0px 0px 15px #f3bebe;
    top: 50%;
    left: 50%;
    margin-top: -250px;
    margin-left: -175px;
}
.login-center {
    width: 100%;
    box-sizing: border-box;/*两个并排的带边框的框*/
    padding: 0 40px;
    margin-bottom: 30px;
}

/*设置图片大小*/
img{ vertical-align: top; max-width: 100%; }

.center-img {
    width: 20px;
    height: 20px;
    float: left;
    margin-top: 5px;
}

.login-top {
    /*上面的登录*/
    font-size: 24px;
    margin-top: 100px;
    padding-left: 10px;
    box-sizing: border-box;
    color: #333333;
    margin-bottom: 50px;
}
.login-button {
    /*下面的登录*/
    font-size:16px;
    cursor: pointer;/*鼠标移过来变成小手*/
    height: 40px;
    width: 250px;
    text-align: center;
    line-height: 40px;
    background-color: dodgerblue;
    border-radius: 5px;
    margin: 0 auto;
    margin-top: 50px;
    color: white;
}

三、服务器端代码

(1)TextRegistServlet.java

package demo;


import java.io.IOException;
import java.io.PrintWriter;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
/**
 * 类说明:
 * 		Servlet服务器端代码
 *
 */
public class TextRegistServlet extends HttpServlet {

	@Override
	protected void service(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {
		//设置编码
		request.setCharacterEncoding("utf-8");
		response.setContentType("text/html;charset=utf-8");
		//接收请求参数
		String username = request.getParameter("username");
		String password = request.getParameter("password");
		//获得响应流
		PrintWriter out = response.getWriter();
		if(username.equals("admin") && password.equals("admin")){
			//做出响应
			out.println("登录成功");
		}else{
			out.println("登录失败");
		}
		out.flush();
		out.close();
	}
}

郭乾亮1998.

发布了328 篇原创文章 · 获赞 798 · 访问量 11万+

私信关注

简单的登录页面设计

文章目录

一、效果展示

二、前端html/css代码

(1)regist.html

(2)CSS3.css

三、服务器端代码

(1)TextRegistServlet.java

猜你喜欢