网页注册登录实现

最新推荐文章于 2024-04-28 21:08:19 发布

刘奉钦-以书会友

最新推荐文章于 2024-04-28 21:08:19 发布

阅读量1.9w

点赞数 35

分类专栏： WEB

本文链接：https://blog.csdn.net/Kevin1906/article/details/103750929

版权

WEB 专栏收录该内容

19 篇文章 1 订阅

订阅专栏

网页注册登录页面及功能实现

最近了解了一些网页知识，写个博客总结分享一下

一、页面实现

代码及效果图

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>登录</title>
<style type="text/css">
.wrap{
	/*margin表示外边距*/
	margin-top: 100px;
	width: 500px;
	height: 500px;
	/*background-color: #ccc; */
	margin-left: 500px;
}	
.input{
	width: 250px;
	height: 40px;
	margin-top: 50px;
	margin-left: 30px;
}
.logC{
	margin-left: 100px;
	width: 60%;
	height: 45px;
	background-color: #ee7700;
	color: white;
	font-size: 18px;
	margin-top: 50px;
}
.regist{
	margin-top: 20px;
	float: right;
	margin-right: 100px;
}
</style>
</head>
<body>
	<!-- class用于style中控制div样式，也可以直接改为style="",将属性写在style中 -->
	<div class="wrap">
		<!-- from是一个表单，点击提交按钮时可以将输入框内容提交到action后的页面，method表示servelet请求方式 -->
		<form action="#" method="post">
		<div style="margin-left: 50px;">
		<!-- b标签表示加粗字体 -->
		<b>用户名:</b>
		<!-- placeholder表示输入框预设文字 -->
		<input class="input"  type="text" name="name" placeholder="输入用户名" />
		</div>
		<!-- br表示换行 -->
		<br>	
		<div style="margin-left: 50px;">
		<b>密 码:</b>
		<input class="input" type="password" name="password" placeholder="输入用户密码" />
		</div >
		<br>
		<!-- submit表示提交按钮 -->
		<input class="logC" type="submit" name="login" value="登录">

		</form>
		<div class="regist">
			<!-- a标签表示链接 ，用于页面跳转-->
			<a href="regist.html">立即注册</a>
		</div>
	</div>
</body>
</html>

在这里插入图片描述

实现步骤

1、考虑布局
设计页面首先考虑布局，我们有输入框和登录按钮，把它们放在一个盒子里，html中一个盒子就是一个div，再往盒子里添加各种组件

<head>
<meta charset="utf-8">
<title>登录</title>
<style type="text/css">
.wrap{
	width: 500px;
	height: 500px;
	<-- 这里设置一下背景颜色，便于调试-->
	background-color: #ccc; 
	margin-left: 200px;
}	
</style>
</head>
<body>
	<div class="wrap">
	
	</div>
</body>

在这里插入图片描述
** 2、添加组件**
然后就添加各种组件
3、控制样式
这里介绍一个浏览器设置预览的工具

在浏览器预览的用 “箭头”选择组件，在右下角会出现margin和padding的一些参数
鼠标点中后直接用上下键修改这些参数，在左边页面会实时显示
我们把每个组件修改好之后再去文件里面修改就方便很多

在这里插入图片描述

*注册界面
注册界面于登录界面基本一样只是功能不同，就不贴代码了

二、功能实现

1、数据校验
数据校验这里提供两种处理方式，一个是通过js，一个是通过servelet处理

js处理

<form  name="form" action="#" method="post">
		<div style="margin-left: 50px;">
		<!-- b标签表示加粗字体 -->
		<b>用户名:</b>
		<!-- placeholder表示输入框预设文字 -->
		<input class="input"  type="text" name="name" placeholder="输入用户名" />
		</div>
		<!-- br表示换行 -->
		<br>	
		<div style="margin-left: 50px;">
		<b>密 码:</b>
		<input class="input" type="password" name="password" placeholder="输入用户密码" />
		</div >
		<br>
		<!-- submit表示提交按钮 -->
		<input class="logC" onClick="log()" type="button" name="login" value="登录">

		</form>
		<div class="regist">
			<!-- a标签表示链接 ，用于页面跳转-->
			<a href="regist.html">立即注册</a>
		</div>
		
