納稅服務系統【信息發佈管理、Ueditor、異步信息交互】

時間 2019-11-21

標籤納稅服務系統信息發佈管理 ueditor 異步交互简体版

原文原文鏈接

需求分析

咱們如今來到了納稅服務系統的信息發佈管理模塊，首先咱們跟着原型圖來進行需求分析把：javascript

一些普通的CRUD，值得一作的就是狀態之間的切換了。停用和發佈切換。
css

值得注意的是：在信息內容中，它能夠帶格式地複製內容，而後上傳到咱們的服務器中。html

流程圖：前端

編寫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模塊就好了。java

編寫dao、編寫service、編寫action、編寫配置文件web

將配置文件加載到總配置文件中。ajax

導入前端的JSP頁面sql

弄完以後，簡單的增刪改查咱們已經實現了。。
數據庫

接下來就是處理一些不是經常使用增刪改查的東西了。json

建立人與建立時間

咱們在添加的時候怎麼寫呢？？？在需求上，不是讓咱們填的，而是寫死的。

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


    }

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。