用django、vue、element-ui编写代码

用django、vue、element-ui编写以下代码。要求是：ESP32用心跳包形式每10秒发送一个自身mac到本地服务器进行验证，与后台对应mac验证成功的话就在网页上显示“在线”，icon图标显示绿色；验证不成共则在网页上显示“设备丢失”，icon图标显示红色。

Django代码：

# views.py
from django.shortcuts import render
from django.http import JsonResponse
from .models import Device

def check_device(request):
    # 判断请求方式是否为POST，如果不是POST方式直接返回
    if request.method == 'POST':
        # 从请求中获取mac地址，request.POST.get('mac')是获取POST请求中的mac的值
        mac = request.POST.get('mac')
        # 查询对应mac地址的设备是否存在，Device.objects.filter(mac=mac)是查询满足条件的对象，first()取第一个，如果有就返回这个，没有返回None
        device = Device.objects.filter(mac=mac).first()
        if device:
            # 设备存在，返回success
            return JsonResponse({'status': 'success'})
        else:
            # 设备不存在，返回fail
            return JsonResponse({'status': 'fail'})

# models.py
from django.db import models

class Device(models.Model):
    # 定义mac地址字段，CharField是定义字符串类型的字段，max_length是最大长度
    mac = models.CharField(max_length=17)

# urls.py
from django.urls import path
from .views import check_device

# 定义check_device路由，path是定义路由，check_device是视图函数，name='check_device'是路由名称
urlpatterns = [
    path('check_device/', check_device, name='check_device'),
]
需要学习知识点：

Django的路由配置，如何使用path()和urlpatterns定义路由
Django的请求和响应，如何使用request和JsonResponse处理请求和响应
Django的数据库操作，如何使用models定义数据库模型，如何使用

Vue代码：

// App.vue
<template>
  <div id="app">
    <div v-for="device in devices" :key="device.mac">
      <p>{{ device.mac }}</p>
      <el-icon :class="{'el-icon-success': device.status === 'success', 'el-icon-error': device.status === 'fail' }"
               :style="{ color: device.status === 'success' ? 'green' : 'red' }"></el-icon>
      <p v-if="device.status === 'success'">在线</p>
      <p v-else>设备丢失</p>
    </div>
  </div>
</template>

<script>
import axios from 'axios'

export default {
  data() {
    return {
      devices: []
    }
  },
  created() {
    // 定时器，每10秒调用一次checkDevice
    setInterval(this.checkDevice, 10000)
  },
  methods: {
    checkDevice() {
      // 获取当前ESP32的mac地址
      let mac = 'ESP32_MAC'
      // 发送POST请求，请求地址为/check_device/，请求参数为mac
      axios.post('/check_device/', { mac }).then(res => {
        // 如果返回状态为success，更新devices数组中对应mac地址的状态为success
        if (res.data.status === 'success') {
          this.devices.forEach((device, index) => {
            if (device.mac === mac) {
              this.devices[index].status = 'success'
            }
          })
        } else {
          // 如果返回状态为fail，更新devices数组中对应mac地址的状态为fail
          this.devices.forEach((device, index) => {
            if (device.mac === mac) {
              this.devices[index].status = 'fail'
            }
          })
        }
      })
    }
  }
}
</script>

需要学习知识点：

Vue.js的模板语法，如何使用v-for、v-if、v-else、:key、:class、:style等指令渲染页面
Vue.js的生命周期函数，如何使用created()函数初始化

ESP32的MicroPython代码可以如下编写：

import network
import urequests
import machine

# 配置WiFi
sta = network.WLAN(network.STA_IF)
sta.active(True)
sta.connect('SSID', 'PASSWORD')

# 定义心跳包发送函数
def send_heartbeat():
    mac = 'ESP32_MAC'  # 获取ESP32的mac地址
    url = 'http://your_server_address/check_device/'  # 定义请求地址
    data = {'mac': mac}  # 定义请求参数
    headers = {'Content-Type': 'application/json'}  # 定义请求头
    try:
        resp = urequests.post(url, json=data, headers=headers)  # 发送POST请求
        print(resp.json())
    except Exception as e:
        print(e)

# 定时器，每10秒发送一次心跳包
tim = machine.Timer(-1)
tim.init(period=10000, mode=machine.Timer.PERIODIC, callback=lambda t: send_heartbeat())

需要学习知识点：

MicroPython的基本语法
MicroPython的network模块，如何配置WiFi连接
MicroPython的urequests模块，如何发送HTTP请求
MicroPython的machine模块，如何使用定时器