学弟划水日记-Bootstrap+Flask实现上传作业平台

Docker

docker run -itd -p 80:8080 registry.cn-beijing.aliyuncs.com/liyuanhao/homework:v3

前言

博主最近小学期，每天得收三十多份报告;原采用QQ发送形式,但效率太低，很多时间都花在收发和修改命名格式上，因而博主打算写个提交作业平台,部署于阿里云,每个同学均可通过它上传当日作业,最后博主统一上交

PS:由于开发周期只有一天半，所以有些地方可能存有BUG，恳请指正

结果

主页面

上传页面,点击可上传自己的作业文件

文件为空时提示

上传成功时提示

一、需求分析

1.1 上传

同学将每天的作业(Word文档)上传到该平台

1.2 重命名

按老师要求的格式给每份文件命名

1.3 打包

将收齐的word文件放入一个文件夹内，压缩并下载

二、设计

2.1 技术

该系统采取C/S架构

• 部署环境 : CentOS7

• 前端 : Bootstrap + Jquery+SweetAlert2

• WEB框架 : Flask

2.2 存储

博主将上传文件存到了项目中文件夹内,所以此处没有使用数据库

三、过程

项目结构

• index.html为主页面
• 信1701-3班-报告文件夹存储上传文件
• modles.py 存储学生学号与姓名信息

3.1 前端

3.1.1 表格

主页面初始时显示一个提交表格,内容为每位同学的提交状态、学号、姓名、提交时间以及操作按钮.
图示

• data是后端传来的一个列表,内含每个学生信息的字典

<!--提交信息的表格-->
<table class="table table-hover" id="stuInfoTable">
    <thead>
    <tr>
        <th>提交状态</th>
        <th>学号</th>
        <th>姓名</th>
        <th>上传时间</th>
        <th>操作</th>
    </tr>
    </thead>
    <tbody>
    {% for i in data %}
        <tr>
            {% if i['status'] == 'yes' %}
                <td style="color: green">
                    <strong>已提交</strong>
                </td>
            {% else %}
                <td style="color: red">
                    <strong>未提交</strong>
                </td>
            {% endif %}
            <td>{
  { i['num'] }}</td>
            <td>{
  { i['name'] }}</td>
            <td>{
  { i['time'] }}</td>
            <!--已经提交则提交按钮为不可操作状态-->
            {% if i['status'] == 'yes' %}
                <td>
                    <button class="btn btn-primary" disabled="disabled">
                        已上传
                    </button>
                </td>

            {% else %}
                <!--否则当点击上传按钮时将字典i的值传给对应函数-->
                <td>
                    <button class="btn btn-primary btn-lg" data-toggle="modal" onclick="display_form({
    { i }})">
                        文件上传
                    </button>
                </td>
            {% endif %}
        </tr>
    {% endfor %}
    </tbody>
</table>

3.1.2 提交框

<!--上传文件弹出框-->
<div class="modal fade" id="stu_modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="