前言

写这个的灵感来自于无意逛github上发现的,但是我发现作者的模型跟我所想的不太一样,所以想着把这个项目进行一定的更改和重写。谁知道挖了一个大坑,好在我最后写完了。。。

代码

直接放上代码分布图

这次并没有用Class Based View来写。。我还不太会写。所以用的还是functionView。bug我已经尽量地在修了。。可能还有其它bug,我还没发现

碰到的难题

其中我的数据库模型中,作业的发布是有最后提交日期的。所以在教师端发布作业的页面,一直为通过form的格式校验,导致创建的作业无法存入数据库,所以必须在前台规定时间输入的格式。

也就是图片所示情况

因此首先分享一个好网站:bootstrap4-timestamp

代码实现:

# form端实现,通过input_formats来规定form可以传入的格式
class AddHomeworkForm(forms.Form):
    name = forms.CharField(label="作业名", max_length=10,
                           widget=forms.TextInput(attrs={'class': 'form-control', 'placeholder': '作业名'}))
    classroom = forms.ChoiceField(label="分配的班级",
                                  choices=get_classroom(),
                                  widget=forms.Select(attrs={'class': 'form-control'}))
    cutoff = forms.DateTimeField(label="截止日期", input_formats=['%Y/%m/%d %H:%M'], widget=forms.DateTimeInput(
        attrs={'class': 'form-control datetimepicker-input','placeholder': '截止日期'}))
<div class="input-group date" id="datetimepicker1" data-target-input="nearest">
                {{ add_homework_form.cutoff }}
                <div class="input-group-append" data-target="#datetimepicker1" data-toggle="datetimepicker">
                    <div class="input-group-text"><i class="fa fa-calendar"></i></div>
                </div>
            </div>
<script type="text/javascript">
    $(function () {
        $('#datetimepicker1').datetimepicker(
            {
                format: 'YYYY/MM/DD HH:mm'  //规定前台传入的格式,必须和forms规定的相同
            }
        );
    });
</script>

视频操作演示

视频演示地址

最后!

如果觉得这个项目还不错的话,欢迎github上给我小心心~

GitHub stars

版权声明:本文为原创文章,版权归 heroyf 所有
本文链接:https://heroyf.club/2019/02/submit_homework_online/


“苹果是给那些为了爱选择死亡的人的奖励”