Arduino小项目1---esp8266 WiFi 签到机

最新推荐文章于 2022-11-25 10:58:16 发布

不亮の星星

最新推荐文章于 2022-11-25 10:58:16 发布

阅读量1.2k

点赞数

文章标签： html 前端 css

本文链接：https://blog.csdn.net/weixin_45053025/article/details/109379390

版权

本文介绍如何利用Arduino的ESP8266模块和HTML表单创建一个无线签到机。首先，通过编写适应手机的HTML页面，设置表单元素收集学生信息。然后，在ESP8266端作为服务器，接收并处理手机发送的数据，实现签到功能。

摘要由CSDN通过智能技术生成

前言

这个项目的使用需求是这样的，有一个管理员老师给我提了一个需求，学校里的所有教室每天都会安排专门的学生去打扫卫生，而值日需要打扫卫生的学生来管理员办公室签到，签到的时候需要有人在办公室值守，这就浪费了一个人的宝贵时间。他就问我可不可以做一个签到机，不用让人一直守在那里，我说当然可以，而且还很简单，下面我们说干就干。

0.使用的材料和软件

VScode软件（VScode需要安装PlatformIO插件、liveServer插件）
手机一台（只要能连接WiFi就都OK）
ESP8266芯片一个（我使用的是nodemcu）

1.准备一个HTML网页

此HTML页面要适配手机，使用一些简单的JavaScript代码，和一些简单的css代码，因为要采集学生的数据，此处我们主要学习表单《form》《input》的具体使用，让我们现学现用。
此处编写html代码我们可以在vscode中进行，配合liveServer插件即时查看网页编写效果，非常方便。

A.搭建出适合手机的页面框架

如果不懂html编程，以下代码是固定的，可以适配所有型号的手机

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
    <title>值日签到表</title>
</head>
<body>
</body>
</html>

B.在body中加入表单元素

form标签：它的常用属性是action，就是把表单提交给服务器哪个页面。

input标签：它的常用属性有

type：为text或者number（必须有）
name和value：组成键值对（必须有），此处的value值会显示在浏览器上
id：此标签的唯一标识符（最好有，方便后期用css写效果）
readonly：从字面意思就知道是只读
maxlength和minlength：验证输入框文字的最大长度和最小长度，若不在此区间，表单无法提交
required：此输入框不填，表单无法提交

select和option标签：选择列表和选择选项

option必须要放在select标签里面
select要有name属性
option可以有 selected属性，那个option设置为selected浏览器就显示哪个选项
option可以有任意个数量

br标签：换行符

<form action="/ok" >
        <label for="" id="time1">签到时间：</label><br>
        <input type="text" name="time" id="time" value="" readonly>
        <br><br>
        <label for="">请选择 班级：</label><br>
        <select name="nianji">
            <option value="2016级">2016级</option>
            <option value="2017级">2017级</option>
            <option value="2018级">2018级</option>
            <option value="2019级">2019级</option>
            <option