快捷收作业系统的设计与实现

摘要随着最近几年互联网的发展，人们的生活因此改变。可以说互联网的出现是人类历程发展历程中最重要改变之一，给世界带来翻天覆地的改变，资源的广泛传播赋予人们娱乐；同时它也改变了人们的工作方式：人们传递办公的文件不再只是纸质化，更多的是使用OA系统在线传递；甚至还有人使用电脑在家办公，也成了一种新型的办公方式。以上这些，都要归功于信息技术的发展。本研究以软件开发为基础，采用理论与实际相结合的方法，开发收取电子版作业的Webapp。包括对网站app的功能分析，编写对应功能代码；还有网页前端的设计和优化，包括html、CSS、JS以及前端框架的运用，对网页进行简单的软件测试，包括编写测试用例，按照测试用例进行严格的多方位测试，确保网页app的功能正常实现等。在设计的过程中主要选取python的django框架进行设计并完成了文件上传功能、记录显示上传名单功能、文件压缩下载功能、图标展示等功能的功能，事实上表明了自动化的网页app的工作效率相对于手动收取作业说确实是提高了很多。节省了很多人力和时间。关键词：Django，收电子作业，网页app，html，pythonAbstractInrecentyears,theITindustryhasdevelopedrapidly.

Computertechnologyhaschangedpeople'ssinglewayoflife.itcannotonlysimplifytheworkflow,improveworkefficiency,achievethesharinganddisseminationofresources,butalsohasentertainmentfunctionsandinteraction,whichhasbroughtgreatchangestohumansociety.

Thispapermainlydiscusseshowtosimplifythestepsofcollectingelectronicversionofthejobthroughthewebpageapp.

Includingthefunctionanalysisofthewebsiteapp,writingthecorrespondingfunctioncode;aswellasthedesignandoptimizationofthefrontendofthewebpage,includingtheuseofhtml,CSS,JSandthefront-endframework,carryingoutsimplesoftwaretestingofthewebpage,includingwritingtestcases,

Accordingtothetestcasetocarryoutstrictmulti-directionaltestingtoensurethenormalimplementationofthefunctionofthewebpageapp,andsoon.

Intheprocessofdesign,thedjangoframeworkofpythonismainlyselectedtodesignandcompletethefunctionsoffileuploadfunction,recorddisplayuploadlistfunction,filecompressionanddownloadfunction,icondisplayfunctionandsoon.

Infact,itshowsthattheefficiencyofautomatedwebappisindeedmuchhigherthanthatofmanuallycollectingjobs.

