Python Web开发：人脸识别前端说明页面

前端说明页面

在serviceApp应用的templates文件夹中新建文件platForm.html ,

该页主要对”人脸识别开放平台“的接口基本信息进行阐述，同时给出了基于Python的接口调用示例。

在代码演示部分，实现了适合Python格式的语法高亮。

CodeMirror

CodeMirror 是一款“Online Source Editor”，基于Javascript，短小精悍，实时在线代码高亮显示，他不是某个富文本编辑器的附属产品，他是许多大名鼎鼎的在线代码编辑器的基础库。

下载地址：codemirror.net/

也可从本书配套资源中找到该插件包。

实训步骤

配置插件资源

把codemirror.css,codemirror.js 和python.js文件从CodeMirror插件包中复制到static文件下css和js子文件夹中。

编写前端页面

platForm.html:

{% extends "base.html" %}
{% load staticfiles %}

{% block title %}
人脸识别开放平台
{% endblock %}

{% block content %}
<link href="{% static 'css/news.css' %}" rel="stylesheet">
<link rel="stylesheet" href="{% static 'css/codemirror.css' %}">
<script src="{% static 'js/codemirror.js' %}"></script>
<script src="{% static 'js/python.js' %}"></script>
<style type="text/css">
    .CodeMirror {
        border-top: 1px solid black;
        border-bottom: 1px solid black;
    }
</style>
<!-- 广告横幅 -->
<div class="container-fluid">
    <div class="row">
        <img class="img-responsive model-img" src="{% static 'img/service.jpg' %}">
    </div>
</div>
<!-- 主体内容 -->
<div class="container">
    <div class="row row-3">
        <!-- 侧边导航栏 -->
        <div class="col-md-3">
            <div class="model-title">
                服务支持
            </div>
            <div class="model-list">
                <ul class="list-group">
                    <li class="list-group-item" id='download'>
                        <a href="{% url 'serviceApp:download' %}">资料下载</a>
                    </li>
                    <li class="list-group-item" id='platform'>
                        <a href="{% url 'serviceApp:platform' %}">人脸识别开放平台</a>
                    </li>
                </ul>
            </div>
        </div>
        <!-- 说明文字和图片 -->
        <div class="col-md-9">
            <div class="model-details-title">
                人脸识别接口文档
            </div>
            <div class="model-details">
                <h3>一. 体验产品</h3>
                </br>
               
                
                <h3>二. API接口说明</h3>
                </br>
                <h4><strong>基本信息：</strong></h4>
                <p>
                    请求类型：HTTP/HTTPS。请求方式：POST
                </p>
                <p>
                    接口地址：http://myhengda.cn/serviceApp/facedetect/
                </p>
                </br>
                <h4><strong>接口描述：</strong></h4>
                <p>
                    人脸检测，此接口多用于调用人脸识别、人脸比对的接口之前，用于从图像数据中检测出人脸区域，并以
                    矩形框形式返回人脸检测结果。目前该接口仅供测试使用，调用该接口暂时不限制调用次数。
                </p>

                </br>
                <h4><strong>本地调用示例：</strong></h4>

                <div><textarea id="code" name="code">
    import cv2, requests
    # web地址(http://localhost:8000)+访问接口（facedetect）
    url = "http://localhost:8000/serviceApp/facedetect/"

    # 上传图像并检测
    tracker = None
    imgPath = "face.jpg"  #图像路径
    files = {
        "image": ("filename2", open(imgPath, "rb"), "image/jpeg"),
    }

    req = requests.post(url, data=tracker, files=files).json()
    print("获取信息: {}".format(req))

    # 将检测结果框显示在图像上
    img = cv2.imread(imgPath)
    for (w, x, y, z) in req["faces"]:
        cv2.rectangle(img, (w, x), (y, z), (0, 255, 0), 2)

    cv2.imshow("face detection", img)
    cv2.waitKey(0)
                </textarea></div>
                </br>


            </div>
        </div>
    </div>
</div>

<script>
    var editor = CodeMirror.fromTextArea(document.getElementById("code"), {
        mode: {
            name: "python",
            version: 3,
            singleLineStringErrors: false
        },
        lineNumbers: true,
        indentUnit: 4,
        tabMode: "shift",
        matchBrackets: true
    });
</script>
{% endblock %}

• codemirror.css codemirror.js 和python.js可以从CodeMirror插件包中找到，将其复制到static文件夹下的css和js文件夹中。

• 使用时通过<textarea>标签来实现代码的显示和编辑。

修改视图函数

service/views.py:

# Create your views here.
def platform(request):
    return render(request, 'platForm.html', {
        'active_menu': 'employ',
        'sub_menu': 'contact',
    })

验证

重启服务器，浏览器打开.