microPython搭建webServer--（二）使用microdot库实现对用户提交数据的响应

🕗 发布于 2025-01-17 01:53 python 开发语言

用户提交数据，get与post
用户用在网页中常用的提交数据模式有两种，get和post，各有优缺点。
get看起来比较简单，因为数据都是明文发送的，比如：

https://cn.bing.com/?q=python

在网址的后面加个？，之后q=python告诉具体的搜索参数，服务器解析出来参数后，作出相应，并将结果发送给浏览器。

除了用问号传参，还可以使用斜杠，比如：

http://192.168.4.1:5000/users/1234

在上面的地址中，users是参数名，1234是参数数值。

相对于get，post提交的数据是不显示在地址栏中的，可以用js代码对cookie或者其他变量封装成json格式，提交给服务器。

对get的响应

@app.get('/on')
def index(request):
    # 如果收到get请求on就开灯    
    return "开灯了"

如果想给esp32一个简易的指令，比如开灯，那只要定义对应命令的装饰器，比如"/on"，收到on请求后，执行对应的开灯动作，操作某个gpio，并返回浏览器处理结果。

@app.get('/users/<int:id>')
def get_user(request, id):
    print("id=",id)    
    return "users={}".format(id)

如果是命令后面带参数，比如users=1234，那么，可以在地址后面加上“/命令/参数”，定义对应的装饰器，得到参数后做出对应动作。当然，这个参数也可以是字符串。
完整代码如下：


from microdot import Microdot
import network
# 创建一个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>        
        <meta charset="UTF-8">        
    </head>
    <body >
        <h1>地址栏中输入"ip地址/users/333"</h1>
        <h1>地址栏中输入"ip地址/on"</h1>
    </body>
</html>
'''

@app.route('/', methods=['GET', 'POST'])
async def hello(request):
    return html, 200, {'Content-Type': 'text/html'}

@app.get('/users/<int:id>')
def get_user(request, id):
    print("id=",id)    
    return "users={}".format(id)

@app.get('/on')
def index(request):
    # 如果收到get请求on就开灯    
    return "开灯了"


app.run(host='192.168.4.1',debug=True)

3. 对post的响应
先看一下，一个网页最基本的post框架应该包含什么：
基本post

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
</head>

<body>
    <form action="http://192.168.4.1:5000/post" method="post">
        ID：<input type="text" name="username" />
        Password：<input type="password" name="password" />
        <select name="fruits" id="fruits">
            <option value="apple">苹果</option>
            <option value="banana">香蕉</option>
            <option value="orange">橙子</option>
        </select>
        <input type="submit" value="Submit" />
    </form>
</body>

</html>

在html文档中，放入form元素，action属性指向接下来要把数据提交给谁，method是提交方法。form中的元素，必备的是提交按钮，点击这个按钮后，浏览器会自动遍历form中所有可以提交的数据，完成提交过程。
本例中，放置了两个文本框输和一个下拉菜单，当然也可以放置更多的元素，遍历时，会将各元素的name和所对应的值生成数组。
接下来，在webServer中定义一个装饰器，对post的内容做相应的处理即可：

from microdot import Microdot
import network
# 创建一个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>
    <meta charset="UTF-8">
</head>

<body>
    <form action="http://192.168.4.1:5000/post" method="post">
        ID：<input type="text" name="username" />
        Password：<input type="password" name="password" />
        <select name="fruits" id="fruits">
            <option value="apple">苹果</option>
            <option value="banana">香蕉</option>
            <option value="orange">橙子</option>
        </select>
        <input type="submit" value="Submit" />
    </form>
</body>

</html>
'''

@app.route('/', methods=['GET', 'POST'])
async def hello(request):
    return html, 200, {'Content-Type': 'text/html'}


@app.post('/post')
def hello(request):
    print("methon=",request.method)
    print("form=",request.form)
    print("json=",request.json)
    print("body=",request.body)
    return 'post ok'



app.run(host='192.168.4.1',debug=True)

定义好@app.post(‘/post’)，对传过来的请求打印一下，可以看到数据：

methon= POST
form= {'fruits': ['apple'], 'password': ['456'], 'username': ['']}
json= None
body= b'username=&password=456&fruits=apple'

可以看到，浏览器提交的request，body内容为b’username=&password=456&fruits=apple’，你可以根据自己的需要分割字符串来提取各个变量，也可以直接调用request.form，这是microdot根据body解码出来的。

另一种post的方式

在post的时候，还可以用js代码来提交，比如要在提交的时候附带系统时间戳，这样就可以摆脱form元素的限制。

 var myObject = {};
            // 添加两个字符串字段,字段名字是预设的，值可以从文本框之类的获取
            myObject.name = "Tom";
            myObject.pwd = "1234";
            //动态添加字段，字段名可以用户指定的。
            var str="age";
            var vle=18;            
            myObject[str]=vle;

            // 发送POST请求
            fetch('http://192.168.4.1:5000/post', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify(myObject)
            })
                .catch(error => {
                    console.error('Error:', error);
                });