Savedalotofmanpowerandtime.Keywords：Django，ReceivingElectronicoperation，Webapp，Html，Python目录1绪论 61.1题目背景 61.2选题缘由 61.3题目研究方法 61.4论文构成及研究内容 72系统的相关概述 82.1python语言简介 82.2django简介 92.3Bootstrap简介 92.4JQuery简介 103系统开发和环境介绍 113.1开发基本环境 111.安装，配置python 112.安装django 123.编辑器选择sublime 124.虚拟环境virtualenv 134系统分析 144.1开发背景 144.2系统功能需求分析 144.3需要实现的几个页面功能 144.4系统的功能图 145系统的设计与实现 155.1开发模式 155.2数据库设计 151.名字列表 152.实习报告周小结的作业表 163.指导老师联系表的作业表 164.访问数量记录表 165.3部分功能代码 175.4系统前台设计 331.网页的标题栏代码解析 332.背景图的代码解析 352.白色微透明背景代码解析 365.5页面打开速度优化 366项目文件的简单部署 376.1选择部署方式 376.2开始部署 377对网页进行系统的软件测试 427.1软件测试的目的 427.2测试环境 427.3系统测试 42总结与展望 43参考文献 44致谢 451绪论1.1题目背景伴随着IT行业的发展，软件在人们日常生活的的作用越来越大。在软件开发和运用的过程中，为了实现一些小功能，可以开发出小工具来帮助完成一些重复或者复杂的事情，而软件开发在语音的选择方面有多样化的选择，不仅仅要考虑到对语音的掌握程度，还有考虑到自身的需求。软件在工作时不光保障了工作质量，并且还降低了工作的时间和金钱成本成本，随之带来的效益非常可观。1.2选题缘由计算机技术改变了人们单一的生活方式，不仅能够简化工作流程，提高工作效率，实现资源的共享和传播，还具有娱乐功能和互动性，对人类社会带来了巨大的变革。在实习的期间，大家都在忙着工作，收作业这种事情会很累人。组长需要收齐作业并记录交作业的顺序，以此作为评分标准组长要收取作业后统计出谁还没有交，还要再去催对应的同学交作业，最后交到一个同学那里汇总之后才交给老师。这个过程非常的漫长和复杂，我觉得同学们都出去实习了，各自的时间都很宝贵。如果可以让同学们交作业到一个地方，并自动统计出同学们上交作业的情况以及上交顺序，这样将会在每次收作业的时候节约大量的时间和精力。针对以上实习阶段收取实习报告的情况，本着节约时间和简化步骤的想法，这个快捷收作业系统诞生了。这个系统是一个建立在网页上的系统，可以满足同学们在不同环境下提交作业。1.3题目研究方法本研究以软件开发为基础，采用理论与实际相结合的方法，以Django为来说，这是由python封装的Web开发框架，用来开发Webapp。在这里我们主要涉及的功能包括：同学们选择自己的名字后选择作业文件即可上传作业，无需登录。同学们要重新上传文件可以直接覆盖上传。网页即时刷新已交名单以及未交名单。网页微后台显示同学们上交作业的顺序，方便统计评分。网页微后台有下载作业文件功能，方便后台提取文件整理上交。图表展示页面可以很清晰地看到网站的前七天的访问量以及每天提交文件的数量。本文主要介绍针对WebAPP的开发，由于代码量较多，所以只介绍重要的功能部分的实现。1.4论文构成及研究内容第一章为绪论，介绍这个课题是什么，为什么要选择这个课题，以及介绍本文将以什么方法进行研究。第二章介绍了开发软件所涉及的技术的相关概述。在此基础上才能进行webapp的开发和设计。第三章为系统开发和环境介绍。介绍了所需的开发环境以及开发环境的安装和配置过程步骤。第四章为系统功能分析。重点对Webapp的需求进行分析，并通过流程图和功能图展示。第五章为系统的设计和实现。介绍了本文设计的开发模式，数据库表单设计，最后展示了部分功能实例的实现界面及代码。第六章介绍了项目文件的简单部署。通过网站进行简单部署第七章为系统测试。设计若干个测试用例，对系统主要功能进行检测。

