microPython搭建webServer--（一）使用microdot库实现基本页面显示

1. 准备工作硬件esp32s3软件MicroPython v1.24.1使用thonny编程。microdot库可以到github或者gitee下载只需要microdot.py就可以了。2. 热点将esp32作为热点手机连接该热点后访问默认页面importnetwork# 创建一个WLAN对象并将其设置为AP模式接入点模式apnetwork.WLAN(network.AP_IF)ap.active(True)# 配置接入点的参数包括SSID网络名称和密码ap.config(essidMyESP32AP,passwordpassword123)# 打印接入点的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模式接入点模式apnetwork.WLAN(network.AP_IF)ap.active(True)# 配置接入点的参数包括SSID网络名称和密码ap.config(essidMyESP32AP,passwordpassword123)# 打印接入点的IP地址print(AP IP address:,ap.ifconfig())appMicrodot()html!DOCTYPE html html head titleMicrodot GPIO Example/title meta charsetUTF-8 /head body h1Microdot Example/h1 /body /html app.route(/,methods[GET,POST])asyncdefhello(request):returnhtml,200,{Content-Type:text/html}app.run(host192.168.4.1,debugTrue)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、定义一个对象app2、定义网页内容字符串变量html如果有简易的js代码也直接写在html中。3、定义装饰器响应浏览器访问web的请求示例中就是将html字符串发送给浏览器。4、运行app停止app使用app.shutdown()4. 发送文件运行以下代码允许浏览器访问webServer下面的所有文件importnetwork# 创建一个WLAN对象并将其设置为AP模式接入点模式apnetwork.WLAN(network.AP_IF)ap.active(True)# 配置接入点的参数包括SSID网络名称和密码ap.config(essidMyESP32AP,passwordpassword123)# 打印接入点的IP地址print(AP IP address:,ap.ifconfig())frommicrodotimportMicrodot,send_file appMicrodot()app.route(/)asyncdefindex(request):returnsend_file(index.html)app.route(/path:path)asyncdefstatic(request,path):returnsend_file(path)app.run(debugTrue)这段代码有两个装饰器一个是当路由到根目录时使用send_file送出index.html文件另一个是访问具体的path时使用send_file送出任意文件。当然从服务器的安全性考虑一个webServer允许访问所有文件显然是不对的可以增加一个安全策略比如只send指定目录、指定扩展名的文档。5. 访问webServer中的所有文件importos allFiles[]deflist_files(directory):#遍历出所有文件,存入allFiles数组中try:filesos.listdir(directory)forfileinfiles:pathdirectory/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 titleMicrodot GPIO Example/title meta charsetUTF-8 /head body foriinallFiles:htmla href{}{}/abr.format(i.replace(//,/),i)html /body /html 先遍历esp32中的所有文件然后动态添加到html变量中生成带超链接的网页发送给浏览器这样就可以下载esp32中的所有文件。比如做一个gps轨迹记录仪将每天的log数据存入文档中。通过前面的代码可以遍历出文档名字然后点击超链接下载回来。遍历全部文件的完整代码importnetwork# 创建一个WLAN对象并将其设置为AP模式接入点模式apnetwork.WLAN(network.AP_IF)ap.active(True)# 配置接入点的参数包括SSID网络名称和密码ap.config(essidMyESP32AP,passwordpassword123)# 打印接入点的IP地址print(AP IP address:,ap.ifconfig())importos allFiles[]deflist_files(directory):#遍历出所有文件,存入allFiles数组中try:filesos.listdir(directory)forfileinfiles:pathdirectory/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 titleMicrodot GPIO Example/title meta charsetUTF-8 /head body foriinallFiles:htmla href{}{}/abr.format(i.replace(//,/),i)html /body /html frommicrodotimportMicrodot,send_file appMicrodot()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(debugTrue)