Python+Django人脸识别考勤系统网站

2023-08-30 191

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： 这篇博客针对<<Python+Django人脸识别考勤系统网站>>编写代码，代码整洁，规则，易读。学习与应用推荐首选。

程序示例精选

Python+Django人脸识别考勤系统网站

如需安装运行环境或远程调试，可点击右边博主头像或昵称进入个人主页查看博主联系方式，由专业技术人员远程协助！

前言

这篇博客针对<<Python+Django人脸识别考勤系统网站>>编写代码，代码整洁，规则，易读。学习与应用推荐首选。

文章目录

一、所需工具软件

二、使用步骤

1. 引入库

2. 代码实现

3. 运行结果

三、在线协助

一、所需工具软件

1. Python，Pycharm

2. Django

二、使用步骤

1.引入库

<html>
<head>
<meta charset="utf-8">
<meta content="width=device-width,user-scalable=no" name="viewport">
<title>login</title>
<style type="text/css">
    #box4{
        background-color: #5ACCC9;
        width: 500px;
        height: 50px;
        margin:auto ;
        float: left;
        position:absolute;
        top: -290;
        left: 0;
        right: 0;
        bottom: 0;
        border-style:none;
        border-radius: 5px;
    }
    #box1{
        background-color: #8C7EF3;
        width: 500px;
        height: 300px;
        margin:auto ;
        float: inline;
        position:relative;
        top: 10px;
        left: 0;
        right: 0;
        bottom: 0;
        border-style:none;
        border-radius: 5px;
    }
    .p1{
        color: black;
        font-size: 20px;
        margin-left:20px;
        margin-top: 25px;
        font-family: microsoft yahei;
        font-weight: normal;
        text-align: left;
        line-height:23px;
        position: center;
    }
    #box2{
        background-color: #8C7EF3;
        width: 120px;
        height: 250px;
        margin-top:20px;
        margin-left:70px;
        float: left;
        text-align: center;
        position:static;
    }
    #box3{
        background-color: #8C7EF3;
        width: 230px;
        height: 250px;
        margin-top:20px;
        float: left;
        text-align: center;
        position:static;
    }
    #input0{
        width: 200px;
        height: 30px;
        margin-top:20px;
    }
    #input1{
        width: 100px;
        height: 50px;
        margin: 20px;
        font-family: microsoft yahei;
        font-weight: normal;
        font-size: 16px;
    }
    #input2{
        width: 130px;
        height: 50px;
        margin: 0px;
        font-family: microsoft yahei;
        font-weight: normal;
        font-size: 16px;
        float: left;
        border-width: 0px;
        border-radius: 3px;
    }
    #pgheader1{
        background: rgb(51,51,51);
        width: 100%;
        min-width: 960px;
        height: 35px;
        margin: 0px auto;
        width: 100%;
        position: relative;z-index:5;
        border-color: rgb(255, 255, 255);
        border-width: 0px;
        border-style: solid;
        }
    #pgheader2{
        padding-top: 10px;
        padding-right: 0px;
        display: inline-block;
        z-index: 1000;
        color: rgb(255,255,255);
        font-size:15px;
    }
</style>
</head>

2. 代码实现

代码如下:

<body style="background-color: #5ACCC9;">
    <div class="rowright" >
        <a class="box" href="/accounts/logout/">注销</a>
        <a class="box" href="/accounts/login/">登录</a>
    </div>
    <div  style="width:100%;text-align: center;">
            <DIV ID="pgheader1";><a ID="pgheader2" >XXX管理网站</a></DIV>
            <div>
                <h1 style="font-family:'Microsoft YaHei';font-size:30px";>人脸识别考勤管理系统</h1>
            </div>
    </div>
    <div class="row">
        <div class="row">
            <!-- Add id to image -->
            <div class="box" style="background-color: #896bda;height:400px;">
                <img id="image" src="" alt="" width="300" height="300"/>
            </div>
            <!-- 按钮1 -->
<!--            <div class="box" >-->
<!--                <button type="button" onclick="show()" id="input1">打开视频窗口</button>-->
<!--            </div>-->
        </div>
        <div class="row">
            <div class="container">
                <!--修改文章 -->
                <form style="margin-top: 7.2px;width: 250px;height: 370px" action="" method="post" enctype="multipart/form-data">
                    {% csrf_token %}
                    <div align="center">
                        <div ><label>编号：</label><input type="text" name="idnumberWeb" ></div>
                        <div><label>英文名：</label><input type="text" name="nameWeb" ></div>
                        <div><label>中文名：</label><input type="text" name="chinese_nameWeb" ></div>
                    </div>
                    <select name="app" style="width:100px;height:43px;">
                        <option value="selectItem" style="text-align: center; ">选择功能</option>
                        <option value="gatherF" style="text-align: center; ">gatherF</option>
                    </select>
                    <input type="submit" value="&nbsp&nbsp录入人脸&nbsp&nbsp">
                </form>
                <!--修改文章结束 -->
            </div>
            <div>
                <div class="container" style="text-align: center; " >
                    <!--显示文章 -->
                    <form style="margin-top: 10px;width: 150px" action="" method="post" enctype="multipart/form-data">
                        {% csrf_token %}
                        <input type="text" name="itemWeb" hidden value="initM">
                        <input type="submit" value="初始化模型">
                    </form>
                    <!--显示文章结束 -->
                </div>
                <div class="container" style="text-align: center; " >
                    <!--显示文章 -->
                    <form style="margin-top: 10px;width: 150px" action="" method="post" enctype="multipart/form-data">
                        {% csrf_token %}
                        <input type="text" name="itemWeb" hidden value="stopM">
                        <input type="submit" value="&nbsp&nbsp停止模型&nbsp&nbsp">
                    </form>
                    <!--显示文章结束 -->
                </div>
                <div class="container" style="text-align: center;">
                    <!--显示文章 -->
                    <form style="margin-top: 10px;width: 150px;" action="" method="post" enctype="multipart/form-data">
                        {% csrf_token %}
                        <input type="text" name="idnumberCourseWeb" value="输入课程编号" style="width:120px;"><br>
                        <input type="text" name="itemWeb" hidden value="recognF">
                        <input type="submit"  value="&nbsp&nbsp识别人脸&nbsp&nbsp">
                    </form>
                    <!--显示文章结束 -->
                </div>
                <div class="container" style="text-align: center; ">
                    <!--显示文章 -->
                    <form style="margin-top: 10px;width: 150px" action="" method="post" enctype="multipart/form-data">
                        {% csrf_token %}
                        <input type="text" name="itemWeb" hidden value="trainF">
                        <input type="submit" value="&nbsp&nbsp训练人脸&nbsp&nbsp">
                    </form>
                    <!--显示文章结束 -->
                </div>
            </div>
        </div>
    </div>
    <div id="divT" style="background-color: #0d95e8;width: 835px;height: 100px;border-radius: 5px;margin: 20px auto;font-size: 36px;font-family: 'Microsoft YaHei'; display: flex;align-items: center;justify-content: center; "></div>
