servlet的登陆注册网页设计

登陆页面

html部分

<html>
<html lang="en">

    <head>

        <meta charset="utf-8">
        <title>登录(Login)</title>

        <!-- CSS -->
        <link rel="stylesheet" href="assets/css/reset.css">
        <link rel="stylesheet" href="assets/css/supersized.css">
        <link rel="stylesheet" href="assets/css/style.css">

        <!-- Javascript -->
        <script src="assets/js/jquery-1.8.2.min.js" ></script>
        <script src="assets/js/supersized.3.2.7.min.js" ></script>
        <script src="assets/js/supersized-init.js" ></script>
        <script src="assets/js/scripts.js" ></script>

    </head>

    <body>

        <div class="page-container">
            <h1>登录(Login)</h1>
            <form action="login" method="GET">
                <input type="text" name="username" class="username" placeholder="请输入您的用户名！">
                <input type="password" name="password" class="password" placeholder="请输入您的用户密码！">
                <button  class="submit_button">登录</button>
            </form>
            <a href="register.html"><button class="submit_button">注册</button></a>
        </div>
		<a href="password.html">忘记密码</a>
    </body>

</html>

servlet代码

package com.abc;

import java.io.File;
import java.io.FileInputStream;
import java.io.FileNotFoundException;
import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

/**
 * Servlet implementation class login
 */
@WebServlet("/login")
public class login extends HttpServlet {
	private static final long serialVersionUID = 1L;

    /**
     * Default constructor. 
     */
    public login() {
        // TODO Auto-generated constructor stub
    }

	/**
	 * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
	 */
	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		String a=request.getParameter("username");	//获取输入的用户和密码
		String b=request.getParameter("password");
		System.out.println("输入的用户名"+a);
		System.out.println("输入的密码为"+b);
		String result=null;
		String role=null;
		try {
			File file=new File("D:\\java\\web\\login-"+a);	//打开a用户文件，成功继续
			byte[] arr=new byte[128];							//新建字节数组
			b=toMd5(b);											//将密码加密进行匹配
			@SuppressWarnings("resource")
			int i=new FileInputStream(file).read(arr);			//读取文件中保存的密码
			String s=new String(arr,0,i);	
			String[] passwordAndRole = s.split(",");
			String password = passwordAndRole[0];
			role = passwordAndRole[1];
			result=b.equals(password)?"登陆成功":"密码错误";		//判断密码是否正确（加密后的）
		}catch(FileNotFoundException e){						//打开异常则没有用户
			result="用户不存在";
		}
		System.out.println(result);
		response.setCharacterEncoding("utf-8");			//编码
		
		java.io.PrintWriter out=response.getWriter();	//输入流和html的头部
		out.println("<html>");
		out.println("<meta charset=\"utf-8\">");
		out.println("<link rel=\"stylesheet\" href=\"assets/css/reset.css\">\r\n" + 
				"        <link rel=\"stylesheet\" href=\"assets/css/supersized.css\">\r\n" + 
				"        <link rel=\"stylesheet\" href=\"assets/css/style.css\">");
		out.println("<script src=\"assets/js/jquery-1.8.2.min.js\" ></script>\r\n" + 
				"        <script src=\"assets/js/supersized.3.2.7.min.js\" ></script>\r\n" + 
				"        <script src=\"assets/js/supersized-init.js\" ></script>\r\n" + 
				"        <script src=\"assets/js/scripts.js\" ></script>");
		out.println("</head>");
		out.println("<body>");
		out.println("<div class=\"page-container\">");
		out.println("<h1>"+result+"</h1>");
		out.println("<br>");
		if(result.equals("登陆成功")) {
			if(role.equals("admin")) {
				out.println("<a href=\"index-admin.html\"><button  class=\"submit_button\">进入主页</button></a>");
			}
			else if(role.equals("manager")) {
				out.println("<a href=\"index-manager.html\"><button  class=\"submit_button\">进入主页</button></a>");
			}
			else	out.println("<a href=\"index.html\"><button  class=\"submit_button\">进入主页</button></a>");
		}
		else  {
			out.println("<a href=\"login.html\"><button  class=\"submit_button\">重新登陆</button></a>");
			out.println("<a href=\"register.html\"><button  class=\"submit_button\">注册新用户</button></a>");
		}
		out.println("</div>");
		out.println("</body>");
		out.println("</html>");
		
		
		
		
	}

	/**
	 * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
	 */
	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		// TODO Auto-generated method stub
		doGet(request, response);
	}
	String toMd5(String s) {			//加密函数
		String result = "";
		try {
			byte[] md5 = java.security.MessageDigest.getInstance("MD5").digest(s.getBytes());
			for (int i = 0; i < md5.length; i++) {
				result += String.format("%02X", md5[i]);
			}
		} catch (java.security.NoSuchAlgorithmException e) {
		}
		return result;
	}
}

