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

编程问答

登陆注册

發布時間：2025/3/12 编程问答 27 豆豆

生活随笔收集整理的這篇文章主要介紹了登陆注册小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

使用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>

<!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">手機號:   <input type="text" id="name" name="name" /></div><div class="smallcode">驗證碼:    <input type="text" id="code" name="code" /><button><a>獲取驗證碼</a></button></div><div class="small">密碼:       <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();}}

到此為止，相信上述代碼能幫助你做出一個你心目中的登陸注冊頁面及功能的實現！！！

獲取更多關注我呦！！！

總結

以上是生活随笔為你收集整理的登陆注册的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇： java 语法泛型_java-解密泛型
下一篇： Jquery鼠标点击出现文字