2系统的相关概述2.1python语言简介在本文涉及的快捷收作业系统中我们使用Python语言作为后台实现的脚本。Python语言面向对象，尤其是在Web开发方面，Python语言凭借它的易用性和强大的泛化能力，深受开发人员的欢迎。干净利索，简单直接，Python编写代码的速度非常的快，而且非常注重代码的可读性，非常适合多人参与的项目。作为一种解释性语言Python始终贯彻了一种简洁清晰的方针，这样使得它的维护性以及可阅读性大大提升，因而受到大量的编程人员的欢迎。并且在实际应用中也得到大量地使用，与此同时，作为用于Web开发，Python具有下优点:由于Python面向Web和开源特性，所以它运行的是动态内容，当数据库经常与网站交互时，Python十分高效。与其他的高级编程语言最大的区别就是Python语言是一种不含有那些语言所包含的简单意义的语言，这种方式使得编程人员在进行Python项目编写的时候只需要解决项目“做什么”的问题，而是花费多余的时间理解语言。此外，Python语言在编写的时候不是采用以分号结尾的方式，而是直接缩进，这种方式使得Python的源代码编写更加方便快捷和具有更好的可阅读性。Python在众多编程语言中脱颖而出的另一个重要原因就是它的编译速度以及运行速度都很快，在开发人员编写程序代码的时候，往往希望能够尽快看到程序的运行结果，而Python较为快速的运行速度因此受到开发人员的欢迎。因为Python是由C语言编写的，而又由于C语言的可移植性这样使得Python语言可以运行安装有ANSIC编译器的任意平台上.这样使得程序更加容易的移植到在现今流行的任意的主流平台上，都可以进行编译运行而不会造成运行的差异性.由于Python这种可以自动化编译成字节码的可移植性使Python可以无差别的在不同的系统上运行Python在访问模块的语法是一致的，这种特性使得由Python编写的程序可以容易方便的与用其他编程语言编写的程序模块轻松的“粘连”起来。这种特性也使得Python具有较高的可扩展性，从而依据自己的需要来编写模块进行组织搭配，或者在其他环境中使用Python.Python不单单是像JAVA一样单纯的面向对象语言，而又由于Python是由C语言为基础编写的，所以它同样拥有C语言的面向过程的特质.事实上Python融合了多种编程风格。2.2django简介Django是一个Web框架，最初被用来制作在线新闻的Web站点。Django的各模块之间结合得比较紧密，所以在功能强大的同时又是一个相对封闭的系统（依然是可以自定义的），但是其健全的在线文档及开发社区，使开发者在遇到问题时能找到解决办法。在编程开发方面，Django对编程初学者和编程老手都十分友好。对于新手，Django集成好的工具和部件，无须再费脑力去学习如何安装、调试、集成、兼容别的工具。Django把这些都集成好了，而且保证兼容性、可用性和方便性，就好比联想一体机，开机即用，效率也高。而一些如flask的框架，虽然精简，但是你要自己安装各种工具、ORM、插件等等，好比DIY电脑，在用之前，要知道买什么配件，怎么搭配，怎么组装，怎么配置效率才高，将新手的热情大量消耗在非关键性的内容上。其次，对于老手，Django也是开放的，完全可以关闭不必要的功能，忽略不使用的组件，或者自定义希望的组件，包括ORM和Template在内，都可以自由选择。2.3Bootstrap简介Bootstrap是一种前端开发框架，它使得Web前端的开发更加便捷，对于前端开发人员来说，使用Bootstrap框架开发前端，灵活简洁，可以拿来直接用，只需要把里面想换成自己的内容替换掉，即bootstrap=样式库+一堆jQuery插件。由于Bootstrap是完全开源的，因此在一定程度上降低了前段开发者的工作量，并且让初学者也可以开发出想要的效果。其组成是：1.基本结构：bootstrap就是样式库和一堆jQuery插件的集合。2.CSS：因为Bootstrap使用的某些HTML和CSS需要的文档类型为HTML5doctype，所以要创建html5文档，以确保CSS组件能够正确使用。然后在<head>里引入jquery.js、bootstrap.js、bootstrap.css文件。3.组件：为了让开发人员更加容易进行一些常规性的开发，开发人员可以利用这些组件很轻易地实现这些常规功能。4.JavaScript插件：在Bootstrap中可以安装JS插件，这些插件依赖于JQuery库，包括动画过渡、弹出框等一系列效果。2.4JQuery简介jquery是基于js的框架，js的作用就是动态处理css和html的相关过程。其主要目的是为了动态的处理静态页面的元素，属性等，让静态页面富有生命力。说起框架，jQuery应该是最早开始做框架的，jQuery主要是简化了操作DOM的方法，并提供了简单的动画效果。开发人员也通过JQuery构造了一个个页面特效、页面事件等，赋予浏览者更好的体验度。3系统分析3.1开发背景Python语言是当前非常流行的一种编程语言，它面向Web和开源特性，运行动态内容，在与数据库交互时，使用Python十分高效。相对于java和C#.net，Python语言的维护性以及可阅读性甚至更高，几乎可以在任何场合使用，因而受到大量的编程人员的欢迎。现在最火的人工智能和机器学习都少不了这种语言。因此我选择python语言作为本次开发网页应用的基本语言。3.2系统功能需求分析一个好的网页，不仅需要前端美观耐看，还需要完整的后台。本系统运用Django+Booststrap架构与mvc设计思想，同学们可以选择自己的姓名上传作业，并看到上交作业的情况。管理者可以进入后台查看同学们上交作业的详细情况，或者下载作业文件进行整理上交老师，还有图表进行数据展示3.3需要实现的几个页面功能由于追求方便和快捷，没有设计注册登录账号等功能。第一个上传作业页面中，同学们只需要选择自己的姓名之后，选择作业提交即可。然后可以看到已交名单出现自己的姓名。说明提交成功。如果提交错误可以二次提交。第二个微后台页面中，可以让管理者查看详细的提交顺序用于评分，最后可以下载作业文件提交老师。第三个图表展示页面中，可以清楚的看到前七天的网站访问量和每天的作业提交情况3.4系统的功能图3.5系统的开发环境在windows10系统下，以python语言为基本开发语言，通过运用django框架，sqlite数据库等相关知识，利用python语言的便于开发的特性以及MVC设计思路，来设计快捷收作业网站。安装，配置python在python官网（/）上下载安装python这里需要注意的是，Python安装在PC机上时，我们需要在电脑上设置环境变量，在其中加入其安装路径。我们需要在安装完毕后检查PC机是否已经安装好Python，检测的方法很简单，在命令提示符中输入python，如果能够出现它的版本号就表示Python已经安装完毕。2.安装django先把pip也添加进环境变量，在cmd中输入pipinstalldjango3.编辑器选择sublime特点：轻便，运行速度快，适配很多种语言的语法高亮，自动保存缺点：无法直接运行，只是编辑文件使用4.虚拟环境virtualenv在Python中有一个虚拟环境的概念，这个使得Python语言和其他变成语言相比效率更高。虚拟环境概念的提出是为了避免不同程序之间的影响，如果每个Python程序都共用同一个库和解释器，这就有可能导致程序之间执行。如一个程序A使用了一个Python库的一个版本，一个程序B使用了该库的另一个版本，尽管这两个程序独立运行并没有问题，但是如果程序B想要执行程序A时就会出现问题。基于这个问题，提出虚拟环境，即每个Python程序都会拥有自己的Python库和解释器，这样每个Python程序之间就不会互相干扰。安装只需要在cmd中输入pipinstallvirtualenv创建虚拟环境Virtualenv（）进入虚拟环境Scripts\activate退出虚拟环境deactivate4系统的设计与实现4.1开发模式我们采用django技术进行开发，在本文设计的快捷收作业系统中，对于接受用户输入的功能，不同于Java开发中使用控制器servlet进行操作，Django由框架自动处理。因此django技术使用的设计模式不是我们常见的MVC设计模式，而是MTV设计模式，模型和视图与MVC设计模式一致。简述请求过程：1.http向服务器发送请求，服务器接收请求。2.Django框架开始处理请求，调用视图函数进行处理。3.框架处理并存放数据的。

