【摘要】首先介绍一下大的背景:就是我们的手机端项目涉及到购买会员之后,购买所有的商品都会有相应的折扣。那么我们的后台管理系统就可以指定用户,为其开通会员。核心技术:js日期如何进行加减计算。

【作者】x-teamer成员:shuaiyin

第一步,也是实现需求的开始,即准备工作。如下图:

此时,我所选中的是xx店 王大毛这个用户,点击开通会员按钮:

首先为了方便用户,也为了避免用户进行误操作,所以给了个提示的弹出框。在此处,使用js的点击事件。具体代码如图:

核心字段是:user_remark_017:time,user_remark_018:'365'

含义是:time是获取当前时间,365代表会员所持续的时间。

第一核心:js如何获取当前时间?

首先定义一个变量time,

var time = new Date();

console.log(time);

输出结果如下:Sun Dec 15 2019 21:00:21 GMT+0800 (中国标准时间)

但是输出结果还不是我们想要的,我们想要的时间格式应该是这种:

2019-12-15 21:01:34。

所以这里需要加个自定义函数进行修改,下面是我封装的函数如下:

第二核心:js获取到当前的时间之后,修改成我们想要的格式。

getDateInfo:function(date){

return date.getFullYear()+'年'+M.formatDate(date.getMonth()+1)+'月'+M.formatDate(date.getDate())+'日';

},

我们直接进行调用:

var time = that.getDateInfo(new Date());

这样我们就可以拿到上述所要的时间格式。

这时候,我们就为xx店 王大毛用户成功开通了会员,让我们来进行验证一下,前端验证数据是否正确的做法就是打开数据库进行查看,我们到底有没有将这两个字段插入到数据库中呢?

首先,打开我的数据库,果不其然,我顺利的找到了id为4171的用户。这时候我们的重点是找user_remark_017和user_remark_018这两个字段到底有没有成功的放到数据库中,

yes,我们成功的做到了,也就是成功的为用户开通了会员。功能已经实现,那么接下来就是展示功能的实现,前提是用户有会员和非会员两种展示,所以我们需要对日期进行判定,也就是说,我们开通会员的时间只有365天,那么当时间到期之后,此会员应该就是作废的。那么接下来就是验证和实现这一功能需求。

第三核心:会员展示和到期判定

那么要实现这个需求,我们首先要理清楚这个逻辑,也就是说会员开通的时间有365天,也就是当做一年来判定。即:开通会员的时间加上一年,和当前的时间进行比较,或者说当前的时间减去一年和开通会员的时间进行比较。

如果:(当前时间减一年)-开通会员时间<=0,那么此用户还处在会员时间内,他就还是会员。

明白了逻辑之后就是功能的实现:

第四核心:进行日期加减

先上我的代码:

var date = new Date();//获取当前时间

var year = date.getFullYear()-1;//当前时间的年份减去一年

var month = date.getMonth()+1;//时间的月份获取

var day = date.getDate();//时间的日,获取

var time = year+'-'+month+'-'+day;//时间进行拼接

输出结果如下:

2018-12-15 (yes,我们当前日期年份减去一年实现)

var vip_time = data[i].user_remark_017;//后台拿到的数据,也就是保存在数据库中开通会员的时间,但是时间格式也不是我们想要的。我们需要把时分秒给过滤掉。

第五核心:数据库中数据过滤

var vip_time_now = vip_time.substr(0,10);

输入结果如下:

2019-12-15 (yes,数据库中数据过滤,我们也实现了)

第六核心:时间进行比较

代码如下

var a = (Date.parse(time) - Date.parse(vip_time_now)) / 3600 / 1000;
if(a<=0){
var nick_name = data[i].nick_name+'(会员)'
}
if(a>=0){
var nick_name = data[i].nick_name
}

接下来,就是验证显示是否正确的时候:

yes,用户会员开通了,展示也正常了。那么基本的功能就实现了。但是还没有结束:我们需要进行验证,验证的最好方式就是直接修改数据库中的user_remark_017的值,也就是开通会员的时间:

我把开通会员的时间改成了2018-12-14,也就是说,按照会员时间的设置,用户的会员时长是到期了的,接下来就是验证奇迹的时刻,打开浏览器按下我们的F5进行刷新:

yes,果然结果没有出乎我们的意料,功能需求解决,验证没问题。

总结:这个需求的话,并算不上很麻烦。但是我们可以从中总结到很多经验:

1.解决问题,实现需求的前提,就是要理解需求逻辑,我记得我的老板说过这样一句话,我终身受用:解决问题的第一步就是要将问题给还原出来。这句话对程序猿们来说,真可谓是完美契合。

2.作为一个前端,解决问题bug并不是结束,要学会操作数据库,因为前端所做的一切,所处理的数据最终是要放在数据库中,数据库是不会骗人的。

3.程序猿的基本技能,也是最基本的要求,也是最低需求,前面两种才是重中之重。其实也就一句话:眼光的远近取决了最终你能在职业生涯上走多远。奉劝程序猿们切记切记

我们是不一样的技术团队:

(我们认为:所有的企业行为,都解读为交易行为,无论是摩拜单车、外卖平台、自动售货机、招聘社区、家政服务,都用交易的语言来表达,我们专栏里面有很多实际案例和开发过程和交付流程)

(类似于元素周期表,我们把交易拆解成元素级别,根据业务定制组装,完全复原个性化需求,我们专栏里面有很学术也很实际的介绍)

(每个项目设置: 导师成长基金、参与人员的奖励,全员股权池,创业氛围浓郁,我们专栏公开分享了我们的一些经验)

(专治各种复杂的业务场景, 我们通过简洁的元素和分层组合,来完成复杂场景的业务定制,我们在这一块有非常多的案例,在互联网创业专栏里面有详细描述)