zoukankan      html  css  js  c++  java
  • 留言系统项目总结

    该系统功能是

       1 .用户的注册与登录

       2.用户留言的分页(hibernate实现分页)

       3.管理员回复和删除留言功能

    模块1:前段页面

    <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
    <%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <meta name="Generator" content="EditPlus®">
    <meta name="Author" content="">
    <meta name="Keywords" content="">
    <meta name="Description" content="">
    <title>Document</title>
    <script type="text/javascript" src="js/jquery-3.2.0.js"></script>
    <style type="text/css">
    * {
        margin: 0px;
        padding: 0px;
    }
    body {
        font-size: 16px;
        font-family: "微软雅黑";
    }
    .allpageto{
        width:100%;
        hieght:100%;
    }
    /*top start*/
    .top {
        width: 100%;
        height: 20px;
        background: #9999cc;
        text-align: center;
        padding-left: 450px;
    }
    
    .top ul li {
        float: left;
        list-style: none;
        margin-left: 5px;
    }
    
    .top ul li a {
        text-decoration: none;
        color: #000;
    }
    /*end top*/
    
    /*picture start*/
    .picture .p_pic {
        width: 100%;
        height: 150px;
        background-size: cover;
    }
    /*end picture*/
    
    /*daohang start*/
    .daohang {
        width: 100%;
        height: 40px;
        background: -webkit-linear-gradient(45deg, #ff0000, #ffcc00, #ffff00, #00cc66,
            #99ffcc, #3333cc, #6600ff);
        -webkit-background-clip: content-box;
        animation: ranc 5s linear infinite
    }
    
    
    @keyframes ranc {
        form {background-position: 0 0;
    }
    
    to {
        background-position: 4000px 0;
    }
    
    }
    .daohang .left {
        width: 60%;
        height: 100%;
        float: left;
        line-height: 40px;
        padding-left: 50px;
    }
    
    .daohang .right {
        widht: 40%;
        height: 100%;
        float: left;
        line-height: 40px;
        padding-left: 100px;
    }
    
    .daohang .right ul li {
        float: left;
        list-style: none;
        margin-left: 10px;
    }
    
    .daohang .right ul li a {
        text-decoration: none;
        color: #fff;
    }
    /*end daohang*/
    
    /*text start*/
    .text {
        width: 100%;
        background: #fff;
    }
    
    .text .t-box {
        width: 93%;
        margin: 40px 40px 0 40px;
        border: 2px solid #000
    }
    
    .text .t-box #t-text {
        list-style: none
    }
    
    .text .t-box .title {
        width: 100%;
        height: 20px;
        background:#6cf;
        position:relative;
    }
    .text .t-box .title .t-left{
        position:absolute;
        left:10px;
        top:0;
    }
    .text .t-box .title .t-right { 
        position:absolute;
        right:10px;
        top:0;
    }
    .text .t-box  #problem {
        width: 100%;
        height: 100px;
    }
    
    .text .t-box  #problem textarea {
        width: 100%;
        height: 100px;
        outline: none;
        resize:none;
    }
    
    .text .t-box .messagexinxi {
        width: 100%;
        height: 20px;
    }
    .text .t-box .messagexinxi ul {
        float: right;
    }
    
    .text .t-box .messagexinxi ul li {
        list-style: none;
        float: left;
    }
    .text .t-box .response .r-response {
        border: 1px solid #003;
        margin: 20px;
    }
    
    .text .t-box .response .r-response .admin {
        position: relative;
    }
    
    .text .t-box .response .r-response .admin .a-left {
        float: left
    }
    
    .text .t-box .response .r-response .admin .a-right {
        float: right;
        position: absolute;
        right: 0;
        top: 0;
    }
    
    .text .t-box .response .r-response .responsetext .r-text {
        width: 100%;
        height: 100px;
    }
    
    .text .t-box .response .r-response .responsetext .r-text textarea {
        width: 100%;
        height: 100px;
        outline: none;
        resize:none;
    }
    
    .text .t-box .response .r-response .responsetext .r-time {
        float: right;
    }
    
    /*limit start*/
    .text .limit {
        width: 95%;
        height: 20px;
        margin:0 auto;
    }
    
    .text .limit .l-limit {
        width: 350px;
        height: 20px;
        float:right;
        
    }
    
    .text .limit .l-limit .limitpage {
        width: 65px;
        height: 20px;
    }
    /*end limit*/
    
    /*text daohang*/
    
    /*logn start*/
    .logn {
        width: 100%;
        height: 200px;
        float:left;
    }
    
    .logn .l-logn {
        width: 100%;
        height: 100%;
        margin: 0 40px;
    }
    
    }
    .logn .l-logn  .ll-table {
        width: 100%;
        position: relative;
    }
    
    .logn .l-logn  .ll-table .reddiv {
        width: 93%;
        height: 200px;
        position: absolute;
        left:40;
        right:40;
        display: none;
    }
    .logn .l-logn  .ll-table .wantmessage{
        width:93%;
        height:200px;
        position:absolute;
        left:40;
        right:40;
        display:none;
    }
    .logn .l-logn  .ll-table .wantmessage table{
        width:100%;
        height:100%;
    }
    .logn .l-logn  .ll-table .wantmessage table #inputmessage{
        width:100px;
        height:25px;
    }
    .logn .l-logn  .ll-table .wantmessage textarea{
        resize:none;
    }
    .logn .l-logn  .ll-table .logndiv {
        width: 93%;
        height: 27%;
        position: absolute;
        left: 40px;
        right:40px;
        display: none;
    }
    .logn .l-logn  .ll-table .responsediv{
        width:50%;
        height:400px;
        position:absolute;
        left:300px;
        right:300px;
        top:100px;
        background:red;
        display:none;
    }
    .logn .l-logn  .ll-table .responsediv textarea{
        resize:none;
        outline:none;
    }
    .logn .l-logn  .ll-table .responsediv a{
        text-align:center;
        text-decoration:none;
        width:100px;
        background:yellow;
        display:block;
        line-height:40px;
    }
    .logn .l-logn  .ll-table .firsttext {
        width: 100%;
        height: 200px;
        text-align: center;
        background: -webkit-linear-gradient(45deg, #ff0000, #ffcc00, #ffff00, #00cc66,
            #99ffcc, #3333cc, #6600ff);
        color: transparent;
        -webkit-background-clip: text;
        animation: rana 5s linear infinite;
        position: absolute;
        display: block;
        float: left;
    }
    
    
    @keyframes rana {
        from {background-position: 0 0;
    }
    
    to {
        background-position: 4000px 0;
    }
    
    }
    .logn .l-logn  .ll-table .firsttext {
        font-size: 80px;
    }
    
    .logn .l-logn  .ll-table .userreg {
        background: #c1c1c1;
    }
    
    .logn .l-logn  .ll-table .userreg {
        display: block;
    }
    
    .logn .l-logn  .ll-table .userreg table {
        width: 100%;
        height: 100%;
        
    }
    
    .logn .l-logn  .ll-table .userreg table tr {
        width: 100%;
        height: 100%;
    }
    
    .logn .l-logn  .ll-table .logndiv table {
        margin: 40px auto;
        width: 100%;
        height: 100%;
    }
    /*end logn*/
    
    /*banquan start*/
    .banquan {
        width: 100%;
        height: 110px;
        text-align: center;
        background: #99f;
        float: left;
    }
    
    .banquan .b-xinxi {
        margin: 20px auto;
        width: 400px;
        margin-bottom: 0px;
    }
    /*end banquan*/
    </style>
    <script type="text/javascript">
           //参数
           //只要发送一次就可以了 所以定义一个变量来记录次数
          
           //根据url的地址来进行刷新一次的判断
           //比如:www.baidu.com这是一开始的地址给地址的后面加1www.baidu.com?1   只要地址的后面不等于1就刷新
           //将当前的页面地址赋值给变量
          /*  function refush(){
           var url=location.href;
           //进行切割得到?后面的值
           var times=url.split("?");
           //进行判断是否有1如果没有1就刷新
           if(times[1]!=1){
           //给地址后面加1
              url+="?1";
              //
              self.location.reload();
           }
           } */
          /*  $(function(){
           var count=0;
           if(count<=0){
           var url="MessageServlet?method=conturepage&currPage=${sessionScope.pagemodel.beforePage}";
           var args={"time":new Date()};
           $.post(url,args,function(){window.location.reload();count++;});
           }
           }); */ 
        
    </script>
    </head>
    <body>
    <div class="allpageto">
        <div class="top">
            <ul>
                <li><span id="pageusername">您尚未</span></li>
                <li><a href="javascript:;" class="lngnlogo">登录</a></li>
                <li><a href="javascript:;" class="reglogo">注册</a>&nbsp|</li>
                <li><a href="#">帮助</a>&nbsp|</li>
                <li><a href="#">社区</a></li>
            </ul>
        </div>
        <div class="picture">
            <div class="p_pic">
                <img alt="留言板" src="images/1.jpg" height="150px" width="100%" />
            </div>
        </div>
        <div class="daohang">
            <div class="left">这是一段可以滚动的文本显示动态条</div>
            <div class="right">
                <ul>
                    <li><a href="#">首页</a></li>
                    <li><a href="javascript:;" class="reglogo">注册</a></li>
                    <li><a href="javascript:;" class="lngnlogo">登录</a></li>
                    <li><a href="javascript:;" class="liumessage">我要留言</a></li>
                </ul>
            </div>
        </div>
        <div class="text">
            <div class="t-box">
                <ul id="t-text">
                    <c:forEach items="${sessionScope.list}" var="message">
                    <c:choose>
                    <c:when test="${empty message.revert}">
                    <li>
                        <div class="title">
                                <div class="t-left">
                                    <span>${message.title}</span>
                                </div>
                                <div class="t-right">
                                    <a href="#" class="rega">回复</a> <a href="#">删除</a>
                                </div>
                        </div>
                        <div id="problem">
                            <textarea>${message.mtext}</textarea>
                        </div>
                        <div class="messagexinxi">
                            <ul>
                                <li id="username">网友:<span class="u-user">${message.user.username}</span><span background="red" class="uid">${requestScope.mid}</span>&nbsp|&nbsp
                                </li>
                                <li id="time">时间:<span>${message.mtime}</span>&nbsp|&nbsp
                                </li>
                                <li id="email">联系方式:<span>123@qq.com</span></li>
                            </ul>
                        </div>
                    </li>
                    </c:when>
                    <c:otherwise>
                    <li>
                        <div class="title">
                                <div class="t-left">
                                    <span>${message.title}</span>
                                </div>
                                <div class="t-right">
                                    <a href="#" class="rega">回复</a> <a href="#">删除</a>
                                </div>
                        </div>
                        <div id="problem">
                            <textarea>${message.mtext}</textarea>
                        </div>
                        <div class="messagexinxi">
                            <ul>
                                <li id="username">网友:<span class="u-user">${message.user.username},${requestScope.mid}'</span>${requestScope.mid}&nbsp|&nbsp
                                </li>
                                <li id="time">时间:<span>${message.mtime}</span>&nbsp|&nbsp
                                </li>
                                <li id="email">联系方式:<span>123@qq.com</span></li>
                            </ul>
                        </div>
                        <div class="response">
                            <div class="r-response">
                                <div class="admin">
                                    <div class="a—left">管理员回复</div>
                                    <div class="a-right">
                                        <a href="#">修改</a>
                                    </div>
                                </div>
                                <div class="responsetext">
                                    <div class="r-text">
                                        <textarea>${message.revert}</textarea>
                                    </div>
                                    <hr />
                                    <div class="r-time">
                                        回复时间:<span>2019-1-22 14:20:20</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </li>
                    </c:otherwise>
                    </c:choose>
                    </c:forEach>
                </ul>
                
            </div>
            <div class="limit">
                <div class="l-limit">
                       总记录数:<span id="tatal">${sessionScope.pagemodel.totalRecords}</span>
                        &nbsp 当前<span id="currpage">${sessionScope.pagemodel.currPage}</span>
                        /<span id="tatalpage">${sessionScope.pagemodel.allPage}</span>
                        &nbsp<a id="beforepage" href="MessageServlet?method=conturepage&currPage=${sessionScope.pagemodel.beforePage}" >上一页</a>
                        <a id="afterpage" href="MessageServlet?method=conturepage&currPage=${sessionScope.pagemodel.afterPage}">下一页</a>
                        <select class="limitpage" id="limit-page">
                            <option checked="selected">第一页</option>
                            <option></option>
                        </select>
                </div>
            </div>
        </div>
        <div class="logn">
            <div class="l-logn">
                <div class="ll-table">
                    <div class="firsttext">
                        <font>欢迎光临</font>
                    </div>
                    <div class="responsediv">
                       <form id="r-resp">
                           <table align="center" cellpadding="1" cellspacing="1" border="1px solid" width="100%">
                               <tr><th colspan="2" background="#941f53" width="100%" height="50px">回复留言</th></tr>
                               <tr><td align="right" height="25" width="100">标题:</td><td><span id="r-resp-title"></span></td><tr>
                               <tr><td align="right" height="25" width="100">内容:</td><td><textarea id="r-resp-content" rows="5" cols="50"></textarea></td><tr>
                               <tr><td align="right" height="25" width="100">网友:</td><td><span id="r-resp-username"></span></td><tr>
                               <tr><td align="right" height="25" width="100">回复</td><td><textarea id="r-resp-response" rows="8" cols="50"></textarea><a href="#">回复</a></td></tr>
                           </table>
                       </form>
                    </div>
                    <div class="wantmessage">
                    <form id="messageform" >
                         <table align="center" cellpadding="1" cellspacing="1">
                            <tr><th colspan="2" bgcolor="#941f53" align="center" width="100%">我的留言</th><tr>
                            <tr><td align="right" height="25" width="200" >标题:</td><td><input type="text" name="title" size="30"/></td></tr>
                            <tr><td align="right" height="25" width="200">内容:</td><td><textarea rows="8" cols="50" name="content" ></textarea></td></tr>
                            <tr><td colspan="2" align="center"><input type="button" id="inputmessage" value="留言" width="100" height="25"/></td></tr>
                         </table>
                    </form>
                    </div>
                    <div class="reddiv">
                        <form class="userreg" id="registerform" action="UserServlet?method=Register"
                            method="post">
                            <table align="center" cellpadding="1" cellspacing="1">
                                <tr>
                                    <th colspan="3" bgcolor="#941f53" height="30">用户注册</th>
                                </tr>
                                <tr bgcolor="#fafafa">
                                    <td align="right" height="20" width="200">用户名:</td>
                                    <td height="20" width="200"><input type="text" name="username" /></td>
                                    <td><font color="red" id="aa">*</font><font id="aaa">不能有空格,可以是中文,长度在3-50字节以内</font></td>
                                </tr>
                                <tr bgcolor="#fafafa">
                                    <td align="right" height="20" width="200">&nbsp&nbsp码:</td>
                                    <td height="20" width="200"><input type="password" name="password" /></td>
                                    <td><font color="red"  id="bb">*</font ><font id="firstpassword">英文字母或数字,不少于6位</font></td>
                                </tr>
                                <tr bgcolor="#fafafa">
                                    <td align="right" height="20" width="200">确认密码:</td>
                                    <td height="20" width="200"><input type="password" name="checkpassword" /></td>
                                    <td><font color="red" id="cc" >*</font><font id="secondpassword"></font></td>
                                </tr>
                                <tr bgcolor="#fafafa">
                                    <td align="right" height="20" width="200">电子邮件:</td>
                                    <td height="20" width="200"><input type="text" name="email" /></td>
                                    <td><font color="red" id="dd" >*</font><input type="checkbox" />公开邮箱&nbsp<font id="ddd"></font></td>
                                </tr>
                                <tr bgcolor="#fafafa">
                                    <td colspan="3" align="center"><input id="register" type="button"
                                        value="注册" />&nbsp<input type="reset" value="重置" /></td>
                                </tr>
                            </table>
                        </form>
                    </div>
                    <div class="logndiv">
                        <form  method="post" action="UserServlet?method=logncheckUser"
                            class="userlogn" id="lognformto" >
                            <table align="center" cellpadding="1" cellspacing="1">
                                <tr bgcolor="#69f">
                                    <th colspan="2" bgcolor="#941f53" height="30">用户登录</th>
                                </tr>
                                <tr bgcolor="#69f"><td colspan="2" height="20" align="center"><span id="ggg"></span></td></tr>
                                <tr bgcolor="#69f">
                                    <td align="right" height="20" width="200">用户名:</td>
                                    <td><input type="text" name="username" id="lognusername"/></td>
                                </tr>
                                <tr bgcolor="#69f">
                                    <td align="right" height="20" width="200">&nbsp&nbsp&nbsp码:</td>
                                    <td><input type="password" name="password" id="lognpassword"/></td>
                                </tr>
                                <tr bgcolor="#69f">
                                    <td colspan="2" align="center" height="20" width="200"><input id="lognsubmit" type="button"
                                        value="登录" />&nbsp<input type="reset" value="重置" /></td>
                                </tr>
                            </table>
                        </form>
                    </div>
                </div>
            </div>
        </div>
        <div class="banquan">
            <div class="b-xinxi">
                1、本网所有内容,包括所有文字、图片和音视频资料,版权均属华讯方舟集团有限公司(以下简称“华讯”)所有,任何媒体、网站或个人未经本网协议授权
                、本网所有内容,包括</div>
        </div>
    </div>
        <script type="text/javascript" src="js/jquery-3.2.0.js"></script>
        <script type="text/javascript">
        //解决一开始就要调用MessageServlet的方法,不跳转页面直接刷新 那么采用ajax的方法调用MessageServlet的方法
           // window.location.href="index.jsp";
            //给注册的表单进行验证
            //采用ajax来验证用户的信息是否正确
            $(function() {
                //给回复添加点击事件发送ajax请求
                $('.text .t-box  ul li .rega').click(function() {
                    //将回复框的原始数据进行赋值
                    //得到li节点
                    //先发送一个ajax请求 来判断是否是管理员
                    var liNode = $(this).parent().parent().parent();
                    var title = $(liNode).children(".title").children(".t-left").children().html();
                    var content = $(liNode).children("#problem").children().val();
                    var username = $(liNode).find(".u-user").html();
                    var url1 = "RevertServlet?method=isAdmin";
                    var args1 = {
                        "time" : new Date()
                    };
                    $.post(url1, args1, function(data) {
                        if ($(data).attr("color")=="green") {
                            $('#r-resp-title').html(title);
                            $('#r-resp-content').val(content);
                            $('#r-resp-username').html(username);
                            //使回复框弹出来
                            $('.logn .l-logn  .ll-table .responsediv').css("display", "block");
                            //对回复进行判断是否为空发送ajax请求
                            if ($('#r-resp-response').val()!= null){
                                $('.logn .l-logn .ll-table .responsediv a').click(function() {
                                var url = "RevertServlet?method=addRevert";
                                var args = {
                                    "time" : new Date(),
                                    "uid" : content,
                                    "content" : $('#r-resp-response').val()
                                };
                                    $.ajax({
                                        data : args,
                                        type : "post",
                                        url : url,
                                        success : function() {}
                                    });
                                    //return false;
                                });
                            }
                        } else {
                            alert($(data).html());
                        }
                    })
        
                    //return false;
                });
                //给用户名添加blur事件(失去焦点时触发)来验证用户名是否已被注册
                $(".userreg :text[name='username']").blur(function() {
                    //首先判断是否为空
                    //alert("a");
                    var username= $(this).val();
                    username=$.trim(username);
                    //对名字内是否有空格进行判断  
                    //alert(username.search(" "));
                    if(username.search(" ")!=-1){
                       $("#aa").attr("color","red");
                       $('#aaa').html("<font color='red'>sorry!您的用户名中间有空格</font>")
                    }else{
                    //alert(username.length);
                       if(username.length>16||username.length<1){
                          $("#aa").attr("color","red");
                          $('#aaa').html("<font color='red'>sorry!你的名字超出了范围</font>")
                       }
                    else{
                    
                    //alert(username);
                    if (username != null) {
                        //发送ajax请求
                        //alert("开始发送ajax请求");
                        var url = "UserServlet?method=RegcheckUser";
                        var args = {
                            "time" : new Date(),
                            "username" : username
                        };
                        $.post(url, args, function(data) {
                            //alert(data);
                            var color=$(data).attr('color');
                            //alert(color);
                            if(color=="green"){
                             $("#aa").attr("color","green");
                            }else{
                             $("#aa").attr("color","red");
                            }
                            $("#aaa").html(data);
                            
                            //alert(data);
                        });
                      }
                    }
                 }
                 //取消默认行为
                 return false;
                });
                //给密码添加blur(失去焦点时触发)事件
                $(".userreg :password[name='password']").blur(function(){
                       var password=$(this).val();
                       password=$.trim(password);
                       if(password.length<=6){
                          $("#bb").attr("color","red");
                          $("#firstpassword").html("<font color='red'>您的密码太短了</font>");
                       }else{
                          $("#bb").attr("color","green");
                          $("#firstpassword").html("<font color='green'>您的密码格式输入正确哦!</font>");
                       }
                 return false;
                });
                //给确认密码添加blur事件
                $(".userreg :password[name='checkpassword']").blur(function(){
                 var checkpassword=$(this).val();
                 checkpassword=$.trim(checkpassword);
                //alert(checkpassword);
                 var password=$(".userreg :password[name='password']").val();
                 password=$.trim(password);
                 //alert(password);
                 if(checkpassword==password){
                          $("#cc").attr("color","green");
                          $("#secondpassword").html("<font color='green'>成功!两次密码一致</font>");
                 }else{
                          $("#cc").attr("color","red");
                          $("#secondpassword").html("<font color='red'>两次密码不一致,请从新输入</font>");
                          $(this).val("");
                 }
                 return false;
                });
                $(".userreg :text[name='email']").blur(function(){
                    var email=$(this).val();
                    email=$.trim(email);
                    var objExp=/w+@w+([.][a-z]{1,3})+/;
                   // alert(objExp.test(email))
                    if(objExp.test(email)){
                      $("#dd").attr("color","green");
                      $("#ddd").html("<font color='green'>您的邮件地址格式正确</font>");
                    }else{
                      $("#dd").attr("color","red");
                      $("#ddd").html("<font color='red'>您的邮件地址格式不正确,请重新输入</font>");
                      $(this).val("");
                    }
                 return false;
                });
                //给提交按钮添加点击事件  $("class")返回的不是数组 而是单一的一个
                $('#register').click(function(){
                     if($('#aa').attr("color")=="red"||$('#bb').attr("color")=="red"||$('#cc').attr("color")=="red"||$('#dd').attr("color")=="red"){
                         alert("填入正确的信息,才能注册成功哦")
                     }else{
                     //提交表单
                         $.ajax({
                            type:"post",
                            url:"UserServlet?method=Register",
                            data:$('#registerform').serialize(),
                            success:function(data){
                               window.location.href="index.jsp";
                            }
                         });
                     }
                     return false;
                });
                //给登录按钮添加点击事件
                //先对填写的用户是否为空进行判断
                $('#lognsubmit').click(function(){
                     var username=$('#lognusername').val();
                     username=$.trim(username);
                     var password=$('#lognpassword').val();
                     password=$.trim(password);
                     if(username!=null&&username!=""&&password!=null&&password!=""){
                          $.ajax({
                             data:$('#lognformto').serialize(),
                             url:"UserServlet?method=logncheckUser",
                             type:"post",
                             success:function(result){
                             if($(result).attr("color")=="green"){
                                $('#pageusername').html("<font color='block'>尊敬的"+username+"</font>")
                                // window.location.href="index.jsp";
                             }else{
                                if($(result).attr("color")=="red"){
                                      $('#ggg').html(result);
                                 }else{
                                     // var rea=result.block;
                                      $('#pageusername').html("<font color='block'>尊敬的"+username+"</font>")
                                 }
                                 
                              }
                             }
                          });
                          }
                     return false;
                });
                //给留言按钮添加点击事件
                $('#inputmessage').bind("click",function(){
                     if($('#messageform :text[name="title"]').val()!=null&&$('#messageform textarea[name="content"]').val()!=null) {
                        //调用FormData对象 来存储要发送的对象
                        var form = new FormData($('#messageform')[0]);
                        $.ajax({
                          url:"MessageServlet?method=saveMessage",
                          data:$('#messageform').serialize(),
                          type:"post",
                          success:function(data){
                          var uid=$(data).html();
                          alert(uid);
                          $('.uid').html(uid);
                          }
                        });
                }
                        return false;
                
                });
            });
            $(function() {
                //给每个登录超链接添加点击事件
                $(".lngnlogo").bind("click", function() {
                    //是欢迎页面隐藏显示登录页面
                    if ($('.logndiv').attr("display") == "none" && $('.reddiv').attr("display") == "none"&&$('.wantmessage').css("display")=="none") {
                        $('.reddiv').css("display", "none");
                        $('.firsttext').css("display", "none");
                        $('.wantmessage').attr("display","none");
                        $('.logndiv').css("display", "block");
                    } else {
                        $('.reddiv').css("display", "none");
                        $('.firsttext').css("display", "none");
                        $('.wantmessage').attr("display","none");
                        $('.logndiv').css("display", "block");
                    }
                })
                $(".reglogo").bind("click", function() {
                    //是欢迎页面隐藏显示登录页面
                    if ($('.logndiv').attr("display") == "none" && $('.reddiv').attr("display") == "none"&&$('.wantmessage').css("display")=="none") {
        
                        $('.firsttext').css("display", "none");
                        $('.logndiv').css("display", "none");
                        $('.wantmessage').attr("display","none");
                        $('.reddiv').css("display", "block");
                    } else {
                        $('.firsttext').css("display", "none");
                        $('.logndiv').css("display", "none");
                        $('.wantmessage').attr("display","none");
                        $('.reddiv').css("display", "block");
                    }
                });
                $(".liumessage").bind("click", function() {
                    //是欢迎页面隐藏显示登录页面
                    //来确定当前是否登录 发送ajax请求
                    //没有特别的要求 需要判断
                    alert("a");
                    var url = "MessageServlet?method=isLogn";
                    var args = {
                        "time" : new Date()
                    };
                    $.post(url, args, function(data) {
                        if ($(data).attr("color") == "green") {
                            if ($('.logndiv').attr("display") == "none" && $('.reddiv').attr("display") == "none" && $('.wantmessage').css("display") == "none") {
                                $('.firsttext').css("display", "none");
                                $('.logndiv').css("display", "none");
                                $('.reddiv').css("display", "none");
                                $('.wantmessage').css("display", "block");
                            } else {
                                $('.firsttext').css("display", "none");
                                $('.logndiv').css("display", "none");
                                $('.reddiv').css("display", "none");
                                $('.wantmessage').css("display", "block");
                            }
                            //
                        } else {
                            alert("您还没有登录")
                        }
                    });
        
                });
        
            });
        </script>
    </body>
    </html>

    在前段页面遇到的问题

    1.行内元素与块级元素

    行内元素并不是不会占一行,而是两个行内在一起时占一行

    块级元素两个一起时,会占两行

    在html中行内元素与块级元素在一行时  行内元素会在另一行显示 说明块级元素是很霸道的啊   我是老大我占一行你们都给我去另一行。

    2js特效

    在本页面中特效较少

    (1)动态的显示渐变

    怎么样动态的显示渐变呢

    这是动态背景渐变

    由于是css3所以浏览器的支持的不一样(我这以谷歌为准)

    基本实现代码:

    background:-webkit-linear-gardient(45deg,

    #ff0000, #ffcc00, #ffff00, #00cc66,
    #99ffcc, #3333cc, #6600ff);

    这个45deg是旋转45度的意思

    linear-gardient就是css的渐变功能代码

    这里还要用到一个规则@keyframes  这个规则是实现一个动画从一个状态(css设定)到另一个状态(css设定)  相当于一个方法

    @keyframes ranb{

        form{background-position:0 0;}

      to{background-position:2000px 0;}

    }

    background-position背景定位

    我们还要调用这个规则

    animation:ranb 5s linear infinite;    实现5s显示玩这个效果

    -webkit-background-clip: content-box;指定背景绘制在当前内容方框内

    如果你想实现文字背景动态渐变还要加上一些属性-webkit-background-clip: text;指定背景绘制在文本区域内

    还要加上这个属性  color:transparent;使文本的颜色透明  来显示这个渐变背景

    (2)开始时注册登录我要留言的表单框都隐藏了 功能:  点击他们时弹出来每点击的继续隐藏

    只要通过改变css的display属性就可以了 增加一些判断来实现。

    这里还要进行定位 position

    定位分为几种?

    1  相对定位 2绝对定位  3固定定位  4静态定位

    他们的特点1: position:relative       (1)没有脱离标准流 ,以之前(没有定位的时候)的位置为参考系

                   2:position:absolute     脱离标准流      参考系:如果祖先没有使用定位,那么以body为参考系  如果祖先节点使用了定位以靠近当前节点祖先为参考系

                  3:position:fixed     脱离标准流    参考系:以浏览器窗口为参考系

                  4:position:static  没有定位    出现在标准的流中

          定位时水平居中问题:

          使用到两个属性 left :50%必须 以百分比    margin-left:-0.5宽度

         z-index属性 定位流中后面写的会覆盖前面写的   所以z-index谁大覆盖谁

        如果父元素定义了  子的将无效以父节点为基准    也是谁大覆盖谁

    (3)  使用ajax来异步提交表单提交问题

           要使用到一个方法  serialize();使表单序列化进行提交    还有一个DataForm()对象也可以不会用

           表单验证时需要用到一个重要的事件  失去焦点事件onblur()  (我的理解:不以他为焦点时触发比如:鼠标不点击他    键盘不在他那里输入)

    前端总结结束。

    后台总结:我使用的是hibernate框架   我会对hibernate进行总结:在这里就不进行了

      分页遇到的问题   我讲分页信息发送了出去结果 得到了

    Property 'Allpage' not found on type com.jdztc.entity.PageModel] with root cause
    这是因为分页工具类中的属性Allpage方法与get()set()的方法中的get()方法重名了  要保证唯一 

    分页具体的代码我单独总结

  • 相关阅读:
    AtCoder Beginner Contest 183
    Codeforces Round #682 (Div. 2)【ABCD】
    Codeforces Round #680 (Div. 2, based on Moscow Team Olympiad)【ABCD】
    Codeforces Round #681 (Div. 2, based on VK Cup 2019-2020
    Educational Codeforces Round 97 (Rated for Div. 2) E. Make It Increasing(最长非下降子序列)
    Educational Codeforces Round 97 (Rated for Div. 2)【ABCD】
    Codeforces Round #678 (Div. 2)【ABCD】
    2019 China Collegiate Programming Contest Qinhuangdao Onsite F. Forest Program(DFS计算图中所有环的长度)
    什么是HTTP隧道,怎么理解HTTP隧道呢?
    Linux查看和关闭后台运行程序的方法
  • 原文地址:https://www.cnblogs.com/fupengpeng/p/6791620.html
Copyright © 2011-2022 走看看