博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
纳税服务系统十【信息发布管理、Ueditor、异步信息交互】
阅读量:6529 次
发布时间:2019-06-24

本文共 6898 字,大约阅读时间需要 22 分钟。


tags: 纳税服务系统项目


需求分析

我们现在来到了纳税服务系统的信息发布管理模块,首先我们跟着原型图来进行需求分析把:

一些普通的CRUD,值得一做的就是状态之间的切换了。停用和发布切换。

值得注意的是:在信息内容中,它可以带格式地复制内容,然后上传到我们的服务器中。

流程图:

编写JavaBean与配置文件

javaBean

package zhongfucheng.info.entity;import java.sql.Timestamp;import java.util.HashMap;import java.util.Map;public class Info implements java.io.Serializable {	private String infoId;	private String type;	private String source;	private String title;	private String content;	private String memo;	private String creator;	private Timestamp createTime;	private String state;		public static String INFO_STATE_PUBLIC = "1";//发布	public static String INFO_STATE_STOP = "0";//停用		public static String INFO_TYPE_TZGG = "tzgg";	public static String INFO_TYPE_ZCSD = "zcsd";	public static String INFO_TYPE_NSZD = "nszd";		public static Map
INFO_TYPE_MAP = new HashMap
(); static { INFO_TYPE_MAP.put(INFO_TYPE_TZGG, "通知公告"); INFO_TYPE_MAP.put(INFO_TYPE_ZCSD, "政策速递"); INFO_TYPE_MAP.put(INFO_TYPE_NSZD, "纳税指导"); } public Info() { } public Info(String title) { this.title = title; } public Info(String type, String source, String title, String content, String memo, String creator, Timestamp createTime, String state) { this.type = type; this.source = source; this.title = title; this.content = content; this.memo = memo; this.creator = creator; this.createTime = createTime; this.state = state; } public String getInfoId() { return this.infoId; } public void setInfoId(String infoId) { this.infoId = infoId; } public String getType() { return this.type; } public void setType(String type) { this.type = type; } public String getSource() { return this.source; } public void setSource(String source) { this.source = source; } public String getTitle() { return this.title; } public void setTitle(String title) { this.title = title; } public String getContent() { return this.content; } public void setContent(String content) { this.content = content; } public String getMemo() { return this.memo; } public void setMemo(String memo) { this.memo = memo; } public String getCreator() { return this.creator; } public void setCreator(String creator) { this.creator = creator; } public Timestamp getCreateTime() { return this.createTime; } public void setCreateTime(Timestamp createTime) { this.createTime = createTime; } public String getState() { return this.state; } public void setState(String state) { this.state = state; }}复制代码

配置文件

复制代码

常规增删改查


这现在对我们来说没有什么难度了,改之前写过的User模块就行了。

编写dao、编写service、编写action、编写配置文件

将配置文件加载到总配置文件中。

导入前端的JSP页面

弄完之后,简单的增删改查我们已经实现了。。

接下来就是处理一些不是常用增删改查的东西了。

创建人与创建时间

我们在添加的时候怎么写呢???在需求上,不是让我们填的,而是写死的。

    创建人:                    创建时间:             复制代码

创建人我们在Session中找到对应的用户,给出对应的值。显示出来后,在提交的时候还要通过隐藏域把数据带过去

        创建人:                    
创建时间:
复制代码

创建时间,我们可以直接在InfoAction中,new出Info对象,给出对应的值。在JSP页面就可以回显出来了。

当然了,我们也要通过隐藏域把数据带过去。

public String addUI() {        ActionContext.getContext().getContextMap().put("infoTypeMap", Info.INFO_TYPE_MAP);        info = new Info();        info.setCreateTime(new Timestamp(new Date().getTime()));        return "addUI";    }复制代码

!


富文本框编辑器

我们想要在那个大文本框中,把复制的内容是带有格式的,图片也可以复制过去。普通的textarea是搞不掂的,我们需要借助别的组件。。我们用的是Ueditor组件

使用步骤:

  • 导入ueditor/jsp/lib目录中的“**commons-codec-1.9.jar”、“json.jar”、“ueditor-1.1.1.jar”**这几个jar包到项目的web-inf/lib目录中。
  • 配置 ueditor 中图片上传前缀和路径;打开“ueditor/jsp/config.json”
