JavaWeb Experiment (2019 Summer) – Day3

目标要求

  1. 昨日部分代码修改
  2. 编写通用jsp文件
  3. 编写功能页面
  4. 用户找回密码功能编写
  5. 写日记模块编写

1. 昨日部分代码修改

1.1 zybFunction.js 部分代码修改

checkePwd有错误,修改如下

function checkePwd(user){
	var str=user;
	var Expression=/^[A-Za-z]{1}([A-Za-z0-9]|[._]){5,29}$/;
	var objExp=new RegExp(Expression);
	if(objExp.text(str)==true){
		return true;
	}else{
		return false;
	}
}

2. 编写通用jsp文件

2.1 编写top.jsp

<%--
  Created by IntelliJ IDEA.
  User: binjo
  Date: 7/14/2019
  Time: 3:31 PM
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<style>
    #notClickDiv{
        filter:alpha(Opacity=35);opacity:0.35;
        background:#000000;
        position:absolute;
        display:none;
        z-index:9;
        top:0px;
        left:0px;
        margin: 0px;
        padding: 0px;
    }
</style>
<script type="text/javascript" src="js/AjaxRequest.js"></script>
<script type="text/javascript">
    function myClose(divID){
        divID.style.display='none';
        document.getElementById("notClickDiv").style.display='none';
    }
    function Myopen(divID){
        var notClickDiv=document.getElementById("notClickDiv");
        notClickDiv.style.display='block';
        document.getElementById("notClickDiv").style.width=document.body.clientWidth;
        document.getElementById("notClickDiv").style.height=document.body.clientHeight;
        document.getElementById(divID).style.display='block';
        document.getElementById(divID).style.left=(document.body.clientWidth-240)/2;
        document.getElementById(divID).style.top=(document.body.clientHeight-139)/2;
    }
    function loginSubmit(form2){
        if(form2.username.value==""){
            alert("请输入用户名!");form2.username.focus();return false;
        }
        if(form2.pwd.value==""){
            alert("请输入密码!");form2.pwd.focus();return false;
        }
        var param="username="+form2.username.value+"&pwd="+form2.pwd.value;
        var loader=new net.AjaxRequest("UserServlet?action=login",deal_login,onerror,"POST",encodeURI(param));
    }
    function onerror(){
        alert("您的操作有误");
    }
    function deal_login(){
        var h=this.req.responseText;
        h=h.replace(/\s/g,"");
        alert(h);
        if(h=="登录成功!"){
            window.location.href="DiaryServlet?action=listAllDiary";
        }else {
            form2.username.value = "";
            form2.pwd.value = "";
            form2.username.focus();
        }
    }
</script>
<style>
    #top{
        background-image:url(images/bg_top.jpg);
        width:800px;
        height:176px;
    }
    #navigation{
        background-image:url(images/navigation_bg.jpg);
        width:790px;
        height:26px;
        padding:5px 5px 0px 5px;
        margin: 0px;
    }
    #loginUl{
        list-style:none;
        margin: 0px;
    }
    #loginUl li{
        padding: 5px;
    }
    #loginTitle{
        padding:15px;
        background-color:#FCFBF0;
        color:#1B7F5D;
        font-size: 14px;
        font-weight:bold;
        margin:0px;
    }
    #login{
        position:absolute;
        width:280px;
        padding:4px;
        height:156px;
        display:none;
        z-index:10;
        background-color:#546B51;
    }
</style>
<link rel="stylesheet" href="css/style.css" />
<div id="notClickDiv"></div>
<div id="top"></div>
<div id="navigation">
    <div style="float:left;color:#006700;">
        <c:if test="${!empty sessionScope.username}">
            <b>   》  欢迎 ${sessionScope.username} 登录九宫格日记网!</b>
        </c:if>
        <c:if test="${empty sessionScope.username}">
            <b>   》  欢迎光临九宫格日记网!</b>
        </c:if>
    </div>
    <div style="float:right;text-align: right;">
        <a href="DiaryServlet?action=listAllDiary">首页</a>
        <c:if test="${empty sessionScope.username}">
              |  <a href="#" onClick="Myopen('login')">登录</a>
              |  <a href="#" onClick="Regopen('register')">注册</a>
              |  <a href="forgetPwd_1.jsp">找回密码</a>
        </c:if>
        <c:if test="${!empty sessionScope.username}">
             |  <a href="DiaryServlet?action=listMyDiary">我的日记</a>
              |  <a href="writeDiary.jsp">写九宫格日记</a>
              |  <a href="UserServlet?action=exit">退出登录</a>
        </c:if>
    </div>
</div>
<div id="login">
    <form name="form2" method="post" action="" id="form2">
        <div id="loginTitle">清爽夏日九宫格日记网--用户登录</div>
        <div id="loginContent" style="background-color:#FFFEF9; margin:0px;">
            <ul id="loginUl"><li>
                用户名:<input type="text" name="username" style="width:120px" onkeydown="if(event.keyCode==13){this.form.pwd.focus();}">
            </li><li>
                密    码:<input type="password" name="pwd"  style="width:120px" onkeydown="if(event.keyCode==13){loginSubmit(this.form)}"> <a href="forgetPwd_1.jsp">找回密码</a>
            </li><li style="padding-left:40px;">
                <input name="Submit" type="button"  onclick="loginSubmit(this.form)" value="登录">
                 
                <input name="Submit2" type="button" value="关闭" onClick="myClose(login)">
            </li></ul>
        </div>
        <div style="background-color:#FEFEFC;height:10px;"></div>
    </form>
</div>

