登陆注册

最新推荐文章于 2023-01-09 01:07:05 发布
最新推荐文章于 2023-01-09 01:07:05 发布
阅读量302 收藏 1
点赞数 1
分类专栏： Ajax Java
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45743799/article/details/102851015
版权
Java 同时被 2 个专栏收录
294 篇文章 16 订阅
订阅专栏
Ajax
6 篇文章 0 订阅
订阅专栏

使用Ajax(前后端分离技术)实现登陆注册的功能

步骤详解：

  1. 设计并实现数据库
  2. 在数据库中写入相应的数据
  3. 书写前端HTML页面
  4. 书写后端JAVA代码
  5. 链接前后端实现登陆注册功能

看效果图
登陆效果图
在这里插入图片描述
注册效果图
在这里插入图片描述
注册成功后的弹框提示
在这里插入图片描述
登陆成功之后的效果图
在这里插入图片描述
看了效果图之后有没有一种想要马上把它实现的欲望呢？？？

功能述说：
首先进入登陆页面
点击注册按钮进入到注册页面
填写内容后点击注册会弹框显示注册成功
点击返回登陆页面
输入注册成功的账号和密码点击登陆（账号即为注册的手机号）
登陆成功后会跳转到登陆成功的页面

在看代码之前先了解一下目录结构

前端目录结构
在这里插入图片描述

后端目录结构
在这里插入图片描述
==特别注意：==相应的架包一定要引入

数据库部分自己设计合理即可（登陆和注册用同一个表）
在这里插入图片描述

上硬货（源代码）

一前端页面
index.html代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script src="js/jquery.js"></script>
	</head>
	<style>
		#big{
			height: 700px;
			width: 22%;
			border: 2px solid red;
			margin: 100px auto;
		}
		#user{
			width: 100%;
			height: 35%;
			border: 2px solid black;
			margin: 0px auto;
			background: -webkit-linear-gradient(left, red, blue);
			background: -o-linear-gradient(right, red, blue);
			background: -moz-linear-gradient(right, red, blue);
			background: linear-gradient(to right, red, blue);
		}
		#tou{
			height: 130px;
			width: 130px;
			border-radius: 65px;
			margin: 50px auto;
		}
		#tou img{
			height: 130px;
			width: 130px;
			border-radius: 65px;
		}
		#username{
			width: 80%;
			height: 10%;
			margin: 60px auto 30px auto;
			text-align: center;
			font-size: 30px;
		}
		#username input{
			width: 200px;
			height: 30px;
			border: 1px dotted red;
		}
		#userpwd{
			width: 80%;
			height: 10%;
			margin: 0px auto;
			text-align: center;
			font-size: 30px;
		}
		#userpwd input{
			width: 200px;
			height: 30px;
			border: 1px dotted red;
		}
		#anniu{
			width: 90%;
			height: 10%;
			margin: 70px auto;
		}
		#login{
			width: 130px;
			height: 50px;
			border: 3px solid greenyellow;
			border-radius: 20px;
			margin: 10px 20px;
			float: left;
		}
		#register{
			width: 130px;
			height: 50px;
			border: 3px solid greenyellow;
			border-radius: 20px;
			margin: 10px 20px;
			float: right;
		}
		#register a{
			text-decoration: none;
		}
	</style>
	<body>
		<div id="big">
			<div id="user">
				<div id="tou">
					<img src="img/2.png" />
				</div>
			</div>
			<div id="username">
				账号:<input type="text" name="name" id="name" />
			</div>
			<div id="userpwd">
				密码:<input type="password" name="pwd" id="pwd" />
			</div>
			<div id="anniu">
				<button id="login"><a>登陆</a></button>
				<button id="register"><a href="register.html">注册</a></button>
			</div>
		</div>
	</body>
	<script>
		$(function(){
			
		    $("#login").on("click",function(){
			
		        var name = $("#name").val();
		        var pwd = $("#pwd").val();
			
		        $.ajax({
		            url:"http://localhost:8080/Library/login",
		            type:"post",
		            data:{
		                name:name,
		                pwd:pwd
		            },
		            dataType:"text",
		            success:function(data){
						if(data == "ok"){
							window.location.href = "success.html"
						}else{
							window.location.href = "index.html"
						}
		                
		            }
		        });
		        
		    });
			
		});
	</script>
</html>

