欢迎访问 生活随笔！
TAG聚合

生活随笔

当前位置： 首页 > 编程资源 > 编程问答 >内容正文

编程问答

登陆注册

发布时间：2025/3/12 编程问答 28 豆豆
生活随笔 收集整理的这篇文章主要介绍了 登陆注册 小编觉得挺不错的,现在分享给大家,帮大家做个参考.

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

步骤详解：

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

    • 看效果图
    登陆效果图

    注册效果图

    注册成功后的弹框提示

    登陆成功之后的效果图

    看了效果图之后有没有一种想要马上把它实现的欲望呢？？？

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

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

    前端目录结构

    后端目录结构

    ==特别注意：==相应的架包一定要引入

    数据库部分自己设计合理即可（登陆和注册用同一个表）

    上硬货（源代码）

    一前端页面
    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 blocke.printStackTrace();} catch (ClassNotFoundException e) {// TODO Auto-generated catch blocke.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 blocke.printStackTrace();}}if(ps!=null){try {ps.close();} catch (SQLException e) {// TODO Auto-generated catch blocke.printStackTrace();}}if(rs!=null){try {rs.close();} catch (SQLException e) {// TODO Auto-generated catch blocke.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 blocke.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 blocke.printStackTrace();}finally{com.hnpi.util.DBUtil.closeConn(null, null, null);}out.flush();out.close();}}

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

    获取更多关注我呦！！！

    总结

    以上是生活随笔为你收集整理的登陆注册的全部内容，希望文章能够帮你解决所遇到的问题。

    如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。