核酸检测识别系统——网站开发

发布于:2023-01-22 ⋅ 阅读:(6) ⋅ 点赞:(0) ⋅ 评论:(0)

目录 

        前端

        后端

        总结


开发技术使用简单的三件套+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实现定时工作并定期删除全部的报告,数据实现阶段更新的大循环。

异常处理

  1. 首先,我们能够保证学生提交的图片:命名为学号,格式为.jpg。这样一来,python的路径中将不含有中文路径,opencv读取的图片也一定是jpg格式。

  2. 不论是图片损坏,图片时间识别失败,图片结果识别失败,都有对应的异常处理,可以反馈识别失败和结果存疑这类的异常。

  3. 项目部署没有问题,可以长期挂载运行python的执行脚本,根据需求安排进程,保证服务器的负载均衡和服务稳定。