基于ssm框架的个人博客系统(11)--后台开发及前后端数据交互

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/lys1695227550/article/details/78149918

前面做了一个前台页面,个人感觉不会太丑(图都自己简单PS的),现在的话, 我们就来测试一下前台准备的数据,这里有个值得一提的是,我们的博客类别,在系统中运用的算是比较多的,这样的话,每次使用都直接查询数据库会对数据库造成一定的压力(其实,我这个系统搞完了,尽管上线了,估计也没什么访问量,别说并发啊,数据库资源吃紧啊,这些不好的事情都和我的系统没什么关系,但是该做的还是得做凡事总有万一),在面对访问量、并发量过大的数据,架构师第一想到的解决方案就是缓存,这是很好的解决方案。现在缓存的话,我们就得考虑,在哪做缓存?缓存什么内容?使用什么做缓存?

(切记,我不是单纯将这个系统的需求,这个系统哪要什么缓存,就算要,也就放在application域里面就够了)

          懂application生命周期的别朋友可能会问了:那不是服务器宕机、重启就丢数据了吗?对于这个问题,在我们这个系统就不是问题,因为我们缓存的是blogtype,这种数据在application中丢了,有关系吗?那就重新向数据库要咯,总不能你几毫秒重启一次服务器吧!

现在便于测试,我就先不整这个东西了,我们先来检查前台给我们准备的数据。


准备的数据如下:


可以了,和我们想要的东西都是一致的,(blogTypeid我说了,我强行给了一个1,用做测试)

要把数据放在application中,我们就得知道什么时候服务器启动,这时候监听器就派上大用场了,我们使用的是ServletContextListener,具体前看代码

package com.lailai.common.utils;

import java.util.List;

import javax.servlet.ServletContext;
import javax.servlet.ServletContextEvent;
import javax.servlet.ServletContextListener;

import org.springframework.context.ApplicationContext;
import org.springframework.web.context.ContextLoader;

import com.lailai.entity.TBlogtype;
import com.lailai.service.BlogTypeService;

/**
 * Application Lifecycle Listener implementation class typeIdListener
 *
 */
public class typeIdListener implements ServletContextListener {
	public typeIdListener() {
	}
	public void contextDestroyed(ServletContextEvent arg0) {
	}

	public void contextInitialized(ServletContextEvent sce) {
		//就是被监听的对象---ServletContext
		ServletContext servletContext = sce.getServletContext();		
		//下面这个是在spring容器中拿到BlogTypeService这个bean的引用,因为我们要在项目启动时查询blogType 
		ApplicationContext applicationContext = ContextLoader.getCurrentWebApplicationContext();
		BlogTypeService blogTypeService = applicationContext.getBean(BlogTypeService.class);
		//调用Server查询,之前没写,所以自行添加
		List<TBlogtype> typeList = blogTypeService.selectBlogTypeList();
		//blogTypeService中放数据,页面使用el表达式取数据
		servletContext.setAttribute("typeList", typeList);
	}
}

Service层和Dao层就是之前的分页查询BlogType函数的缩减版,就是不分页。(避免冗余,我就不贴了)

上一篇文章写的editBlog.jsp中写的页面是通过el表达式读取的(在这不说太多el表达式,就说一点:el表达式域的范围从小到大读取,在pageContext、request、session这些域中都没找到,所以使用的是application域。)

注释掉之前测试用的//blogTypeId="1";重新查看页面是否返回了blogtype。


获取blogType测试成功,现在来处理后台了

今天写这块的时候真的是mmp啊!遇到了一大堆的问题,有个问题至今留着,我也不想搞了,思路清晰,就是烦了很久,没出来(就是修改博客时不能够回显博客类型,其他的问题都已经解决了,真的是醉了)

废话不多说,直接说我遇到的一些问题

1)还是ajax返回的数据在外面不能使用的问题,这个之前提到,就是使用同步就能解决,但是今天就是手贱,定义的时候多了个var

导致在外面一直拿不到值(jsp页面出错不好找啊),搞了半天,才发现加了var。

