前后端数据互传问题

her~~llo，我是你们的好朋友Lyle，是名梦想成为计算机大佬的男人！

博客是为了记录自我的学习历程，加强记忆方便复习，如有不足之处还望多多包涵！非常欢迎大家的批评指正。

今天来一篇前后端数据互传问题的总结。持续更新。我在开发时如果遇到就会记录。

问题一：时间类型互传

java中前端传过来的时间字符串转为Date类型存入数据库

前端传过来的是属于字符串类型，java是无法拿来直接存入数据库的，数据库datetime这的字段类型为timestamp。
2020-07-07 10:45:57这种类型，属于yyyy-MM-dd HH:mm:ss，考虑使用java的工具SimpleDateFormat函数。

String DateTime=request.getParameter("DateTime");
SimpleDateFormat formatter  = new SimpleDateFormat("yyyy-MM-dd HH:mm:ss");
Date Datetime = null;
try {
	Datetime = formatter.parse(DateTime);
} catch (ParseException e1) {
	e1.printStackTrace();
}//string格式转Date格式

javaDate类型转为yyyy-MM-dd HH:mm:ss类型到前端

利用到spring-boot-starter-web中的依赖的com.fasterxml.jackson包

@JsonFormat

@JsonFormat(pattern = "yyyy-MM-dd HH:mm:ss",timezone = "GMT+8")
private Date time;//下单日期

它的作用是，出参时，自动把Date型对象数据转化成正确的格式化后的字符串出去。

@JsonFormat不仅可以完成后台到前台参数传递的类型转换，还可以实现前台到后台类型转换。当content-type为application/json时，优先使用@JsonFormat的pattern进行类型转换。

---

问题二：多条件查询时用Map封装post请求体遇到问题

public class QueryPageBean implements Serializable{
    private Integer currentPage;//页码
    private Integer pageSize;//每页记录数
    private Map queryString;//查询条件
}

我在这里用Map来装多个查询条件，

@PostMapping("/getDeliveryOrderByCondition")
public PageResult findDeliveryOrderByPage(@RequestBody QueryPageBean queryPageBean){
        PageResult pageResult = deliveryOrderService.pageQuery(
            queryPageBean.getCurrentPage(), 
            queryPageBean.getPageSize(), 
            queryPageBean.getQueryString()
        );
        return pageResult;
    }

通过输出封装的类型可以知道，@RequestBody底层会自动将对象中类型为Map的属性封装为java.util.LinkedHashMap类型的，那么Mapper在配置时，parameterType="java.util.LinkedHashMap"这样写，

<select id="selectByCondition" parameterType="java.util.LinkedHashMap" resultMap="findByIdResultMap">
    select id,user_id as userId,time,product_info as productInfo,status,money,update_time as updateTime
    from product_delivery
    <where>
        <if test="status !=null and status !=''">
            and status = #{status}
        </if>
        <if test="orderId !=null and orderId !=''">
            and id = #{orderId}
        </if>
    </where>
</select>

还有细节问题就是：<if test="status !=null and status !=''">

!=null和!=''之间不要加空格，还有中英文，大小写限制都比较严格，需要规范书写。

问题三：Vue data变量相互赋值后被实时同步的解决步骤

Vue data变量给另一个变量赋值后，修改其中一个变量，另一个变量同时被修改。

原因分析： 变量相互赋值是值传递还是引用传递，当前的赋值为引用传递。

具体解决方案：用JSON.stringify和JSON.parse两个函数。

a.value = JSON.parse(JSON.stringify(b.value))

问题四：下载resources 下的excel，xls/xlsx文件损坏，无法打开。

原因分析： 

pom.xml文件<build>里设置了如下段代码。

        <resources>
            <resource>
                <directory>src/main/resources</directory>
                <filtering>true</filtering>
            </resource>
        </resources>

maven 使用了filter，其其原理是处理文本文件，并将其替换变量，对于二进制文件有问题，导致excel文件损坏。

具体解决方案：
方案1：改变文件路径，不放在resources下。
方案2：添加配置如下， 更改后务必maven claen。

        <resources>
            <resource>
                <directory>src/main/resources</directory>
                <filtering>true</filtering>
            </resource>


            <!--添加如下段代码-->

            <resource>
                <directory>src/main/resources</directory>
                <includes>
                    <include>**/*.xlsx</include>
                    <include>**/*.xls</include>
                </includes>
                <excludes>
                    <exclude>**/*.properties</exclude>
                    <exclude>**/*.yml</exclude>
                    <exclude>**/*.xml</exclude>
                    <exclude>**/*.tld</exclude>
                    <exclude>**/*.doc</exclude>
                </excludes>
                <filtering>false</filtering>
            </resource>
        </resources>

前端响应的要做出改变：

解决content-type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet" 的方案

①需要在请求参数中设置 responseType: 'arraybuffer'

②下载按钮代码如下