目录
开发技术使用简单的三件套+jquery+后端PHP实现简单的文件收集功能,因为主要功能都是python实现,网站只是辅助收集报告而已,无需过多关注。
源代码:-system/Web at main · abcdefg-png/-system (github.com)
前端
前端部分使用传统三件套+jquery+bootstrap,可以展示项目开发人员列表和提交要求,上传图片时实现图片预览,并且检测用户输入的是否为空,是否为学号。
首先我们引入jquery和bootstrap的核心css,js文件
<!-- jquery -->
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<!-- bootstrap核心 js 与 css 文件 -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<!-- bootstrap 图片上传相关文件 -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-fileinput/4.4.9/css/fileinput.min.css" media="all" rel="stylesheet" type="text/css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-fileinput/4.4.9/js/plugins/piexif.min.js" type="text/javascript"></script>
</script>
首先,设置一个简单的空白抬头,使页面可以在中间显示:
style>
#main-form
{
margin-top: 30px;
}
</style>
之后在body下面套一层div和form表单:
<form id="form" action="hesuan.php" class="form-horizontal" method="post" enctype="multipart/form-data" onSubmit="return finaljudgeSno();">
...
...
</form>
我们用textarea展示文本内容,例如开发者、鸣谢者名单和提交要求之类的信息。class="form-control"
是bootstrap专有样式,使用rows = 7
可以对宽度进行调整。这里还要说明一下,textarea真的是textarea,回车空行都是会显示的,比较方面。
<div class="form-group">
<label class="col-md-2 control-label small"><span class="text-danger"></span>系统介绍:</label>
<div class="col-md-10 has-success">
<textarea name="introduction" readonly type="text" class="form-control" placeholder="" rows = "7">系统作者:杨浩然,彭兴锴,曾品典,方友清,王晓晖
指导老师:吕皖丽老师,郭星老师,郭佳明(导生),张雨(学长)
特别鸣谢:丛言
</textarea>
</div>
</div>
选择图片后的界面是这样的:
使用这段网上写好的js(现在真的找不到原作者了,大海捞针)来实现图片的预览,我本人也不是什么JavaScript高手,有些代码还是喜欢搬运一下哈哈哈
这里很多设置也都加入了注释,允许同时上传文件个数我们设置成1。
<script>
// 图上传与预览相关控制
$('#pic').fileinput
(
{
showUpload : false, //是否显示上传按钮,跟随文本框的那个
showRemove : false, //显示移除按钮,跟随文本框的那个
showCaption : true,//是否显示标题,就是那个文本框
showPreview : true, //是否显示预览,不写默认为true
dropZoneEnabled : false,//是否显示拖拽区域,默认不写为true,但是会占用很大区域
maxFileCount : 1, //表示允许同时上传的最大文件个数
enctype : 'multipart/form-data',
validateInitialCount : true,
previewFileIcon : "<i class='glyphicon glyphicon-king'></i>",
allowedFileTypes : [ 'image' ],//配置允许文件上传的类型
allowedPreviewTypes : [ 'image' ],//配置所有的被预览文件类型
allowedPreviewMimeTypes : [ 'jpg', 'png', 'gif' ],//控制被预览的所有mime类型
language : 'zh'
}
)
// 控制生成的代码的样式
$('input.file-caption-name').attr('placeholder', '点击右方按钮选择图片');
$('span.hidden-xs').text("选择图片");
</script>
之后再用这段代码,判断一下用户输入的是不是学号。
<script>
var tag = 0;
judgeSno = function() {
var sno = document.getElementById("sno");
var str = "";
str =sno.value
var Regex = /\w/; //英文 + 字母
var str1 = str[0];
var str1Code = str1.charCodeAt();
var hightag = 0;
if(str1Code >= 65 && str1Code <= 90){
hightag = 1; // 判断首字母是否为大写
}
if (str.length == 9 && (sno.value.match(Regex) && hightag == 1 )) {
document.getElementById("checkSno").innerText = "格式正确";
document.getElementById("checkSno").style.color = "green";
tag = 1;
} else {
document.getElementById("checkSno").innerText = "格式不对";
document.getElementById("checkSno").style.color = "red";
tag = 0;
}
return tag;
}
</script>
<script>
finaljudgeSno = function(){
var finaltag = tag;
if(finaltag == 0){
alert("请输入正确的学号!")
return false;
location='https://www.xinanzhijia.xyz/hesuan.html';
}
else{
return true;
}
}
</script>
后端
后端使用简单的php,实现将上传图片移动到服务器某目录的功能。多余的一项功能是将上传的图片命名成学号,并且读取文件名的同时将后缀名直接改成.jpg。同时,连接数据库判断这个学号是不是属于这个班级的,如果不属于则返回提示信息,下面是PHP的后端代码:
<?php
header("Content-type: text/html; charset=utf-8");
$userName='';
$passWord='';
$host='localhost';
$dataBase='homework';
$tbname='data1';
$conn=mysqli_connect($host,$userName,$passWord,$dataBase);
if (mysqli_connect_errno($conn))
{
echo "连接 MySQL 失败: " . mysqli_connect_error();
}
$upload_file = $_FILES["file"];
$upload_name = $_POST["name"];
$store_dir = 'hesuan/Xinan/'; // 改!!!!!1
if($upload_file["error"]>0){
// echo "错误:".$file["error"];
if($upload_file["error"]==4){
echo "<script>alert('请选择图片提交');
location='hesuan.html'
</script>";
}
}// 链接改!!!!!!
$sql="select * from {$tbname} where username='$upload_name' ";
$result=mysqli_query($conn,$sql);
$row = mysqli_fetch_assoc($result);
if ($row > 0) {
$arr = ".jpg";
$new_name ="{$upload_name}{$arr}";
$upload_file["name"] = $new_name;
$name = iconv('utf-8','gbk',"hesuan/Xinan/".$upload_file["name"]); // 改!!!!!
if(move_uploaded_file($upload_file['tmp_name'],$name)){
move_uploaded_file($upload_file['tmp_name'],$store_dir.$new_name);
echo "<script>alert('提交成功');
location='hesuan.html';
</script>";
}
else{
echo "<script>alert('提交失败');
location='hesuan.html';
</script>";
}
}
else{
echo "<script>alert('学号在数据库中不存在');
</script>";
}
?>
总结
到这里,我们终于完成了逻辑闭环。
Step1:同学们将核酸检测的截图提交到网页(并输入合规的学号)
Step2:服务器将文件统一收到某个文件夹下,进行智能识别匹配,将结果写入对应班级的数据库。
Step3:从数据库调出目前的提交情况,反馈到可视化界面和Excel表格(管理员可查看\下载)
Step4:Python实现定时工作并定期删除全部的报告,数据实现阶段更新的大循环。
异常处理
-
首先,我们能够保证学生提交的图片:命名为学号,格式为.jpg。这样一来,python的路径中将不含有中文路径,opencv读取的图片也一定是jpg格式。
-
不论是图片损坏,图片时间识别失败,图片结果识别失败,都有对应的异常处理,可以反馈识别失败和结果存疑这类的异常。
-
项目部署没有问题,可以长期挂载运行python的执行脚本,根据需求安排进程,保证服务器的负载均衡和服务稳定。