2)写博客,我们之前是使用UE,这个工具啊!我也是第一次用,我对一些api不够熟悉,导致我走了不少弯路,讲个最让我痛心得就是,我是使用easyui弹出的窗口作为编辑的平台,但是出现一个问题就是没怎么将UE中的 内容赋值 啊,这个东西,我待会在代码中会体现,就不贴上了。大致就是先实例化UE,然后再赋值。(这还不是最痛心的,最烦的就是一些js的值的范围,我还不能分的很清,导致一些我认为能够传参的变量,根本不能获取值(后面要专门搞一搞这方面),然后ajax的方式又一堆,前后台的数据传输变量基本上都是根据 实体的属性名的,错了字母,报错还超级差,烦死了)

算了,不bb了,现在贴上代码:

showBlogAllInfo.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!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">
<title>博客管理</title>
<%@include file="../common/head.jspf"%>
<script type="text/javascript" charset="utf-8"
	src="${pageContext.request.contextPath }/js/UEditor/ueditor.config.js"></script>
<script type="text/javascript" charset="utf-8"
	src="${pageContext.request.contextPath }/js/UEditor/ueditor.all.min.js"></script>
<script type="text/javascript" charset="utf-8"
	src="${pageContext.request.contextPath }/js/UEditor/lang/zh-cn/zh-cn.js"></script>

