简单的登录注册开发
一、实现登录注册页面以及相关功能、效果图：
代码实现：
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>
二、登陆成功页面
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>
三、登录失败页面
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>
