小程序之签到

小程序之签到

前端部分

欸其实前端的部分非常不容易，从布局到样式都没那么简单，布局和样式扒了一个网上的模板调通了，就说一下逻辑和发请求的部分；

功能

• 显示打卡连续天数、打卡总天数
• 查看2018-2020（自己设置的期限）每天的打卡记录
• 打卡

查询某一个月的打卡记录

• 发送一个请求到服务器请求到当前用户所有的打卡记录——这样做的好处是从始至终查询的开销只有一次请求，之后也只需要打卡的时候发送一次情况，大大减少了http请求发送的次数；

• 获取到数据之后，将数据进行以下处理放到checkStatus里：

  • 设置一个 year-month 的key，value就是对应于这一年这一个月的每天的打卡记录（是一个数组[0, 0, 0, 1, ... , 0]）
    

• 当要显示哪一个月的签到记录，就先将 年-月 构造成一个key，看checkStatus[key]存不存在(也就是看这一个月有没有打卡记录)，但是要注意 无论是否存在 往往都没有每天的记录，但我们最终要得到的是这一个月每天的记录：

  • 自己构造一个长为这个月天数的数组days，初始化每项都是未打卡的状态(这里用的是每项的src属性是空还是有显示签到的图片的地址来区分)
  • 遍历checkStatus[key]每一项将days相应那一天设置为已打卡

查询当前这一周的打卡记录

• 这是在刚刚的基础上进行查询(刚进页面的时候就执行这两个操作)，所以我们已经得到了当前用户的所有签到记录，但其实这七天还挺麻烦的，主要原因的因为可能跨月 甚至是跨年
• 主要算法思路如下：
  • 将当前日期减去 当前是星期几 （如今天20号星期五 则20-5），就得到了这一周开始那天(周日)是几号
  • 若得到数字比1小则说明跨到前一个月了，若将其加7(这一周结束那天)比当前月份天数还大说明跨到后一个月了，设置一个变量overMonth来记录
  • 若跨到前一个月，用另一个变量month为currentMonth-1，若month<1则说明跨年了，year为currentYear-1，month设置为12。跨到后一个月同理
  • 同时在上面这个过程中拿到上个月和这个月的总天数
  • 从这一周开始那天，循环七次，每次处理一周的一天，这里写了一个函数专门从checkStatus里查看特定的某一天是否有打卡记录，所以根据这个函数获取到的结果设置好相应的数据即可（具体实现细节看代码吧，不好说）

let flag = false // 用来记录有跨月情况的时候 是否跨月了 因为这直接关系到了是用 year month还是currentYear currentMonth来算这一天的打卡记录
for (let i=0; i<7; i++) {
	dates.push(tmp++)
	let src
  // 前一个月还没走完 或 这个月走完了 (这是因为反正都不是用current来算的)
	if (!flag && overMonth === 'prev' || flag && overMonth === 'next') {
		src = this.getDayClock(year, month, dates[i]) ? '../../images/clock/daka.png' : ''
	} else {
		src = this.getDayClock(currentYear, currentMonth, dates[i]) ? '../../images/clock/daka.png' : ''
	}
	if (overMonth === 'prev' && tmp > lastMonthDays || overMonth === 'next' && tmp > thisMonthDays) {
			tmp = 1
			flag = true
	}
day.push({
    date: dates[i],
    src,
    check: false
	})
}

打卡

• 欸相较于上面查询来说，打卡简直太友好了，除了css动画什么的有的麻烦之外
• 直接发送一个POST请求，把当天日期信息一起发送过去就好了

后端部分

数据库

• 有一张记录用户签到记录的表clock
• 数据：uid（用户编号）、year、month、day、date(最后这个没啥用好像)
• 在models下创建clock.js文件来专门控制clock表的数据

参数校验

发送打卡请求的时候需要校验一下 年月日 的信息，其余的话就没有了

接口实现

• 查询打卡信息的时候，直接搜索整张表返回当前用户的所有打卡记录
• 打卡的时候就创建一条新纪录

总结

• 其实结束之后写东西感觉特别少，但就这一个签到的页面和功能足足花了三天，绝对不止亿点点细节（哎怎么写完总结之后 真的觉得挺简单的了 那为啥调的时候那么难...）；
• 最开始的想法的话，说是简单粗暴但实现起来又极其麻烦，是想每次切换一个月的时候就发送一次请求到后端查询相应月的打卡信息，结果写到当前持续多少天打卡的时候人就傻了，转念一想为什么我不直接一开始把这个用户的所有打卡记录都拿到手 处理一下之后就能直接查询不用发送请求了呢？然后就着手实现了，果然= =
• 不仅仅是前端发送http请求要少，后端查询数据库次数当然也是越少越好，之前算那一周七天的打卡记录差点就想查七次了(结果发现查七次它也不简单)，最后还是用查询到的全部数据直接获取到了
• 之前也有写过前端 后端的代码，但这次应该是头一回全部一个人写，从页面到逻辑到后端到数据库，最开始从数据库设计开始，页面框架写完之后开始想如何实现逻辑，前端想拿到数据还得要后端接口配合，所以前端逻辑还没个谱的时候就先把后端那边api大致框架要搞起来了
• 后端用的是 nodejs+koa ，koa很精简 需要自己二次开发，照着之前小程序后端框架完完整整来了一遍，真的对后端那边处理请求了解深入了不少，数据库的配合部分也更加掌握了一些（这期间当然走了不少坑...）
• 小程序由于还是新兴出来的，对于es新标准支持的还不是那么好，所以比如像 async和await这种语法糖就无法很好的使用，但里面又不乏有 wx.login wx.request这样发送请求的异步过程，所以基本都是回调函数的，当然可以自己封装一个Pomise过去来处理

源代码可以在GitHub上我的那俩项目里的clock部分找到 后端 前端