极简邮件

为期一周时间开发，一个极简的邮件功能，只能在内网里互相发，并不是什么了不起的功能。
一提到邮件，首先想到定时任务，及时通讯这类东西，放心我们这是一个不能往外发的要求一周之内完成的极简邮件功能，上面提到的两点都不会有的。那我来说一下实现的基本功能，收信箱、已发邮件查看，时间查询，删除及批量删除，写邮件及群发邮件，回复邮件。后续会接着做的功能有：新邮件提醒，转发邮件，草稿箱以及及时存储，收发信分组，置顶，打印等。。。。后续会更新。
有的朋友看到这会说，不就是个增删查改么，我一天就做完了。那现在我说下剩下的4天我用在哪了。
先照例说技术栈：vue全家桶+element
第一天，页面布局仿照foxmail，左侧列表，右侧详情。那么问题来了，点击列表查看详情，这里用组件传参好还是动态路由好呢。首先比较一下两种方法：
1.动态路由：左侧菜单栏一般都会用动态路由，传参方便但仅为字符串，且会留下历史记录可后退。目录结构为index里面包括列表等一大堆，详情页为路由跳转，2个文件。
2.组件传参：兄弟组件之间传参较为复杂但可以传对象，我这里用vuex，也可以子传父，父再传子（可以实现单不可能这么做，太费劲了），没有历史记录。目录结构为index-list和detail，三个文件。
如果用动态路由，给详情页面传id参数，详情页需要和后台交互，查询数据。频繁切换查看的邮件会产生一大堆没用的历史记录，后退难。而组件传参可以把列表已经查出的数据传给详情页，那么这样会减少与后台交互的过程，优化页面，不产生垃圾历史记录，三个文件目录机构轻松。虽然这里说了一大堆，但实际上这就是一个思考的过程很快。下面就是确定页面的大框，以及大框的UI。

哈哈，第一天并没有这样结束的，不要小瞧我。接下来确定了一下需求，发邮件的页面是dialog的形式，那这样右侧就不需要动态组件了。
接下来开发左侧的列表，element-ui的table样式和预期样式差太多，所以我就原生写了一个列表，话费时间比较多，没办法毕竟样式难调。
第二天，增删查改，先发邮件。发邮件其实就是一个form提交，这里有三个问题，
一、收件人预期是写成可选可输入的那种（后续优化），如163，qq之类的，但是后台实现较为复杂一些吧，改成只能选的，在组织里选人。反正只能给同组织的人发邮件，这样写也省了验证收件人。
二、邮件内容需要有格式，这里采用element-ui的textarea，可以保留格式。邮件详情也是用这个，需要稍稍修改一下样式，下文不再概述。
三、关闭dialog要清空
然后写页面详情，通过vuex传参，参考Vuex简易教程，然后调试后台交互。
第三天、基本功能和大框都已经出来了，接下来就开始绣花了。列表需要时间筛选，这里用的是el-date- picker，收发邮件的筛选，已读和选中，多选框切换，这些需要调整好多样式，绣来绣去。然后就是删除和批量删除功能。这里有个功能我做了一半，被领导及时制止了，就是把正在查看的邮件删掉了，自动显示目前列表的下一封邮件，若没有下一封则显示目前列表的上一封邮件，前台做排序真心累啊，尤其用vue还不让使用dom的情况，更是累了（话费不少时间）。最后做的效果是：若删除或筛选使得列表中没有详情显示的邮件，便把详情置为空。我原本是watch的列表，但是删除的操作是先watch到了再删除，所以列表根本就没变，只好判断出若把正在查看的邮件删了，查看一个空对象。
第四天，进度有点落下了。开始写回复功能以及回复的列表，这次没有用递归去写，后台递归好了给我一个列表，很开心，其实写到这里，详情页面我还是要用id去后台查的数据，因为可能有父邮件，所以最开始用动态路由写也许会好一点吧，而且历史记录也可以不留的：vue-router路由跳转到其他地址，如何不保留历史记录。但是写到这里我就没有必要改了，毕竟写进缓存里也会更人性化吧。回复邮件的时候，问题出现了，这就是传说中没有预期的问题，因为通过组织选人的组件不是我做的，这里弄了好长时间才弄明白。。。。
最后一天就是测试一下，确认需求再改改，你懂的。
总之，这样不紧不慢，也没什么太大难度的一个功能就开发完了。这里做一下总结，也是本文唯一的干货：样式的问题暂了一半的时间，会有不可预计的问题出现，一定要为这个留出大概一天的时间，测试再改需求也得需要一天的时间，所以一个正常的功能在正常开发外还需要额外这样的两天预计。