<script type="text/javascript">
		//定义log函数
		function log() {
			//获取输入框的值，方式1
			// var name = document.getElementsByTagName('input')[0].value;
			// var password = document.getElementsByTagName('input')[1].value;	
			//方式2
			var name = document.form.name.value;
			var password = document.form.password.value;
			if (name==null||""==name) {
				alert("用户名为空，请重新输入");
			} else if(password=null||""==password){
				alert("密码为空，请重新输入");
			}else{
				//#表示servelet
				document.form.action = "#";
				document.form.submit();
			}
		}
</script>

input 的submit改为button，添加点击事件

<input class="logC" onClick="log()" type="button" name="login" value="登录">

2、后端处理

表单提交后转到servelet
跳转到servelet要保证web.xml中存在对应的，如果有问题可以自行百度

serveletd代码

public class login extends HttpServlet {

	public void doPost(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {
		String phone = new String(request.getParameter("phone").getBytes("ISO-8859-1"), "UTF-8");
		String mima = request.getParameter("mima");
		MemberDao memberDao = new MemberDao();//控制类、与数据库连接进行增删查改
		String result = memberDao.login(phone, mima);//查询数据库中是否存在该数据
		System.out.println("登录提交成功！");
		if(result!=null){
			response.setCharacterEncoding("UTF-8");//设置页面编码格式
			request.getRequestDispatcher("index.jsp").forward(request, response);//登陆成功之后跳转到主页
		}else{
			response.setCharacterEncoding("UTF-8");//设置页面编码格式
			String a = URLEncoder.encode("登录失败", "UTF-8"); 
			PrintWriter out = response.getWriter();//打开流之后设置编码会无效
			out.print("<script language='javascript'>alert(decodeURIComponent('"+a+"'));window.location.href='login.html';</script>");
		}
	}
}

数据库控制类MemberDao

public class MemberDao {
	public Connection con = new Conns().getConnection();

	public String login(String tel, String password) {
		String sql = "select name from muser where password=? and tel=?";
		try {
			PreparedStatement pst = con.prepareStatement(sql);
			pst.setString(1, password);
			pst.setString(2, tel);
			ResultSet executeQuery = pst.executeQuery();
			if (executeQuery.next()) {
				String muser = executeQuery.getString("name");
				return muser;
			}
		} catch (Exception e) {
			e.printStackTrace();
		} finally {
			Conns.close(con);
		}
		return null;
	}
}

3、数据库连接(sqlserver)

后端与数据库的连接可参考这篇博客 https://blog.csdn.net/Kevin1906/article/details/103844379
我这里用的是sql server 初学建议选择mysql，可搭配navicat可视化工具

public class Conns {
	public Connection connection = null;
	public static final String DBDRIVER = "com.microsoft.sqlserver.jdbc.SQLServerDriver";
	public static final String DBURL = "jdbc:sqlserver://127.0.0.1:1433;DatabaseName=plant";
	public static final String DBUSER = "sa";
	public static final String DBPASS = "123";

	public Connection getConnection() {
		try {
			Class.forName(Conns.DBDRIVER);
		} catch (ClassNotFoundException e) {
			System.out.println("error connects sql.");
			e.printStackTrace();
		}
		try {
			connection = DriverManager.getConnection(Conns.DBURL, Conns.DBUSER, Conns.DBPASS);
		} catch (SQLException e) {
			e.printStackTrace();
		}
		return connection;
	}

	public static void close(Connection con) {
		if (con != null)
			try {
				con.close();
			} catch (SQLException e) {
				e.printStackTrace();
			}
	}
}

刘奉钦-以书会友

关注

35
点赞
踩
246

收藏

觉得还不错? 一键收藏
3
评论
网页注册登录实现

网页注册登录页面及功能实现最近了解了一些网页知识，写个博客总结分享一下一、页面实现代码及效果图<!doctype html><html><head><meta charset="utf-8"><title>登录</title><style type="text/css">.wrap{ /*m...
复制链接

扫一扫