前面做了一个前台页面，个人感觉不会太丑（图都自己简单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
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