register.html代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/jquery.js"></script>
	</head>
	<style>
		#zhuce{
			width: 22%;
			height: 700px;
			border: 1px solid black;
			margin: 100px auto;
		}
		#userzhuce{
			width: 100%;
			height: 20%;
			border: 2px dotted red;
			background: -webkit-linear-gradient(left, red, blue);
			background: -o-linear-gradient(right, red, blue);
			background: -moz-linear-gradient(right, red, blue);
			background: linear-gradient(to right, red, blue);
		}
		#text{
			width: 40%;
			height: 30%;
			border-radius: 10px;
			margin: 40px auto;
			text-align: center;
			font-size: 30px;
		}
		.small{
			width: 80%;
			height: 8%;
			margin: 15px auto;
			text-align: left;
			font-size: 25px;
		}
		.small input{
			width: 180px;
			height: 20px;
			border: 2px dotted red;
		}
		
		.smallcode{
			width: 90%;
			height: 8%;
			margin: 15px auto;
			text-align: left;
			margin-left: 42px;
			font-size: 25px;
		}
		.smallcode input{
			width: 90px;
			height: 20px;
			border: 2px dotted red;
		}
		.smallcode button{
			height: 30px;
			border: 2px dotted greenyellow;
			border-radius: 10px;
		}
		
		#zhuceanniu{
			width: 90%;
			height: 8%;
			margin: 30px auto;
		}
		#zhuceanniu input{
			width: 130px;
			height: 50px;
			margin-top: 5px;
			border-radius: 20px;
			border: 3px solid greenyellow;
			float: left;
		}
		#zhuceanniu button{
			width: 130px;
			height: 50px;
			margin-top: 5px;
			border-radius: 20px;
			border: 3px solid greenyellow;
			float: right;
		}
		a{
			text-decoration: none;
		}
	</style>
	<body>
		<div id="zhuce">
			<div id="userzhuce">
				<div id="text">欢迎注册</div>
			</div>
			
			<div class="small">
				手机号:&nbsp;&nbsp;&nbsp;<input type="text" id="name" name="name" />
			</div>
			<div class="smallcode">
				验证码:&nbsp;&nbsp;&nbsp;&nbsp;<input type="text" id="code" name="code" />
				<button><a>获取验证码</a></button>
			</div>
			<div class="small">
				密码:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input type="password" id="pwd" name="pwd" />
			</div>
			<div class="small">
				确认密码:<input type="text" id="ypassword" name="ypassword" />
			</div>
			<div class="small">
				真实姓名:<input type="text" id="reallyName" name="reallyName" />
			</div>
			<div class="small">
				出生年月:<input type="text" id="year" name="year" />
			</div>
			
			<div id="zhuceanniu">
				<input type="button" name="regist" id="regist" value="注册" />
				<button><a href="index.html">返回登陆</a></button>
			</div>
			
		</div>
	</body>
	<script>
		$(function(){
			
		    $("#regist").on("click",function(){
			
				
		        var name = $("#name").val();
		        var pwd = $("#pwd").val();
			
		        $.ajax({
		            url:"http://localhost:8080/Library/regist",
		            type:"post",
		            data:{
		                name:name,
		                pwd:pwd
		            },
		            dataType:"text",
		            success:function(data){
						if(data == "ok"){
							alert("注册成功！");
						}else{
							alert("注册失败，请重新注册！");
						}
		            }
		        });
		        
		    });
			
		});
	</script>
</html>

success.html代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<h2>登陆成功!!!</h2>
	</body>
</html>

二后端JAVA代码
数据库链接util包里的DBUtil.java代码

package com.hnpi.util;

import java.sql.Connection;
import java.sql.DriverManager;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.sql.SQLException;

public class DBUtil {
	
	public static Connection getConn(){
		String url = "jdbc:sqlserver://localhost:1433;databaseName=LibraryManager";
		String user = "sa";
		String pwd = "1";
		Connection conn = null;
		
		try {
			Class.forName("com.microsoft.sqlserver.jdbc.SQLServerDriver");
			conn = DriverManager.getConnection(url, user, pwd);
		} catch (SQLException e) {
			// TODO Auto-generated catch block
			e.printStackTrace();
		} catch (ClassNotFoundException e) {
			// TODO Auto-generated catch block
			e.printStackTrace();
		}
		
		return conn;
		
	}
	
	public static void closeConn(Connection conn, PreparedStatement ps, ResultSet rs){
		if(conn!=null){
			try {
				conn.close();
			} catch (SQLException e) {
				// TODO Auto-generated catch block
				e.printStackTrace();
			}
		}
		if(ps!=null){
			try {
				ps.close();
			} catch (SQLException e) {
				// TODO Auto-generated catch block
				e.printStackTrace();
			}
		}
		if(rs!=null){
			try {
				rs.close();
			} catch (SQLException e) {
				// TODO Auto-generated catch block
				e.printStackTrace();
			}
		}
	}

}

登陆注册功能的实现
servlet包里的LoginServlet.java代码

package com.hnpi.servlet;

import java.io.IOException;
import java.io.PrintWriter;
import java.sql.Connection;
import java.sql.PreparedStatement;
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.hnpi.util.DBUtil;

public class LoginServlet extends HttpServlet {

