快捷導(dǎo)航

Java實(shí)現(xiàn)登錄與注冊(cè)頁面

更新時(shí)間：2022年04月24日 17:03:37 作者：莫得感情的程序猿

這篇文章主要為大家詳細(xì)介紹了Java實(shí)現(xiàn)登錄與注冊(cè)頁面，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

用java實(shí)現(xiàn)的登錄與注冊(cè)頁面，實(shí)現(xiàn)了客戶端（瀏覽器）到服務(wù)器（Tomcat）再到后端（servlet程序）數(shù)據(jù)的交互。這里在注冊(cè)頁面加入了驗(yàn)證碼驗(yàn)證。

注冊(cè)的html代碼，頁面非常丑！！請(qǐng)見諒。。

<body>
<fieldset id="">
? <legend>注冊(cè)頁面</legend>
? <form action="/day02/register2" method="post" id="form" ">
? ? <table>
? ? ? <tr>
? ? ? ? <td>用戶名：</td>
? ? ? ? <td><input type="text" name="userName" /><span id="span1"></span></td>
? ? ? </tr>
? ? ? <tr>
? ? ? ? <td>
? ? ? ? ? 密碼：
? ? ? ? </td>
? ? ? ? <td>
? ? ? ? ? <input type="password" name="password" />
? ? ? ? </td>
? ? ? </tr>
? ? ? <tr>
? ? ? ? <td>
? ? ? ? ? 確認(rèn)密碼：
? ? ? ? </td>
? ? ? ? <td>
? ? ? ? ? <input type="password" name="repassword" />
? ? ? ? ? <span id="span2"></span>
? ? ? ? </td>

? ? ? </tr>
? ? ? <tr id="tr4">
? ? ? ? <td>
? ? ? ? ? 性別：
? ? ? ? </td>
? ? ? ? <td>
? ? ? ? ? <input type="radio" name="sex" value="男" />男
? ? ? ? ? <input type="radio" name="sex" value="女" />女
? ? ? ? ? <span id="span3"></span>
? ? ? ? </td>
? ? ? </tr>
? ? ? <tr>
? ? ? ? <td>愛好：</td>
? ? ? ? <td>
? ? ? ? ? <input type="checkbox" name="hobby" value="唱" />唱
? ? ? ? ? <input type="checkbox" name="hobby" value="跳" />跳
? ? ? ? ? <input type="checkbox" name="hobby" value="rap" />rap
? ? ? ? ? <input type="checkbox" name="hobby" value="籃球" />籃球
? ? ? ? ? <span id="span4"></span>
? ? ? ? </td>
? ? ? </tr>
? ? ? <tr>
? ? ? ? <td>國籍：</td>
? ? ? ? <td>
? ? ? ? ? <select name="country" id="country">
? ? ? ? ? ? <option value="none">--請(qǐng)選擇國籍--</option>
? ? ? ? ? ? <option value="中國">中國</option>
? ? ? ? ? ? <option value="韓國">韓國</option>
? ? ? ? ? ? <option value="日本">日本</option>
? ? ? ? ? ? <option value="美國">美國</option>
? ? ? ? ? </select>
? ? ? ? ? <span id="span5"></span>
? ? ? ? </td>
? ? ? </tr>
? ? ? <tr>
? ? ? ? <td>自我評(píng)價(jià)：</td>
? ? ? ? <td>
? ? ? ? ? <textarea rows="10px" cols="20px" id="textarea" name="describe" ></textarea>
? ? ? ? </td>
? ? ? </tr>
? ? <tr>
? ? ? ? <td>
? ? ? ? ? 驗(yàn)證碼：
? ? ? ? </td>
? ? ? ? <td>
? ? ? ? ? <input type="text" name="check"/>
? ? ? ? ? <img src="/day02/demo" id="img" onclick="checkImg()" style = "cursor: pointer">
? ? ? ? ? <a href="javascript:void(0);" onclick="checkImg()">換一張</a>
? ? ? ? </td>
? ? ? </tr>
? ? </table>
? ? <input type="submit" id="btn2" value="提交" />
? ? <input type="button" id="btn1" value="驗(yàn)證" />
? </form>

