首页 > 代码库 > 留言系统项目总结

留言系统项目总结

该系统功能是

   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="http://www.mamicode.com/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="http://www.mamicode.com/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()方法重名了  要保证唯一 

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

留言系统项目总结