前面做了一个前台页面,个人感觉不会太丑(图都自己简单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