<script type="text/javascript">
$(function() {
	//datagrid初始化
	$('#dg').datagrid({
		//请求数据的url
		url : '${pageContext.request.contextPath}/admin/Selectmh',
		//载入提示信息
		loadMsg : 'loading...',
		//水平自动展开,如果设置此属性,则不会有水平滚动条,演示冻结列时,该参数不要设置
		fitColumns : true,
		//数据多的时候不换行
		nowrap : true,
		//设置分页
		pagination : true,
		//设置每页显示的记录数,默认是10个
		pageSize : 5,
		//每页显示记录数
		pageList : [ 2, 5, 10, 15, 20 ],
		//指定id为标识字段,在删除,更新的时候有用,如果配置此字段,在翻页时,换页不会影响选中的项
		idField : 'id',
		//上方工具条 添加 修改 删除 刷新按钮  '-'是分割符
		toolbar : [
			{  
	            text: '标题:<input type="text" id="s_title"/>'  
	        },'-',
			{
				iconCls : 'icon-search',
				text : '查询',
				handler : function() {
					str = $("#s_title").val();
					$('#dg').datagrid({ url: '${pageContext.request.contextPath}/admin/Selectmh'});
					$("#dg").datagrid("load",{
						str:str
					}); 
				}
			} ,'-',
			{
				iconCls : 'icon-edit',
				text : '编辑',
				handler : function() {
					//获取选中的行
					var selectedRows = $("#dg").datagrid("getSelections");
					//多行选择提示
					if (selectedRows.length != 1) {
						$.messager.alert("系统提示", "请选择一个要博客类别进行修改");
						return;
					}
					//获取选中的id
					var row = selectedRows[0];
					id=row.id
					$('#win').window('open'); // open a window 
					//$("#fm").form("load", row);//会自动识别name属性,将row中对应的数据,填充到form表单对应的name属性中
					
	/* 				$.post("${pageContext.request.contextPath}/admin/getBlog",
							     {"id": row.id}, function(result){
			                            //核心啊,UE回显啊 
			        					// 实例化编辑器

			        				    $("#title").attr("value",result.title);
			        				    $("#keyWord").attr("value",result.keyword); 
			                        } 
			                    );  */
					
					$.ajax({
						type : "POST",
						url : "${pageContext.request.contextPath}/admin/getBlog",
						data : {
							"id" : row.id
						},
						async : false, //核心啊 ,因为这个我调了很久,必选是同步,才能使用ajax中的变量
						success : function(result) {
							 content=result.content;//绝对不能加var
        				    $("#title").attr("value",result.title);
        				    $("#keyWord").attr("value",result.keyword); 
						}
					});
					
					//alert(content);
 				   	var ue = UE.getEditor('editor');
				    ///异步回调
				   ue.ready(function() {
				        ue.execCommand('inserthtml', content);
				   });  
	
				//回显下拉框先不做,也还不会 不会做
				 
				    
				}
			} ,'-',
			{
			iconCls : 'icon-edit',
			text : '删除',
			handler : function() {
                 //获取选中要删除的行
		        var selectedRows = $("#dg").datagrid("getSelections");
		        //判断是否有选择的行
		        if(selectedRows.length == 0) {
		            $.messager.alert("系统提示", "请选择要删除的数据");
		            return;
		        }
		        //定义选中 选中id数组
		        var idsStr = [];
		        //循环遍历将选中行的id push进入数组
		        for(var i = 0; i < selectedRows.length; i++) {
		            idsStr.push(selectedRows[i].id);
		        }
		        //将数组安装,连接成字符串
		        var ids = idsStr.join(","); //1,2,3,4
		        //提示是否确认删除
		        $.messager.confirm("系统提示", "<font color=red>您确定要删除选中的"+selectedRows.length+"条数据么?</font>", function(r) {
		            if(r) {
		            	
		                $.post("${pageContext.request.contextPath}/admin/deleteBlog",
		                    {"ids": ids}, function(result){
		                    
		                        if(result.status==400) {
		                            $.messager.alert("系统提示", '该类别下有博客,不能删除!');
		                        } else if(result.status==200) {
		                            $.messager.alert("系统提示", "数据删除成功!");
		                            $("#dg").datagrid("reload");
		                        } else {
		                            $.messager.alert("系统提示", "数据删除失败!");
		                        }
		                    });
		            }
		        });
			}
		}, '-', {
			iconCls : 'icon-reload',
			text : '刷新',
			handler : function() {
				$("#dg").datagrid("reload");
			}
		} ],
		//同列属性,但是这些列将会冻结在左侧
		frozenColumns : [ [ {
			field : 'checkbox',
			checkbox : true
		},
		{
			field : 'id',
			title : '编号',
			width : 80
		} 
		] ],
		columns : [ [ {
			field : 'title',
			title : '标题',
			width : 150
		}, 
		{
			field : 'keyword',
			title : '关键字',
			width : 150
		},
		{
			field : 'summary',
			title : '简介',
			width : 400
		},
		{
			field : 'releasedate',
			title : '发表日期',
			width : 120,
			formatter:function(value){
				var date = value;
				if(date==null){
					return "";
				}else{
					var showtime = new Date(date);
					return showtime.getFullYear()+"-"+(showtime.getMonth()+1)+"-"+showtime.getDate()
					+"  "+showtime.getHours()+":"+showtime.getMinutes()+":"+showtime.getSeconds();
				}
			}
		}, 
		{
			field : 'typeId',
			title : '博客类别',
			width : 50,
			formatter:function(value){
				var typeId = value;
				$.ajax({
					type : "POST",
					url : "${pageContext.request.contextPath}/admin/selectBlogType",
					data : {
						"typeId" : typeId
					},
					async : false, //核心啊 ,因为这个我调了很久,必选是同步,才能使用ajax中的变量
					success : function(result) {
						if (result.status == 200) {
							str = result.data.typename;
						}
					}
				});
				if (str == null || str == "") {
					return value;
				}else{
					return str;
				}
				
			}
		},
		{
			field : 'clickhit',
			title : '评论次数',
			width : 50
		},
		{
			field : 'replyhit',
			title : '回复次数',
			width : 50
		}
		
		
		] ],
	});
});




