需求分析

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

一些普通的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<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;

    }

}

配置文件

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页面

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

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

创建人与创建时间

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

<tr>

    <td class="tdBg" width="200px">创建人：</td>

    <td>

    </td>

    <td class="tdBg" width="200px">创建时间：</td>

    <td>

    </td>

</tr>

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

    <tr>

        <td class="tdBg" width="200px">创建人：</td>

        <td>

            <s:property value="#session.SYS_USER.name"/>

            <s:hidden value="#session.SYS_USER.name" name="info.creator"/>

        </td>

        <td class="tdBg" width="200px">创建时间：</td>

        <td>

            <s:date name="info.createTime" format="yyyy-MM-dd HH:MM"/>

            <s:hidden name="info.createTime"/>

        </td>

    </tr>

创建时间，我们可以直接在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页面用配置信息：

    <script type="text/javascript" charset="utf-8" src="${basePath}js/ueditor/ueditor.config.js"></script>

    <script type="text/javascript" charset="utf-8" src="${basePath}js/ueditor/ueditor.all.min.js"> </script>

    <script type="text/javascript" charset="utf-8" src="${basePath}js/ueditor/lang/zh-cn/zh-cn.js"></script>

    <script>

        //配置ueditor的根路径

        var UEDITOR_HOME_URL = "${basePath}js/ueditor/";

        var ue = UE.getEditor('editor');

    </script>

• 最后在我们的文本框中给出我们写的id就行了，也就是var ue = UE.getEditor('editor');中的editor

    <td colspan="3"><s:textarea id="editor" name="info.content" cssStyle="width:90%;height:160px;" /></td>

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

效果：

---

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

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

<script>

    setTimeout(function(){uParse('div',

            {

                'highlightJsUrl':'/ueditor/third-party/SyntaxHighlighter/shCore.js',

                'highlightCssUrl':'/ueditor/third-party/SyntaxHighlighter/shCoreDefault.css'})

    },300);

</script>

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

---

异步信息交互

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

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

绑定事件

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

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

    <span id="operator_<s:property value='infoId'/>">

      <s:if test="state==1">

            <a href="javascript:doPublic('<s:property value='infoId'/>',0)">停用</a>

        </s:if>

        <s:else>

            <a href="javascript:doPublic('<s:property value='infoId'/>',1)">发布</a>

        </s:else>

    </span>

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("<a href='javascript:doPublic(\""+infoId+"\",1)'>发布</a>");

                                    //将显示状态改成是停用

                                    $("#show_" + infoId).html("停用");

                                }else{//用户点击的是发布

                                    //将超链接改成停用

                                    $("#operator_"+infoId).html("<a href='javascript:doPublic(\""+infoId +"\",0)'>停用</a>");

                                    //将显示状态改成是发布

                                    $("#show_" + infoId).html("发布");

                                }

                            }else {

                                alert("更新失败，稍后重试");

                            }

                        },

                        //如果失败了，就提示给用户，不要让用户继续操作了

                        error:function () {

                            alert("更新失败，稍后重试");

                        }

                    }

            );

        }

    </script>

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

        }

    }

---