</fieldset>
</body>
<script type="text/javascript">
? function checkImg() {
? ? var img = document.getElementById("img");
? ? img.src ="/day02/demo?"+new Date().getTime()

? }
</script>

注冊(cè)頁面截圖

這里需要注意的是我用的是Tomcat服務(wù)器，因?yàn)樗渲袥]有mysql驅(qū)動(dòng)，所以需要手動(dòng)添加到Tomcat的lib目錄下。

還有在web.xml中添加了全局配置主要是為了項(xiàng)目中需要改編碼的方便

<context-param>
? ? ? ? <param-name>encode</param-name>
? ? ? ? <param-value>UTF-8</param-value>
? ? </context-param>

這里是生成驗(yàn)證碼的程序，在我的上篇文章有詳細(xì)講解

@WebServlet(urlPatterns = "/demo")
public class CheckImg extends HttpServlet {
? ? //復(fù)寫HttpServlet中的doGet方法
? ? public void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException,
? ? ? ? ? ? IOException{
? ? ? ? //準(zhǔn)備一張畫紙，將驗(yàn)證碼中的數(shù)字字母寫到這張畫紙中
? ? ? ? int width = 120;
? ? ? ? int height = 30;
? ? ? ? BufferedImage bufi = new BufferedImage(width, height, BufferedImage.TYPE_INT_RGB);
? ? ? ? //這里面的width、height、就是這張畫紙的長寬。BufferedImage.TYPE_INT_RGB就是這張畫紙基于
? ? ? ? //RGB三原色來進(jìn)行畫
? ? ? ? //獲取一個(gè)畫筆對(duì)象，給圖片上畫畫
? ? ? ? Graphics2D g = (Graphics2D) bufi.getGraphics();
? ? ? ? //設(shè)置畫筆顏色
? ? ? ? g.setColor(Color.WHITE);
? ? ? ? //將這個(gè)顏色填充到整個(gè)畫紙
? ? ? ? g.fillRect(0,0,width,height);
? ? ? ? //定義圖片上可以寫什么數(shù)據(jù)
? ? ? ? String data = "QWERTYUIOPASDFGHJKLZXCVBNMqwertyuiopasdfghjklzxcvbnm1234567890";
? ? ? ? //定義書寫在畫紙上的起始位置
? ? ? ? int x =15;
? ? ? ? int y =25;
? ? ? ? //定義一個(gè)隨機(jī)數(shù)
? ? ? ? Random r = new Random();
? ? ? ? //創(chuàng)建一個(gè)字符串緩沖區(qū)
? ? ? ? StringBuilder sb = new StringBuilder();
? ? ? ? //定義一個(gè)循環(huán)給畫紙上寫四個(gè)數(shù)
? ? ? ? for(int i = 0; i < 4; i++){
? ? ? ? ? ? //從data中隨機(jī)獲取一個(gè)下標(biāo)的數(shù)據(jù)
? ? ? ? ? ? char c = data.charAt(r.nextInt(data.length()));
? ? ? ? ? ? sb.append(c+"");
? ? ? ? ? ? //隨機(jī)生成畫筆的顏色,RGB三原色隨機(jī)在0-256中隨機(jī)生成
? ? ? ? ? ? g.setColor(new Color(r.nextInt(256),r.nextInt(256),r.nextInt(256)));
? ? ? ? ? ? //設(shè)置字體
? ? ? ? ? ? g.setFont(new Font("黑體",Font.BOLD,26));
? ? ? ? ? ? double theta =(30 - (r.nextInt(60)))*Math.PI/180;
? ? ? ? ? ? g.rotate(theta,x,24);
? ? ? ? ? ? //設(shè)置數(shù)據(jù)旋轉(zhuǎn)
? ? ? ? ? ? //g.rotate((20)*Math.PI/180,x,y);

? ? ? ? ? ? //將數(shù)據(jù)寫到畫紙上
? ? ? ? ? ? g.drawString(c+"",x,y);
? ? ? ? ? ? g.rotate(-theta,x,24);
? ? ? ? ? ? //設(shè)置完旋轉(zhuǎn)要調(diào)回，防止數(shù)據(jù)旋轉(zhuǎn)的看不到
? ? ? ? ? ? //g.rotate(-((20)*Math.PI/180),x,y);
? ? ? ? ? ? //每寫完一個(gè)調(diào)整下一個(gè)數(shù)據(jù)寫的位置
? ? ? ? ? ? x += 25;
? ? ? ? }
? ? ? ? HttpSession session = req.getSession();
? ? ? ? session.setAttribute("checkNum",sb.toString());
? ? ? ? //添加線類型的干擾信息
? ? ? ? for(int i = 0; i < 15 ; i++){
? ? ? ? ? ? //同樣設(shè)置線的顏色
? ? ? ? ? ? g.setColor(new Color(r.nextInt(256),r.nextInt(256),r.nextInt(256)));
? ? ? ? ? ? //開始劃線,這里需要的四個(gè)參數(shù)中前兩個(gè)是線開頭的左邊，后邊兩個(gè)是線結(jié)束的坐標(biāo)
? ? ? ? ? ? g.drawLine(r.nextInt(width),r.nextInt(height),r.nextInt(width),r.nextInt(height));
? ? ? ? }
? ? ? ? //添加點(diǎn)類型干擾信息
? ? ? ? for (int i = 0 ; i < 150 ; i++){
? ? ? ? ? ? //設(shè)置點(diǎn)的顏色
? ? ? ? ? ? g.setColor(new Color(r.nextInt(256),r.nextInt(256),r.nextInt(256)));
? ? ? ? ? ? //開始畫點(diǎn),實(shí)質(zhì)上這是畫橢圓，將上半軸半徑，左半軸半徑設(shè)置為0就可以看成是一個(gè)點(diǎn)
? ? ? ? ? ? g.drawOval(r.nextInt(width),r.nextInt(height),0,0);
? ? ? ? }


? ? ? ? //這個(gè)時(shí)候并沒有在這張紙上書寫任何內(nèi)容，但是已經(jīng)可以像客戶端響應(yīng)請(qǐng)求了
? ? ? ? ImageIO.write(bufi, "jpg", resp.getOutputStream());
? ? }
}

