Python-web开发学习笔记(3):Flask Demo,一个网站开发小案例

news2024/11/24 14:12:55

☕️ 推荐关注我的另一个专栏系列:大道至简,该系列收录了许多优质的人工智能算法博文,包括机器学习和自然语言处理等,持续更新中,欢迎各位关注~

介绍完HTML标签,我们来搞一个简单的网站小案例,带大家更进一步理解HTML网页和web框架之间是怎么运作的,本篇以做一个简单的注册页面为例。

1. 网站运行简要描述

浏览器通过我们用户进行的一些操作,向后台发起请求,后台接收到请求后,会解析请求字段,根据字段对应的要求,执行对应的功能模块(例如执行def xxx方法),并将执行结果返回到某个HTML文件中,后台接收到返回后,会作为请求的响应返回给浏览器,响应中包含了一堆HTML标签,浏览器接收到响应后,会解析这一堆HTML标签,并在浏览器页面上展示给用户。

2. 网站开发小案例—Flask

在写案例之前,我们首先要大体认识一下什么是web框架。说白了,我们和浏览器的交互过程中,会存在大量的浏览器与后台服务中心的交互、后台服务中心与数据库的交互、传输数据的处理、数据的传输、数据的格式化、网址的解析、网址的映射等一系列复杂的过程,这些复杂的过程大多数并不需要我们开发人员去操作,开发人员更多的精力应该放在服务的设计、页面的编写、库表的设计、功能模块的开发、API的设计等,那其它的复杂过程,就需要交由web框架来处理了,也就是我们是在web框架上进行我们的功能开发。python领域常见的web框架有flask,Django。还有Java领域的Spring等。

本文为了方便,使用轻量级的flask框架进行案例的设计,快速制作一个简单的实现注册账户的web服务。话不多说,上手:

(1)安装flask

pip install flask

(2)在pycharm中新建项目

我这里命名一个.py文件:flask_demo.py

(3)新建一个注册账户的页面

我这里新建一个register.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>用户注册</title>
</head>
<body>
<h1>用户注册</h1>

<form method="post" action="/register">
    <div>
        用户名:<input type="text" name="user"/>
    </div>
    <div>
        密码:<input type="password" name="pwd"/>
    </div>
    <div>
        性别:
        <input type="radio" name="gender" value="1">男
        <input type="radio" name="gender" value="2">女
    </div>
    <div>
        爱好:
        <input type="checkbox" name="hobby" value="10">看书
        <input type="checkbox" name="hobby" value="20">打球
        <input type="checkbox" name="hobby" value="30">唱歌
        <input type="checkbox" name="hobby" value="40">旅游
    </div>

    <div>
        城市:
        <select name="city">
            <option value="bj">北京</option>
            <option value="sh">上海</option>
            <option value="sz">深圳</option>
        </select>
    </div>

    <div>
        备注:<textarea name="more"></textarea>
    </div>

    <input type="submit" value="submit按钮-注册">
</form>

</body>
</html>

以上HTML各标签的含义我在之前的文章中都讲过,大家可以到本文同属专栏中去翻看哈~这里不再赘述。上述代码运行后效果如下:

(4)编写flask代码

from flask import Flask, render_template, request

# 给自己的项目取个名字,这里__name__意味着使用当前项目的名字
app = Flask(__name__)

# 为自己的服务定义一个接口名,该接口需拼接在URL后面,方可访问http服务
@app.route('/register', methods=['GET', "POST"])
def register():
    if request.method == "GET":
        return render_template('register.html')

    else:
        user = request.form.get("user")
        pwd = request.form.get("pwd")
        gender = request.form.get("gender")
        hobby_list = request.form.getlist("hobby")
        city = request.form.get("city")
        more = request.form.get("more")
        print(user, pwd, gender, hobby_list, city, more)
        # 通常,我们会实现一个将上述用户注册信息写入数据库中实现注册

        # 待上述一切执行完毕后,我们需要给用户返回结果
        return "注册成功!" # 在真正业务场景中,此处返回的一般都会是HTML文件,即return render_template('xxx.html')


if __name__ == '__main__':
    # 运行启动web服务,持续监听用户端发起的请求
    app.run()

执行上述代码后,你将会看这样的结果:

出现上图中的样子,说明你的web后台服务启动起来了。上图中第一行的“flask_demo”就是代码中定义的app名称“__name__”,名称自己随便定义。上图中的IP地址,是我们要访问注册页面的地址,注意地址后面必须拼接上我们定义的接口名称“/register”,现在我们可以通过该URL在浏览器中打开注册页面了:

(5)用户注册,提交注册数据

现在我们要填写注册信息了:

接着我们点击submit按钮,看下啥效果:

返回了一个“注册成功”,这是我们代码里return的内容。仅仅如此吗?再看下图:

