溫馨提示×
您好，登錄后才能下訂單哦！
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》
您好，登錄后才能下訂單哦！
本文小編為大家詳細(xì)介紹“Java怎么實(shí)現(xiàn)登錄與注冊(cè)頁(yè)面”，內(nèi)容詳細(xì)，步驟清晰，細(xì)節(jié)處理妥當(dāng)，希望這篇“Java怎么實(shí)現(xiàn)登錄與注冊(cè)頁(yè)面”文章能幫助大家解決疑惑，下面跟著小編的思路慢慢深入，一起來學(xué)習(xí)新知識(shí)吧。
用java實(shí)現(xiàn)的登錄與注冊(cè)頁(yè)面，實(shí)現(xiàn)了客戶端（瀏覽器）到服務(wù)器（Tomcat）再到后端（servlet程序）數(shù)據(jù)的交互。這里在注冊(cè)頁(yè)面加入了驗(yàn)證碼驗(yàn)證。
注冊(cè)的html代碼
<body>
<fieldset id="">
<legend>注冊(cè)頁(yè)面</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>國(guó)籍：</td>
<td>
<select name="country" id="country">
<option value="none">--請(qǐng)選擇國(guó)籍--</option>
<option value="中國(guó)">中國(guó)</option>
<option value="韓國(guó)">韓國(guó)</option>
<option value="日本">日本</option>
<option value="美國(guó)">美國(guó)</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è)頁(yè)面截圖
這里需要注意的是我用的是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、就是這張畫紙的長(zhǎng)寬。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è)頁(yè)面的代碼。
@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);
//這里只加了簡(jiǎn)單的判斷，判斷帳號(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ù)庫(kù)驅(qū)動(dòng)
Class.forName("com.mysql.jdbc.Driver");
//這里我在數(shù)據(jù)庫(kù)中添加了一個(gè)名為day02的數(shù)據(jù)庫(kù)
String url = "jdbc:mysql:///day02";
//默認(rèn)是系統(tǒng)管理員的賬戶
String user = "root";
//這里你自己設(shè)置的數(shù)據(jù)庫(kù)密碼
String passw = "xxxxxx";
//獲取到數(shù)據(jù)庫(kù)的連接
Connection connection = DriverManager.getConnection(url, user, passw);
//獲取到執(zhí)行器
Statement stmt = connection.createStatement();
//需要執(zhí)行的sql語(yǔ)句
String sql = "insert into users values (null,'"+userName+"','"+password+"','"+repassword+"','"+sex+"','"+ Arrays.toString(hobby)+"','"+country+"','"+describe+"')";
//建議打印一下sql語(yǔ)句，放在數(shù)據(jù)庫(kù)中看是否能將數(shù)據(jù)添加到數(shù)據(jù)庫(kù)中
System.out.println(sql);
//執(zhí)行sql語(yǔ)句
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();
}
}
}登錄頁(yè)面，同樣非常丑。就是簡(jiǎn)單的三個(gè)input標(biāo)簽
登錄頁(yè)面的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>
登錄頁(yè)面的java代碼，因?yàn)橹挥袔ぬ?hào)密碼，就只和數(shù)據(jù)庫(kù)中的帳號(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 {
//從登錄頁(yè)面拿到用戶輸入的用戶名
String name = req.getParameter("user");
//從登錄頁(yè)面拿到用戶輸入的密碼
String pwd = req.getParameter("password");
//還是在控制臺(tái)上輸出看是否拿到的帳號(hào)密碼
System.out.println("用戶名：" +name);
System.out.println("密碼："+ pwd);
//下邊就是加載數(shù)據(jù)庫(kù)的過程
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語(yǔ)句。就會(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ù)庫(kù)中
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ù)庫(kù)中的密碼匹配
if(rs2.next()){
resp.getWriter().write("登錄成功，點(diǎn)擊跳轉(zhuǎn)<a href='http://www.baidu.com'>首頁(yè)</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();
}
}
}讀到這里，這篇“Java怎么實(shí)現(xiàn)登錄與注冊(cè)頁(yè)面”文章已經(jīng)介紹完畢，想要掌握這篇文章的知識(shí)點(diǎn)還需要大家自己動(dòng)手實(shí)踐使用過才能領(lǐng)會(huì)，如果想了解更多相關(guān)內(nèi)容的文章，歡迎關(guān)注億速云行業(yè)資訊頻道。
免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。
億速云公眾號(hào)
手機(jī)網(wǎng)站二維碼