ε基础web开发（2）：简单的前后端协同demo：登录界面

最新推荐文章于 2024-05-14 22:38:05 发布

高冷酸钾coolchameleon

最新推荐文章于 2024-05-14 22:38:05 发布

阅读量416

点赞数

分类专栏： ε基础web开发文章标签： web

本文链接：https://blog.csdn.net/weixin_38821238/article/details/105853579

版权

ε基础web开发专栏收录该内容

2 篇文章 0 订阅

订阅专栏

ε基础web开发（2）：简单的前后端协同demo：登录界面

前端
后端
- 解析前端数据
- 后端向前端反馈信息

首先尝试一个简单的登录界面demo。

前端

前端包含一个可以向后端提交数据的表单，代码如下（参考菜鸟教程）：

<!Doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <title>
            login
        </title>
    </head>

    <body>
        <form action="/cgi-bin/backend.py" method="post" target="_blank" accept-charset="UTF-8">
            <!-- 在新页面打开后端文件；accept-charset属性用来接收中文 -->
            <input type="text" name="name" value="请输入姓名"> <br>
            <input type="password" name="password"> <br>
            <input type="checkbox" name="checkbox"> <br>
            <input type="radio" name="radio"> <br>
            <input type="textarea" name="textarea"> <br>
            <input type="submit" value="提交">
        </form>
    </body>
</html>

后端

解析前端数据

首先我们在后端解析前端发回的数据，参考菜鸟教程。
但是在显示时发生了中文乱码现象，查阅资料Python中CGI模块中文乱码的问题解决方案、html中form表单提交中文乱码问题基本解决办法后，解决了这一问题。

#!G:\Programming\Anaconda3\pkgs\python-3.7.7-h60c2a47_2\python.exe

import cgi, cgitb

form = cgi.FieldStorage()

name = form.getvalue("name") if form.getvalue("name") else "Empty"
password = form.getvalue("password") if form.getvalue("password") else "Empty"
checkbox = form.getvalue("checkbox") if form.getvalue("checkbox") else "off"
radio = form.getvalue("radio") if form.getvalue("radio") else "off"
textarea = form.getvalue("textarea") if form.getvalue("textarea") else "Empty"


print("Content-type:text/html\n")
print("<html>")
print("<head>")

print("<title>backend</title>")
print("</head>")
print("<body>")
print("<p>name: " + name + "</p>")
print("<p>password: " + password + "</p>")
print("<p>checkbox: " + checkbox + "</p>")
print("<p>radio: " + radio + "</p>")
print("<p>textarea: " + textarea + "</p>")
print("</body>")
print("</html>")