這是注冊(cè)頁面的代碼。

@WebServlet(urlPatterns = "/register2")
public class Register extends HttpServlet {
? ? //

? ? @Override
? ? protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
? ? ? ? doPost(req,resp);
? ? }

? ? @Override
? ? protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
? ? ? ? //獲取在web.xml中的配置的全局屬性
? ? ? ? String encode = req.getServletContext().getInitParameter("encode");
? ? ? ? //為了防止亂碼設(shè)置編碼
? ? ? ? req.setCharacterEncoding(encode);
? ? ? ? resp.setContentType("text/html;charset="+encode);
? ? ? ? //獲得請(qǐng)求過來的資源
? ? ? ? String userName = req.getParameter("userName");
? ? ? ? String password = req.getParameter("password");
? ? ? ? String repassword = req.getParameter("repassword");
? ? ? ? String sex = req.getParameter("sex");
? ? ? ? String[] hobby = req.getParameterValues("hobby");
? ? ? ? String country = req.getParameter("country");
? ? ? ? String describe = req.getParameter("describe");
? ? ? ? //這里將獲取到的請(qǐng)求數(shù)據(jù)都在控制臺(tái)上打印了一遍
? ? ? ? //看是否拿到了這些數(shù)據(jù)
? ? ? ? System.out.println(userName);
? ? ? ? System.out.println(password);
? ? ? ? System.out.println(repassword);
? ? ? ? System.out.println(sex);
? ? ? ? System.out.println(hobby[0]);
? ? ? ? System.out.println(country);
? ? ? ? System.out.println(describe);
? ? ? ? //這里只加了簡單的判斷，判斷帳號(hào)是否填寫，以及兩次密碼是否一致
? ? ? ? //判斷信息是否填寫
? ? ? ? if(userName==null||password==null||repassword==null||sex==null||hobby==null||country==null||describe==null){
? ? ? ? ? ? resp.getWriter().write("所有的數(shù)據(jù)都不能為空，請(qǐng)重新<a href = '/day02'>填寫</a>");
? ? ? ? ? ? return;
? ? ? ? }
? ? ? ? //判斷兩次密碼是否一致
? ? ? ? if(!password.equals(repassword)){
? ? ? ? ? ? resp.getWriter().write("兩次密碼輸入不一致，請(qǐng)重新<a href = '/day02'>填寫</a>");
? ? ? ? ? ? return;
? ? ? ? }
? ? ? ? ?//判斷驗(yàn)證碼輸入是否正確
? ? ? ? ?if(!checkImg.equalsIgnoreCase(check)){
? ? ? ? ? ? resp.getWriter().write("驗(yàn)證碼輸入錯(cuò)誤");
? ? ? ? ? ? return;
? ? ? ? }
? ? ? ? try {
? ? ? ? ?? ?//加載MySQL的數(shù)據(jù)庫驅(qū)動(dòng)
? ? ? ? ? ? Class.forName("com.mysql.jdbc.Driver");
? ? ? ? ? ? //這里我在數(shù)據(jù)庫中添加了一個(gè)名為day02的數(shù)據(jù)庫
? ? ? ? ? ? String url = "jdbc:mysql:///day02";
? ? ? ? ? ? //默認(rèn)是系統(tǒng)管理員的賬戶
? ? ? ? ? ? String user = "root";
? ? ? ? ? ? //這里你自己設(shè)置的數(shù)據(jù)庫密碼
? ? ? ? ? ? String passw = "xxxxxx";
? ? ? ? ? ? //獲取到數(shù)據(jù)庫的連接
? ? ? ? ? ? Connection connection = DriverManager.getConnection(url, user, passw);
? ? ? ? ? ? //獲取到執(zhí)行器
? ? ? ? ? ? Statement stmt = connection.createStatement();
? ? ? ? ? ? //需要執(zhí)行的sql語句
? ? ? ? ? ? String sql = "insert into users values (null,'"+userName+"','"+password+"','"+repassword+"','"+sex+"','"+ Arrays.toString(hobby)+"','"+country+"','"+describe+"')";
? ? ? ? ? ? //建議打印一下sql語句，放在數(shù)據(jù)庫中看是否能將數(shù)據(jù)添加到數(shù)據(jù)庫中
? ? ? ? ? ? System.out.println(sql);
? ? ? ? ? ? //執(zhí)行sql語句
? ? ? ? ? ? int i = stmt.executeUpdate(sql);
? ? ? ? ? ? //添加成功上邊這個(gè)執(zhí)行器就會(huì)返回1
? ? ? ? ? ? if(i==1){
? ? ? ? ? ? ? ? resp.getWriter().write("注冊(cè)成功，請(qǐng)<a href = '/day02/login.html'>登錄</a>");
? ? ? ? ? ? }else{
? ? ? ? ? ? ? ? resp.getWriter().write("注冊(cè)失敗，請(qǐng)返回重新<a href = '/day02/'></a>");
? ? ? ? ? ? }
? ? ? ? ? ? stmt.close();
? ? ? ? ? ? connection.close();
? ? ? ? }catch (Exception e){
? ? ? ? ? ? e.printStackTrace();
? ? ? ? }
? ? }
}

