【练习】jsp登录 

  1 <%--
  2   Created by IntelliJ IDEA.
  3   User: L
  4   Date: 2019/9/27
  5   Time: 10:32
  6   To change this template use File | Settings | File Templates.
  7 --%>
  8 <%@ page contentType="text/html;charset=UTF-8" language="java" %>
  9 <html>
 10 <head>
 11     <meta charset="utf-8">
 12     <script id="jqbb" src="js/jquery.min.js"></script>
 13     <style type="text/css">
 14         body{
 15             overflow: hidden;
 16             margin: 0;
 17             background: #333;
 18         }
 19         h1{
 20             position: fixed;
 21             top: 50%;
 22             left: 0;
 23             width: 118%;
 24             text-align: center;
 25             transform:translateY(-50%);
 26             font-family: 'Love Ya Like A Sister', cursive;
 27             font-size: 40px;
 28             color: #c70012;
 29             padding: 0 20px;
 30             -moz-user-select:none;/*火狐*/
 31             -webkit-user-select:none;/*webkit浏览器*/
 32             -ms-user-select:none;/*IE10*/
 33             -khtml-user-select:none;/*早期浏览器*/
 34             user-select:none;
 35         }
 36         @media (min-width:1200px){
 37             h1{
 38                 font-size: 60px;
 39             }
 40         }
 41         .login{
 42             height: 250px;
 43             width: 400px;
 44             border:1px solid #ccc;
 45             position: absolute;
 46             left: 50%;
 47             top: 50%;
 48             margin-left: -200px;
 49             margin-top: -125px;
 50         }
 51         form{
 52             color: #fff;
 53             margin-left: 15%;
 54             margin-top: 35px;
 55         }
 56         table{
 57             color: #fff;
 58         }
 59         .dl:hover{
 60             background-color: burlywood;
 61         }
 62         .cz:hover{
 63             background-color: burlywood;
 64         }
 65     </style>
 66 
 67 
 68 </head>
 69 <body>
 70 
 71 <div class="login">
 72     <p style="font-size: 20px;text-align: center;color:sandybrown">欢迎使用登录系统</p>
 73 
 74     <%--        获取网页的cookie，判断是否有需要的登录名信息，有则显示在用户名框内--%>
 75     <%
 76         String userName = "";
 77         Cookie[] cookie = request.getCookies();
 78         if(cookie == null || cookie.length == 0){
 79         }else {
 80             for (Cookie cookie1 : cookie) {
 81                 if (cookie1.getName().equals("userName")){
 82                     userName = cookie1.getValue();
 83 
 84                     //out.print(userName);
 85                 }
 86                 //out.print(cookie1.getName()+"--");
 87             }
 88         }
 89     %>
 90     <form action="go.jsp" name="Myfeg" onsubmit="return checkReg()" method="get">
 91         <table cellpadding="10">
 92             <tr>
 93                 <td> 用户名：</td>
 94                 <td><input type="text" name="userName" placeholder="用户名为4-16个字符" value="<%=userName%>"/></td>
 95             </tr>
 96             <tr>
 97                 <td> 密&nbsp;&nbsp;&nbsp;码：</td>
 98                 <td> <input type="password" name="userPwd" placeholder="密码由数字字符6~18位"></td>
 99             </tr>
