zoukankan      html  css  js  c++  java
  • 【练习】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              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-1200px){
     37             h1{
     38                 font-size: 60px;
     39             }
     40         }
     41         .login{
     42             height: 250px;
     43              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>

     

     

  • 相关阅读:
    button 样式 GIS
    将一个json格式的字符串转换为一个实体对象
    统一将数据库中的数据类型转换为另外一种
    Redis学习16两种主从复制的模式
    阿里云服务器reboot后,用Xshell连接不上的解决办法
    Redis学习主从复制,搭建集群
    Redis学习15 发布订阅
    ASP.NET Eval多参数绑定
    面试时如何说辞职理由(转)
    (转)简单的js弹出窗口效果
  • 原文地址:https://www.cnblogs.com/yanglanlan/p/11597571.html
Copyright © 2011-2022 走看看