在index.jsp中引用该页面进行测试

图 3.1 测试top.jsp

2.2 编写register.jsp

<%--
  Created by IntelliJ IDEA.
  User: binjo
  Date: 7/14/2019
  Time: 3:41 PM
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<script type="text/javascript" src="js/AjaxRequest.js"></script>
<script type="text/javascript" src="js/zybFunction.js"></script>
<script type="text/javascript">
    function Regopen(divID) {
        getProvince();
        var notClickDiv=document.getElementById("notClickDiv");
        notClickDiv.style.display='block';
        document.getElementById("notClickDiv").style.width=document.body.clientWidth;
        document.getElementById("notClickDiv").style.height=document.body.clientHeight;
        divID=document.getElementById(divID);
        divID.style.display='block';
        divID.style.left=(document.body.clientWidth-663)/2;
        divID.style.top=(document.body.clientHeight-441)/2;
    }
    function Myclose(divID){
        document.getElementById(divID).style.display='none';
        document.getElementById("notClickDiv").style.display='none';
    }
</script>
<script type="text/javascript">
    var flag_user=true;
    var flag_pwd=true;
    var flag_repwd=true;
    var flag_email=true;
    var flag_question=true;
    var flag_answer=true;
    function checkUser(str){
        if(str==""){
            document.getElementById("div_user").innerHTML="请输入用户名!";
            document.getElementById("tr_user").style.display='block';
            flag_user=false;
        }else if(!checkeUser(str)){
            document.getElementById("div_user").innerHTML="您输入的用户名不合法!";
            document.getElementById("tr_user").style.display='block';
            flag_user=false;
        }else{
            var loader=new net.AjaxRequest("UserServlet?action=checkUser&username="+str+"&nocache="+new Date().getTime(),deal,onerror,"GET");
        }
    }
    function deal(){
        result=this.req.responseText;
        result=result.replace(/\s/g,"");
        if(result=="1"){
            document.getElementById("div_user").innerHTML="";
            document.getElementById("tr_user").style.display='none';
            flag_user=true;
        }else{
            document.getElementById("div_user").innerHTML=result;
            document.getElementById("tr_user").style.display='block';
            flag_user=false;
        }
    }
    function checkPwd(str) {
        if(str==""){
            document.getElementById("div_pwd").innerHTML="请输入密码!";
            document.getElementById("tr_pwd").style.display='block';
            flag_pwd=false;
        }else if(!checkePwd(str)){
            document.getElementById("div_pwd").innerHTML="您输入的密码不合法!";
            document.getElementById("tr_pwd").style.display='block';
            flag_pwd=false;
        }else{
            document.getElementById("div_pwd").innerHTML="";
            document.getElementById("tr_pwd").style.display='none';
            flag_pwd=true;
        }
    }
    function checkRepwd(str) {
        if(str==""){
            document.getElementById("div_pwd").innerHTML="请确认密码!";
            document.getElementById("tr_pwd").style.display='block';
            flag_repwd=false;
        }else if(form1.pwd.value!=str){
            document.getElementById("div_pwd").innerHTML="两次输入的密码不一致!";
            document.getElementById("tr_pwd").style.display='block';
            flag_repwd=false;
        }else{
            document.getElementById("div_pwd").innerHTML="";
            document.getElementById("tr_pwd").style.display='none';
            flag_repwd=true;
        }
    }
    function checkEmail(str) {
        if(str==""){
            document.getElementById("div_email").innerHTML="请输入E-mail地址!";
            document.getElementById("tr_email").style.display='block';
            flag_email=false;
        }else if(!checkemail(str)){
            document.getElementById("div_email").innerHTML="您输入的E-mail地址不合法!";
            document.getElementById("tr_email").style.display='block';
            flag_email=false;
        }else{
            document.getElementById("div_email").innerHTML="";
            document.getElementById("tr_email").style.display='none';
            flag_email=true;
        }
    }
    function checkQuestion(q,a){
        if(q!=""&&a==""){
            document.getElementById("div_answer").innerHTML="请输入提示问题答案!";
            document.getElementById("tr_answer").style.display='block';
            flag_answer=false;
        }else if(q==""&&a!=""){
            document.getElementById("div_question").innerHTML="请输入密码提示问题!";
            document.getElementById("tr_question").style.display='block';
            flag_question=false;
        }else{
            document.getElementById("div_answer").innerHTML="";
            document.getElementById("tr_answer").style.display='none';
            document.getElementById("div_question").innerHTML="";
            document.getElementById("tr_question").style.display='none';
            flag_answer=true;
            flag_question=true;
        }
    }
