前言
这篇文章做一个简单的demo，介绍如何在PC端通过访问树莓派的IP地址：端口号来操控LED灯的亮灭，编程语言为后端python、前端html、css、js。
这里我用的是苹果电脑，可以先看我之前的文章MAC 使用远程桌面连接树莓派来搭建环境，然后看我之前写的一个实验python 树莓派实验一：跑马灯就知道如何在树莓派上用python编程控制LED灯了。两篇文章里讲过的东西，这篇文章都不会再讲。
有一点需要注意，为了凑期末报告的页数，我自行在前端加入了vue.js，然而加入vue.js的效果在PC端访问树莓派的网页页面并没有显示出来，由于时间紧急，我当时也没有真正实现加入vue.js后的页面效果。后面实验箱被收了，我也没有机会继续改进。所以在下文的介绍中，我会以vue.js的效果来呈现（因为好看），也会讲用了vue.js和不用vue.js的代码呈现。
效果
下面是PC端访问树莓派IP：端口号的页面效果：
点击D3之后，D3的圆圈变白，表示D3这个灯亮了：
树莓派的亮灯效果：
同样，如果再次点击D3，则D3的圆圈变灰，D3灯熄灭。就不放图了。
步骤
现在假定你已经能用电脑远程连接树莓派并且实现了LED灯控制的实验了。
经过多番百度，我决定在树莓派上使用Flask框架来写整个项目。Flask是一个使用 Python 编写的轻量级 Web 应用框架，它可以很好地结合MVC模式进行开发，且拥有内置服务器。我把flask理解为后端框架，然后前端引入vue.js来写。
1、树莓派搭建flask框架的环境
要在树莓派上运行flask的项目，就必须先搭建flask的环境。我可能有点遗忘，应该是在终端输入如下两行命令，如果不行读者再自行百度吧，反正很简单。
sudo apt-get install python-pip
sudo pip install flask
2、编写flask项目
（1）不使用vue.js的写法
整个项目的结构如下：
所以对于读者而言，要在树莓派上先创建文件夹project。在project文件夹中，创建app.py文件和templates文件夹。这个templates文件夹好像必须这么命名，不然有错？俺也不知。再在templates文件夹中创建main.html。
咱们先来看看app.py如何编写。
from flask import Flask, render_template
import RPi.GPIO as GPIO
import time
设置GPIO编号方式为BCM
GPIO.setmode(GPIO.BCM)
GPIO的初始化，这里只列举编号为2的引脚
GPIO.setup(2, GPIO.OUT)
GPIO.output(2, GPIO.HIGH)
GPIO.setwarnings(False)
app=Flask(__name__)
主页路由，代表访问树莓派IP：端口号时所呈现的页面为templates文件夹下的main.html文件
@app.route("/")
def main():
return render_template("main.html")
将GPIO引脚编号为2的LED灯点亮
@app.route("/on")
def on():
GPIO.output(2, GPIO.LOW)
return render_template("main.html")
将GPIO引脚编号为2的LED灯熄灭
@app.route("/off")
def off():
GPIO.output(2, GPIO.HIGH)
return render_template("main.html")
if __name__ == "__main__":
# host是树莓派的IP地址，port是自行设置的端口号。在PC端网页访问树莓派时写就是这两个
app.run(host='192.168.2.2', port='5000', debug=True)
其实和实验一的代码很像，只是加入了flask和三个路由。前端页面只要访问这些路由就能调用路由包含的方法，进而控制树莓派GPIO接口。
接着写main.html，写一对控制D2灯开关的按钮：
LED灯开关
开
关
写好了你就打开app.py，让它运行起来。然后在PC端打开浏览器，输入树莓派IP：端口号进行访问，这里我的是192.168.2.2:5000。你就能看到一对开关按钮，点了开，D2就开了，点了关，D2就灭了。图略。
（2）使用vue.js的写法
整体结构是这样的：
其中vue.js和vue官方推荐的网络通信库axios.js是外部引入的包，要去bootCDN网站下载。
https://cdn.bootcdn.net/ajax/libs/vue/2.6.9/vue.js
https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.js
然后创建main.js，就能开始写vue框架下的js了。先在main.html的标签内引入这三个js，注意顺序不能改。
（半途而废了）
Original: https://blog.csdn.net/qq_33514421/article/details/118513494
Author: Hillbox
Title: 基于树莓派实现网页端控制LED灯
原创文章受到原创版权保护。转载请注明出处：https://www.johngo689.com/746980/
转载文章受原作者版权保护。转载请注明原作者出处！