注册页面

html代码

 <html>
<html lang="en">

    <head>

        <meta charset="utf-8">
        <title>登录(Login)</title>

        <!-- CSS -->
        <link rel="stylesheet" href="assets/css/reset.css">
        <link rel="stylesheet" href="assets/css/supersized.css">
        <link rel="stylesheet" href="assets/css/style.css">

        <!-- Javascript -->
        <script src="assets/js/jquery-1.8.2.min.js" ></script>
        <script src="assets/js/supersized.3.2.7.min.js" ></script>
        <script src="assets/js/supersized-init.js" ></script>
        <script src="assets/js/scripts.js" ></script>

    </head>

    <body>

        <div class="page-container">
            <h1>注册(Register)</h1>
            <form action="register" method="GET">
                <input type="text" name="username" class="username" placeholder="输入用户名！">
                <input type="password" name="password1" class="password" placeholder="输入密码！">
                <input type="password" name="password2" class="password" placeholder="确认密码！">
                <button  class="submit_button">注册</button>
            </form>
        </div>

    </body>

</html>

servlet代码

package com.abc;

import java.io.File;
import java.io.FileOutputStream;
import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

/**
 * Servlet implementation class register
 */
@WebServlet("/register")
public class register extends HttpServlet {
	private static final long serialVersionUID = 1L;
       
    /**
     * @see HttpServlet#HttpServlet()
     */
    public register() {
        super();
        // TODO Auto-generated constructor stub
    }

	/**
	 * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
	 */
	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		response.setCharacterEncoding("utf-8");	//编码
		String a=request.getParameter("username");	//获取输入的用户和密码
		String b=request.getParameter("password1");
		String c=request.getParameter("password2");
		java.io.PrintWriter out=response.getWriter();	//输入流html的头部
		String result=null;
		if(b.equals(c)) {					//确认两次输入密码一致
			b=toMd5(b);						//密码加密保存
			b=b+",user";
			File file=new File("D:\\java\\web\\login-"+a);//打开文件
			if(!file.exists()) {							//如果没有存在，则创建
				file.createNewFile();						//创建用户文件
				byte bytes[]=new byte[128];
				bytes=b.getBytes();
				int n=bytes.length;
				FileOutputStream out2=new FileOutputStream(file);
				out2.write(bytes, 0, n);					//写入
				out2.close();
				result="注册成功";
			}
			else {	
				result="用户已经存在";
			}
		}
		else {
				result="两次密码输入不一样";
		}
		out.println("<html>");
		out.println("<meta charset=\"utf-8\">");
		out.println("<link rel=\"stylesheet\" href=\"assets/css/reset.css\">\r\n" + 
				"        <link rel=\"stylesheet\" href=\"assets/css/supersized.css\">\r\n" + 
				"        <link rel=\"stylesheet\" href=\"assets/css/style.css\">");
		out.println("<script src=\"assets/js/jquery-1.8.2.min.js\" ></script>\r\n" + 
				"        <script src=\"assets/js/supersized.3.2.7.min.js\" ></script>\r\n" + 
				"        <script src=\"assets/js/supersized-init.js\" ></script>\r\n" + 
				"        <script src=\"assets/js/scripts.js\" ></script>");
		out.println("</head>");
		out.println("<body>");
		out.println("<div class=\"page-container\">");
		out.println("<h1>"+result+"</h1>");
		out.println("<br>");
		if(result.equals("注册成功")) {
			out.println("<a href=\"login.html\"><button  class=\"submit_button\">返回登陆</button></a>");
		}
		else  {
			out.println("<a href=\"register.html\"><button  class=\"submit_button\">重新注册</button></a>");
			out.println("<a href=\"login.html\"><button  class=\"submit_button\">返回登陆</button></a>");
		}
		out.println("</div>");
		out.println("</body>");
		out.println("</html>");

	
	
	
	
	}

	/**
	 * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
	 */
	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		// TODO Auto-generated method stub
		doGet(request, response);
	}
	
	String toMd5(String s) {
		String result = "";
		try {
			byte[] md5 = java.security.MessageDigest.getInstance("MD5").digest(s.getBytes());
			for (int i = 0; i < md5.length; i++) {
				result += String.format("%02X", md5[i]);
			}
		} catch (java.security.NoSuchAlgorithmException e) {
		}
		return result;
	}
}

修改权限页面

html代码

 <html>
<html lang="en">

    <head>

        <meta charset="utf-8">
        <title>登录(Login)</title>

        <!-- CSS -->
        <link rel="stylesheet" href="assets/css/reset.css">
        <link rel="stylesheet" href="assets/css/supersized.css">
        <link rel="stylesheet" href="assets/css/style.css">

        <!-- Javascript -->
        <script src="assets/js/jquery-1.8.2.min.js" ></script>
        <script src="assets/js/supersized.3.2.7.min.js" ></script>
        <script src="assets/js/supersized-init.js" ></script>
        <script src="assets/js/scripts.js" ></script>

    </head>

    <body>

        <div class="page-container">
            <h1>更改用户权限</h1>
            <form action="chmod" method="GET">
                <input type="text" name="username" class="username" placeholder="更改权限的用户名！">
                <button  class="submit_button">更改</button>
            </form>
        </div>

    </body>
	
	
	
	
	
</html>

serlvet代码

package com.abc;

import java.io.File;
import java.io.FileInputStream;
import java.io.FileOutputStream;
import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

/**
 * Servlet implementation class chmod
 */
@WebServlet("/chmod")
public class chmod extends HttpServlet {
	private static final long serialVersionUID = 1L;
       
    /**
     * @see HttpServlet#HttpServlet()
     */
    public chmod() {
        super();
        // TODO Auto-generated constructor stub
    }

	/**
	 * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
	 */
	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		response.setCharacterEncoding("utf-8");	//编码
		String role;
		String result=null;
		String a=request.getParameter("username");	//获取输入的用户和密码
		java.io.PrintWriter out=response.getWriter();	//输入流html的头部
		

			File file=new File("D:\\java\\web\\login-"+a);//打开文件
			if(!file.exists()) {							//如果没有存在，则创建
				result="用户不存在";
			}
			else {	
				byte[] arr=new byte[128];							//新建字节数组									//将密码加密进行匹配
				@SuppressWarnings("resource")
				int i=new FileInputStream(file).read(arr);			//读取文件中保存的密码
				String s=new String(arr,0,i);	
				String[] passwordAndRole = s.split(",");
				String password = passwordAndRole[0];
				role = "manager";
				String b=password+","+role;
				arr=b.getBytes();
				int n=arr.length;
				FileOutputStream out2=new FileOutputStream(file);
				out2.write(arr, 0, n);					//写入
				out2.close();
				result="更改成功";
			}
				
		out.println("<html>");
		out.println("<meta charset=\"utf-8\">");
		out.println("<link rel=\"stylesheet\" href=\"assets/css/reset.css\">\r\n" + 
				"        <link rel=\"stylesheet\" href=\"assets/css/supersized.css\">\r\n" + 
				"        <link rel=\"stylesheet\" href=\"assets/css/style.css\">");
		out.println("<script src=\"assets/js/jquery-1.8.2.min.js\" ></script>\r\n" + 
				"        <script src=\"assets/js/supersized.3.2.7.min.js\" ></script>\r\n" + 
				"        <script src=\"assets/js/supersized-init.js\" ></script>\r\n" + 
				"        <script src=\"assets/js/scripts.js\" ></script>");
		out.println("</head>");
		out.println("<body>");
		out.println("<div class=\"page-container\">");
		out.println("<h1>"+result+"</h1>");
		out.println("<br>");
		if(result.equals("更改权限成功")) {
			out.println("<a href=\"index-admin.html\"><button  class=\"submit_button\">返回管理页面</button></a>");
		}
		else  {
			out.println("<a href=\"chmod.html\"><button  class=\"submit_button\">重新更改</button></a>");
			out.println("<a href=\"index-admin.html\"><button  class=\"submit_button\">返回管理页面</button></a>");
		}
		out.println("</div>");
		out.println("</body>");
		out.println("</html>");
		
		
		
	}

	/**
	 * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
	 */
	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		// TODO Auto-generated method stub
		doGet(request, response);
	}

}

