By

文章目录
  1. 1. 硬件连接
  2. 2. web搭建
  3. 3. 源码与效果

​ 最近树莓派4b发布女朋友买了个4g版本当七夕礼物送我，买来随便研究了下硕士的时候做嵌入式所以对硬件底层比较了解就先拿来做了点灯的小程序试试效果。效果就是通过网页web点击button控制树莓派连接的led灯的亮灭，用的技术栈有python、vue、django等。

硬件连接

要通过树莓派引脚(GPIO)控制led，需要做如下连接:

上图是网上找的一个大概示意图，led的两个引脚一端接地另外一端接GPIO，也可以一端接电源另外一端接GPIO引脚，别管怎么接主要目的就是通过控制GPIO输出高低电平来实现led的亮灭。led需要的电流比较小，所以要加电阻控制下，如果要通过GPIO控制大电流或者电压设备就需要到三极管或者继电器等元器件。

树莓派专门提供了python包RPi.GPIO来控制GPIO引脚，如果复杂功能或者驱动的话需要用到C语言的包，这个大家可以网上自己找下资料。

web搭建

web后台使用Django的rest framework，前端使用vue框架。

  1. Django后台搭建：

    Python3可以直接创建虚拟环境，使用以下命令创建：

    1
    2
    3
    4
    5
    6
    7
    mkdir led
    cd led
    python -m venv venv
    pip install django
    pip install djangorestframework
    ...
    pip install RPi.GPIO

    Django rest framework (安装文档)[https://www.django-rest-framework.org]，另外要注意安装RPi.GPIO要在树莓派上安装在本地电脑会报错。

  2. vue前端搭建：

    前端使用的是vue用的iview框架，这部分网上内容挺多的以下是官方的安装文档，安装之前请先装node环境：

    (vue安装)[https://cn.vuejs.org/v2/guide/installation.html#NPM]

    (iview安装)[https://www.iviewui.com/docs/guide/start#SYZQ]

###部署

  1. 以上都完成了，需要部署在树莓派上，我在树莓派上安装了nginx做转发：

    ssh到树莓派上安装nginx，如果安装报网络错误要更换下apt源

    1
    sudo apt-get install nginx

  2. 安装完成后将前后台项目拷贝到树莓派上，我的目录是：

    后台Django: /home/pi/test/led

    前端vue: /home/pi/dist

  3. 配置nginx转发，找到nginx的配置目录，增加led.conf文件，并添加如下内入

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    server {
            listen       80;#默认端口是80，如果端口没被占用可以不用修改
            server_name  192.168.2.167;

            #charset koi8-r;

            #access_log  logs/host.access.log  main;
            root        /home/pi/dist;#vue项目的打包后的dist

            location / {
                try_files $uri $uri/ @router;#需要指向下面的@router否则会出现vue的路由在nginx中刷新出现404
                index  index.html index.htm;
            }
            #对应上面的@router，主要原因是路由的路径资源并不是一个真实的路径，所以无法找到具体的文件
            #因此需要rewrite到index.html中，然后交给路由在处理请求资源
            location @router {
                rewrite ^.*$ /index.html last;
            }
      }

  4. 启动：

    启动nginx: sudo /etc/init.d/nginx start

    启动django: python3 manage.py runserver 0.0.0.0:8000 &

  5. Django部署也可以使用nginx+uwsgi方式，这里我就没在弄了，大家可以去网上搜集下资料

  6. 实现效果要求网页端和树莓派无线在一个局域网内，想要外网连接实现的话，需要有个域名外加上内网穿透工具实现，代码里都是用ip地址指向的运行的时候要改为实际ip或域名

源码与效果

  1. 源码我上传到了我的github上，仓库地址是：led
  2. 演示地址: B站
文章目录
  1. 1. 硬件连接
  2. 2. web搭建
  3. 3. 源码与效果