</script>
</head>
<body>
	<table id="dg"></table>
	<!--  编辑博客的窗口-->
	<div id="win" class="easyui-window" title="编辑博客" closed=true
		style="width: 1500px; height: 700px"
		data-options="iconCls:'icon-save',modal:true">

		<form id="fm" method="post">

			<table cellspacing="20px">
				<tr>
					<td colspan="2">
						<div>
							<div style="width: 500px; float: left">
								标题:         <input
									type="text" id="title" name="title" style="width: 200px" />
							</div>
							<div>
								类别:         <select
									id="blogTypeId" class="easyui-combobox" name="blogType.id"
									style="width: 160px" editable="false" panelHeight="auto">
									<option value="">--请选择博客类别--</option>
									<c:forEach items="${typeList}" var="type">
										<option value="${type.id}">${type.typename }</option>
									</c:forEach>
								</select>
							</div>
						</div>
					</td>
				</tr>
				<tr>
					<td width="60px">关键字:</td>
					<td><input type="text" id="keyWord" name="keyword"
						style="width: 400px" />    多个关键字的话,用空格隔开</td>
				</tr>

				<tr>
					<td valign="top" style="width: 50px;">内容:</td>
					<td><script id="editor" name="content" type="text/plain"
							style="width:95%; height:450px;"></script></td>
				</tr>
				<tr>
					<td colspan="2" align="center"><a href="javascript:check()"
						class="easyui-linkbutton" data-options="iconCls:'icon-submit'">发布博客</a></td>
				</tr>
			</table>
			<!-- 实例化编辑器 -->
		</form>
	</div>
	<script type="text/javascript">
		var ue = UE.getEditor('editor');
	</script>
	<script type="text/javascript">

		
		function check() {
			//获取标题
			var title=  $("#title").val();
			//获取类别id
			var blogTypeId = $("#blogTypeId").combobox("getValue");
			//获取关键词
			var keyWord = $("#keyWord").val();
			//获取内容 带标签
			var content = UE.getEditor('editor').getContent();
			//截取正文(无标签)前200字符 作为博客简介
			var summary = UE.getEditor('editor').getContentTxt().substr(0, 200);
			//获取内容 (无标签)
			var contentNoLabel = UE.getEditor('editor').getContentTxt();
			//校验

			if (title == null || title == '') {
				$.messager.alert("系统提示", "请输入标题!");
			} else if (blogTypeId == null || blogTypeId == '') {
				$.messager.alert("系统提示", "请选择博客类型!");
			} else if (content == null || content == '') {
				$.messager.alert("系统提示", "请编辑博客内容!");
			} else {
				//ajax请求 请求后台写博客接口
				$.post("${pageContext.request.contextPath}/admin/saveBlog", {
					'id':   id,
					'title' : title,
					'typeId' : blogTypeId,
					'keyword' : keyWord,
					'content' : content,
					'summary' : summary,
					'contentNoLabel' : contentNoLabel
				}, function(result) {
					if (result.status == 200) {
						$.messager.alert("系统提示", "博客发布成功!");
						clearInfo();
					} else {
						$.messager.alert("系统提示", "博客发布失败!");
					}
				}, "json");
			}
		}
		//清空页面所有的信息
		function clearInfo() {
			$("#title").val("");
			$("#blogTypeId").combobox("setValue", "");
			$("#keyWord").val("");
			UE.getEditor("editor").setContent("");
		}
	</script>


</body>
</html>

BlogController.java

	//跳转到编辑博客界面
	@RequestMapping("writeBlog")
	public String gotoWrite() {
		return "admin/editBlog";
	}
	//跳转到博客信息管理界面
	@RequestMapping("showBlogAll")
	public String showBlogInfo() {
		return "admin/showBlogAllInfo";
	}
	// 添加或更新博客
	@RequestMapping("saveBlog")
	@ResponseBody
	public MyResult saveBlog(TBlog blog) {
		Integer n;
		if (blog.getId() == null) {
			n = blogService.saveBlog(blog);
		} else {
			n = blogService.updateBlog(blog);
		}
		if (n > 0) {
			return MyResult.ok();
		}
		return MyResult.build(400, "操作失败");
	}
上述就是最为关键的代码啊!希望能给读者带来一些帮助,喜欢我文章的朋友关注我,文章还在不断编辑中......

由于我的数据表没有用户表,我当初设计的时候并没有想搞个用户表,所以这就没有登入查看博客事情了,我也不想往下走了,基本的技术,怕是还有ssm的拦截器了(用于用户登入判断),全局异常处理。。。。。没事,来日方长,慢慢来!

END


展开阅读全文

没有更多推荐了,返回首页