NodeMCU之旅（四）：实现Web配置页面

引言

利用Web页面做配置可以轻松适应用户的多种设备，如Android, IOS等。本文将介绍如何在NodeMCU中实现配置页面。
接线图请参考NodeMCU之旅（三）：响应配置按钮。

配置页面后端

HTTP服务

NodeMCU的可用运存大约只有32KB，非常小。

这里推荐一个轻量的HTTP服务库NodeMCU-HTTP-Server。下载httpServer.lua即可。

服务静态文件

在init.lua的尾部添加：

dofile('httpServer.lua')

并在switchCfg()中启动和关闭监听：

function switchCfg()
	if wifi.getmode() == wifi.STATION then
		-- ...
		httpServer:listen(80)
	else
		-- ...
		httpServer:close()
	end
end

测试HTTP服务

可以通过以下方法来测试服务器是否正常。

保存以下代码为index.html：

<!DOCTYPE html>
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>配置终端</title>
</head>
<body>
	<p>这是我的配置页面。</p>
</body>
</html>

上传init.lua、httpServer.lua以及index.html到NodeMCU。

按下RST按钮，按下配置按钮，用手机连入热点mymcu，在浏览器打开 http://192.168.4.1/ 。

如果一切正常，你将能够看到这个页面。

GZIP压缩

为了节省空间，此HTTP服务库还支持GZIP。比如：index.html可以压缩为index.html.gz再上传。

更多细节，请参阅NodeMCU-HTTP-Server。

设置IP地址

NodeMCU在自身开放的AP局域网中的默认IP地址是192.168.4.1，如果需要修改NodeMCU在本地局域网中的IP地址，请在开启AP后，使用此函数设置：

设置IP
wifi.ap.setip()

注意，该函数只有在开启AP后才有效。

后端接口

扫描附近热点

给httpServer添加中间件，当访问'/scanap'时：使用wifi.sta.getap()获取AP列表再转换到JSON格式返回。

httpServer:use('/scanap', function(req, res)
	wifi.sta.getap(function(table)
		local aptable = {}
		for ssid,v in pairs(table) do
			local authmode, rssi, bssid, channel = string.match(v, "([^,]+),([^,]+),([^,]+),([^,]+)")
			aptable[ssid] = {
				authmode = authmode,
				rssi = rssi,
				bssid = bssid,
				channel = channel
			}
		end
		res:type('application/json')
		res:send(cjson.encode(aptable))
	end)
end)

注意：由于NodeMCU内存很小，附近热点过多时，扫描热点会造成内存不足自动重启。此时请手动输入WIFI信息进行配置。

配置WIFI信息

同样添加一个中间件，当带参数访问'/config'时，配置WIFI信息，并返回连接结果。

TMR_WIFI = 4

httpServer:use('/config', function(req, res)
	if req.query.ssid ~= nil and req.query.pwd ~= nil then
		wifi.sta.config(req.query.ssid, req.query.pwd)

		status = 'STA_CONNECTING'
		tmr.alarm(TMR_WIFI, 1000, tmr.ALARM_AUTO, function()
			if status ~= 'STA_CONNECTING' then
				res:type('application/json')
				res:send('{"status":"' .. status .. '"}')
				tmr.stop(TMR_WIFI)
			end
		end)
	end
end)

配置页面前端

前端方面的选择就比较多了，我使用了轻量的Zepto.js与Spectre.css来搭建前端页面，通过AJAX来请求数据。

相比起后端，前端代码大都是一些界面交互的逻辑，就不贴在这里了。

不是很难