【ssm个人博客项目实战09】写博客与自定义监听器1、2、3、
【ssm个人博客项目实战09】写博客与自定义监听器1、2、3、
前面我们已经完成了博客的分页显示模糊查询删除等功能，现在我们就讲一下如何实现写博客与修改博客的功能。
1、
写博客 顾名思义肯定要要写 所以我用了一个富文本编辑器（百度UE） 当然大家有更好的选择可以使用自己熟悉的富文本编辑器 或者使用markdown编辑器。 这里我就以百度UE为示例来给大家讲解。 首先给大家看一下写博客的界面
写博客
修改博客
2、
首先我们来了解一下百度UE怎么使用 1、下载百度UE插件 2、新建一个html页面 并且写入以下代码
image.png
3、使用浏览器的方式打开该页面就能看到运行结果 如图下
image.png
4、具体详细配置使用请参考下面网址
现在我们已经初步了解百度UE如何使用 那么就可以正式开始我们的开发了！
首先我们在admin目录下面新建一个writeBlog.jsp
然后同样的导入我们的公共头文件 <%@include file="./common/head.jspf"%> 这样我们easyui所用到的一些js或者css就载入进来了 另外我们还需要把百度UE相关的js引入
<script type="text/javascript" charset="utf-8"
src="${blog}/static/ueditor1_4_3_3/ueditor.config.js"></script>
<script type="text/javascript" charset="utf-8"
src="${blog}/static/ueditor1_4_3_3/ueditor.all.min.js">
</script>
<!--建议手动加在语言，避免在ie下有时因为加载语言失败导致编辑器加载失败-->
<!--这里加载的语言文件会覆盖你在配置项目里添加的语言类型，比如你在配置项目里配置的是英文，这里加载的中文，那最后就是中文-->
<script type="text/javascript" charset="utf-8"
src="${blog}/static/ueditor1_4_3_3/lang/zh-cn/zh-cn.js"></script>然后根据百度UE的相关文件写出以下代码 等下我解释相关代码的作用
<body style="margin: 10px; font-family: microsoft yahei">
<div id="p" class="easyui-panel" title="编写博客" style="padding: 10px;">
<table cellspacing="20px">
<tr>
<td width="80px">博客标题：</td>
<td><input type="text" id="title" name="title" style="width:400px" /></td>
</tr>
<tr>
<td>所属类别：</td>
<td><select id="blogTypeId" class="easyui-combobox"
name="blogType.id" style="width:154px" editable="false"
panelHeight="auto">
<option value="">请选择博客类别...</option>
<c:forEach items="${blogTypeList }" var="blogType">
<option value="${blogType.id }">${blogType.typeName }</option>
</c:forEach>
</select></td>
<td></td>
</tr>
<tr>
<td valign="top">博客内容：</td>
<td><script id="editor" name="content" type="text/plain"
style="width:95%; height:200px;"></script></td>
</tr>
<tr>
<td>关键字：</td>
<td><input type="text" id="keyWord" name="keyWord"
style="width:400px" /> 多个关键字的话请用空格隔开</td>
</tr>
<tr>
<td></td>
<td><a href="javascript:submitData()" class="easyui-linkbutton"
data-options="iconCls:'icon-submit'">发布博客</a></td>
</tr>
</table>
</div>
<!-- 实例化编辑器 -->
<script type="text/javascript">
var ue = UE.getEditor('editor');
</script>
<script type="text/javascript">
/**
* 发布博客
*/
function submitData() {
//获取博客标题
var title = $("#title").val();
//获取博客类别id
var blogTypeId = $("#blogTypeId").combobox("getValue");
//获取博客内容 带标记
var content = UE.getEditor('editor').getContent();
//截取博客前155字符 作为博客简介
var summary = UE.getEditor('editor').getContentTxt().substr(0, 155);
//博客关键词
var keyWord = $("#keyWord").val();
//获取博客内容 不带标签 纯文本
var contentNoTag = 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("${blog}/admin/blog/save.do",
{
'title' : title,
'blogType.id' : blogTypeId,
'content' : content,
'summary' : summary,
'keyWord' : keyWord,
'contentNoTag' : contentNoTag
}, function(result) {
if (result.success) {
$.messager.alert("系统提示", "博客发布成功！");
clearValues();
} else {
$.messager.alert("系统提示", "博客发布失败！");
}
}, "json");
}
}
//清空功能
function clearValues() {
$("#title").val("");
$("#blogTypeId").combobox("setValue", "");
UE.getEditor("editor").setContent("");
$("#keyWord").val("");
}
</script>
</body>首先要解释的是“博客类型” 因为当我写一篇博客的时候我需要给这篇博客选中一个类别 意味着当我打开这个页面的时候我就应该把数据库中所存的所有博客类别给查询出来然后把发给我们的前端视图，因为我们的修改博客界面也需要这个一博客类型信息，所以我就用一个监听器来实现查询博客类型这个功能。
首先我们新建一个listener包 用于存放监听器
然后新建一个自定义监听器
@Component
/**
* @Author xp
* @Description 监听程序初始化
* @Date 2017/4/23 21:48
*/
public class InitBloggerData implements ServletContextListener, ApplicationContextAware {
private static ApplicationContext applicationContext;
public void contextInitialized(ServletContextEvent sce) {
//先获取servlet上下文
ServletContext application = sce.getServletContext();
//同上，获取博客类别信息service
BlogTypeService blogTypeService = applicationContext.getBean(BlogTypeService.class);
List<BlogType> blogTypeList = blogTypeService.getBlogTypeData();
application.setAttribute("blogTypeList", blogTypeList);
}
public void contextDestroyed(ServletContextEvent sce) {
// TODO Auto-generated method stub
}
public void setApplicationContext(ApplicationContext applicationContext)
throws BeansException {
InitBloggerData.applicationContext = applicationContext;
}
}实现一个用于自定义监听器 实现要实现ServletContextListener接口 由于我们要获取spring容器 所以我们还要实现ApplicationContextAware接口 并且实现对应的方法。 然后通过spring容器获取的我们的BlogTypeService对象 获取到博客类型列表blogTypeList 并且把它存到我们的application中 这样我们的自定义监听器就配置ok 但是还没有完成。 我们需要在web.xml中配置一下我们的监听器 需要注意的是我们的监听器配置代码的位置一定要在spring监听器的下面 因为我们的监听器依赖于spring监听器
<listener>
<listener-class>ssm.blog.listener.InitBloggerData</listener-class>
</listener>当我们获取到了blogTypeList我们就可以通过jstl的foreach把博客类别遍历并且放在select中
其他代码 注解讲的都很详细 我就不在说了。
这样 我们的写博客功能就算完成
3、
测试
image.png
image.png
ok 今天就到这里