python不用框架实现前后端交互 python前后端分离框架

Python flask 打造前后端分离的口罩检测

整体设计思路是前后端分离，前端就是简单的html css来搭建，前后端交互使用的是jquery中的ajax技术，将前端接受到的图片进行base64编码，之后使用ajax发送到指定的url中，并在done函数添加回调，接受处理返回结果，将json结果 通过canvas控件绘图。后端的话就是使用python编写的轻量级的web框架flask，接受前端发过来的base64编码的图片，并对其解码，转换成PIL的图像对象，使用numpy转成矩阵，以便调用模型来检测检测。
github地址

背景知识点一、python flask框架

python flask

一个最小的 Flask 应用如下:

from flask import Flask
app = Flask(__name__)

@app.route('/')
def hello_world():
    return 'Hello, World!'

那么，这些代码是什么意思呢？

1. 首先我们导入了 Flask 类。 该类的实例将会成为我们的 WSGI 应用。
2. 接着我们创建一个该类的实例。第一个参数是应用模块或者包的名称。如果你使用 一个单一模块（就像本例），那么应当使用 __name__ ，因为名称会根据这个 模块是按应用方式使用还是作为一个模块导入而发生变化（可能是 ‘main’ ， 也可能是实际导入的名称）。这个参数是必需的，这样 Flask 才能知道在哪里可以 找到模板和静态文件等东西。更多内容详见 Flask 文档。
3. 然后我们使用 route() 装饰器来告诉 Flask 触发函数的 URL 。
4. 函数名称被用于生成相关联的 URL 。函数最后返回需要在用户浏览器中显示的信息。

把它保存为 hello.py 或其他类似名称。请不要使用 flask.py 作为应用名称，这会与 Flask 本身发生冲突。

可以使用 flask 命令或者 python 的 -m 开关来运行这个应用。在 运行应用之前，需要在终端里导出 FLASK_APP 环境变量:

$ export FLASK_APP=hello.py
$ flask run
 * Running on http://127.0.0.1:5000/

背景知识点二、ajax

ajax使用

AJAX = 异步 JavaScript 和 XML。

AJAX 是一种用于创建快速动态网页的技术。

通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。

传统的网页（不使用 AJAX）如果需要更新内容，必需重载整个网页面。

有很多使用 AJAX 的应用程序案例：新浪微博、Google 地图、开心网等等。

实例使用

function communicate(img_base64_url) {
  $.ajax({
    url: "http://localhost:5000/api/",
    type: "POST",
    contentType: "application/json",
    data: JSON.stringify({"image": img_base64_url}),
    dataType: "json"
  }).done(function(response_data) {
      drawResult(response_data.results);
  });
}

背景知识点三、base64图片编码

图片的 base64 编码就是可以将一副图片数据编码成一串字符串，使用该字符串代替图像地址。

这样做有什么意义呢？我们知道，我们所看到的网页上的每一个图片，都是需要消耗一个 http 请求下载而来的（所有才有了 csssprites 技术的应运而生，但是 csssprites 有自身的局限性，下文会提到）。

没错，不管如何，图片的下载始终都要向服务器发出请求，要是图片的下载不用向服务器发出请求，而可以随着 HTML 的下载同时下载到本地那就太好了，而 base64 正好能解决这个问题。

那么为什么要使用 base64 传输图片文件？上文也有提及，因为这样可以节省一个 http 请求。图片的 base64 编码可以算是前端优化的一环。效益虽小，但却缺能积少成多。

前后端分离的口罩检测

• pyhon -m http.server

• python app.py