Diary（七）——日志信息添加

目录

 

1. dao层，写添加日志的方法；

2. MainTemp.jsp，主页面添加链接；

3.web层，在DiaryServlet里面写链接具体内容；

4. 前端页面，diarySave.jsp页面； 

5. web层，调用添加日志的具体方法；

6. 测试；

---

1. dao层，写添加日志的方法；

这里，在DiaryDao里面我们写一个添加日志的方法；

//添加日志的方法
	public int diaryAdd(Connection con,Diary diary) throws Exception{
		String sql="insert into t_diary values(null,?,?,?,now())";
		PreparedStatement pstmt=con.prepareStatement(sql);
		pstmt.setString(1, diary.getTitle());
		pstmt.setString(2, diary.getContent());
		pstmt.setInt(3, diary.getTypeId());
		return pstmt.executeUpdate();
	}

 

2. MainTemp.jsp，主页面添加链接；

先找到MainTemp.jsp，然后在导航栏的“写日记”这一块里面添加链接地址；

 

 

3.web层，在DiaryServlet里面写链接具体内容；

我们在web层里面找到DiaryServlet，并将链接传来的action进行处理；

if("show".equals(action)){
		    	diaryShow(request,response);
		} else if("preSave".equals(action)){
			diaryPreSave(request,response);
		}

这时再在DiaryServlet里面写一个preSave()方法； 

//预处理日志信息的方法
	protected void diaryPreSave(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		//将得到的mainPage和diarySave连接起来
		request.setAttribute("mainPage", "diary/diarySvae.jsp");
		//内部转发
		request.getRequestDispatcher("mainTemp.jsp").forward(request, response);
	}

 

4. 前端页面，diarySave.jsp页面； 

这里我们主要写一下添加日志的页面设计，这里还包含了ckeditor在线文本编辑器的运用； 

先看看ckeditor在线文本编辑器，这里将下载好的cdeditor包直接贴在WebContent目录下；

记得这里要在mainTemp.jsp文件里要引入ckeditor链接：

<script src="${pageContext.request.contextPath}/js/ckeditor/ckeditor.js"></script>

页面设计：

<div class="data_list">
		<div class="data_list_title">
			<img src="${pageContext.request.contextPath}/images/diary_add_icon.png"/>
			写日记
		</div>
		<!-- 写日志表单部分 -->
		<form action="diary?action=save" method="post" onsubmit="return checkForm()">
			<div>
				<!-- 日志标题部分 -->
				<div class="diary_title"><input type="text" id="title"  name="title" value="${diary.title }" class="input-xlarge"  style="margin-top:5px;height:30px;"  placeholder="日志标题..."/></div>
				<!-- ckeditor在线文本编辑器 -->
				<div>
					<textarea class="ckeditor" id="content" name="content">${diary.content }</textarea>
				</div>
				<!-- 选择日志类别部分 -->
				<div class="diary_type">
					<select id="typeId" name="typeId">
						<option value="">请选择日志类别...</option>
						<c:forEach var="diaryTypeCount" items="${diaryTypeCountList }">
							<option value="${diaryTypeCount.diaryTypeId }">${diaryTypeCount.typeName }</option>
						</c:forEach>
					</select>
				</div>
				<!-- 操作按钮部分 -->
				<div>
					<input type="submit" class="btn btn-primary" value="保存"/>
					<button class="btn btn-primary" type="button" onclick="javascript:history.back()">返回</button>
					<font id="error" color="red">${error }</font>  
				</div>
			</div>
		</form>
</div>

效果如图：

逻辑设计：

<script type="text/javascript">
	function checkForm(){
		var title=document.getElementById("title").value;
		/* 用ckeditor取其内容 */
		var content=CKEDITOR.instances.content.getData();
		var typeId=document.getElementById("typeId").value;
		if(title==null||title==""){
			document.getElementById("error").innerHTML="标题不能为空！";
			return false;
		}
		if(content==null||content==""){
			document.getElementById("error").innerHTML="内容不能为空！";
			return false;
		}
		if(typeId==null||typeId==""){
			document.getElementById("error").innerHTML="请选择日志类别！";
			return false;
		}
		return true;
	}
</script>

 

5. web层，调用添加日志的具体方法；

 这里面在前台写完日志后，form表单会给后台传入一个action=save；

我们根据这个action，来写一个将添加日志的方法与数据库关联起来的方法，也就是前后台连接；

//添加保存日志信息的方法
	protected void diarySave(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		//获取前台的数据
		String title=request.getParameter("title");
		String content=request.getParameter("content");
		String typeId=request.getParameter("typeId");
		Connection con=null;
		try {
			con=dbUtil.getCon();
			Diary diary=new Diary(title,content,Integer.parseInt(typeId));
			int saveNum=diaryDao.diaryAdd(con, diary);
			if(saveNum>0){
				//添加成功，跳转到日志列表页面
				request.getRequestDispatcher("main?all=true").forward(request, response);
			}else{
				request.setAttribute("diary", diary);
				request.setAttribute("error", "保存失败！");
				//将得到的mainPage和diarySave连接起来
				request.setAttribute("mainPage", "diary/diarySvae.jsp");
				//内部转发
				request.getRequestDispatcher("mainTemp.jsp").forward(request, response);
			}
		} catch (Exception e) {
			// TODO Auto-generated catch block
			e.printStackTrace();
		} finally{
			try {
				dbUtil.closeCon(con);
			} catch (Exception e) {
				// TODO Auto-generated catch block
				e.printStackTrace();
			}
		}
	}

当然这里写完方法后，还要在doPost()里面调用，也就是对传过来的action进行处理；

if("show".equals(action)){
			diaryShow(request,response);
		} else if("preSave".equals(action)){
			diaryPreSave(request,response);
		} else if("save".equals(action)){
			diarySave(request,response);
		}

 

6. 测试；

我们先在日记本里面写日记，选日志类别，然后保存；

 

结果：