<!--    <div class="row">-->
<!--        <form action="" method="post" enctype="multipart/form-data" style="background-color: #86cfda;height:120px;width: 790px;display: flex;">-->
<!--            {% csrf_token %}-->
<!--            <div class="box" style="background-color: #896bda;height:100px;width: 900px;display: inline-block;">-->
<!--                <input type="text" name="checkCoursePlan" hidden value="checkCoursePlan">-->
<!--                <input type="text" id="showPlan"  style="height: 90px">-->
<!--            </div>-->
<!--            <div class="box"  style="width: 180px">-->
<!--                <input type="submit" value="查看课程计划" id="input1" style=";width:150px ">-->
<!--            </div>-->
<!--        </form>-->
<!--    </div>-->
<style>
  table {
    width: 100%;
    max-width: 830px;
    border-collapse: collapse;
  }
  th, td {
    padding: 0.5em 1em;
    text-align: center;
    border: 1px solid #ccc;
  }
  th {
    background-color: #eee;
    font-weight: bold;
    text-align: center;
  }
</style>
<div style="width: 100%; display: flex; justify-content: center;">
  <table style="margin: auto;">
    <thead>
      <tr>
        <th>课程编号</th>
        <th>名称</th>
        <th>教师姓名</th>
        <th>开始时间</th>
        <th>结束时间</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        {% for field in BookRoomT %}
            <tr>
                <td>{{ field.id }}</a></td>
                <td>{{ field.course }}</td>
                <td>{{ field.chinese_name }}</td>
                <td>{{ field.start_time }}</td>
                <td>{{ field.close_time }}</td>
            </tr>
        {% endfor %}
      </tr>
    </tbody>
  </table>
</div>
{% if messages %}
<script>
    {% for msg in messages %}
        alert('{{ msg.message }}');
    {% endfor %}
</script>
{% endif %}
<script type="text/javascript">
    var gatherT = "{{gatherT}}"
    const intervalId = setInterval(function() {
        console.log("gatherT:",gatherT)
        if (gatherT === "采集结束") {
            var image = document.getElementById("divT");
            divT.innerHTML = "采集结束";
            clearInterval(intervalId);
        }
    }, 1000);
</script>
<script type="text/javascript">
    var trainT = "{{trainT}}"
    const intervalId2 = setInterval(function() {
        console.log("trainT:",trainT)
        if (trainT === "训练结束") {
            var image = document.getElementById("divT");
            divT.innerHTML = "训练结束";
            clearInterval(intervalId2);
        }
    }, 1000);
</script>
<script type="text/javascript">
    var stringT2 = "{{stringT2}}"
    var chinese_name = "{{chinese_nameT}}"
    var idnumberNum = "{{idnumberNumT}}"
    const intervalId3 = setInterval(function() {
        console.log("stringT2:",stringT2)
        if (stringT2 === "识别成功") {
            var image = document.getElementById("divT");
            divT.innerHTML = "姓名:" + chinese_name + "编号:"+ idnumberNum + "  "+"识别成功";
            clearInterval(intervalId3);
        }
    }, 1000);
</script>
<!--<script>-->
<!--    var coursePlanT = "{{coursePlanT}}"-->
<!--    setInterval(function() {-->
<!--        // var stringT1 = "{{stringT1}}"-->
<!--        console.log("coursePlanT:",coursePlanT)-->
<!--        var showPlanT = document.getElementById("showPlan");-->
<!--        showPlanT.value +=coursePlanT;-->
<!--    }, 1000);-->
<!--</script>-->
</body>
</html>

3. 运行结果

编辑

三、在线协助：

如需安装运行环境或远程调试， 可点击右边 博主头像 或昵称， 进入个人主页查看博主联系方式 ，由专业技术人员远程协助！

1）远程安装运行环境，代码调试
2）Qt, C++, Python入门指导

3）界面美化

4）软件制作

博主推荐文章：python人脸识别统计人数qt窗体-CSDN博客

博主推荐文章：Python Yolov5火焰烟雾识别源码分享-CSDN博客

Python OpenCV识别行人入口进出人数统计_python识别人数-CSDN博客

个人博客主页：alicema1111的博客_CSDN博客-Python,C++,网页领域博主

博主所有文章点这里：alicema1111的博客_CSDN博客-Python,C++,网页领域博主

Python+Django人脸识别考勤系统网站

前言