最上头俩404的GET我们不管它。看下面一个GET和一个POST,GET是因为我们通过URL进入了注册页面,此时为GET请求方式。POST是因为我们提交了注册信息,此时为POST请求方式,之前说过,POST一半多用于表单的提交,而且请求信息不会体现在URL上,那么体现在哪儿?就是上图最下面那一行,就是我们提交的注册信息,也就是说,POST请求的信息,会记录在后台服务中,当然,上图的信息并不是浏览器的用户能够看到的,而是服务端的你能够看到的。

温馨提示:了解了http服务运行机制后,大家就知道,千万不要在陌生页面输入自己的敏感信息,人家后台可都记着呢!

至此,一个简易的网站小案例制作完成,希望通过本文,大家能够对网站运行机制有一个更为清晰的认识。有帮助的话,记得点赞+关注哦!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/564996.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

一、CNNs网络架构-基础网络架构

目录 1.LeNet 2.AlexNet 2.1 激活函数&#xff1a;ReLU 2.2 随机失活&#xff1a;Droupout 2.3 数据扩充&#xff1a;Data augmentation 2.4 局部响应归一化&#xff1a;LRN 2.5 多GPU训练 2.6 论文 3.ZFNet 3.1 网络架构 3.2 反卷积 3.3 卷积可视化 3.4 ZFNet改…

6.4.6拓扑排序

用DAG&#xff08;有向无环图&#xff09;表示一个工程。顶点表示活动&#xff0c;有向边<Vi&#xff0c;Vj>表示活动Vi活动必须先与Vj活动进行。 所谓的拓扑排序&#xff1a;找到做事的先后顺序 以上根据拓扑排序的实现&#xff1a; 加入对有回路的图进行拓扑排序&#…

重磅,ChatGPT App 来了!(附保姆级教程)

ChatGPT狂飙160天&#xff0c;世界已经不是之前的样子。 新建了人工智能中文站https://ai.weoknow.com 每天给大家更新可用的国内可用chatGPT资源 日前&#xff0c;OpenAI宣布推出iOS移动版ChatGPT&#xff0c;为iPhone和iPad用户提供免费下载和使用机会。 总体而言&#xff0…

视频转换芯片MS7200概述 HDMI转数字RGB/YUV/HDMI RXReceive/替代IT66021FN

1. 基本介绍 MS7200 是一款 HDMI 接收芯片&#xff0c;兼容 HDMI1.4b 及 HDMI 1.4b 以下标准的视频 3D 传输格 式&#xff0c;最高分辨率可支持到 4K30Hz&#xff0c;最高采样率达到 300MHz。MS7200 支持 YUV 和 RGB 之 间的色彩空间转换&#xff0c;数字接口支持 YUV 及 RGB 格…

动态规划-完全平方数

动态规划-完全平方数 1 题目描述2 示例2.1 示例 1&#xff1a;2.2 示例 2&#xff1a;2.3 提示&#xff1a; 3 解题思路及方法3.1 解题思路3.1.1 确定状态3.1.2 转移方程3.1.3 初始条件和边界情况3.1.4 计算顺序 3.2 算法代码实现 跟着九章侯老师学习了动态规划专题之后根据学习…

联邦图神经网络:概述、技术和挑战

https://arxiv.org/pdf/2202.07256.pdf 摘要 图神经网络以其处理实际应用中广泛存在的图形数据的强大能力&#xff0c;受到了广泛的研究关注。然而&#xff0c;随着社会越来越关注数据隐私&#xff0c;GNN需要适应这种新常态。这导致了近年来联邦图神经网络&#xff08;FedGN…

一、阿里云oss

文章目录 一、阿里云oss1、开通“对象存储OSS”服务1.1创建Bucket1.2上传默认头像1.3获取用户acesskeys 2、使用SDK文档3、文件服务实现3.1搭建service-oss模块3.1.1 搭建service-oss模块3.1.2 修改配置3.1.3 启动类3.1.4配置网关 3.2 测试SDK3.3封装service接口3.4封装control…

【C++初阶】类和对象(下)构造函数(初始化列表) + explicit关键字 +static成员

&#x1f466;个人主页&#xff1a;Weraphael ✍&#x1f3fb;作者简介&#xff1a;目前学习C和算法 ✈️专栏&#xff1a;C航路 &#x1f40b; 希望大家多多支持&#xff0c;咱一起进步&#xff01;&#x1f601; 如果文章对你有帮助的话 欢迎 评论&#x1f4ac; 点赞&#x1…

如何下载旧版的Chrome

&#xff08;下面网址需要科学上网&#xff09; 1.获得浏览器版本号 访问 https://www.google.com 然后在搜索框中输入要搜索的浏览器版本号&#xff0c;例如 : site:chromereleases.googleblog.com 96.0。其中96.0是大版本号。 2.查询浏览器版本号的具体信息 访问 https://…

