【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" />&nbsp;&nbsp;&nbsp;多个关键字的话请用空格隔开</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 今天就到这里

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏互联网技术栈

Redis 队列

举例: 队列主要用在系统解耦、流量削峰、异步处理、数据顺序处理等场景。新手在使用时可能会犯一些常见的错误。下面讲一个新手容易犯的错误,在这个示例中把队列的入...

4325
来自专栏云计算教程系列

使用Capistrano,Nginx和Puma在Ubuntu 14.04上部署Rails应用程序

Rails是一个用Ruby编写的开源Web应用程序框架。Nginx是一种高性能HTTP服务器,反向代理和负载均衡器,以其并发性,稳定性,可伸缩性和低内存消耗而著...

1604
来自专栏何俊林

一个强大的网络库RxEasyHttp

本文来自周游的投稿,封装的网络请求库,github:https://github.com/zhou-you/RxEasyHttp,欢迎点击【阅读原文】,查看更多...

3918
来自专栏数据和云

【12.2新特性】In-Memory列存储的FastStart管理

启用IM列存储时,In-Memory FastStart通过将IMCU直接存储在磁盘上来优化IM列存储中数据库对象的数量,使数据库通过将列数据存储在磁盘上更快地...

3589
来自专栏后端技术探索

7个角度进行nginx性能优化

在大多数情况下,一个常规安装的Nginx对网站来说已经能很好地工作了。然而如果想挤压出Nginx的性能,就需要了解哪些指令会影响Nginx性能,在本文中将解释N...

1462
来自专栏互扯程序

HTTP状态码大全

写在前面 我们在开发Web服务的时候,经常会遇到404,500等错误。对于初学者来说遇到错误,不知如何下手,今天我们来看看每个状态都表示什么意思? HTTP状...

4214
来自专栏极客猴

Django 实战2:利用 Session 实现自动登录机制

上篇文章中讲到 Django 如何启动以及配置 sessions 功能。sessions 功能用是跟踪用户的状态,经常结合 Cookie 功能实现自动登录功能。...

2203
来自专栏决胜机器学习

《Redis设计与实现》读书笔记(十六) ——Redis文件事件 (原创内容,转载请注明来源,谢谢)

《Redis设计与实现》读书笔记(十六) ——Redis文件事件 (原创内容,转载请注明来源,谢谢) 一、概述 redis服务器是一个事件驱动...

3106
来自专栏偏前端工程师的驿站

网页优化系列一:合并文件请求(asp.net版)

  最近因公司需要对网站的优化处理学习了一番,现在借本系列博文与大家分享一下自己的学习成果,有纰漏处请大家多多指正。   首先推荐一篇十分全面的网页优化文章  ...

2178
来自专栏散尽浮华

进程管理利器-supervisor部署记录

一、简单介绍 supervisor是用来管理进程的一个工具,止于为什么要用supervisor,是因为相对于linux传统的进程管理方式来说,它有很多的优势: ...

3848

扫码关注云+社区

领取腾讯云代金券