django 之统计加班工时的web网站demo

一、背景

哈哈，提到背景，其实也没有什么背景，主要就是为了练习python，总觉得python光看书或者一些网站的事例都是纸上谈兵。不实际操作一下都觉得虚无缥缈，有一种小时候老师损我们的样子——“左耳朵听，右耳朵冒”。

言归正传，有一次看到博主虫师（测试大佬，我是他的粉丝，哈哈。）公众号推送一篇文章《2021年最值得测试同学使用的python库》，读到最后，作者梳理了一下python各种库不同的作用，提到python web开发比较流行的两个框架，django 和 flask。emm，自己当时是java web开发出身（没错，被生活逼迫做了测试...），想一下工作中用到python貌似最多的就是用pyqt写一点带界面的测试工具。于是决定我要打开python web世界的hello world。

二、准备

当我决定好用django搞一个web网站，突然不知所错，不知道要搞成什么样子的网站，没有需求~于是潜伏在工作群中搜寻答案，功夫不负有心人，一月一度的批斗大会来了， 领导说我们加班太少，没达到平均工时。巴拉巴拉... 我内心：%@&*……

于是又潜伏于“工作吐槽群”中，突然小伙伴发话了，“每月都没达到平均，下个月要精心计算自己的加班时间了！争取做一个时间管理大师（罗志祥：你再骂...）”。咦，似乎有想法了，搞一个加班工时统计的web网站吧，其实觉得有点过于夸大这个功能了，虽然我们公司内部的管理网站上都可以查询到，不过不太直观，不能DIY，自己安慰自己搞吧搞吧。只是练手，后面有能力再做测试平台，万一用到了呢~

准确来说这一步不能叫准备，叫做搜集需求（虚假的需求！）

三、真正的准备

工具主要有：

• 百度、各大教程网站、csdn、博客园、简书。。。
• 开发工具pycharm
• 技术吧主要还是基础的一些技术。
• 界面是bootstrap 和layui 的混用，没用vue主要是因为 bootstrap ，layui好多控件都直接copy，啊哈哈！
• jQuery、jQuery的ajax、数据库我看django默认设置的是上sqllite,我改成了mysql。主要就这么多了。

四、界面布局

1、登陆界面

登陆界面主要是网上找的模板，自己改吧改吧就完了，其实主要是想要好看，但是找了半天好多都收费-_-~,github 上面找了一个免费的如下图，背景图是我自己找的哈哈，已经和罗老师申请使用锤子图标使用权了哈哈！

 

2、用户注册

用户注册在登陆界面旁边，一个超链接，点击后弹出一个弹出层，用的是layui 的弹出层。简单几个字段。

 

3、主界面

注册完一个账号，登陆后就会进去主界面了，如下图。导航栏从左到右就是头像、名字、个人中心、右边是倒计时。主界面就是一个表格，配上增删查改的toolbar。

五、功能简单介绍

上面简单介绍一下界面，下满简单介绍一下功能，功能很简单。主要功能就是添加加班工时，计算时差，存入数据库。再配上发邮件（没有设置定时任务， 纯粹为了玩儿！），以及一些其他杂功能，比如倒计时。

1、注册

登陆界面点击注册超链接后弹出一个界面，目前字段就只有账号、密码、性别和邮件、没错，密码连重复确认都没有！做了框架自带的验证，输入类型验证、非空输入等。

• 如果不输入会弹出提示必填项不能空的tips
• 会检查重名，因为名字就是登陆账号，重名后面就搞乱了~没有搞姓名和账号的区分~
• 邮件格式用的layui框架自带的邮箱格式验证。

其他就没什么功能了。

 

2、登陆

登陆主要前端做了非空验证，后端做了个账号密码是否存在的验证。其他就没了。

 

 

3、主界面

导航

导航最左边是头像，默认注册完会有一个默认头像， 没错就是。猥琐的表情，看见了想打。

• 双击头像，或者双击“欢迎你,xxx”文本会弹出一个修改头像的界面，选择头像位置，或者拖拽图片到图片接收区就可以修改头像。没有做尺寸裁剪功能，就简单上传功能。边框是用的圆环，随缘裁剪~

 

• 欢迎文字旁边是个人中心下拉框，点击后有修改个人信息、修改密码、退出登录。实现的只有退出登录！其他的目前都还没有实现。点击退出后会有确认框，同意后就可以退出登录了。

 

• 右边的是倒计时，有倒计时语句和时间组成。点击文本后可以弹出修改倒计时的弹框，默认刚注册的时候是2020年傻妞倒计时，文本颜色是蓝色，时间颜色是橙色。修改后会变成自己的，颜色也可以自定义。弹出弹框后可以修改文本、文本颜色、时间颜色、主题颜色（导航栏背景色）。

 

主体

主体上面是toolbar，功能从左到右依次是删除、发送本周的全部加班时长、加班开始结束时间选择器、周输入框和查询按钮、发送指定周的加班时长按钮。

主体下面是一个表格，列有序号、周几、开始结束时间、加班小时数、一年中的第几周、操作修改删除。没错苦逼的我周六也来加班了-_-。

 

批量删除：

　　批量删除是选择表格中的一条或者几条数据，一次性删除。

 

 

本周加班时长：

　　发送本周一共加班了几个小时，发送到注册时候的邮件中。这里有个坑，注册时候的邮件要填写好，要不然没做修改功能，无法修改邮件，也没做发送指定邮件功能！

 

 

添加加班时长：

　　因为我司默认是晚上18:00以后算加班，所以我在js里面设置了，开始时间是每天的18:00，选择开始结束时间后，点击添加就可以添加一条数据。自动计算时间差、是周几、是一年的第几周。

 

查询指定周加班数据：

　　输入框输入指定周，点击按钮后就可以查询出来。

 

发送指定周：

　　输入框输入周，查询后点击发送指定周就可以发一封邮件到你的邮箱，虽然一眼就可以看到一周加了几小时~

表格中数据的修改：

　　点击后弹出修改界面，只能修改时间，修改完后自动计算时差和是周几以及属于哪一周。

 

删除：

　　点击删除后，这一条数据会被删除

 

 

上面就是功能的介绍了，代码实现可以查看项目地址

github：

　　https://github.com/git-tree/DjangoProject

码云：

　　https://gitee.com/tree-repository/DjangoProject

✿✿ヽ(°▽°)ノ✿点个赞，支持下呗！