（13）使用python+flask实现树莓派的WEB控制-CSDN博客

https://blog.csdn.net/qq_34803821/article/details/86240096

如果你想在网页上点击按钮，并且让树莓派接收到响应，并做响应的处理，实现网页上与树莓派进行数据交互以及一些数据渲染，那么希望这篇文章对你有所帮助：
源码放在git：https://github.com/StarFishing/ardunio/tree/master
树莓派与Arduino进行通信可以参考另一篇文章：https://blog.csdn.net/qq_34803821/article/details/86238387
首先先看效果图，总体效果我会放在文章末尾
这是已经写好的HTML页面，我截取了其中一部分，当我们点击蓝色按钮，树莓派打开Arduino板上的风扇，点击红色按钮关闭风扇

百度网盘工程：

链接：https://pan.baidu.com/s/1JIh-XsiJI5PbGt9G7pOjWQ
提取码：zu5x
复制这段内容后打开百度网盘手机App，操作更方便哦

环境配置

准备材料：
树莓派上安装flask：sudo pip install flask
python 串口读取：sudo pip insall pyserial
我们针对树莓派进行讲解，我们如何实现点击的相应，让树莓派接收到事件呢？

树莓派服务器

# codinf:utf-8
from flask import Flask, render_template, Response, request
import serial
port = "/dev/ttyACM0"
app = Flask(__name__)
single = serial.Serial(port, 9600)
single.flushInput()


@app.route('/')
def index():
    single.flushOutput()
    single.flushInput()
    single.write('8')
    response = str(single.readline().decode())
    if response.startswith('hum:'):
        # cut int num
        hum = response[5:7]
        tem = response[-6:-3]
        templateData = {
            'tem': tem,
            'hum': hum
        }
        print(response.strip('\n'))
        return render_template('index.html', **templateData)


@app.route('/fopen', methods=['POST', 'GET'])
def fopen():
    if request.method == 'GET':
        return render_template('index.html')
    else:
        single.flushOutput()
        single.write('1')
        return "Open OK"


@app.route('/fclose', methods=['POST'])
def fclose():
    single.flushOutput()
    single.write('2')
    return "Close OK"


@app.route('/lclose', methods=['POST'])
def lclose():
    # single.flushOutput()
    # single.write('3')
    return "LED Close OK"


@app.route('/lopen', methods=['POST'])
def lopen():
    # single.flushOutput()
    # single.write('4')
    return "LED Open OK"


if __name__ == '__main__':
    app.run(host='0.0.0.0', port=8080, debug=True, threaded=True)
© 2019 GitHub, Inc.

在HTML里面，我们做这样一件事情：

将我们的点击事件异步提交到相应的路由下

<div class="open">
        <span class="warning">高温警告：</span>
        <span class="text">已自动为您打开风扇</span>
        <span class="close">关/开风扇：</span> <i id="close"></i
        ><i id="open"></i>
      </div>

$('.open i').click(function() {
    if (this.id == 'close') {
      $.post('/fclose', this.id, function(data, status) {})
    }
    if (this.id == 'open') {
      $.post('/fopen', this.id, function(data, status) {})
    }
  })

转载于:https://www.cnblogs.com/kekeoutlook/p/11119811.html