Vue+Springboot 自制规划打卡系统【明日计划】（一）

简介

预览

自制的一套规划打卡系统，上效果图

初衷

首先讲讲我开发这套系统的初衷，想直接看代码的往下划
在日复一日的上班工作中，我发现生活之余所剩的时间少之又少，而且剩下的这些时间又被大量的闲杂琐事与自身的慵懒占据，下班躺床上玩手机、追剧、看小说，时间眨眼就过去，回首望去，自己的生活抛去工作，似乎没有什么有意义的事物存在。然而工作并不是生活的全部啊。空心病这个词逐渐在身边浮现，毫无在意的事，刻苦的努力一瞬间变得毫无意义。但我觉得生活不该是这样，一定存在着某种有趣的事物只是我们还没有发现，更何况，生而为人，来都来了，不去追求探索岂不可惜。在没有找到我的追求时，我觉得我需要让自己的身体保持一个良好的状态，于是我自己定制了一个健身计划，并不是健身房的那种增肌塑形，只是简简单单的夜跑，夜跑中，我发现类似于我的并不止一个。
很多人都拥有着他们自己的计划，当你迷茫不知方向时，看看其他人在做些什么，或者参与其中，坚持下去，时间久了，你会获得启发从而寻找到自己的追求的。
这就是我设计制作“明日计划”的初衷，它并不是一只闹钟，我希望它能够成为你深处黑夜时的一盏灯，哪怕只有星星点点的光芒。

设计思路

“明日计划”的重点在于打卡、协作以及自我审视，所以打卡页面需重点设计，我对此的初期构想为，该页面一定要具备操作感且需简洁明了，于是我参考探探app的卡片划动效果，来设计了这部分页面。用户查看自己的历史数据时，一般重点在于回顾自身计划的执行率（完成率），所以历史数据查询这部分需以图表来直观的反应出用户数据。用户注册模块需要最大程度上的简化，这会使用户更加快捷的加入其中。从之前制作网站来看，用户并不喜欢繁琐的账号注册，所以在“明日计划”中，只要用户填写好邮箱后，其他的一切资料，包括密码，均有系统后台自动生成。当然，密码是可以在用户登录后，通过邮箱验证的方式更改的。当然网站设计中还包含着其他方方面面的细节，这里只是简单的说几句，但一定要注意，设计的出发点是用户，而不是作为一个开发者怎么方便怎么来*。 比如：你眼中各种完善的条件查询，往往是用户觉得最最麻烦的地方。

代码逻辑

技术栈

这套系统由Vue+Springboot搭建而成，模式采取前后端分离，容器为tomcat
后端以若依系统为框架基础，前端则采用vant、element-ui两种UI框架
涉及到的技术栈有：

• springboot框架
• spring securit安全认证
• mybatis持久层
• redis缓存
• hutool工具库
• axios前后台数据交互
• pagehelper分页
• token票据验证
• javax.mail邮件发送

注册相关

从账号注册开始：
我们能够想到的普通账户流程是这样的

1. 填写注册信息
2. 后台校验信息合法性
3. 完成注册并自动登录

其中注册信息必填项包含账号和密码，有的还会有昵称、年龄、性别等等；
信息验证包括账号内容的合法性以及验证是否为本人操作注册；
比如手机号码为账号注册时会以短信验证、邮箱为账号注册时会以邮件链接验证；
我们这里使用邮箱验证（因为短信验证是需要RMB的）

考虑到用户便捷性，我将账号注册作以简化，用户仅需要提供邮箱信息即可。毕竟用户可不喜欢填写调查问卷。
后台接收到邮箱信息后，校验邮箱格式是否正确、数据库中该账号的唯一性，然后通过名称库自动拼接生成随机昵称，再从数据库的配置数据表中获取默认密码，整合好注册信息后，插入该数据完成账号的注册，最后向前台返回注册结果，前台根据注册结果执行下一步操作，若注册成功，将自动登录。这样，账号注册的流程就被极大的简化。
当然，这种方案下，由于默认密码是公开的，为保证账号安全性，需用户后续自主更改密码。
在首次更改密码流程中，必须通过邮箱邮件的验证，以校验是否为账户本人操作，后续密码更改则无需验证。

注册用户

controller：：

 /**
  * 注册用户
  */
 @Log(title = "用户注册", businessType = BusinessType.INSERT)
 @PostMapping("/regist")
 public AjaxResult regist(@RequestBody SysUser user){
 	 //关于传参格式的校验我通常会