在上面这段代码中，首先定义一个myObject对象，添加一些属性后，用JSON.stringify转换为字符串输出给服务器。在消息头中，要注明’Content-Type’: ‘application/json’，这样服务器才能正确解析json字符串。
完整的microPython代码：

#使用js的fetch提交表单
import gc
print('memory:', gc.mem_free() + gc.mem_alloc())
 


from microdot import Microdot
import network
# 创建一个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>
    <script>
        function send1word() {
            var myObject = {};
            // 添加两个字符串字段,字段名字是预设的，值可以从文本框之类的获取
            myObject.name = "Tom";
            myObject.pwd = "1234";
            //动态添加字段，字段名可以用户指定的。
            var str="age";
            var vle=18;            
            myObject[str]=vle;

            // 发送POST请求
            fetch('http://192.168.4.1:5000/post', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify(myObject)
            })
                .catch(error => {
                    console.error('Error:', error);
                });
        }
        function onload() {
            console.log("onload");           

        }
    </script>
</head>

<body οnlοad="onload()">
    <input type="button" οnclick="send1word()" value="send a word">
</body>

</html>
'''

@app.route('/', methods=['GET', 'POST'])
async def hello(request):
    return html, 200, {'Content-Type': 'text/html'}


@app.post('/post')
def hello(request):
    print("methon=",request.method)
    print("form=",request.form)
    print("json=",request.json)
    print("body=",request.body)
    return 'post ok'



app.run(host='192.168.4.1',debug=True)

点击网页上的按钮后，thonny打印出：

methon= POST
form= None
json= {'age': 18, 'name': 'Tom', 'pwd': '1234'}
body= b'{"name":"Tom","pwd":"1234","age":18}'

对比前后两种提交post的方式可以发现，用html的submit提交之后，服务器显示form有内容，json为空；
用js的fetch提交之后，服务器显示收到的form为空，json有内容。
归根到底，都是body的内容，被microdot解码后，存入到哪里，fetch方式之所以存入json，是因为在消息头中声明了application/json，也就是已经告诉webServer接下来发送的就是json。

原文地址：https://blog.csdn.net/weixin_43833645/article/details/145133861

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！

上一篇：C语言| 二维数组的使用
下一篇：切削刀具热处理的作用学习笔记分享

晨辉面试抽签和评分管理系统之七：面试成绩核算的三种方式
各类面试最后计算考生的成绩方式不完全相同，为了满足不足需求，本软件设计了三种核算考生面试成绩的方式，分别是：去掉1个最高分最低分计算平均分，直接计算平均分，按设置的考官计分权重计算最终成绩。
阅读更多2025-01-17
vue3之pinia学习
在src/components/Count.vue，那对应的在store/count.ts，这样我们就会很清楚的知道count.ts是存储计算相关的数据的，此时我们先来简单的写个count.ts，用来
阅读更多2025-01-17
rtthread学习笔记系列--29 SPI驱动
而如果调用两次 rt_spi_send()，那么在发送完命令和地址后，片选会被释放，大部分 SPI 设备都依靠设置片选一次有效为命令的起始，所以片选在发送完命令或地址数据后被释放，则此次操作被丢弃。此
阅读更多2025-01-17
MySql按年月日自动创建分区存储过程
MySql按年月日自动创建分区存储过程，可自定义库名、表名、分区的数量、分区类型、分区间隔、最大分区数。
阅读更多2025-01-17
基于SpringBoot+mybatisplus+vueJS+redis前后端分离技术的的国漫推荐系统的设计与实现
基于SpringBoot+mybatisplus+vueJS+redis前后端分离技术的的国漫推荐系统的设计与实现
阅读更多2025-01-17
【Golang 面试题】每日 3 题（三十二）
📚专栏简介：在这个专栏中，我将会分享 Golang 面试中常见的面试题给大家~
阅读更多2025-01-17
Ubuntu磁盘空间不足或配置错误时，如何操作扩容？
我们前面介绍过CentOS系统如何调整磁盘分区（CentOS调整磁盘分区和扩容），但是我最近安装Ubuntu系统，貌似又遇到了分区的问题。上次安装Ubuntu Server版系统时（没有图形界面，如何
阅读更多2025-01-17
C#委托（Delegate）基本用法
C#委托（Delegate）基本用法
阅读更多2025-01-17
约束的笔记
约束是表级的强制规定。对表中字段的限制如何添加/删除约束create table 时添加约束alter table 时添加约束，删除约束。
阅读更多2025-01-17
references配置项详解
references配置项详解
阅读更多2025-01-17

microPython搭建webServer--（二）使用microdot库实现对用户提交数据的响应

相关文章