</script>
<script type="text/javascript">
    function save() {
        if(form1.user.value==""){
            alert("请输入用户名!");form1.user.focus();return;
        }
        if(form1.pwd.value==""){
            alert("请输入密码!");form1.pwd.focus();return;
        }
        if(form1.repwd.value==""){
            alert("请确认密码!");form1.repwd.focus();return;
        }
        if(form1.email.value==""){
            alert("请输入E-mail地址!");form1.email.focus();return;
        }
        if(flag_user && flag_pwd && flag_repwd && flag_email && flag_question && flag_answer){
            var param="user="+form1.user.value+"&pwd="+form1.pwd.value+"&email="+form1.email.value+"&question="+form1.question.value+"&answer="+form1.answer.value+"&city="+form1.city.value;
            var loader=new net.AjaxRequest("UserServlet?action=save&nocache="+new Date().getTime(),deal_save,onerror,"POST",param);
        }else{
            alert("您填写的注册信息不合法,请确认!");
        }
    }
    function deal_save() {
        alert(this.req.responseText);
        form_reset(form1);
        Myclose("register");
    }
    function getProvince() {
        var loader=new net.AjaxRequest("UserServlet?action=getProvince&nocache="+new Date().getTime(),deal_getProvince,onerror,"GET");
    }
    function deal_getProvince() {
        provinceArr=this.req.responseText.split(",");
        for(i=0;i<provinceArr.length;i++){
            document.getElementById("province").options[i]=new Option(provinceArr[i],provinceArr[i]);
        }
        if(provinceArr[0]!=""){
            getCity(provinceArr[0]);
        }
    }
    function getCity(selProvince) {
        var loader=new net.AjaxRequest("UserServlet?action=getCity&parProvince="+selProvince+"&nocache="+new Date().getTime(),deal_getCity,onerror,"GET");
    }
    function deal_getCity() {
        cityArr=this.req.responseText.split(",");
        document.getElementById("city").length=0;
        for(i=0;i<cityArr.length;i++){
            document.getElementById("city").options[i]=new Option(cityArr[i],cityArr[i]);
        }
    }
    function onerror() {
        alert("出错了");
    }
    function form_reset(form) {
        form.reset();
        getProvince();
        document.getElementById("tr_user").style.display='none';
        document.getElementById("tr_pwd").style.display='none';
        document.getElementById("tr_email").style.display='none';
        document.getElementById("tr_question").style.display='none';
        document.getElementById("tr_answer").style.display='none';
    }
</script>
<div id="register" style="width:663; height:421; background-color:#546B51; padding:4px; position:absolute; z-index:11;display:none;">
    <form name="form1" action="" method="post">
        <table width="100%" height="100%" border="0" cellpadding="0" cellspacing="0" bgcolor="#FEFEFC">
            <tr>
                <td height="408" align="center" valign="top"><table width="100%" border="0" cellpadding="0" cellspacing="0">
                    <tr>
                        <td height="50" style="color:#1B7F5D;font-size: 14px;"><b>清爽夏日九宫格日记网--用户注册</b></td>
                    </tr>
                </table>
                    <table width="94%" height="331" border="0" cellpadding="0" cellspacing="1" bgcolor="#CCCCCC">
                        <tr>
                            <td height="310" valign="top" bgcolor="#FFFFFF"><table border="0" cellpadding="0" cellspacing="0" bgcolor="#FFFEF9">
                                <tr id="tr_user" style="display:none">
                                    <td height="40" colspan="2" align="center"><div id="div_user" style="border:#FF6600 1px solid; color:#FF0000; width:90%; height:29px; padding-top:8px;"></div></td>
                                </tr>
                                <tr>
                                    <td width="93" height="40" align="right">用户名:</td>
                                    <td height="40" align="left"><input name="user" type="text" onBlur="checkUser(this.value)">
                                         *长度限制为20个字母或10个汉字</td>
                                </tr>
                                <tr id="tr_pwd" style="display:none">
                                    <td height="40" colspan="2" align="center"><div id="div_pwd" style="border:#FF6600 1px solid; color:#FF0000; width:90%; height:29px; padding-top:8px; background-image:url(images/div_bg.jpg)"></div></td>
                                </tr>
                                <tr>
                                    <td height="40" align="right">密码:</td>
                                    <td height="40" align="left"><input name="pwd" type="password" onBlur="checkPwd(this.value)">
                                         * 密码由字母开头的字母、数字或下划线组成,并且密码的长度大于6位小于30位</td>
                                </tr>
                                <tr>
                                    <td height="40" align="right">确认密码:</td>
                                    <td height="40" align="left"><input name="repwd" type="password" onBlur="checkRepwd(this.value)">
                                         * 请确认密码 </td>
                                </tr>
                                <tr id="tr_email" style="display:none">
                                    <td height="40" colspan="2" align="center"><div id="div_email" style="border:#FF6600 1px solid; color:#FF0000; width:90%; height:29px; padding-top:8px; background-image:url(images/div_bg.jpg)"></div></td>
                                </tr>
                                <tr>
                                    <td height="40" align="right">E-mail地址:</td>
                                    <td height="40" align="left"><input name="email" type="text" size="35" onBlur="checkEmail(this.value)">
                                         * 请输入有效的E-mail地址,在找回密码时应用 </td>
                                </tr>
                                <tr>
                                    <td height="40" align="right">所在地:</td>
                                    <td height="40" align="left"><select name="province" id="province" onChange="getCity(this.value)">
                                    </select>
                                        -
                                        <select name="city" id="city">
                                        </select></td>
                                </tr>
                                <tr>
                                    <td height="40" colspan="2" align="center">以下两个选项,只要有任何一个没有输入,将不可以通过答案问题重新设置密码。</td>
                                </tr>
                                <tr id="tr_question" style="display:none">
                                    <td height="40" colspan="2" align="center"><div id="div_question" style="border:#FF6600 1px solid; color:#FF0000; width:90%; height:29px; padding-top:8px; background-image:url(images/div_bg.jpg)"></div></td>
                                </tr>
                                <tr>
                                    <td height="40" align="right">密码提示问题:</td>
                                    <td height="40" align="left"><input name="question" type="text" id="question" size="35" onBlur="checkQuestion(this.value,this.form.answer.value)">
                                        如:我的工作单位</td>
                                </tr>
                                <tr id="tr_answer" style="display:none">
                                    <td height="40" colspan="2" align="center"><div id="div_answer" style="border:#FF6600 1px solid; color:#FF0000; width:90%; height:29px; padding-top:8px; background-image:url(images/div_bg.jpg)"></div></td>
                                </tr>
                                <tr>
                                    <td height="40" align="right">提示问题答案:</td>
                                    <td height="40" align="left"><input name="answer" type="text" id="answer" size="35" onBlur="checkQuestion(this.form.question.value,this.value)">
                                        如:明日科技                  </td>
                                </tr>
                                <tr>
                                    <td height="40"> </td>
                                    <td height="40" align="center"><input name="btn_sumbit" type="button" class="btn_grey" value="提交" onClick="save()">
                                         
                                        <input name="btn_reset" type="button" class="btn_grey" value="重置" onClick="form_reset(this.form)">
                                         
                                        <input name="btn_close" type="button" class="btn_grey" value="关闭" onClick="Myclose('register')"></td>
                                </tr>

                            </table></td>
                        </tr>
                    </table></td>
            </tr>
            <tr>
                <td height="10" align="center" valign="top" bgcolor="#FEFEFC"> </td>
            </tr>
        </table>
    </form>
