簡單的登陸註冊開發
1、實現登陸註冊頁面以及相關功能、效果圖：javascript
代碼實現：css
1 <%@ page language="java" contentType="text/html; charset=utf-8" %> 2 <%@ page import="java.net.*" %> 3 <% 4 String path = request.getContextPath(); 5 String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/"; 6 %> 7 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 8 <html> 9 <head> 10 <base href="<%=basePath%>"> 11 12 <title>登陸註冊頁面</title> 13 <meta http-equiv="pragma" content="no-cache"> 14 <meta http-equiv="cache-control" content="no-cache"> 15 <meta http-equiv="expires" content="0"> 16 <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> 17 <meta http-equiv="description" content="This is my page"> 18 19 </head> 20 <style type="text/css"> 21 <!--用戶登陸界面屬性--> 22 23 *{ 24 margin:0px; 25 padding:0px; 26 } 27 #myDiv{ 28 background-color:#666; 29 width:600px; 30 height:400px; 31 position:absolute; 32 left:27%; 33 } 34 #myDiv #title{ 35 width:600px; 36 height:20px; 37 color:#400000; 38 font:40px; 39 font-family:'楷體'; 40 } 41 #title h3{ 42 width:298px; 43 height:30px; 44 text-align:center; 45 top:5px; 46 border:#CCC 1px solid; 47 border-top:none; 48 margin:0px; 49 float:left; 50 font-family:'楷體'; 51 52 } 53 #content div{ 54 width:600px; 55 height:376px; 56 display:none; 57 } 58 .choice{ 59 background-color:#CCC; 60 } 61 .choice1{ 62 display:block; 63 background-color:#CCC; 64 } 65 66 #content{ 67 width:408px; 68 height:376px; 69 display:table-cell; 70 vertical-align:middle; 71 font-family:'楷體'; 72 } 73 74 <!--用戶註冊界面屬性--> 75 #box{ 76 font-size:10px; 77 color:#400000; 78 font-weight:570; 79 } 80 span{ 81 color:#333; 82 font-size:12px; 83 } 84 85 </style> 86 <script type="text/javascript"> 87 88 //選項框設置 89 function choice(num){ 90 var v = document.getElementById("title").getElementsByTagName("h3"); 91 var d = document.getElementById("content").getElementsByTagName("div"); 92 for(var i=0;i<v.length;i++){ 93 if(i==num){ 94 v[i].className ="choice"; 95 d[i].className ="choice"; 96 d[i].style.display="block"; 97 }else{ 98 v[i].className =""; 99 d[i].className =""; 100 d[i].style.display="none"; 101 } 102 } 103 } 104 function login(){ 105 var n=document.getElementById("title").getElementsByTagName("name"); 106 var p=document.getElementById("title").getElementsByTagName("password"); 107 108 } 109 110 111 //用戶註冊前段驗證 112 113 var flag= new Array(false,false,false,false); 114 //判斷用戶名 115 function test1(){ 116 flag[0]=false; 117 var name = document.getElementById("name"); 118 var span1= document.getElementById("span1"); 119 if((name.value.length>=2 &&name.value.length<=4)&&(/^[\u4e00-\u9fff]*$/.test(name.value))){ 120 //span1.style.display="none"; 121 span1.style.color="#CCC"; 122 flag[0]=true; 123 }else{ 124 span1.style.color="red"; 125 flag[0]=false; 126 } 127 } 128 //判斷手機號碼 129 function test2(){ 130 flag[1]=false; 131 var tel = document.getElementById("tel"); 132 var span2= document.getElementById("span2"); 133 if(/^1(3|5|7|9)\d{9}$/.test(tel.value)){ 134 span2.style.color="#CCC"; 135 flag[1]=true; 136 }else{ 137 span2.style.color="red"; 138 flag[1]=false; 139 } 140 } 141 //判斷密碼 142 function test3(){ 143 flag[2]=false; 144 var password = document.getElementById("password"); 145 var span3= document.getElementById("span3"); 146 if((password.value.length>=6)&&(password.value.length<=20) 147 &&(/^[a-zA-Z][a-zA-Z0-9_]*$/.test(password.value))){ 148 span3.style.color="#CCC"; 149 flag[2]=true; 150 }else{ 151 span3.style.color="red"; 152 flag[2]=false; 153 } 154 } 155 //確認密碼 156 function test4(){ 157 flag[3]=false; 158 var password = document.getElementById("password"); 159 var repassword = document.getElementById("repassword"); 160 var span4= document.getElementById("span4"); 161 if(((repassword.value!=null)&&(repassword.value!=""))&&(repassword.value==password.value)){ 162 span4.style.color="#CCC"; 163 flag[3]=true; 164 }else{ 165 span4.style.color="red"; 166 flag[3]=false; 167 } 168 } 169 //登陸判斷 170 function reg(){ 171 var count=0; 172 for(var i=0;i<flag.length;i++){ 173 if(flag[i]==true){ 174 count++; 175 if(count==flag.length){ 176 return true; 177 } 178 } 179 } 180 return false; 181 } 182 183 </script> 184 <body style="background-color: black"> 185 <h1 style="color: red; margin-left: 560px;font-family:'楷體' "><br>用戶管理系統</h1><br> 186 <div id="myDiv"> 187 <div id="title"> 188 <h3 onmouseover="choice(0)">用戶登陸</h3> 189 <h3 onmouseover="choice(1)">用戶註冊</h3> 190 </div> 191 192 <div id="content"> 193 <% 194 response.setContentType("text/html;charset=utf-8"); 195 request.setCharacterEncoding("utf-8"); 196 String username=""; 197 String password = ""; 198 //獲取全部的Cookies值，返回值是一個數組 199 Cookie[] cookies = request.getCookies(); 200 if(cookies!=null){ 201 for(Cookie c:cookies){ 202 if(c.getName().equals("username")){ 203 //將保存到Cookies中的漢字解碼出來 204 username = URLDecoder.decode(c.getValue(),"utf-8"); 205 } 206 if(c.getName().equals("password")){ 207 //將保存到Cookies中的漢字解碼出來 208 password = URLDecoder.decode(c.getValue(),"utf-8"); 209 } 210 211 } 212 213 } 214 %> 215 216 <!-- 用戶登陸界面--> 217 <div> 218 <br><br><br> 219 <h1 style="color: #400000; margin-left: 248px;font-family:'楷體' ">用戶登陸</h1> 220 <center> 221 <form action="http://localhost:8888/2016_10_13_Servlet/com.servlet/UserLogin_DaoImpl" method="post"> 222 <table style="color: #400000;font-size:24px;font-family:'楷體' "> 223 <tr><td>用戶名:</td><td><input type="text" name = "username" 224 value="<%=username%>"/></td></tr> 225 <tr><td>密 碼:</td><td><input type="password" name = "password" 226 value="<%=password%>" /></td></tr> 227 <tr><td style="font-size:18px">記住密碼十天:</td><td> 228 <input type="checkbox" name = "isUseCookie" checked="checked"></td> 229 </tr> 230 231 </table> 232 <br> <input type="submit" name = "submit" value="提交" 233 style="font-size: 24px;font-family:'楷體' "/> 234 <input type="reset" name = "submit" value="重置" 235 style="font-size: 24px;font-family:'楷體' "/> 236 </form> 237 </center> 238 </div> 239 240 <!-- 用戶註冊界面 --> 241 <div ><br> 242 <h1 style="color: #400000; margin-left: 220px;font-family:'楷體' ">用戶註冊</h1> 243 <center> 244 <form action="http://localhost:8888/2016_10_13_Servlet/com.servlet/HttpservletDemo" 245 method="post" style="color:#0F0; font-size:36px" onsubmit="return reg()"> 246 <table id="box" > 247 <tr> 248 <td>用 戶 名：</td> 249 <td><input id="name" name="username" type="text" onblur="test1()" value="" style="border-color:#339"/> 250 <span id="span1"> 必須輸入漢字名稱</span> 251 </td> 252 </tr> 253 <tr> 254 <td>手機號碼：</td> 255 <td><input id="tel" name="tel" type="text" onblur="test2()" style="border-color:#339" /> 256 <span id="span2"> 手機號碼必須知足條件</span> 257 </td> 258 </tr> 259 <tr> 260 <td>輸入密碼：</td> 261 <td><input id="password" name="password" type="password" onblur="test3()" 262 style="border-color:#339"/> 263 <span id="span3"> 英文字母開頭</span> 264 </td> 265 </tr> 266 <tr> 267 <td>確認密碼：</td> 268 <td><input id="repassword" type="password" onblur="test4()"style="border-color:#339" /> 269 <span id="span4"> 兩次密碼輸入必須一致</span> 270 </td> 271 </tr> 272 <tr> 273 <td>性 別：</td> 274 <td><input type="radio" name="gender" value="man" />男 275 <input type="radio" name="gender" value="women"/>女 276 </td> 277 </tr> 278 <tr> 279 <td>學 歷：</td> 280 <td> 281 <select name="xueli" > 282 <option value="小學" >小學</option> 283 <option value="初中" >初中</option> 284 <option value="高中" >高中</option> 285 <option value="大學" >大學</option> 286 </select> 287 288 </td> 289 </tr> 290 <tr> 291 <td>愛 好：</td> 292 <td> 293 <input type="checkbox" name="love" value="shangwang"/>上網 294 <input type="checkbox" name="love" value="lanqiu"/>藍球 295 <input type="checkbox" name="love" value="zuqiu"/>足球 296 <input type="checkbox" name="love" value="pashan"/>登山 297 <input type="checkbox" name="love" value="dushu"/>讀書 298 </td> 299 </tr> 300 </table> 301 <input type="submit" value="提交" 302 style="font-size:20px; color:#400000;font-family:'楷體'"/> 303 304 <input type="reset" value="重置" 305 style="font-size:20px; color:#400000; font-family:'楷體'"/> 306 <br/><br/> 307 </form> 308 </center> 309 </div> 310 311 </div> 312 </div> 313 </body> 314 </html>
2、登錄成功頁面html
1 <%@ page language="java" import="java.util.*" contentType="text/html; charset=utf-8"%> 2 <%@ page import ="org.hibernate.*"%> 3 <%@ page import ="com.util.HibernateUtil"%> 4 <%@ page import ="com.servlet.UserRequest"%> 5 <%@ page import ="com.daoimpl.*"%> 6 <%@ page import ="com.test.*"%> 7 <%@ page import ="com.dao.*"%> 8 <% 9 String path = request.getContextPath(); 10 String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/"; 11 %> 12 <html> 13 <head> 14 <title>後臺管理</title> 15 16 </head> 17 <style type="text/css"> 18 19 .mini-messagebox-content td{ 20 font-size:36px; 21 } 22 23 </style> 24 <script type="text/javascript"> 25 26 function AllSelect(){ 27 var all = document.getElementById("all"); 28 var boxes = document.getElementsByName("box"); 29 for(var i = 0; i< boxes.length; i++){ 30 if(boxes[i].type =="checkbox" ){ 31 if(all.checked){ 32 boxes[i].checked = true; 33 }else{ 34 boxes[i].checked = false; 35 } 36 37 } 38 39 } 40 41 } 42 43 function M(){ 44 var temp=document.getElementById("message"); 45 temp.value=""; 46 47 } 48 49 function DeleteAll(){ 50 if (!confirm("確認要刪除？")) { 51 window.event.returnValue = false; 52 } 53 54 } 55 </script> 56 <body> 57 <h2 style="font-family:'楷體';margin-left: 620px;margin-top: 40px">用戶信息表</h2><br> 58 59 <form action="/2016_10_13_Servlet/permission/MoHucheck.jsp" method="post"> 60 <input type="text" style="margin-left: 300px" id="message" name="chacktext" placeholder="輸入用戶名" /> 61 62 <input type="submit" id="chackbutton" value="模糊查詢"/> 63 </form> 64 <form action="/2016_10_13_Servlet/com.servlet/AllDeleteServlet" method="post"> 65 <table border="1" style="text-align:center; font-size:18px; 66 margin-left:300px;font-family:'楷體' "> 67 68 <% 69 70 //獲取SessionFactory實例 71 SessionFactory sf=HibernateUtil.getSessionFactory(); 72 Session ss=sf.openSession(); 73 Transaction ts=ss.beginTransaction(); 74 75 76 //獲取參數id、傳參 77 response.setContentType("text/html;charset=utf-8"); 78 request.setCharacterEncoding("utf-8"); 79 Query query=ss.createQuery("from UserRequest"); 80 @SuppressWarnings("unchecked") 81 List<UserRequest> list =query.list(); 82 83 84 85 //統計網站被訪問的次數 86 ServletContext sc=request.getServletContext(); 87 Integer count=1; 88 if(sc.getAttribute("count")!=null){ 89 //使用包裝類型能夠避免JSP強制轉換異常 90 count=(Integer)(sc.getAttribute("count")); 91 count++; 92 //設置count 93 sc.setAttribute("count",count); 94 //寫入指定文件 95 WriteAndRead.writer(count); 96 }else{ 97 //從指定文件讀取count 98 count=WriteAndRead.read(); 99 sc.setAttribute("count",count); 100 101 } 102 103 %> 104 105 106 <tr> 107 <td>批處理<input id="all" type="checkbox" onclick="AllSelect()" /></td> 108 <td>用戶編號</td> 109 <td>用戶名稱</td> 110 <td>用戶密碼</td> 111 <td>用戶電話</td> 112 <td>用戶性別</td> 113 <td>用戶學歷</td> 114 <td>用戶愛好</td> 115 <td>後臺操做</td> 116 </tr> 117 <% 118 119 //實現分頁技術 120 UserRequest_Dao rd = new UserRequest_Daoimpl(); 121 String tempPage = request.getParameter("page"); 122 123 //pag數據的頁碼 124 int pag = -1 ; 125 //每一頁顯示的條數 126 int each_Max = 2; 127 //每一次分頁查詢的結果 128 List<UserRequest> user = null; 129 if(tempPage != null && tempPage.length() != 0){ 130 pag = Integer.parseInt(tempPage); 131 user = rd.pagingQuery(pag, each_Max); 132 }else{ 133 user = rd.pagingQuery(1, each_Max); 134 135 } 136 //總的頁數 137 int pageCount = -1; 138 //全部數據的長度 139 int size = list.size(); 140 //若是對應的頁數是每一頁條數的整數倍，輸出頁數 141 if(size%each_Max==0){ 142 pageCount = size/each_Max; 143 }//反之，輸出剩餘的頁數 144 else{ 145 pageCount = size/each_Max+1; 146 } 147 //輸出每一頁的數據 148 for(UserRequest userrequest : user){ 149 150 %> 151 152 <tr> 153 <td><input name="box" type="checkbox" value="<%=userrequest.getId()%>"/></td> 154 <td><%=userrequest.getId()%></td> 155 <td><%=userrequest.getUsername()%></td> 156 <td><%=userrequest.getPassword()%></td> 157 <td><%=userrequest.getTel()%></td> 158 <td><%=userrequest.getGender()%></td> 159 <td><%=userrequest.getXueli()%></td> 160 <td><%=userrequest.getHobby()%></td> 161 162 <td><a href="/2016_10_13_Servlet/permission/UpdeteUserName.jsp?id=<%=userrequest.getId()%> ">修改</a> 163 <a href="/2016_10_13_Servlet/permission/DeleteUserName.jsp?id=<%=userrequest.getId()%>">刪除</a> </td> 164 </tr> 165 <%}%> 166 </table> 167 <input type="submit" style="margin-left: 300px" onclick="DeleteAll()" value="批量刪除" /> 168 </form > 169 170 171 172 <% 173 for(Integer i =1;i<=pageCount;i++){ 174 %> 175 <a href="/2016_10_13_Servlet/permission/login_success.jsp?page=<%=i%> ">第<%=i%>頁</a> 176 177 <%}%><br><br> 178 <span style="font-family:'楷體';margin-left: 300px">你的網站共計被訪問<%=count %>次</span> 179 <br> 180 181 </body> 182 183 </html>
3、登陸失敗頁面java
1 <%@ page language="java" import="java.util.*" contentType="text/html; charset=utf-8"%> 2 <% 3 String path = request.getContextPath(); 4 String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/"; 5 %> 6 <html> 7 <head> 8 <title>登陸...</title> 9 </head> 10 <body> 11 <div id="container"> 12 <div class="logo"> 13 <h1>(:</h1> 14 </div> 15 <div id="box"> 16 登陸失敗！請檢查用戶或者密碼!<br> 17 <a href="http://localhost:8888/2016_10_13_Servlet/Login&&Register.jsp">返回登陸</a> 18 19 </div> 20 </div> 21 </body> 22 </html>
相關文章
- 1. Android 簡單登陸註冊
- 2. angular簡單登陸註冊
- 3. MVC簡單的登陸註冊
- 4. JQuery簡單的登陸註冊驗證
- 5. layui-簡單的登陸註冊界面
- 6. Android Studio開發：簡單的登陸註冊界面
- 7. Tornado實現簡單登陸註冊
- 8. 簡單實現BBS註冊與登陸
- 9. SSM實現簡單登陸註冊
- 10. 登陸、註冊
- 更多相關文章...
- • MySQL觸發器簡介 - MySQL教程
- • Spring DI（依賴注入）的實現方式：屬性注入和構造注入 - Spring教程
- • Spring Cloud 微服務實戰(三) - 服務註冊與發現
- • PHP開發工具
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
歡迎關注本站公眾號,獲取更多信息
相關文章
- 1. Android 簡單登陸註冊
- 2. angular簡單登陸註冊
- 3. MVC簡單的登陸註冊
- 4. JQuery簡單的登陸註冊驗證
- 5. layui-簡單的登陸註冊界面
- 6. Android Studio開發：簡單的登陸註冊界面
- 7. Tornado實現簡單登陸註冊
- 8. 簡單實現BBS註冊與登陸
- 9. SSM實現簡單登陸註冊
- 10. 登陸、註冊