microPython搭建webServer--(一)使用microdot库实现基本页面显示
1. 准备工作
硬件:esp32s3
软件:MicroPython v1.24.1,使用thonny编程。microdot库可以到github或者gitee下载,只需要microdot.py就可以了。
2. 热点
将esp32作为热点,手机连接该热点后访问默认页面
importnetwork# 创建一个WLAN对象,并将其设置为AP模式(接入点模式)ap=network.WLAN(network.AP_IF)ap.active(True)# 配置接入点的参数,包括SSID(网络名称)和密码ap.config(essid='MyESP32AP',password='password123')# 打印接入点的IP地址print('AP IP address:',ap.ifconfig())先运行一下这段代码,顺利的话,可以显示当前状态。
AP IP address:('192.168.4.1','255.255.255.0','192.168.4.1','0.0.0.0')3. 第一个网页
将microdot.py传到开发板根目录,运行如下代码:
frommicrodotimportMicrodotimportnetwork# 创建一个WLAN对象,并将其设置为AP模式(接入点模式)ap=network.WLAN(network.AP_IF)ap.active(True)# 配置接入点的参数,包括SSID(网络名称)和密码ap.config(essid='MyESP32AP',password='password123')# 打印接入点的IP地址print('AP IP address:',ap.ifconfig())app=Microdot()html='''<!DOCTYPE html> <html> <head> <title>Microdot GPIO Example</title> <meta charset="UTF-8"> </head> <body > <h1>Microdot Example</h1> </body> </html> '''@app.route('/',methods=['GET','POST'])asyncdefhello(request):returnhtml,200,{'Content-Type':'text/html'}app.run(host='192.168.4.1',debug=True)thonny中应该显示如下:
AP IP address:('192.168.4.1','255.255.255.0','192.168.4.1','0.0.0.0')Startingasyncserver on192.168.4.1:5000...此时,用手机连接“MyESP32AP”热点,用浏览器访问http://192.168.4.1:5000,显示出网页。
通过上面的代码可以看到,使用microdot就是简单的四步:
1、定义一个对象app;
2、定义网页内容字符串变量html,如果有简易的js代码,也直接写在html中。
3、定义装饰器,响应浏览器访问web的请求,示例中就是将html字符串发送给浏览器。
4、运行app,停止app使用app.shutdown()
4. 发送文件
运行以下代码,允许浏览器访问webServer下面的所有文件:
importnetwork# 创建一个WLAN对象,并将其设置为AP模式(接入点模式)ap=network.WLAN(network.AP_IF)ap.active(True)# 配置接入点的参数,包括SSID(网络名称)和密码ap.config(essid='MyESP32AP',password='password123')# 打印接入点的IP地址print('AP IP address:',ap.ifconfig())frommicrodotimportMicrodot,send_file app=Microdot()@app.route('/')asyncdefindex(request):returnsend_file('index.html')@app.route('/<path:path>')asyncdefstatic(request,path):returnsend_file(path)app.run(debug=True)这段代码有两个装饰器,一个是当路由到根目录时,使用send_file送出index.html文件,另一个是访问具体的path时,使用send_file送出任意文件。当然,从服务器的安全性考虑,一个webServer允许访问所有文件显然是不对的,可以增加一个安全策略,比如只send指定目录、指定扩展名的文档。
5. 访问webServer中的所有文件
importos allFiles=[]deflist_files(directory):#遍历出所有文件,存入allFiles数组中try:files=os.listdir(directory)forfileinfiles:path=directory+'/'+fileifos.stat(path)[0]&0x4000:# 判断是否为目录print("Directory: ",path)list_files(path)# 递归遍历子目录else:#print("File: ", path)allFiles.append(path)exceptOSErrorase:print("Error: ",e)# 从根目录开始遍历list_files('/')html='''<!DOCTYPE html> <html> <head> <title>Microdot GPIO Example</title> <meta charset="UTF-8"> </head> <body > '''foriinallFiles:html+='<a href="{}">{}</a><br>'.format(i.replace("//","/"),i)html+=''' </body> </html> '''先遍历esp32中的所有文件,然后动态添加到html变量中,生成带超链接的网页,发送给浏览器,这样就可以下载esp32中的所有文件。比如做一个gps轨迹记录仪,将每天的log数据存入文档中。通过前面的代码,可以遍历出文档名字,然后点击超链接下载回来。
遍历全部文件的完整代码:
importnetwork# 创建一个WLAN对象,并将其设置为AP模式(接入点模式)ap=network.WLAN(network.AP_IF)ap.active(True)# 配置接入点的参数,包括SSID(网络名称)和密码ap.config(essid='MyESP32AP',password='password123')# 打印接入点的IP地址print('AP IP address:',ap.ifconfig())importos allFiles=[]deflist_files(directory):#遍历出所有文件,存入allFiles数组中try:files=os.listdir(directory)forfileinfiles:path=directory+'/'+fileifos.stat(path)[0]&0x4000:# 判断是否为目录print("Directory: ",path)list_files(path)# 递归遍历子目录else:#print("File: ", path)allFiles.append(path)exceptOSErrorase:print("Error: ",e)# 从根目录开始遍历list_files('/')html='''<!DOCTYPE html> <html> <head> <title>Microdot GPIO Example</title> <meta charset="UTF-8"> </head> <body > '''foriinallFiles:html+='<a href="{}">{}</a><br>'.format(i.replace("//","/"),i)html+=''' </body> </html> '''frommicrodotimportMicrodot,send_file app=Microdot()@app.route('/')asyncdefindex(request):#return send_file('index.html')returnhtml,200,{'Content-Type':'text/html'}@app.route('/<path:path>')asyncdefstatic(request,path):print(path)returnsend_file(path)app.run(debug=True)