"imageUrlPrefix": "http://localhost:8080", /* 图片访问路径前缀 */    "imagePathFormat": "/upload/ueditor/image/{yyyy}{mm}{dd}/{time}{rand:6}", /* 上传保存路径,可以自定义保存路径和文件名格式 */复制代码
  • 在需要用到ueditor的Jsp页面用配置信息:
            复制代码
  • 最后在我们的文本框中给出我们写的id就行了,也就是var ue = UE.getEditor('editor');中的editor
复制代码

富文本框的配置我们大多数可以在这里修改:

效果:


很奇怪的是,如果单单访问info模块的话,使用是完全没有问题的。但是在总系统进入到info模块时,富文本框就点击不了:输入会显示输入个数,但是显示不了内容。编辑的时候同样看不到内容。

于是在网上搜了一下:把以下的代码加入到要用到富文本框的JSP页面下就解决掉问题了:

复制代码

参考博文:


异步信息交互

最后地,我们剩下停用与发布这个功能还没完成...

其实就是一个异步信息交互的实现,当用户点击超链接为停用的时候,就到后台把数据更新,把Info的state变成为0,然后将超链接改成发布。

绑定事件

使用opertor前缀+id定位到我们的span节点中。这肯定是独一无二的。

位于iterator内,直接写state判断就行了。

      
停用
发布
复制代码

ajax进行交互

注意在拼接字符串的时候,不要有空格.........

error:如果出错了,可以提示用户。

function doPublic (infoId,state){            $.ajax(                    {                        url: "${basePath}info/info_doPublic.action",                        data: { "info.infoId": infoId,"info.state": state},                        type: "post",                        success: function (backData) {                            if ("更新成功" == backData) {                                if (state == 0) {//如果用户点击的是停用                                    //将超链接改成发布                                    $("#operator_"+infoId).html("发布");                                    //将显示状态改成是停用                                    $("#show_" + infoId).html("停用");                                }else{//用户点击的是发布                                    //将超链接改成停用                                    $("#operator_"+infoId).html("停用");                                                                        //将显示状态改成是发布                                    $("#show_" + infoId).html("发布");                                }                            }else {                                alert("更新失败,稍后重试");                            }                        },                        //如果失败了,就提示给用户,不要让用户继续操作了                        error:function () {                            alert("更新失败,稍后重试");                        }                    }            );        }    复制代码

Action处理

得到用户的id,查询出Info对象的信息,再设置Info对象的属性。

public void doPublic() {        try {            if (info != null) {                //得到用户带过来的id查询出该对象                Info objectById = infoServiceImpl.findObjectById(info.getInfoId());                //设置它的状态                objectById.setState(info.getState());                //调用service更新数据库                infoServiceImpl.update(objectById);                //返回数据给浏览器                HttpServletResponse response = ServletActionContext.getResponse();                response.setContentType("text/html charset=utf-8");                response.getOutputStream().write("更新成功".getBytes("UTF-8"));            }        } catch (IOException e) {            e.printStackTrace();        }    }复制代码

总结

  • 如果页面上的数据是写死的,那么我们就考虑一下是不是可以在域对象把数据带过去了。
  • 使用Ueditor来做富文本编辑器
  • 在页面上定位一个标签,我们可以使用特殊的前缀+上我们的Id。

如果您觉得这篇文章帮助到了您,可以给作者一点鼓励

转载地址:http://uwxbo.baihongyu.com/

你可能感兴趣的文章
jq鼠标经过之后图片效果(兼容ie8)
查看>>
【转】葬花吟
查看>>
[CF785E]Anton and Permutation
查看>>
第10周
查看>>
Qt 状态栏设置
查看>>
对象释放三种方法对比:Free --> FreeAndNil() --> DisposeOf()
查看>>
zabbix监控mysql数据库信息脚本
查看>>
mongodb用mongoose取到的对象不能增加属性
查看>>
组合数学模板
查看>>
JS---星星评分
查看>>
Java的I/O系统
查看>>
linux/unix shell bash script 小记
查看>>
一个由单例模式在多线程环境下引发的 bug
查看>>
BZOJ2882:工艺(SAM)
查看>>
Ubuntu12.10 使用DNW传数据 进行ARM开发板烧写
查看>>
spring boot 继承WebMvcConfigurationSupport后自动配置不生效问题
查看>>
Http与Https
查看>>
POJ 2407 (欧拉函数)
查看>>
(七)Centos之链接命令
查看>>
(三)UML之类图关系
查看>>