登錄頁面，同樣非常丑。就是簡單的三個(gè)input標(biāo)簽

登錄頁面的html代碼

<body>
<form action="login">
? ? 用戶名：<input type="text" name="user"><br/>
? ? 密碼：<input type="password" name="password"><br/>
? ? <input type="submit" name="提交">
? ? <a href="/register2" rel="external nofollow" >注冊(cè)</a>
</form>
</body>

登錄頁面的java代碼，因?yàn)橹挥袔ぬ?hào)密碼，就只和數(shù)據(jù)庫中的帳號(hào)密碼進(jìn)行判斷

@WebServlet(urlPatterns = "/login")
public class login extends HttpServlet {
? ? @Override
? ? protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
? ? ? ? doPost(req,resp);
? ? }

? ? @Override
? ? protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
? ? ? ? //先獲取到全局配置中的設(shè)置的編碼
? ? ? ? String encode = req.getServletContext().getInitParameter("encode");
? ? ? ? //設(shè)置請(qǐng)求和響應(yīng)的編碼
? ? ? ? req.setCharacterEncoding(encode);
? ? ? ? resp.setContentType("text/html;charset="+encode);
? ? ? ? try {
? ? ? ? ?? ?//從登錄頁面拿到用戶輸入的用戶名
? ? ? ? ? ? String name = req.getParameter("user");
? ? ? ? ? ? //從登錄頁面拿到用戶輸入的密碼
? ? ? ? ? ? String pwd = req.getParameter("password");
? ? ? ? ? ? //還是在控制臺(tái)上輸出看是否拿到的帳號(hào)密碼
? ? ? ? ? ? System.out.println("用戶名：" +name);
? ? ? ? ? ? System.out.println("密碼："+ pwd);
? ? ? ? ? ? //下邊就是加載數(shù)據(jù)庫的過程
? ? ? ? ? ? Class.forName("com.mysql.jdbc.Driver");
? ? ? ? ? ? String url = "jdbc:mysql:///day02";
? ? ? ? ? ? String user = "root";
? ? ? ? ? ? String password = "xxxxxxx";
? ? ? ? ? ? String sql = "select * from users where userName = '"+name+"'";
? ? ? ? ? ? String sql2 = "select * from users where password = '"+pwd+"'";
? ? ? ? ? ? Connection conn = DriverManager.getConnection(url, user, password);
? ? ? ? ? ? //這里我選擇是創(chuàng)建了兩個(gè)執(zhí)行器，如果一個(gè)執(zhí)行器執(zhí)行兩個(gè)sql語句。就會(huì)出現(xiàn)異常
? ? ?
? ? ? ? ? ? Statement stmt = conn.createStatement();
? ? ? ? ? ? Statement stmt2 =conn.createStatement();
? ? ? ? ? ? ResultSet rs = stmt.executeQuery(sql);
? ? ? ? ? ? ResultSet rs2 = stmt2.executeQuery(sql2);
? ? ? ? ? ? //判斷用戶輸入的帳號(hào)是否在數(shù)據(jù)庫中
? ? ? ? ? ? if (rs.next()){
? ? ? ? ? ? ? ? System.out.print("用戶名：" + rs.getString("userName") + "\t");
? ? ? ? ? ? }else{
? ? ? ? ? ? ? ? resp.getWriter().write("對(duì)不起你帳號(hào)名有誤，請(qǐng)<a href='/day02'>注冊(cè)</a>");
? ? ? ? ? ? }
? ? ? ? ? ? //通過了帳號(hào)的判斷，就對(duì)密碼進(jìn)行判斷，同樣是判斷密碼是否與數(shù)據(jù)庫中的密碼匹配
? ? ? ? ? ? if(rs2.next()){
? ? ? ? ? ? ? ? resp.getWriter().write("登錄成功，點(diǎn)擊跳轉(zhuǎn)<a );
? ? ? ? ? ? ? ? System.out.print("密碼：" + rs.getString("password") + "\t");
? ? ? ? ? ? }else{
? ? ? ? ? ? ? ? resp.getWriter().write("對(duì)不起你密碼有誤，請(qǐng)<a href='/day02'>注冊(cè)</a>");
? ? ? ? ? ? }


? ? ? ? }catch (Exception e){
? ? ? ? ? ? e.printStackTrace();
? ? ? ? }
? ? }
}

以上就是本文的全部內(nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: