欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页

【记录】如何完整得实现一个简易登陆注册系统

程序员文章站 2022-04-18 11:54:33
...

概述

实现一个完整的登陆注册系统需要包含下面这三大部分：页面（登陆注册入口）、后台（处理用户表单）、数据库（存放账户数据）

在页面端获取到登陆或者是注册的信息，同时对表单数据进行判定是否满足相应条件（比如密码长度是否小于8位，账号长度是否小于6位，两次输入的密码是否一致等等）

在页面端获取到数据后就需要向后台传输这些数据

后台接到这些表单数据后就需要执行以下操作，例如使用MD5加密密码、向数据库传入注册信息、检测账号是否已经存在、返回登陆/注册是否成功的页面等等。

而关于连接数据库，就需要后端调用DBUtil组件来快捷实现登陆，注册，判断存在等功能。

这就是实现完整的简易注册登陆系统的大致流程。

详细步骤介绍

Part.1  页面

————>页面端注册代码

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
</head>
<body>
	<script>
		function checkname(){
			var element = document.getElementById("name");
			var element2 = document.getElementById("tips1");
			if(element.value.length<6){
				element2.innerHTML="用户名太短！至少6位！";
			}else{
				element2.innerHTML="用户名正确！可以使用！";
			}
		}

		function checkpassword(){
			var element = document.getElementById("password");
			var element2 = document.getElementById("tips2");
			if(element.value.length<8){
				element2.innerHTML="密码太短！至少8位！";
			}else{
				element2.innerHTML="";
			}
		}

		function checksame(){
			var element = document.getElementById("password");
			var element2 = document.getElementById("tips3");
			var element3 = document.getElementById("password2");
			if(element.value != element3.value){
				element2.innerHTML="两次输入密码不同！请重新输入！ ";
			}else{
				element2.innerHTML="";
			}
		}
		
		function submitcheck(){
			var element01 = document.getElementById("name");
			var element02 = document.getElementById("password");
			var element03 = document.getElementById("password2");
			if(element01.value==""){
				return false;
			}
			if(element01.value.length<6){
				return false;
			}
			if(element02.value.length<8){
				return false;
			}
			if(element02.value.length==0){
				return false;
			}
			if(element02.value != element03.value){
				return false;
			}
		}
		
	</script>
	<form id="form1" action="./RegistServlet" οnsubmit="return submitcheck()">
		<input id="name" placeholder="Pleace write the name you wanted" name="user_name" οnchange="checkname()" />
		<span id="tips1"></span>
		<br /> 
		<input id="password" type="password" placeholder="Pleace write your password"name="user_password" οnchange="checkpassword()"/>
		<span id="tips2"></span> 
		<br /> 
		<input id="password2" type="password"placeholder="Pleace write your password again" name="user_password2" οnchange="checksame()" />
		<span id="tips3"></span>
		<br />
		<input type="submit" value="Regist"/>
	</form>
</body>
</html>

——>解析

(待完成。。。)

————>页面端登陆代码

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<body>
	<script>
		function check(){
			var element = document.getElementById("name");
			if(element.value.length<6){
				alert("用户名错误！请确认后输入！");
				return;
			}
		}
	</script>
	<form action="./LoginServlet">
		<input id="name" placeholder="Pleace write your name" name="user_name" οnchange="check()"/>
		<br/>
		<input id="password" type="password" placeholder="Pleace write your password" name="user_password"/>
		<br/>
		<input type="submit" value="login"/>
	</form>
</body>
</html>

——>解析

(待完成。。。)

Part.2  后端

————>后端注册代码

package com.deepice.userinfo;

import java.io.IOException;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import com.deepice.util.DBUtil;
import com.deepice.util.MD5Util;

public class RegistServlet extends HttpServlet {
	private static final long serialVersionUID = 1L;
       
	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		String name=request.getParameter("user_name");
		System.out.println(name);
		String password = request.getParameter("user_password");
		System.out.println(password);
		password =MD5Util.getInstance().getMD5(password).toUpperCase();
		System.out.println(password);
		if(DBUtil.exist("select * from user_inf where name=?",name)){
			System.out.println("111111");
			request.setAttribute("message", "该用户名已被注册！请重新注册！");
			request.getRequestDispatcher("result.jsp").forward(request, response);
		}else {
			if(DBUtil.upDate("insert into user_inf (name,password) values (?,?)",name,password)) {
				request.setAttribute("message", "注册成功！");
				request.getRequestDispatcher("result.jsp").forward(request, response);
			}
		}
	}
}

————>后端登陆代码

package com.deepice.userinfo;

import java.io.IOException;
import java.sql.ResultSet;
import java.sql.SQLException;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import com.deepice.util.DBUtil;
import com.deepice.util.IRowMapper;
import com.deepice.util.MD5Util;


public class LoginServlet extends HttpServlet {
	
	private static final long serialVersionUID = 1L;
	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		String name = request.getParameter("user_name");
		String password = request.getParameter("user_password");
		password=MD5Util.getInstance().getMD5(password).toUpperCase();
		IRowMapper rowMapper = (ResultSet resultSet)->{
			try {
				if(resultSet.next()) {
					request.setAttribute("message", "登陆成功！");
					request.getRequestDispatcher("result.jsp").forward(request, response);
				}else {
					request.setAttribute("message", "密码错误！登陆失败！");
					request.getRequestDispatcher("result.jsp").forward(request, response);
				}
			} catch (Exception e) {
				e.printStackTrace();
			}
		};
		DBUtil.select("select name from user_inf where name=? and password=?",rowMapper,name,password);
	}
}

 

 

 

 

 

未完待续……

上一篇： 爆损,变着法儿玩套路

下一篇： Tensorflow实现卷积神经网络的详细代码