前言  

这篇文章做一个简单的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：端口号的页面效果：

python控制led颜色 python控制led灯_flask

点击D3之后，D3的圆圈变白，表示D3这个灯亮了：

python控制led颜色 python控制led灯_python_02

 树莓派的亮灯效果：

python控制led颜色 python控制led灯_嵌入式开发_03

同样，如果再次点击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的写法

整个项目的结构如下：

python控制led颜色 python控制led灯_vue_04

所以对于读者而言，要在树莓派上先创建文件夹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灯开关的按钮：

<!doctype html>
<html lang="zh-cn">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1">
  <title>LED灯开关</title>
</head>
<body>
  <a href="/on?num=2" role="butoon">开</a>
  </br>   
  <a href="/off?num=2" role="button">关</a>
</body>
</html>

写好了你就打开app.py，让它运行起来。然后在PC端打开浏览器，输入树莓派IP：端口号进行访问，这里我的是192.168.2.2:5000。你就能看到一对开关按钮，点了开，D2就开了，点了关，D2就灭了。图略。

（2）使用vue.js的写法

整体结构是这样的：

python控制led颜色 python控制led灯_python_05

其中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的<body>标签内引入这三个js，注意顺序不能改。

<script src="axios.js"></script>
<script src="vue.js"></script>
<script src="main.js"></script>

（半途而废了）