納稅服務系統【用戶模塊之日期組件、上傳頭像、編輯頭像】

前言

前面咱們在寫用戶模塊的時候還有一些沒有解決掉的問題：

日期組件

咱們都知道Struts2僅僅只會自動封裝yyyy-MM-dd格式的日期數據，若是不是這個格式，它就會報錯。咱們也能夠自定義類型轉換器來讓Struts2匹配多種的日期格式。自定義類型轉換器咱們已經會了。

咱們來用用wdatepicker日期組件，這個組件從源頭上就把日期格式定義成yyyy-MM-dd格式了。

導入文件夾到js目錄

引入日期組件

添加用戶界面和編輯用戶界面都要引入：

<script type="text/javascript" src="${basePath}js/datepicker/WdatePicker.js"></script>

在日期上使用

<tr>
            <td class="tdBg" width="200px">生日：</td>
            <td><s:textfield id="birthday" name="user.birthday" readonly="true" onfocus="WdatePicker({'skin':'whyGreen','dateFmt':'yyyy-MM-dd'});"/></td>
        </tr>

---

編輯頁面

當使用了日期控件的時候，若是不指定格式，回顯日期的格式是有點亂的：

所以，咱們在指定回顯的日期格式：

<td class="tdBg" width="200px">生日：</td>
    <td>
        <s:textfield id="birthday" name="user.birthday" readonly="true" onfocus="WdatePicker({'skin':'whyGreen','dateFmt':'yyyy-MM-dd'})">
            <s:param name="value">
                <s:date name='user.birthday' format='yyyy-MM-dd'/>
            </s:param>
        </s:textfield>
    </td>

---

新增上傳頭像

咱們在學習Struts2的時候已經說過Struts2也爲咱們封裝了上傳文件的功能。用起來特別簡單：http://blog.csdn.net/hon_3y/article/details/71091593

Action處理

Action給出對應的屬性值，和setter()方法

/*************上傳頭像************************/
    private File headImg;
    private String headImgFileName;
    private String headImgContentType;

    public void setHeadImg(File headImg) {
        this.headImg = headImg;
    }

    public void setHeadImgFileName(String headImgFileName) {
        this.headImgFileName = headImgFileName;
    }

    public void setHeadImgContentType(String headImgContentType) {
        this.headImgContentType = headImgContentType;
    }

Action業務方法

 public String add() throws IOException { if (user != null) { //判斷用戶有沒有傳入頭像 if (headImg != null) { //獲得要把頭像上傳到服務器的路徑 javax.servlet.ServletContext servletContext = ServletActionContext.getServletContext(); String realPath = servletContext.getRealPath("upload/user"); //因爲用戶上傳的名字可能會相同，若是相同就被覆蓋掉，所以咱們要修改上傳文件的名字【獨一無二】 headImgFileName = UUID.randomUUID().toString() + headImgFileName.substring(headImgFileName.lastIndexOf(".")); FileUtils.copyFile(headImg, new File(realPath, headImgFileName)); } //設置圖片與用戶的關係 user.setHeadImg(headImgFileName); userServiceImpl.save(user); //跳轉到列表顯示頁面 return "list"; } return null; }

效果：

---

修改上傳頭像

editUI

在編輯顯示的時候，須要判斷該用戶是否有沒有上傳圖片，有的話才顯示。否則就會出現一張沒法顯示的圖片。

<td>

        <%--未必用戶就有上傳圖片，所以須要判斷一下--%>
        <s:if test="%{user.headImg != null && user.headImg != ''}">
            <img src="${basePath}upload/user/<s:property value="user.headImg"/>" width="100" height="100"/>
        </s:if>

        <input type="file" name="headImg"/>
    </td>

Action處理

用戶修改時，Action的處理和新增是同樣的。也是判斷JSP頁面有沒有把圖片帶過來，若是有，修改就好了。

public String edit() throws IOException {
        //Struts2會自動把JSP帶過來的數據封裝到User對象上
        if (user.getId() != null && user != null) {
            if (headImg != null) {

                //獲得要把頭像上傳到服務器的路徑
                javax.servlet.ServletContext servletContext = ServletActionContext.getServletContext();
                String realPath = servletContext.getRealPath("upload/user");
                //因爲用戶上傳的名字可能會相同，若是相同就被覆蓋掉，所以咱們要修改上傳文件的名字【獨一無二】
                headImgFileName = UUID.randomUUID().toString() + headImgFileName.substring(headImgFileName.lastIndexOf("."));
                FileUtils.copyFile(headImg, new File(realPath, headImgFileName));

                //設置圖片與用戶的關係
                user.setHeadImg(headImgFileName);
            }

            userServiceImpl.update(user);
        }
        return "list";
    }

效果：