</div>

在index中引用该页面进行测试

图 3.2 测试register

错误:所在地没有出现

解决方法:在UserServlet中的getProvince中有代码出错,it.hasNext()改成it.next()

private void getProvince(HttpServletRequest request, HttpServletResponse response) throws IOException {
		String result="";
		CityMap cityMap=new CityMap();
		Map<String,String[]> map=cityMap.model;
		Set<String> set=map.keySet();
		Iterator it=set.iterator();
		while(it.hasNext()) {
			result=result+it.next()+",";
		}
		result=result.substring(0,result.length()-1);
		response.setContentType("text/html");
		PrintWriter out=response.getWriter();
		out.print(result);
		out.flush();
		out.close();
	}
图 3.3 省份显示

修改后省份显示正确,市显示错误,经过调试发现url传参的时候省份编码格式改变。

图 3.4 传参编码格式改变

修改UserServlet中的getCity方法,将url传来的参数进行解码

private void getCity(HttpServletRequest request, HttpServletResponse response) throws IOException {
		String result="";
		String s=request.getParameter("parProvince");
		String selProvince=java.net.URLDecoder.decode(s);
		//selProvince=new String(selProvince.getBytes("ISO-8859-1"),"GBK");
		CityMap cityMap=new CityMap();
		Map<String,String[]> map=cityMap.model;
		String[] arrCity=map.get(selProvince);
		for(int i=0;i<arrCity.length;i++) {
			result=result+arrCity[i]+",";
		}
		result=result.substring(0,result.length()-1);
		response.setContentType("text/html");
		PrintWriter out=response.getWriter();
		out.print(result);
		out.flush();
		out.close();
	}
图 3.5 显示正确

3. 编写功能页面

3.1 listAllDiary的编写

UserServlet的login方法有编写错误,更正如下

private void login(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		User user=new User();
		user.setUsername(request.getParameter("username"));
		user.setPwd(request.getParameter("pwd"));
		int r=userDao.login(user);
		if(r!=0) {
			HttpSession session=request.getSession();
			session.setAttribute("username", user.getUsername());
			session.setAttribute("uid", r);
			request.setAttribute("returnValue", "登录成功!");
			request.getRequestDispatcher("userMessage.jsp").forward(request, response);
		}else {
			request.setAttribute("returnValue", "您输入的用户名或密码有误,请重新输入!");
			request.getRequestDispatcher("userMessage.jsp").forward(request, response);
		}
	}

listAllDiary为展示所有日记的页面

<%--
  Created by IntelliJ IDEA.
  User: binjo
  Date: 7/14/2019
  Time: 5:27 PM
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
<jsp:useBean id="pagination" class="com.zyb.tool.MyPagination" scope="session"/>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <script type="text/javascript" src="js/excanvas-modified.js"></script>
    <title>显示九宫格日记列表</title>
    <script type="text/javascript">
        function zoom(id,url){
            document.getElementById('reDefault'+id).onclick();
            document.getElementById("diary"+id).style.display="";
            if(flag[id]){
                document.getElementById("diary"+id).src="images/diary"+url+".png";
                document.getElementById("diary"+id).style.cursor="url(images/ico02/ico)";
                document.getElementById("control"+id).style.display="";
                document.getElementById("diaryImg"+id).style.width=401;
                document.getElementById("diaryImg"+id).style.height=436;
                document.getElementById("canvas"+id).style.cursor="url(images/ico02.ico)";
                document.getElementById("diary"+id).width=400;
                document.getElementById("diary"+id).height=400;
                flag[id]=false;
            }else{
                document.getElementById("diary"+id).src="images/diary"+url+"scale.jpg";
                document.getElementById("control"+id).style.display="none";
                document.getElementById("diary"+id).style.cursor="url(images/ico02/ico)";
                document.getElementById("diaryImg"+id).style.width=60;
                document.getElementById("diaryImg"+id).style.height=60;
                document.getElementById("canvas"+id).style.cursor="url(images/ico01.ico)";
                document.getElementById("diary"+id).width=60;
                document.getElementById("diary"+id).height=60;
                flag[id]=true;
                document.getElementById("canvas"+id).style.display="none";
            }
        }
        var i=0;
    </script>
