纳税服务系统【信息发布管理、Ueditor、异步信息交互】

àì夳堔傛蜴生んèń 2021-09-17 06:58 292阅读 0赞

# 需求分析 #

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

**一些普通的CRUD，值得一做的就是状态之间的切换了。停用和发布切换。**  
![这里写图片描述][SouthEast]

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

![这里写图片描述][SouthEast 1]

流程图：

![这里写图片描述][SouthEast 2]

# 编写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<String, String> INFO_TYPE_MAP = new HashMap<String, String>();
        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页面

弄完之后，简单的增删改查我们已经实现了。。  
![这里写图片描述][SouthEast 3]

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

# 创建人与创建时间 #

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

创建人我们在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";
        }

!![这里写图片描述][SouthEast 4]

--------------------

# 富文本框编辑器 #

我们想要在那个大文本框中，**把复制的内容是带有格式的，图片也可以复制过去**。普通的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

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

![这里写图片描述][SouthEast 5]

效果：

![这里写图片描述][SouthEast 6]

--------------------

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

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

参考博文：[http://blog.csdn.net/eightwhells/article/details/13314069][http_blog.csdn.net_eightwhells_article_details_13314069]

--------------------

# 异步信息交互 #

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

![这里写图片描述][SouthEast 7]

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

## 绑定事件 ##

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

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

## ajax进行交互 ##

**注意在拼接字符串的时候，不要有空格………**

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

## 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();
            }
    
    
        }

--------------------

[SouthEast]: /images/20210827/f66a21a9816f4ef993eaa2d85dab93cc.png
[SouthEast 1]: /images/20210827/142f26e49ef3419ab4f655b0ad892468.png
[SouthEast 2]: /images/20210827/89f7b24ae06b474c9572a223d61fa7d4.png
[SouthEast 3]: /images/20210827/c24b13e607dc445ab7da65b7ed8054fc.png
[SouthEast 4]: /images/20210827/53af537178594edfa6e1278caa60375f.png
[SouthEast 5]: /images/20210827/3819c8fd18924bafabef86b2ea6a6160.png
[SouthEast 6]: /images/20210827/9e1abb87b1db4feaada54aef7d300796.png
[http_blog.csdn.net_eightwhells_article_details_13314069]: http://blog.csdn.net/eightwhells/article/details/13314069
[SouthEast 7]: /images/20210827/5cf27e17bc6a4ac1af9783bff7818668.png