工作日记（十三）：完整项目开发之前端基本完工与遗留的坑
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-col :span="6">
<el-form-item label="人群分类">
<el-select v-model="listQ.peopleType" placeholder="全部" multiple collapse-tags @change="peopleSeal" class="listClass" style="width:160px" size="small">
<el-option label="全部" value="0" :disabled="isShow">
</el-option>
<el-option v-for="item in peopleType" :key="item.key" label="item.display_name" :value="item.key" />
</el-select>
</el-form-item>
</el-col>
代码说明：
●【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的<script></script>标签里：
//(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变量中，总感觉是多此一举，除了导致逻辑混乱、代码效率变低之外，没有任何好处。