</head>
<body bgcolor="#F0F0F0">
    <div id="box">
        <%@include file="top.jsp"%>
        <%@include file="register.jsp"%>
        <c:if test="${!empty requestScope.diaryList}">
            <c:forEach items="${requestScope.diaryList}" var="diaryList" varStatus="id">
                <script type="text/javascript">
                    i++;
                    function rotate${id.count}(){
                        var param${id.count}={
                            right:document.getElementById("rotRight${id.count}"),
                            left:document.getElementById("rotLeft${id.count}"),
                            reDefault:document.getElementById("reDefault${id.count}"),
                            img:document.getElementById("diary${id.count}"),
                            cv:document.getElementById("canvas${id.count}"),
                            rot:0
                        };
                        var rotate=function(canvas,img,rot){
                            var w=400;
                            var h=400;
                            if(!rot){
                                rot=0;
                            }
                            var rotation=Math.PI*rot/180;
                            var c=Math.round(Math.cos(rotation)*1000)/1000;
                            var s=Math.round(Math.sin(rotation)*1000)/1000;
                            canvas.height=Math.abs(c*h)+Math.abs(s*w);
                            canvas.width=Math.abs(c*w)+Math.abs(s*h);
                            var context=canvas.getContext("2d");
                            context.save();
                            if(rotation<=Math.PI/2){
                                context.translate(s*h,0);
                            }else if(rotation<=Math.PI){
                                context.translate(canvas.width,-c*h);
                            }else if(rotation<=1.5*Math.PI){
                                context.translate(-c*w,canvas.height);
                            }else{
                                rot=0;
                                context.translate(0,-s*w);
                            }
                            context.rotate(rotation);
                            context.drawImage(img,0,0,w,h);
                            context.restore();
                            img.style.display="none";
                        }
                        var fun={
                            right:function(){
                                param${id.count}.rot+=90;
                                rotate(param${id.count}.cv,param${id.count}.img,param${id.count}.rot);
                                if(param${id.count}.rot==270){
                                    param${id.count}.rot=-90;
                                }else if(param${id.count}.rot>270){
                                    param${id.count}.rot=-90;
                                    fun.right();
                                }
                            },
                            reDefault:function(){
                                param${id.count}.rot=0;
                                rotate(param${id.count}.cv,param${id.count}.img,param${id.count}.rot);
                            },
                            left:function(){
                                param${id.count}.rot-=90;
                                if(param${id.count}.rot<=-90){
                                    param${id.count}.rot=270;
                                }
                                rotate(param${id.count}.cv,param${id.count}.img,param${id.count}.rot);
                            }
                        };
                        param${id.count}.right.onclick=function () {
                            param${id.count}.cv.style.display="";
                            fun.right;
                            return false;
                        };
                        param${id.count}.left.onclick=function(){
                            param${id.count}.cv.style.display="";
                            fun.left();
                            return false;
                        };
                        param${id.count}.reDefault.onclick=function(){
                            fun.reDefault();
                            return false;
                        };
                    }
                </script>
                <div style="border-bottom-color:#CBCBCB;padding:5px;border-bottom-style:dashed;border-bottom-width: 1px;margin: 10px 20px;color:#0F6548">
                    <font color="#CE6A1F" style="font-weight: bold;font-size:14px;">${diaryList.username}</font>  发表九宫格日记:<b>${diaryList.title}</b></div>
                <div style="margin:10px 10px 0px 10px;background-color:#FFFFFF; border-bottom-color:#CBCBCB;border-bottom-style:dashed;border-bottom-width: 1px;">
                    <div id="diaryImg${id.count }" style="border:1px #DDDDDD solid;width:60px;background-color:#EEEEEE;">

                        <div id="control${id.count }" style="display:none;padding: 10px;">
                            <%String url=request.getRequestURL().toString();
                                url=url.substring(0,url.lastIndexOf("/"));%>
                            <a href="#" onClick="zoom('${id.count }','${diaryList.address }')">收缩</a>
                                <a href="<%=url %>/images/diary/${diaryList.address }.png" target="_blank">查看原图</a>
                              <a id="rotLeft${id.count }" href="#" >左转</a>
                              <a id="rotRight${id.count }" href="#">右转</a>
                            <a id="reDefault${id.count }" href="#" style="display:none">恢复默认</a>
                        </div>
                        <img id="diary${id.count }" src="images/diary/${diaryList.address }scale.jpg"
                             style="cursor: url(images/ico01.ico);"
                             onClick="zoom('${id.count }','${diaryList.address }')">
                        <canvas id="canvas${id.count }" style="display:none;" onClick="zoom('${id.count }','${diaryList.address }')"></canvas>
                    </div>
                    <div style="padding:10px;background-color:#FFFFFF;text-align:right;color:#999999;">
                        发表时间:<fmt:formatDate value="${diaryList.writeTime}" type="both" pattern="yyyy-MM-dd HH:mm:ss"/>
                        <c:if test="${sessionScope.userName==diaryList.username}">
                            <a href="DiaryServlet?action=delDiary&id=${diaryList.id }&url=${requestScope.url}&imgName=${diaryList.address }">[删除]</a>
                        </c:if>
                    </div>
                </div>
            </c:forEach>
        </c:if>
        <c:if test="${empty requestScope.diaryList}">
            暂无九宫格日记!
        </c:if>
        <script type="text/javascript">
            var flag=new Array(i);
            window.onload=function(){
                while(i>0){
                    eval("rotate"+i)();
                    flag[i]=true;
                    i--;
                }
            }
        </script>
        <div style="background-color:#FFF;">
            <%=pagination.printCtrl(Integer.parseInt(request.getAttribute("Page").toString()),"DiaryServlet?action="+request.getAttribute("url"),"")%>
        </div>
        <%@include file="bottom.jsp"%>
    </div>
</body>
</html>
图 3.5 展示所有日记