CANopenNode Master RPDO 配置

文章目录 CANopenNode 简介CANopenNode 主栈SDO ClientRPDORPDO 通讯参数RPDO 通信参数设置实例PDO 映射参数RPDO 映射参数设置实例 CANopenNode 简介 CANopenNode 是一个开源的免费的开源 CANopen 协议栈。 对象字典为任何变量提供清晰灵活的组织。可以直接或通过读/写函数…

电力系统的虚假数据注入攻击和MTD系统研究(Matlab代码实现)

&#x1f4a5;&#x1f4a5;&#x1f49e;&#x1f49e;欢迎来到本博客❤️❤️&#x1f4a5;&#x1f4a5; &#x1f3c6;博主优势&#xff1a;&#x1f31e;&#x1f31e;&#x1f31e;博客内容尽量做到思维缜密&#xff0c;逻辑清晰&#xff0c;为了方便读者。 ⛳️座右铭&a…

代码随想录算法训练营第十五天|树的层序遍历 、226.翻转二叉树 、101.对称二叉树

层序遍历&#xff08;广度优先遍历&#xff09;&#xff1a; 遍历思路&#xff1a; 借用队列来实现。 若根节点不为空&#xff0c;则先将根节点放入队列&#xff0c; 随后&#xff0c;在while循环中&#xff0c;判断队列当前的size&#xff0c;队列的size就是树在该层中的节点…

ubuntu换镜像源(ubuntu换源)

ubuntu换镜像源&#xff08;ubuntu换源&#xff09; 文章目录 ubuntu换镜像源&#xff08;ubuntu换源&#xff09;1. 备份镜像源文件2. 根据不同 ubuntu 版本设置不同的镜像源2.1 focal 版本镜像源2.2 bionic 版本镜像源2.3 ubuntu 自带源&#xff1a; 参考文献 1. 备份镜像源文…

数据库连接 ---MySQL的总结(八)

数据库连接 —MySQL的总结&#xff08;八&#xff09; mysql使用在c编程之中使用&#xff0c;需要调用官方c库进行使用。 库的安装 库文件&#xff0c;安装mysql的c链接库 yum install mysql-server接口介绍 初始化 MYSQL *mysql mysql_init(nullptr);连接 mysql_real_conn…

“智汇新算力,众启Z力量”惠普发布全新一代Z系列工作站,共赢算力黄金时代

5月23日&#xff0c; “智汇新算力&#xff0c;众启Z力量”惠普Z系列新品发布会在上海盛大举行。本次发布会上&#xff0c;惠普Z 系列工作站焕新升级&#xff0c;以高算力、强稳定、强拓展的产品及解决方案&#xff0c;帮助各行业用户专注自身领域、驾驭复杂工作&#xff0c;从…

HNU-电路与电子学-小班2

第二次讨论 讨论题目&#xff1a; 1、电子秤的电桥电路可以分别用 1 个压控电阻、 2 个压控电阻、 3 个压控电阻、 4 个压控电阻实现吗&#xff1f;试写出每种实现的 U AB 输出表达式&#xff0c;并分析哪种实现电桥 电压的灵敏度&#xff08;SV/ △ R &#xff09;高。 …

【Python Tableau】零基础也能轻松掌握的学习路线与参考资料

一、学习路线 Python和Tableau都是当前市场上非常热门的数据分析和可视化工具。下面是Python Tableau的学习路线&#xff1a; 学习Python基础知识&#xff1a;Python是一门非常易学易用的编程语言&#xff0c;可以选择相应书籍进行学习&#xff0c;如《笨办法学Python》、《Py…

Node.js中Buffer的一些实现原理

1.前言 在ES6之前&#xff0c;JavaScript无法直接处理二进制数据&#xff0c;Node.js为了弥补这个不足引入了 Buffer&#xff0c;其是Node.js的核心模块之一&#xff0c;底层实现基于C。本文将从 Node.js v14.20.0 的源码分析 Buffer 的一些实现原理。 2.ArrayBuffer 在介绍…

Visual Studio插件DevExpress CodeRush v22.1- 支持C# 10

DevExpress CodeRush是一个强大的Visual Studio .NET 插件&#xff0c;它利用整合技术&#xff0c;通过促进开发者和团队效率来提升开发者体验。为Visual Studio IDE增压、消除重复的代码并提高代码质量&#xff0c;可以快速思考、自动化测试、可视化调试和重构。 CodeRush v2…

资深程序员深度体验ChatGPT一周发现竟然....

周一打卡上班&#xff0c;老板凑到我跟前&#xff1a;“小李啊&#xff0c;这周有个新需求交给你做一下&#xff0c;给我们的API管理平台新增一个智能Mock的功能...”。我条件反射般的差点脱口而出&#xff1a;“这个需求做不了..”。不过在千钧一发之间&#xff0c;我想起了最…