工作日记（十三）：完整项目开发之前端基本完工与遗留的坑

 

2020.7.23

终于，在今天下午下班前，把vue前端整差不多了。

PS：本人所在的公司是965，感觉挺良心的，项目工期也安排合理，没有硬赶着加班上线；同事关系融洽，是谁的锅谁解决，也没有出现硬甩锅踢皮球的现象。

在此大概总结一下：

1.需求

本人小组负责的是活动推送管理模块，简单的说，就是可以新建、修改一个活动，选择不同的人群进行推送；

前台页面有活动列表页，以及新建活动、修改、详情（三合一）页；

其中，一项活动可以选择多个推送的人群，一个人群可以选择多个推送的课程。

本人负责的后台代码是活动详情相关，就是根据活动id返回详细信息，由于是一对多对多，因此嵌套了不少json数组。

本人负责的前台代码就是所有的前台了（由于我方前台同事没空，本人闲的没事与为了自学就全接了），上方的四个页与功能。

2.开发过程

（1）本人开发后端用了2-3天，总的来说比较简单，只用了3个sql；返回数据封装比较复杂，不过还是想办法搞定了。（此处用了一个HashMap去重合并，似乎是个笨方法，不过后续再优化吧。之前的日记中提到过？）

（2）本人开发前端用了4-5天，总的来说学到了不少vue知识。由于不是专业前端，因此本人开发的页面逻辑复杂、变量较多，自己都快看不懂了，不过功能好歹是实现了。

3.开发vue遇到的问题与解决方法

（1）前端用到了el-select标签实现多选功能，导致v-model中的元素为数组对象，而后端需要按逗号拼接的字符串对象：

代码说明：

●【el-select】标签中增加【multiple】可以将单选改为多选；增加【collapse-tags】可以回显多个标签；

●【listQ.peopleType】即为js中声明的变量；本人发现html区域的标签想使用变量时不用加【this】，而在js区域中使用变量时则需要加【this】，这似乎是vue的语法规则（重要）。

●【:disabled】可以决定该选项是否可用，true不可用，false可用；冒号的作用说明其中的"isShow"是js中的变量。（冒号用法也挺重要的，有时候就忘了用了）

●【item.key】与【item.display_name】对应js中【data(){return{peopleType:[{key:'1', display_name:'人群A'},{key:'2', display_name:'人群B'}]}}】；（不加代码块了，感觉加上影响文章结构）

●【listQ.peopleType】对应js中【data(){ return{ listQ:{peopleType:''} } }】；（不加代码块了，感觉加上影响文章结构）

 

问题与解决办法：

由于当时商量后端接口时对前端不熟悉，因此后端用按逗号拼接的字符串（"1,2,3"）；没想到vue框架里多选变量对应的是数组（["1","2","3"]）；

如果传回数组，后台就报500，显然不行；与组长讨论的结果是，前台处理。

好吧，那我前台就先从【this.listQ.peopleType】取出数组来，循环，转成按逗号拼接的字符串，再发给后台；

为了方便，直接将【this.listQ.peopleType】改为String就发回去了；

结果页面上的多选框在发送一次数据后就不能用了——格式不正确；

因此发完请求后还得把【this.listQ.peopleType】改为数组类型。

PS：这是闹啥了，改来改去的，白给前端增加负担，后台改成接收数组形式的不好吗？总觉得逗号拼接不科学啊（才发现）

 

（2）vue中需要格式化Date的问题：

前端使用了new Date()，想格式化成"yyyy-MM-dd HH:mm"，这时才发现，js与vue居然没有内置这个方法，尴尬；

因此百度了一个方法，直接写在页面.vue的标签里：

//(new Date()).Format("yyyy-MM-dd hh:mm:ss.S") ==> 2006-07-02 08:09:04.423 
//(new Date()).Format("yyyy-M-d h:m:s.S")      ==> 2006-7-2 8:9:4.18 
Date.prototype.Format = function (fmt) {
    var o = {
        "M+": this.getMonth() + 1, //月份 
        "d+": this.getDate(), //日 
        "h+": this.getHours(), //小时 
        "m+": this.getMinutes(), //分 
        "s+": this.getSeconds(), //秒 
        "q+": Math.floor((this.getMonth() + 3) / 3), //季度 
        "S": this.getMilliseconds() //毫秒 
    };
    if (/(y+)/.test(fmt))
        fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
        for (var k in o){
            if (new RegExp("(" + k + ")").test(fmt)) {
            fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
        }
    }
    return fmt;
}

上面是Date转字符串的方法，下面在写一个字符串转Date的方法：

//输入的时间格式为yyyy-MM-dd
//输入的时间格式为 yyyy-MM-dd HH:mm 也可以，可以获取到小时与分钟
function convertDateFromString(dateString) {
    if (dateString) { 
        var date = new Date(dateString.replace(/-/,"/"))  
        return date;
    }
}

（3）后端SimpleDateFormat与数据库时区不统一的问题：

从前台接收时间字符串时("2020-06-30 00:00")，存入数据库后时间就变成("2020-06-29 11:00")了，通过百度发现是后台的SimpleDateFormat默认时区与数据库不统一导致的；

数据库的时间字段为datetime；

因此后台在存入数据库与读取数据库的时间时，要增加（与数据库的时区统一）：

SimpleDateFormat sdf = new SimpleDateFormat("yyyy-MM-dd MM:mm");
sdf.setTimeZone(TimeZone.getTimeZone("GMT-5"));

（4）后端返回的日期出错的问题：

还是SimpleDateFormat导致的，如下：

//错误，日期会有问题
//SimpleDateFormat sdf = new SimpleDateFormat("YYYY-MM-DD");
//正确
SimpleDateFormat sdf = new SimpleDateFormat("yyyy-MM-dd");

4.遗留的坑

（1）前台另一个el-select讲道理应该是多选的，返回的数组我也按照后台要求转为逗号拼接的字符串了（虽然很迷），最后后台对于这个数据居然不支持，理由是当时这个数据商量的应该是单选的字符串；

好吧，当时是商量的单选，可是根据实际情况发现它应该是多选的数据，后台能兼容下吗？

后台想了半天，说，还是你改成单选吧，后台改太麻烦了；

于是本人改成了单选，但是这将来一定是个坑；单选导致用户体检很差。

（2）el-select在前端是数组、而后端需要逗号拼接的字符串的坑，这个上方提到了，后台不兼容，导致本人写的前台得从数组转成字符串发给后台、再从字符串转成数组存到vue变量中，总感觉是多此一举，除了导致逻辑混乱、代码效率变低之外，没有任何好处。