4. 用户找回密码编写

4.1 用户找回密码第一步

<%--
  Created by IntelliJ IDEA.
  User: binjo
  Date: 7/14/2019
  Time: 10:02 PM
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <title>找回密码第一步</title>
    <script type="text/javascript">
        function checkForm(form){
            if(form.username.value==""){
                alert("请输入用户名!");form.username.focus();return false;
            }
        }
    </script>
    <style type="text/css">
        #forgetPwd1{
            float:left;
            list-style:none;
            padding:50px 0px 0px 200px;
        }
        #forgetPwd1 li{
            float:left;
        }
    </style>
</head>
<body bgcolor="#F0F0F0">
    <div id="box">
        <%@include file="top.jsp"%>
        <%@include file="register.jsp"%>
        <div id="forgetPwd" style="height:356px;">
            <form name="form_forgetPwd" method="post" action="UserServlet?action=forgetPwd1" onsubmit="return checkForm(this)">
                <ul id="forgetPwd1">
                    <li style="padding-top: 5px;">请输入用户名:</li>
                    <li><input type="text" name="username"></li>
                    <li style="padding-left: 10px;"><input name="Submit" type="submit" value="下一步"></li>
                </ul>
            </form>
        </div>
        <%@include file="bottom.jsp"%>
    </div>
</body>
</html>
图 3.6 找回密码第一步

4.2 找回密码第二步

<%--
  Created by IntelliJ IDEA.
  User: binjo
  Date: 7/14/2019
  Time: 10:10 PM
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <title>找回密码第二步</title>
    <script type="text/javascript">
        function checkForm(form) {
            if(form.answer.value==""){
                alert("请输入密码提示问题答案!");form.answer.focus();return false;
            }
        }
    </script>
    <style type="text/css">
        #forgetPwd2{
            float:left;
            list-style: none;
            padding:50px 0px 0px 200px;
        }
        #forgetPwd2 li{
            padding:10px;
        }
    </style>
</head>
<body bgcolor="#F0F0F0">
    <div id="box">
        <%@include file="top.jsp"%>
        <%@include file="register.jsp"%>
        <div id="forgetPwd" style="height:356px;">
            <form name="form_forgetPwd" method="post" action="UserServlet?action=forgetPwd2" onsubmit="return checkForm(this)">
                <ul id="forgetPwd2">
                    <li style="padding-top: 5px;">密码提示问题:<input type="hidden" name="username" value="${requestScope.username}"><input type="text" name="question" value="${requestScope.question}" readonly="readonly"></li>
                    <li>提示问题答案:
                        <input type="text" name="answer" value="">
                    </li>
                    <li style="padding-left: 100px;">
                        <input name="Submit" type="submit" value="下一步">
                    </li>
                </ul>
            </form>
        </div>
        <%@include file="bottom.jsp"%>
    </div>
</body>
</html>
图 3.7 找回密码第二步
图 3.8 成功找回密码

5. 写日记模块编写

5.1 写日记页面

写日记页面名为writeDiary.jsp

<%--
  Created by IntelliJ IDEA.
  User: binjo
  Date: 7/14/2019
  Time: 10:22 PM
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<c:if test="${empty sessionScope.username}">
    <c:redirect url="index.jsp"/>
</c:if>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <title>写九宫格日记</title>
    <script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
    <script type="text/javascript" src="js/jquery.pngFix.pack.js"></script>
    <script type="text/javascript" src="js/jquery.pngFix.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
            $('div.examples').pngFix();
        });
    </script>
    <link rel="stylesheet" href="css/style.css">
    <style type="text/css">
        #gridLayout{
            float:left;
            list-style:none;
            width:100%;
            margin:0px;
            padding:0px;
            display: inline;
        }
        #gridLayout li{
            width:33%;
            float: left;
            height: 198px;
            padding: 0px;
            margin: 0px;
            display: inline;
        }
        #opt{
            padding: 0px 0px 0px 10px;
            margin: 0px;
        }
        #opt li{
            width: 99%;
            padding-top: 5px;
            font-size: 14px;
            height: 25px;
            clear: both;
        }
        .cssContent{
            float:left;
            padding: 40px 0px;
            display: inline;
        }
        #weather{
            border:0px;
            padding: 15px 0px 0px 30px;
            margin: 20px;
            display:inline;
        }
        #weather li{
            border: 0px;
            width: 90%;
            padding: 10px;
            margin: 0px;
            display: inline;
        }
        input{
            font-size: 12px;
        }
        .title{
            coor:#0F6548;
            font-weight: bold;
        }
        #writeDiary_bg{
            width: 738px;
            height: 751px;
            background-repeat: no-repeat;
            background-image: url(images/diaryBg_00.jpg);
            padding-top: 50px;
            padding-left: 53px;
        }
    </style>
    <script type="text/javascript">
        function setTemplate(style){
            if(style=="默认"){
                document.getElementById("writeDiary_bg").style.backgroundImage="url(images/diaryBg_00.jpg)";
                document.getElementById("writeDiary_bg").style.width="738px";
                document.getElementById("writeDiary_bg").style.height="751px";
                document.getElementById("writeDiary_bg").style.paddingTop="50px";
                document.getElementById("writeDiary_bg").style.paddingLeft="53px";
                document.getElementById("template").value="默认";
            }else if(style=="女孩"){
                document.getElementById("writeDiary_bg").style.backgroundImage="url(images/diaryBg_01.jpg)";
                document.getElementById("writeDiary_bg").style.width="750px";
                document.getElementById("writeDiary_bg").style.height="629px";
                document.getElementById("writeDiary_bg").style.paddingTop="160px";
                document.getElementById("writeDiary_bg").style.paddingLeft="50px";
                document.getElementById("template").value="女孩";
            }else{
                document.getElementById("writeDiary_bg").style.backgroundImage="url(images/diaryBg_02.jpg)";
                document.getElementById("writeDiary_bg").style.width="740px";
                document.getElementById("writeDiary_bg").style.height="728px";
                document.getElementById("writeDiary_bg").style.paddingTop="30px";
                document.getElementById("writeDiary_bg").style.paddingLeft="60px";
                document.getElementById("template").value="怀旧";
            }
        }
        window.onload=function(){
            var date=new Date();
            year=date.getFullYear();
            month=date.getMonth();
            day=date.getDate();
            week=date.getDay();
            var arr=new Array("星期日","星期一","星期二","星期三","星期四","星期五","星期六");
            document.getElementById("now").innerHTML=year+"年"+(month+1)+"月"+day+"日"+arr[week];
        }
    </script>