网页内容部分

find.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
	<h1>数据查询</h1>
	<a href="JavaScript:;" onclick="JavaScript:history.go(-1);">返回主页</a>
</body>
</html>

index-admin.html

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>主页</title>
	<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" data-integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" data-crossorigin="anonymous">
	<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap-theme.min.css" data-integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" data-crossorigin="anonymous">
	<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js" data-integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" data-crossorigin="anonymous"></script>
	<style type="text/css">
        .menu {
            width: 694px;
            height: 50px;
/*设置元素水平居中*/

            margin: 50px auto 0;
/*去除内联元素间隙*/

            font-size: 0;
/*去掉ul自带的.格式*/

            list-style: none;
            padding: 0;
        }

        .menu li{
/*将元素转换为行内块元素*/

            display:inline-block;
            width:98px;
            height:48px;
            border:1px solid gold;
            font-size:16px;
/*将边框合并*/

            margin-right:-1px;
            text-align:center;
            line-height:48px;
        }
        .menu a{
            font-family: "Microsoft YaHei UI";
            color:pink;
/*去掉a元素的下划线*/

            text-decoration: none;
        }
/*鼠标位于元素位置时改变元素样式*/

        .menu li:hover{
            background-color: orange;
        }

        .menu a:hover{
            color:#fff;
        }

    </style>
</head>
<body>
	<ul class="menu">
    <li><a href="find.html">数据查询</a></li>
    <li><a href="set.html">个人设置</a></li>
    <li><a href="manager.html">系统管理</a></li>
    <li><a href="chmod.html">用户权限</a></li>
</ul>
</body>
</html>

index-manager.html

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>主页</title>
	<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" data-integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" data-crossorigin="anonymous">
	<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap-theme.min.css" data-integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" data-crossorigin="anonymous">
	<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js" data-integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" data-crossorigin="anonymous"></script>
	<style type="text/css">
        .menu {
            width: 694px;
            height: 50px;
/*设置元素水平居中*/

            margin: 50px auto 0;
/*去除内联元素间隙*/

            font-size: 0;
/*去掉ul自带的.格式*/

            list-style: none;
            padding: 0;
        }

        .menu li{
/*将元素转换为行内块元素*/

            display:inline-block;
            width:98px;
            height:48px;
            border:1px solid gold;
            font-size:16px;
/*将边框合并*/

            margin-right:-1px;
            text-align:center;
            line-height:48px;
        }
        .menu a{
            font-family: "Microsoft YaHei UI";
            color:pink;
/*去掉a元素的下划线*/

            text-decoration: none;
        }
/*鼠标位于元素位置时改变元素样式*/

        .menu li:hover{
            background-color: orange;
        }

        .menu a:hover{
            color:#fff;
        }

    </style>
</head>
<body>
	<ul class="menu">
    <li><a href="find.html">数据查询</a></li>
    <li><a href="set.html">个人设置</a></li>
    <li><a href="manager.html">系统管理</a></li>
</ul>
</body>
</html>

index.html

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>主页</title>
	<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" data-integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" data-crossorigin="anonymous">
	<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap-theme.min.css" data-integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" data-crossorigin="anonymous">
	<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js" data-integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" data-crossorigin="anonymous"></script>

</head>
<body>
	<div class="btn-group" role="group" aria-label="...">
	  <a href="find.html"><button type="button" class="btn btn-default">数据查询</button></a>
	  <a href="set.html"><button type="button" class="btn btn-default">个人设置</button></a>
	  
	</div>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
	<h1>系统管理</h1>
	<a href="JavaScript:;" onclick="JavaScript:history.go(-1);">返回主页</a>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
	<h1>个人设置</h1>
	<a href="JavaScript:;" onclick="JavaScript:history.go(-1);">返回主页</a>
</body>
</html>

版权声明：本文为weixin_44773981原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接和本声明。

原文链接：https://blog.csdn.net/weixin_44773981/article/details/108132571