码迷，mamicode.com
首页 > 其他好文 > 详细

留言系统项目总结

时间：2017-05-01 12:55:39      阅读：283      评论：0      收藏：0      [点我收藏+]

标签：top   center   from   prefix   null   hibernate   相对   键盘   parent   

该系统功能是

   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()方法重名了  要保证唯一 

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

留言系统项目总结

标签：top   center   from   prefix   null   hibernate   相对   键盘   parent   

原文地址：http://www.cnblogs.com/fupengpeng/p/6791620.html
踩
(0)
赞
(0)
   
举报
评论 一句话评论（0）
登录后才能评论！
分享档案
更多>
2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)
周排行
mamicode.com排行更多图片
更多
友情链接
兰亭集智   国之画   百度统计   站长统计   阿里云   chrome插件   新版天听网
关于我们 - 联系我们 - 留言反馈
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码！