3.调用模板进行界面的展示。

4.视图函数返回响应至服务器。5.Web服务器将响应发送给客户端。4.2数据库设计在django框架中，每建立一个数据表，就有一个模型类与之对应。每个模型相当于单个数据库表，每个属性也是这个表中的一个字段。属性名就是字段名。Django与数据库进行交互的过程如下： 1)连接到指定的数据库  2)定义数据库模型  3)同步数据库,执行CRUD操作接下来，我们将展示在在py文件中创建数据库。在这个model.py文件中需要引入的文件或者库是：importosimportdjango.utils.timezoneastimezonefromdjango.dbimportmodelsfromdjango.db.models.fields.relatedimportManyToManyFieldfromdjango.db.models.fieldsimportDateTimeField这里设计了四个数据库表分别是：名字列表，实习报告周小结的作业表，指导老师联系表的作业表和每天访问人数的表。1.名字列表其中包括名字和分组：classNameList(models.Model): name=models.CharField(max_length=20) group_of_student=models.CharField(max_length=10,default=None) classMeta: verbose_name_plural="名字列表" def__str__(self): return2.实习报告周小结的作业表其中包括id，名字（名字列表中的主键），文件，上传时间，修改时间：classFilesList(models.Model): id=models.IntegerField(primary_key=True) name=models.ForeignKey(NameList,on_delete=models.CASCADE) file=models.FileField(upload_to='shixibaogaozhouxiaojie',null=True) upload_time=models.DateTimeField(auto_now_add=True) change_time=models.DateTimeField(auto_now_add=True) classMeta: verbose_name_plural="实习报告周小结" def__str__(self): return3.指导老师联系表的作业表其中包括id，名字（名字列表中的主键），文件，上传时间，修改时间：classCotactTableList(models.Model): id=models.IntegerField(primary_key=True) name=models.ForeignKey(NameList,on_delete=models.CASCADE) file=models.FileField(upload_to='zhidaolaoshilianxibiao',null=True) upload_time=models.DateTimeField(auto_now_add=True) change_time=models.DateTimeField(auto_now_add=True) classMeta: verbose_name_plural="指导老师联系表" def__str__(self): return4.访问数量记录表其中包括每天访问数量和时间4.3部分功能代码上传文件功能代码解析提交文件页面：前端页面代码：通过ajax动态上传数据，如果接收到error_msg的错误信息，则在页面中渲染出“出问题啦”的提示，如果未收到error_msg的错误信息，则弹窗提示上传成功。解析：通过form.py文件渲染前端页面对应form.py代码：后台的处理方法：后台接收到前台传递来的数据信息，会先进行一个判断。判断该数据是否合法，如果数据合法则调用save（）函数进行保存；否则系统将直弹出警告，提醒用户数据错误。上传作业页面下的已交名单与未交名单的代码解析页面展示：前端页面代码：通过后台传递过来的数据，用for循环遍历显示出来，就可以看到已交的名单和未交的名单后台处理方法：用django中的queryset查询集来获取数据库中的数据，queryset具有条件筛选的功能，可以轻松的筛选出需要的数据。Queryset具有懒惰的特点，创建了一个QuerySet对象，它不会直接返回数据集。等到使用它的时候，才解析该对象得到数据集。而且解析过一次会被缓存起来，下次使用时直接返回缓存中的数据，缓存的使用提高多次查询的效率。通过循环遍历筛选出需要的数据，用字典的方式传到对应的前端页面渲染数据。其中另一个作业界面的处理逻辑相同：微后台页面中分组排名的代码解析页面展示：前端页面代码：下面是实习报告周小结作业的前端代码，其中指导老师联系表作业的代码逻辑与其相同。通过后台发送的数据进行分组遍历展示出已交名单和未交名单，通过html的ol标签来展示排名后台处理方法：这里包括了两个作业的数据的后台处理同样是使用django中的queryset来完成数据的筛选，然后发送到前端页面渲染出来，这里的难点是数据比较多，需要保持清醒的头脑来思考其中的逻辑处理，还有数据的格式需要注意，不然无法提取出需要的数据来使用。微后台中下载整理文件的代码解析页面展示：前端页面代码：<ahref="/file_download/"download="category.zip"class="btnbtn-warningbtn-lgactive"role="button">下载文件</a><buttononclick='zhengliwenjian()'style="margin-left:9rem;"class="btnbtn-warningbtn-lgactive"role="button">整理文件</button>JS代码：解析：通过ajax来获取后台的参数，当成功获取后台的传递的JSON参数1时，证明后台的整理压缩文件操作完成，前端页面弹框提示“整理完毕”。若是未接收到，则弹框提示“整理失败”。 functionzhengliwenjian(){ $.ajax({ url:'/collate_files/', type:'GET',//请求类型，常用的有GET和POST data:{}, dataType:'JSON', success:function(date){ console.log(date) if(date[0]==1){ alert("整理完毕"); }else{ alert("整理失败"); } } }) }整理并压缩文件的后台处理方法：解析：整理文件首先对重复上传的文件进行去重，通过正则来查找对应的名字上传的文件，若是有多个文件则删除时间较早上传的文件，留下一个上传时间较晚的文件。在一系列的去重操作完成后再对文件进行重命名，让文件名保持规范整洁。当所有文件都整理完成后，就对指定文件进行压缩放到指定位置。最后向前端页面传递一个JSON参数。

对实习作业文件的整理逻辑：对指导老师联系表文件的整理逻辑：下载文件的后台处理方法：解析：通过相对地址下载制定zip压缩文件同学们在上传文件之后，并不会自动生成压缩包，文件夹文件无法直接下载，所以还要压缩文件的代码。考虑到系统的简便性，决定将压缩文件的功能添加到整理文件的时候，也就是点击整理文件按钮时都会生成一次最新的整理后的压缩文件，旧的压缩文件会被新的覆盖，这时点击下载就可以下载到最新的压缩文件。其中后台逻辑处理代码：数据图表展示页面的代码展示页面展示：前端页面代码：前端js代码：表格是有highcharts提供的js插件渲染出来的，其中接收数据也是用ajax来获取后台处理方法：解析：通过后台用queryset查询集来获取数据库中的数据，构造出前七天的日期，前七天每天各个作业的提交数量，前七天每天的网页访问数量网页的url解析Django中采用正则表达式来匹配所请求的url，这个叫做URLconf，作为MVC中的C(控制器)，这样再调用相应的试图，达到控制器控制试图的显示的效果。Django的后台系统Django有自带的后台系统，我们需要将设计好的model注册上去才可以在后台系统中看到，并且可以对其进行增删改查，在admin.py文件中：填入model的想要显示的字段，就可以在后台系统中看到后台页面详情：可以看出django的自带后台功能齐全，方便管理数据4.4系统前台设计网页的标题栏代码解析页面展示：采用了透明的标题栏，通过不同文字的颜色展示出标题选项响应式页面展示：如果是手机打开的页面，标题栏会如下图显示，点击标题栏右边的按钮可以看到其他选项前端代码：这是通过bootstrap前端框架来完成的标题栏，拥有响应式布局我们不能直接调用bootstrap的框架，在使用之前还需引入一些文件：<scriptsrc="/npm/jquery@1.12.4/dist/jquery.min.js"></script><scriptsrc="/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>CSS代码展示：主要是用于修改颜色2.背景图的代码解析背景图展示:用这个背景来当做所有页面的统一背景前端代码：<divclass="background"></div>CSS代码：通过样式来调整图片充满整个页面.background{position:fixed;height:100%;width:100%;max-width:100%;top:0;overflow:hidden;z-index:-1;pointer-events:none;background-color:#F1F1F1;background-image:url(:8000/photo/);background-size:100%100%;}后台处理方法：返回图片到前端页面defphoto(self): image_data=open('./myapp/11.jpg',"rb").read() returnHttpResponse(image_data,content_type="image/png")Url设置：path('photo/',views.photo,name='photo'),3.白色微透明背景代码解析页面展示：前端代码：<divclass="container"></div>CSS代码：通过浏览器F12调试，选择出合适的颜色和透明度，让页面更加好看.container{background-color:#ffffffc4;height:100%;}4.5页面打开速度优化5项目文件的简单部署5.1选择部署方式在学习web开发过程中，比如Django、Flask、webpy等框架的过程中，我们会有将网站上线的需求，用来测试或展示。PythonAnywhere是一个免费的托管python的代码，为了节省开发成本，我们选择在这上面进行django程序的开发。PythonAnywhere可以测试你的web应用，首先要在PythonAnywhere的官网()上注册账号，并根据自己的开发环境选择对应的环境，需要注意的是PythonAnywhere中的后台是linux系统，跟我进行的开发的windows系统的命令有一些不同。5.2开始部署1.用qq邮箱注册pythonanywhere的账号，用户名将是域名的前缀2.用在python项目文件中打开cmd输入pipfreeze>1.txt，将会生成1.txt文件，里面是项目所需要的库然后把python项目打包（zip格式）,上传pythonanywhere网站（放在自己用户名的文件夹下）。在pythonanywhere的console中选择bash进入linux终端，输入virtualenv--python=python3.6venv创建虚拟环境。s（虚拟环境和python项目文件可以分开放）在linux终端解压打包的python项目文件（在虚拟环境中）：进入对应文件夹后用命令unzipmytask.zip解压,进入解压后的项目文件下用命令：pipinstall-r1.txt安装所需要的库6.进入pythonanywhere网站的web页面，选择创建一个新的webapp，选择Manualconfiguration（includingvirtualenvs），选择python3.6，下一步即可。7.在Web页面中Code中的Sourcecode:/home/szy/mytask（其中szy是创建的用户名，mytask是项目文件）Workingdirectory:/home/szy/mytask8.Code中WSGIconfigurationfile:/var/www/szy_pythonanywhere_com_wsgi.py文件修改：9.Virtualenv:/home/szy/venv #这里填虚拟环境的位置Staticfiles:/static/ /home/szy/mytask/static #这里填静态文件的位置和路径10.在settings.py文件中改成ALLOWED_HOSTS=['',]，DEBUG改成DEBUG=False最后加上STATIC_URL='/static/'STATICFILES_DIRS=[os.path.join(BASE_DIR,'static'),]完成修改后reload网站，可以正常访问了，（需要