100             <tr>
101                 <td>
102 
103                 </td>
104 
105                 <td>
106                     <input class="dl" type="submit" name="dl" value="登录" style="margin-left: 10px;border:none">
107                     <input class="cz" type="button" name="cz" value="注册" style="margin-left: 40px;border:none">
108                 </td>
109             </tr>
110         </table>
111     </form>
112     <%--      获取地址栏的属性值以及application记录页面访问次数--%>
113     <%
114         String mess = request.getParameter("info");
115         if (mess != null ){
116             out.print(mess);
117         }
118         Object count = application.getAttribute("count");
119         if(count == null){
120             //application中未存放count
121             application.setAttribute("count", 1);
122         }else{
123             //application中已经存放count
124             Integer i=(Integer)count;
125             application.setAttribute("count", i+1);
126         }
127         Integer icount=(Integer)application.getAttribute("count");
128         out.println("页面被访问了"+icount+"次");
129     %>
130     <%--      登录失败后，返回主页面，修改地址栏参数，刷新之后不会显示登录失败提示--%>
131     <script>
132         var url = document.URL;
133         var num = url.indexOf('?');
134         if (num){
135             URL = url.substring(0,num);  //截取网址信息
136             history.pushState(null,null,URL);  //将网址设置
137         }
138     </script>
139 
140 </div>
141 <canvas>
142 
143 </canvas>
144 </body>
145 <script>
146     // 判断会员姓名是否合法
147     function checkName(){
148         // var name=document.Myfeg.userName.value;
149         var name= document.getElementsByClassName("userName");
150         // var p=/^\w{3,16}$/;
151         if(name==""){
152             alert("用户不能为空");
153             return false;
154         }
155         // if(!p.test(name)){
156         //   alert("用户名为4-16个字符，可以包含字母数字下划线！");
157         //   return false;
158         // }
159         return true;
160     }
161     // 判断密码
162     function checkPwd(){
163         var pwd=document.Myfeg.userPwd.value;
164         var c=/^\w{3,12}$/;
165         if(pwd==""){
166             alert("请输入正确的用户名");
167             return false;
168         }
169         if(!c.test(pwd)){
170             alert("密码为4-16个字符，可以包含字母数字下划线！");
171             return false;
172         }
173         return true;
174 
175     }
176     // 验证提交
177     function checkReg(){
178         if(checkName()&&checkPwd()){
179             return true;
180         }else{
181             return false;
182         }
183     }
184 
185     var canvas = document.querySelector("canvas"),
186         ctx = canvas.getContext("2d");
187 
188     var ww,wh;
189 
190     function onResize(){
191         ww = canvas.width = window.innerWidth;
192         wh = canvas.height = window.innerHeight;
193     }
194 
195     ctx.strokeStyle = "red";
196     ctx.shadowBlur = 25;
197     ctx.shadowColor = "hsla(0, 100%, 60%,0.5)";
198 
199     var precision = 100;
200     var hearts = [];
201     var mouseMoved = false;
202     function onMove(e){
203         mouseMoved = true;
204         if(e.type === "touchmove"){
205             hearts.push(new Heart(e.touches[0].clientX, e.touches[0].clientY));
206             hearts.push(new Heart(e.touches[0].clientX, e.touches[0].clientY));
207         }
208         else{
209             hearts.push(new Heart(e.clientX, e.clientY));
210             hearts.push(new Heart(e.clientX, e.clientY));
211         }
212     }
213 
214     var Heart = function(x,y){
215         this.x = x || Math.random()*ww;
216         this.y = y || Math.random()*wh;
217         this.size = Math.random()*2 + 1;
218         this.shadowBlur = Math.random() * 10;
219         this.speedX = (Math.random()+0.2-0.6) * 8;
220         this.speedY = (Math.random()+0.2-0.6) * 8;
221         this.speedSize = Math.random()*0.05 + 0.01;
222         this.opacity = 1;
223         this.vertices = [];
224         for (var i = 0; i < precision; i++) {
225             var step = (i / precision - 0.5) * (Math.PI * 2);
226             var vector = {
227                 x : (15 * Math.pow(Math.sin(step), 3)),
228                 y : -(13 * Math.cos(step) - 5 * Math.cos(2 * step) - 2 * Math.cos(3 * step) - Math.cos(4 * step))
229             }
230             this.vertices.push(vector);
231         }
232     }
233 
234     Heart.prototype.draw = function(){
235         this.size -= this.speedSize;
236         this.x += this.speedX;
237         this.y += this.speedY;
238         ctx.save();
239         ctx.translate(-1000,this.y);
240         ctx.scale(this.size, this.size);
241         ctx.beginPath();
242         for (var i = 0; i < precision; i++) {
243             var vector = this.vertices[i];
244             ctx.lineTo(vector.x, vector.y);
245         }
246         ctx.globalAlpha = this.size;
247         ctx.shadowBlur = Math.round((3 - this.size) * 10);
248         ctx.shadowColor = "hsla(0, 100%, 60%,0.5)";
249         ctx.shadowOffsetX = this.x + 1000;
250         ctx.globalCompositeOperation = "screen"
251         ctx.closePath();
252         ctx.fill()
253         ctx.restore();
254     };
255 
256     function render(a){
257         requestAnimationFrame(render);
258 
259         hearts.push(new Heart())
260         ctx.clearRect(0,0,ww,wh);
261         for (var i = 0; i < hearts.length; i++) {
262             hearts[i].draw();
263             if(hearts[i].size <= 0){
264                 hearts.splice(i,1);
265                 i--;
266             }
267         }
268     }
269     onResize();
270     window.addEventListener("mousemove", onMove);
271     window.addEventListener("touchmove", onMove);
272     window.addEventListener("resize", onResize);
273     requestAnimationFrame(render);
274 </script>
275 </html>
<%@ page import="java.net.URLEncoder" %><%--
  Created by IntelliJ IDEA.
  User: L
  Date: 2019/9/27
  Time: 10:32
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
</head>
<body>
<%
    String userName = request.getParameter("userName");
    String userPwd = request.getParameter("userPwd");
    if (userName.equals("admin") && userPwd.equals("1234567")){
        //登录成功
        session.setAttribute("userName",userName);
        Cookie cookie = new Cookie("userName",userName);
        cookie.setPath("/");
        response.addCookie(cookie);
        request.getRequestDispatcher("success.jsp").forward(request,response);
    }else{
        //登录失败，使用重定向回到登录界面，为地址栏添加一个属性，提示登录失败
        String info = "登录失败！";
        info = URLEncoder.encode(info,"utf-8");
        response.sendRedirect("index.jsp?info="+info);
        //request.getRequestDispatcher("index.jsp").forward(request,response);
    }
%>
</body>
</html>
<%--
  Created by IntelliJ IDEA.
  User: L
  Date: 2019/9/27
  Time: 10:32
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>登录成功</title>
</head>
<body>
<%
    String userName = (String) session.getAttribute("userName");
    if(userName == null || userName == ""){
        response.sendRedirect("index.jsp");
    }else {%>
<h1><%out.print(session.getAttribute("userName"));%>,登录成功！</h1>
<%}%>
<button type="button" onclick="javascript:location.href='index.jsp'">注销</button>
</body>
</html>

 

 

 

 

 

 

posted @ 2019-09-27 13:56  弥屹  阅读(604)  评论(0)  编辑  收藏  举报