纳税服务系统【用户模块之日期组件、上传头像、编辑头像】

╰半夏微凉° 2021-09-17 06:50 418阅读 0赞

# 前言 #

前面我们在写用户模块的时候还有一些没有解决掉的问题：

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

# 日期组件 #

**我们都知道Struts2仅仅只会自动封装yyyy-MM-dd格式的日期数据，如果不是这个格式，它就会报错。我们也可以自定义类型转换器来让Struts2匹配多种的日期格式。自定义类型转换器我们已经会了。**

**我们来用用wdatepicker日期组件，这个组件从源头上就把日期格式定义成yyyy-MM-dd格式了。**

## 导入文件夹到js目录 ##

![a][]

## 引入日期组件 ##

**添加用户界面和编辑用户界面都要引入：**

## 在日期上使用 ##

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

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

## 编辑页面 ##

当使用了日期控件的时候，如果不指定格式，回显日期的格式是有点乱的：

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

因此，我们在指定回显的日期格式：

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

# 新增上传头像 #

**我们在学习Struts2的时候已经说过Struts2也为我们封装了上传文件的功能**。用起来特别简单：[http://blog.csdn.net/hon\_3y/article/details/71091593][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; }

## 效果： ##

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

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

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

# 修改上传头像 #

## 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";
        }

## 效果： ##

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

[SouthEast]: /images/20210827/e44b2aec8c524e7b94ff563180ff1b8a.png
[a]: /images/20210827/255b8d1dba76464fa3185838c273d004.png
[SouthEast 1]: /images/20210827/6d0886df695f4bd3bfc91d46ee4165df.png
[SouthEast 2]: /images/20210827/86f2225bdf374cddb90e7560a278535d.png
[http_blog.csdn.net_hon_3y_article_details_71091593]: http://blog.csdn.net/hon_3y/article/details/71091593
[SouthEast 3]: /images/20210827/8a30b2ee95834218b1988b640b713b50.png
[SouthEast 4]: /images/20210827/ff7d1fa7fb6243e089ca6e203a71403a.png
[SouthEast 5]: /images/20210827/377425df7c024e4b87509d015c5d5294.png