	public void doGet(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {

		doPost(request, response);
	}

	public void doPost(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {

		PrintWriter out = response.getWriter();

		request.setCharacterEncoding("utf-8");
		response.setContentType("text/html");

		String name = request.getParameter("name");
		String pwd = request.getParameter("pwd");

		boolean flag = false;
		Connection conn = DBUtil.getConn();
		String sql = "select * from contronct where name = ? and pwd = ?";
		PreparedStatement ps = null;
		ResultSet rs = null;

		try {
			ps = conn.prepareStatement(sql);

			ps.setString(1, name);
			ps.setString(2, pwd);

			rs = ps.executeQuery();

			if (rs.next()) {
				flag = true;
			} else {
				flag = false;
			}

		} catch (SQLException e) {
			// TODO Auto-generated catch block
			e.printStackTrace();
		} finally {
			DBUtil.closeConn(conn, ps, rs);
		}

		// 解决跨域问题
		response.setHeader("Access-Control-Allow-Origin", "*");

		if (flag) {
			out.print("ok");
		} else {
			out.print("error");
		}

		out.flush();
		out.close();
	}

}

servlet包里的RegistServlet.java代码

package com.hnpi.servlet;

import java.io.IOException;
import java.io.PrintWriter;
import java.sql.Connection;
import java.sql.PreparedStatement;
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;


public class RegistServlet extends HttpServlet {


	public void doGet(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {

		doPost(request, response);
	}


	public void doPost(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {

request.setCharacterEncoding("utf-8");
		
		String name = request.getParameter("name");
		String pwd = request.getParameter("pwd");
		
		response.setContentType("text/html");
		PrintWriter out = response.getWriter();
		
		//解决跨域问题
		response.setHeader("Access-Control-Allow-Origin", "*");
		
		
		Connection conn = com.hnpi.util.DBUtil.getConn();
        PreparedStatement ps = null;
        int count = 0;
        
        
        try {
            String sql = "insert into contronct(name,pwd) values(?,?)"; // 条件修改语句的定义
			ps = conn.prepareStatement(sql);
			ps.setString(1, name);
			ps.setString(2, pwd);
	        count = ps.executeUpdate(); // 添加执行
	        
	        if(count > 0){
	        	out.print("ok");
	        }else{
	        	out.print("error");
	        	
	        }
	        
	        
		} catch (SQLException e) {
			// TODO Auto-generated catch block
			e.printStackTrace();
		}finally{
			com.hnpi.util.DBUtil.closeConn(null, null, null);
		}
	

		out.flush();
		out.close();
	}

}

到此为止，相信上述代码能帮助你做出一个你心目中的登陆注册页面及功能的实现！！！

获取更多关注我呦！！！

风叶翩翩
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
登录注册页面html
06-15
基于html css jq的登录注册页面，含validate手机号码验证,简单易懂，仅供学习使用，路啦啦啦啦啦啦啦
简单的登录注册-注册
m0_69045017的博客
04-02 344
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>D.
登录注册
G_Sun_Q的博客
12-12 943
Okhttp public class Okhttp { private Handler handler =new Handler(); private String str; private static Okhttp okhttp=null; public Okhttp(){ } public static Okhttp getInster(){
实现登录注册
weixin_43916826的博客
01-13 760
首先导入权限 implementation ‘com.squareup.okhttp3:okhttp:3.7.0’ implementation ‘com.squareup.okio:okio:1.12.0’ 写Api public class Api { public static final String BASE_URL=“http://172.17.8.100”; //商品列表 publi...
简单的登录注册
vengu733的博客
07-18 1273
regist.jsp(添加验证码功能)简单的登录注册功能加验证码功能。验证码Servlet。
JavaWeb登录注册页面
08-02
JavaWeb登录注册页面是Web应用开发中的基础模块，主要用于用户的身份验证和信息管理。这个项目集成了验证码生成与验证、记住账号密码的功能，并且利用了Filter进行请求拦截，以提高系统的安全性和用户体验。同时，该...
JavaWeb登录注册源码
03-21
在JavaWeb开发中，登录注册功能是任何Web应用程序的基础组件，尤其对于用户交互性强的网站而言更为重要。这个"A1.zip"压缩包可能包含了实现这一功能的源代码，让我们来详细探讨一下JavaWeb登录注册涉及的技术点。 1...
swing登录注册界面设计
08-27
swing登录注册界面设计 swing登录注册界面设计是Java Swing应用程序开发中的一种常见设计模式，主要用于构建登录注册界面。该设计模式具有较高的参考价值，适合感兴趣的小伙伴们学习和参考。 swing登录注册界面...
登录注册页面
08-23
在开发Web应用时，登录注册页面是不可或缺的部分，它涉及到用户的身份验证和权限管理。本教程将重点关注如何构建登录注册页面，并与MySQL数据库进行交互。首先，我们需要理解以下几个关键知识点： 1. **...
登录注册模板
04-01
登录注册模板是网页设计中常见的元素，主要用于网站或应用程序的用户接口，使用户能够创建账户、验证身份或访问受保护的内容。在这个特定的压缩包文件中，包含的是多个登录注册页面模板，这些模板通常以HTML格式提供...
用户注册登录
05-25
通过数据库实+servlet+jsp现用户的注册与登录，数据库自建。
网站注册和登录个人信息
12-08
这是javaee文件,一般学习计算机的同学们大二下半年会用到！
新用户注册
03-27
function checkUsername(){ var uname = $("#userName").val(); var reg=/^[0-9a-zA-Z][0-9a-zA-Z_.-]{2,16}[0-9a-zA-Z]$/; if(uname==""){ $("#userNameId").removeClass().addClass("error_prompt"); $("#userNameId").html("通行证用户名不能为空，请输入通行证用户名"); return false; } if(reg.test(uname)==false){ $("#userNameId").removeClass().addClass("error_prompt"); $("#userNameId").html("1、由字母、数字、下划线、点、减号组成<br/>2、只能以数字、字母开头或结尾，且长度为4-18"); return false; }else{ $("#userNameId").removeClass().addClass("ok_prompt").html("通行证用户名输入正确"); } return true; }
小作品（小项目？）技术总结(1)--用户注册、用户登录常用功能模块
高自强的博客
07-02 8676
一、前言前几天帮一个学长做了一个Web端的作品，结合之前做的一些东西，总结发现很多东西的复用率还是挺高的，例如用户注册、用户登录这些任何项目中都要使用到的功能模块。所以，很有必要将它们进行总结，不断精化，日后用起来也会比较简单。 先贴几张前台的图： 1.首页 2.用户注册、用户登录页面 3.故障诊断页面 4.诊断结果页面 二、使用技术JPA + JSF
使用Java代码实现登录注册功能
weixin_42340389的博客
07-29 4万+
实现思路：分别创建5个包和5个类{cn.f.pojo（User.java）；cn.f.Dao（UserDao.java）；cn.f.Dao.impl（UserDaoImpl.java）； cn.f.game（GuessNumber.java）；  cn.f.test（UserTest.java）} 第一步：  封装cn.f.pojo（User.java）类 代码： package cn.f...
【项目实战】登录与注册业务的实现（前端+后端+数据库）
web13618542420的博客
06-21 3881
本示例基于Vue.js和mint UI实现。目录一、数据库的创建二、后端接口与数据库的连接三、前端代码实现1.注册页相关代码2.注册页效果3.登录页相关代码4.登录页效果四、注册登录演示五、项目文件结构此处以Navicat软件进行创建，新建数据库reg_log.sql与数据表reg_log；为了实现注册业务，我们在数据库中设计ID、用户名、密码、邮箱、电话号5个字段。创建结束后保存，便可以在数据库中找到我们刚刚创建的数据库和空表。这样就可以在项目中进行连接了。server文件夹 -> app.js **三、
项目学习 —— 登录与注册（完整）
Archer__13的博客
04-08 2786
一. 创建动态Web工程 参考：https://blog.csdn.net/Archer__13/article/details/123388390 ​ ①web目录存放web工程的资源文件，例如：html页面、css文件、js文件等，将写好的web页面放到该目录下（首页、用户登录页面、用户注册页面）； ②web目录下的WEB-INF目录是受服务器保护的目录，浏览器无法直接访问此目录的内容； ③在WEB-INF目录下创建一个lib目录用来存放所需要的第三方jar包； ...
【Java案例】用户登录注册
weixin_66697650的博客
01-09 1万+
用户可以输入对应的编号进行相应的功能操作。例如，输入2进入注册功能，输入用户名和密码进行注册。编写程序实现简单的用户登录注册功能。（1）登录功能，用户输入正确的账号密码登录成功；（2）注册功能，输入用户名和密码进行注册；（3）查看功能，查看所有的用户名与密码；（4）退出功能，退出系统；
JavaWeb实现用户登录注册功能实例
热门推荐
afanti222的博客
03-08 17万+
一、Servlet+JSP+JavaBean开发模式(MVC)介绍　　Servlet+JSP+JavaBean模式(MVC)适合开发复杂的web应用，在这种模式下，servlet负责处理用户请求，jsp负责数据显示，javabean负责封装数据。 Servlet+JSP+JavaBean模式程序各个模块之间层次清晰，web开发推荐采用此种模式。　　这里以一个最常用的用户登录注册程序来讲解Servl...
javaweb登录注册
最新发布
09-11
对于JavaWeb的登录注册功能，您可以通过以下步骤实现： 1. 创建数据库表：首先，您需要创建一个用于存储用户信息的数据库表。该表应至少包含以下字段：用户ID、用户名、密码等。 2. 创建登录页面：您可以使用HTML...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值