當(dāng)前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

登陆注册

發(fā)布時(shí)間：2025/3/12 编程问答 21 豆豆

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

使用Ajax(前后端分離技術(shù))實(shí)現(xiàn)登陸注冊的功能

步驟詳解：

設(shè)計(jì)并實(shí)現(xiàn)數(shù)據(jù)庫

在數(shù)據(jù)庫中寫入相應(yīng)的數(shù)據(jù)

書寫前端HTML頁面

書寫后端JAVA代碼

鏈接前后端實(shí)現(xiàn)登陸注冊功能

看效果圖
登陸效果圖

注冊效果圖

注冊成功后的彈框提示

登陸成功之后的效果圖

看了效果圖之后有沒有一種想要馬上把它實(shí)現(xiàn)的欲望呢？？？

功能述說：
首先進(jìn)入登陸頁面
點(diǎn)擊注冊按鈕進(jìn)入到注冊頁面
填寫內(nèi)容后點(diǎn)擊注冊會彈框顯示注冊成功
點(diǎn)擊返回登陸頁面
輸入注冊成功的賬號和密碼點(diǎn)擊登陸（賬號即為注冊的手機(jī)號）
登陸成功后會跳轉(zhuǎn)到登陸成功的頁面

在看代碼之前先了解一下目錄結(jié)構(gòu)

前端目錄結(jié)構(gòu)

后端目錄結(jié)構(gòu)

==特別注意：==相應(yīng)的架包一定要引入

數(shù)據(jù)庫部分自己設(shè)計(jì)合理即可（登陸和注冊用同一個(gè)表）

上硬貨（源代碼）

一前端頁面
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">手機(jī)號:   <input type="text" id="name" name="name" /></div><div class="smallcode">驗(yàn)證碼:    <input type="text" id="code" name="code" /><button><a>獲取驗(yàn)證碼</a></button></div><div class="small">密碼:       <input type="password" id="pwd" name="pwd" /></div><div class="small">確認(rèn)密碼:<input type="text" id="ypassword" name="ypassword" /></div><div class="small">真實(shí)姓名:<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代碼
數(shù)據(jù)庫鏈接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();}}}}

登陸注冊功能的實(shí)現(xiàn)
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(); // 添加執(zhí)行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();}}

到此為止，相信上述代碼能幫助你做出一個(gè)你心目中的登陸注冊頁面及功能的實(shí)現(xiàn)！！！

獲取更多關(guān)注我呦！！！

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。

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