</head>
<body bgcolor="#F0F0F0">
<div id="box">
    <%@ include file="top.jsp" %>
    <c:if test="${empty sessionScope.username}">
        <c:redirect url="index.jsp"/>
    </c:if>
    <form name="form1" method="post" action="DiaryServlet?action=preview">
        <div style="margin:10px;"><span class="title">请选择模板:</span><a href="#" onClick="setTemplate('默认')">默认</a> <a href="#" onClick="setTemplate('女孩')">女孩</a> <a href="#" onClick="setTemplate('怀旧')">怀旧</a>
            <input id="template" name="template" type="hidden" value="默认">
        </div>
        <div style="padding:10px;" class="title">请输入日记标题: <input name="title" type="text" size="30" maxlength="30" value="请在此输入标题" onFocus="this.select()"></div>
        <div id="writeDiary_bg">




            <div style="width:600px; height:600px; ">
                <ul id="gridLayout">
                    <li>
                        <div class="cssContent">
                            <ul id="opt">
                                <li>
                                    <input name="content" type="text" size="30" maxlength="15" value="请在此输入文字" onFocus="this.select()">
                                </li>
                                <li><a href="#" onClick="document.getElementsByName('content')[0].value='工作完成了'">◎ 工作完成了</a></li>
                                <li><a href="#" onClick="document.getElementsByName('content')[0].value='我还活着'">◎ 我还活着</a></li>
                                <li><a href="#" onClick="document.getElementsByName('content')[0].value='瘦了'">◎ 瘦了</a></li>
                                <li><a href="#" onClick="document.getElementsByName('content')[0].value='好多好吃的'">◎ 好多好吃的</a></li>
                            </ul>
                        </div>
                    </li>
                    <li>
                        <div class="cssContent">
                            <ul id="opt">
                                <li>
                                    <input name="content" type="text" size="30" maxlength="15" value="请在此输入文字" onFocus="this.select()">
                                </li>
                                <li><a href="#" onClick="document.getElementsByName('content')[1].value='关心同事'">◎ 关心同事</a></li>
                                <li><a href="#" onClick="document.getElementsByName('content')[1].value='问候家人了'">◎ 问候家人了</a></li>
                                <li><a href="#" onClick="document.getElementsByName('content')[1].value='给老人让坐'">◎ 给老人让坐</a></li>
                                <li><a href="#" onClick="document.getElementsByName('content')[1].value='忘记了'">◎ 忘记了</a></li></ul>
                        </div>
                    </li>
                    <li>
                        <div class="cssContent">
                            <ul id="opt">
                                <li>
                                    <input name="content" type="text" size="30" maxlength="15" value="请在此输入文字" onFocus="this.select()">
                                </li>
                                <li><a href="#" onClick="document.getElementsByName('content')[2].value='写工作总结'">◎ 写工作总结</a></li>
                                <li><a href="#" onClick="document.getElementsByName('content')[2].value='出去旅游'">◎ 出去旅游</a></li>
                                <li><a href="#" onClick="document.getElementsByName('content')[2].value='继续努力工作'">◎ 继续努力工作</a></li>
                                <li><a href="#" onClick="document.getElementsByName('content')[2].value='休息一下'">◎ 休息一下</a></li></ul>
                        </div>
                    </li>
                    <li>
                        <div class="cssContent">
                            <ul id="opt">
                                <li>
                                    <input name="content" type="text" size="30" maxlength="15" value="请在此输入文字" onFocus="this.select()">
                                </li>
                                <li><a href="#" onClick="document.getElementsByName('content')[3].value='效率提高了'">◎ 效率提高了</a></li>
                                <li><a href="#" onClick="document.getElementsByName('content')[3].value='看书了'">◎ 看书了</a></li>
                                <li><a href="#" onClick="document.getElementsByName('content')[3].value='状态好了'">◎ 状态好了</a></li>
                                <li><a href="#" onClick="document.getElementsByName('content')[3].value='不再空想了'">◎ 不再空想了</a></li></ul>
                        </div>
                    </li>
                    <li>
                        <ul id="weather"><li style="height:27px;"> <span id="now" style="font-size: 14px;font-weight:bold;padding-left:5px;">正在获取日期</span>
                            <input name="content" type="hidden" value="weathervalue"><br></br>
                            <div class="examples">
                                <input name="weather" type="radio" value="1">
                                <img src="images/1.png" width="30" height="30">
                                <input name="weather" type="radio" value="2">
                                <img src="images/2.png" width="30" height="30">
                                <input name="weather" type="radio" value="3">
                                <img src="images/3.png" width="30" height="30">
                                <input name="weather" type="radio" value="4">
                                <img src="images/4.png" width="30" height="30">
                                <input name="weather" type="radio" value="5" checked="checked">
                                <img src="images/5.png" width="30" height="30">
                                <input name="weather" type="radio" value="6">
                                <img src="images/6.png" width="30" height="30">
                                <input name="weather" type="radio" value="7">
                                <img src="images/7.png" width="30" height="30">
                                <input name="weather" type="radio" value="8">
                                <img src="images/8.png" width="30" height="30">
                                <input name="weather" type="radio" value="9">
                                <img src="images/9.png" width="30" height="30">
                            </div>
                        </li>
                        </ul>
                    </li>
                    <li>
                        <div class="cssContent">
                            <ul id="opt">
                                <li>
                                    <input name="content" type="text" size="30" maxlength="15" value="请在此输入文字" onFocus="this.select()">
                                </li>
                                <li><a href="#" onClick="document.getElementsByName('content')[5].value='心情不错'">◎ 心情不错</a></li>
                                <li><a href="#" onClick="document.getElementsByName('content')[5].value='不给力'">◎ 不给力</a></li>
                                <li><a href="#" onClick="document.getElementsByName('content')[5].value='幸福'">◎ 幸福</a></li>
                                <li><a href="#" onClick="document.getElementsByName('content')[5].value='神马都是浮云'">◎ 神马都是浮云</a></li></ul>
                        </div>
                    </li>
                    <li>
                        <div class="cssContent">
                            <ul id="opt">
                                <li>
                                    <input name="content" type="text" size="30" maxlength="15" value="请在此输入文字" onFocus="this.select()">
                                </li>
                                <li><a href="#" onClick="document.getElementsByName('content')[6].value='她/他写九宫格日记了'">◎ 她/他写九宫格日记了</a></li>
                                <li><a href="#" onClick="document.getElementsByName('content')[6].value='白菜贵了'">◎ 白菜贵了</a></li>
                                <li><a href="#" onClick="document.getElementsByName('content')[6].value='大家都在关注神马'">◎ 大家都在关注神马</a></li>
                                <li><a href="#" onClick="document.getElementsByName('content')[6].value='新闻联播'">◎ 新闻联播</a></li></ul>
                        </div>
                    </li>
                    <li>
                        <div class="cssContent">
                            <ul id="opt">
                                <li>
                                    <input name="content" type="text" size="30" maxlength="15" value="请在此输入文字" onFocus="this.select()">
                                </li>
                                <li><a href="#" onClick="document.getElementsByName('content')[7].value='瘦了'">◎ 瘦了</a></li>
                                <li><a href="#" onClick="document.getElementsByName('content')[7].value='胖了'">◎ 胖了</a></li>
                                <li><a href="#" onClick="document.getElementsByName('content')[7].value='健康饮食'">◎ 健康饮食</a></li>
                                <li><a href="#" onClick="document.getElementsByName('content')[7].value='一日三餐不能少'">◎ 一日三餐不能少</a></li></ul>
                        </div>
                    </li>
                    <li>
                        <div class="cssContent">
                            <ul id="opt">
                                <li>
                                    <input name="content" type="text" size="30" maxlength="15" value="请在此输入文字" onFocus="this.select()">
                                </li>
                                <li><a href="#" onClick="document.getElementsByName('content')[8].value='睡得很好'">◎ 睡得很好</a></li>
                                <li><a href="#" onClick="document.getElementsByName('content')[8].value='拥有自己的房子'">◎ 拥有自己的房子</a></li>
                                <li><a href="#" onClick="document.getElementsByName('content')[8].value='忘记了'">◎ 忘记了</a></li>
                                <li><a href="#" onClick="document.getElementsByName('content')[8].value='努力做好自己'">◎ 努力做好自己</a></li></ul>
                        </div>
                    </li>
                </ul>
            </div>



        </div>
        <div style="height:30px;padding-left:360px;"><input type="submit" value="预览"></div>
    </form>
    <%@ include file="bottom.jsp" %>
</div>
</body>
</html>
图 3.9 写日记模块

5.2 预览日记模块

<%--
  Created by IntelliJ IDEA.
  User: binjo
  Date: 7/14/2019
  Time: 11:10 PM
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <title>预览九宫格日记</title>
    <style type="text/css">
        ul{
            list-style: none;
        }
        li{
            padding: 5px;
        }
    </style>
    <script type="text/javascript">
        window.onload=function(){
            document.getElementById("diaryImg").src="CreateImg";
        }
    </script>
</head>
<body bgcolor="#F0F0F0">
    <div id="box">
        <%@include file="top.jsp"%>
        <div>
            <ul>
                <li>标题:${sessionScope.title}</li>
                <li><img src="images/loading.gif" name="diaryImg" id="diaryImg"/></li>
                <li style="padding-left: 240px;">
                    <a href="#" onclick="history.back();">再改改</a>  
                    <a href="DiaryServlet?action=save">保存</a>
                </li>
            </ul>
        </div>
        <c:if test="${empty sessionScope.username}">
            <c:redirect url="index.jsp"></c:redirect>
        </c:if>
        <%@include file="bottom.jsp"%>
    </div>
</body>
</html>
图 3.10 预览日记
图 3.11 保存日记成功

总结

展示所有日记不显示时间,不显示删除,不显示删除已解决,修改如下代码

<c:if test="${sessionScope.username==diaryList.username}">

另,sessionScope.userName全部改为sessionScope.username

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.