当前位置: 首页 > news >正文

python网站创建005:数据交互

目标:本章讲解不同控件下, 数据在前端和后端之间的交互

控件有:

  输入框

  密码输入框

  单选框

  多选框

  下拉框

  多行文本框

不同控件中如何将数据传入后端?请看一下html代码

<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title>用户注册界面</title></head><body><form><!--账号输入控件--><div>用户名:<input type="text" placeholder="请输入用户名" name="user"/></div><div>密码:<input type="password" placeholder="请输入密码" name="pwd"/></div><!--单选框--><div>性别:男<input type="radio" name="sex" value="男"/>女<input type="radio" name="sex" value="女"/></div><!--多选框--><div>爱好:足球<input type="checkbox" name="爱好" value="1"/>篮球<input type="checkbox" name="爱好" value="2"/>兵乓球<input type="checkbox" name="爱好" value="3"/></div><!--下拉框--><div>所在城市:<select name="city"><option value="广西">广西</option><option value="广东">广东</option><option value="北京">北京</option></select></div><!--多行为本框--><div>其它信息:<textarea name="其它信息"></textarea></div><!--提交按钮--><div><input type="submit" value="提交" /></div></form></body>
</html>

然后在后端如何接收呢?数据接收四要素:(from表单、地址、传输方式、提交按钮)

 然后就可以通过函数接收进来了

# 注册成功后的界面逻辑
@app.route('/register_list')
def register_list():# 如果你想获取整个表单内容,则可以通过该方式datas = request.args# 如果你想单独获取某个数据,则可以通过该方式user = request.args.get('user')  # 用户名pwd = request.args.get('pwd')  # 密码sex = request.args.get('sex')  # 性别hobby = request.args.getlist('爱好')  # 爱好city = request.args.get('city')  # 城市other = request.args.get('其它信息')  # 其它print(user,pwd,sex,hobby,city,other)# 然后将数据传入数据库(这里暂时用文件代替)line = "{}|{}|{}\n".format(user,pwd,sex)  # 将数据以{用户名}|{密码}|{性别}这种数据格式展示file = open('db.txt',mode='a',encoding='utf-8')  # 创建文件流file.write(line)  # 写入文件file.close()  # 关闭文件return '注册成功'

那如何将获取到的数据展示到网站界面呢?变懒了,直接赋代码

render_template:转到到html界面

redirect:重定向接口

python代码

# -*- coding:utf-8 -*-
from flask import Flask, render_template, request, redirect# 创建 Flask 应用程序实例
app = Flask(__name__)# 注册界面逻辑
@app.route('/register')
def register():return render_template('register.html')# 注册成功后的界面逻辑
@app.route('/register_list')
def register_list():# 如果你想获取整个表单内容,则可以通过该方式datas = request.args# 如果你想单独获取某个数据,则可以通过该方式user = request.args.get('user')  # 用户名pwd = request.args.get('pwd')  # 密码sex = request.args.get('sex')  # 性别hobby = request.args.getlist('爱好')  # 爱好city = request.args.get('city')  # 城市other = request.args.get('其它信息')  # 其它# print(user, pwd, sex, hobby, city, other)# 然后将数据传入数据库(这里暂时用文件代替)line = "{}|{}|{}\n".format(user, pwd, sex)  # 将数据以{用户名}|{密码}|{性别}这种数据格式展示file = open('db.txt', mode='a', encoding='utf-8')  # 创建文件流file.write(line)  # 写入文件file.close()  # 关闭文件return redirect('/user_list')# 用户数据展示列表
@app.route('/user_list')
def user_list():# 从文件中读取数据:用户列表展示用file_list = []  # 创建一个列表,用户存储从文件读取到的数据file = open('db.txt', mode='r', encoding='utf-8')  # 创建文件流for i in file:file_list.append(i.strip())  # 去除开头和结尾的换行符, 再添加进列表file.close()  # 关闭文件print('这是列表', file_list)# 从文件中读取数据:用户表格展示用file_list_list = []  # 创建一个列表,用户存储从文件读取到的数据file_table = open('db.txt', mode='r', encoding='utf-8')  # 创建文件流for t in file_table:ts = t.strip().split('|')  # 去除开头和结尾的换行符, 然后再用 | 符号将数据分割开来file_list_list.append(ts)  # 再将数据添加进入列表file.close()  # 关闭文件print('这是表格', file_list_list)# 将数据展示到前端界面return render_template('user_list.html', v1=file_list, v2=file_list_list)# 运行应用程序
if __name__ == '__main__':app.run()
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>用户列表</title>
</head>
<body><h1>用户列表</h1>
<ul>{% for item in v1%}<li>{{item}}</li>{% endfor %}
</ul><h1>用户表格</h1>
<table border="1"><thead><tr><th>用户名</th><th>密码</th><th>性别</th></tr></thead><tbody>{% for item in v2%}<tr><td>{{item[0]}}</td><td>{{item[1]}}</td><td>{{item[2]}}</td></tr>{% endfor %}</tbody>
</table></body>
</html>

以上html代码运用到了for循环

相关文章:

python网站创建005:数据交互

目标&#xff1a;本章讲解不同控件下&#xff0c; 数据在前端和后端之间的交互 控件有&#xff1a; 输入框 密码输入框 单选框 多选框 下拉框 多行文本框 不同控件中如何将数据传入后端&#xff1f;请看一下html代码 <!DOCTYPE html> <html> <head><meta …...

golang 字符串操作、处理

一、golang的字符串长度 1. len()内置系统函数&#xff0c;计算字符串结果是字符串的字节长度&#xff0c;不是字符长度 //1.ASCII字符串长度&#xff08;字节长度&#xff09; str1 : "wo ai zhong guo" fmt.Println(len(str1)) //15//2.带中文的字符串长度&…...

Nginx配置WebSocket反向代理

1、WebSocket协议 ​ WebSocket协议相比较于HTTP协议成功握手后可以多次进行通讯&#xff0c;直到连接被关闭。但是WebSocket中的握手和HTTP中的握手兼容&#xff0c;它使用HTTP中的Upgrade协议头将连接从HTTP升级到WebSocket。这使得WebSocket程序可以更容易的使用现已存在的…...

devops(后端)

1.前言 该devpos架构为gitlabjenkinsharbork8s&#xff0c;项目是java项目&#xff0c;流程为从gitlab拉取项目代码到jenkins&#xff0c;jenkins通过maven将项目代码打成jar包&#xff0c;通过dockerfile构建jdk环境的镜像并把jar包放到镜像中启动&#xff0c;构建好的镜像通…...

Ubuntu安装企业微信

Ubuntu安装企业微信_ubuntu下安装企业微信_星光2020的博客-CSDN博客 在Ubuntu环境安装企业微信可以参考 https://github.com/zq1997/deepin-wine 所述的方法 首先运行 $ wget -O- https://deepin-wine.i-m.dev/setup.sh | sh 然后就可以像安装其它软件一样安装企业微信或其它…...

Prometheus 的应用服务发现及黑河部署等

目录 promtool检查语法 部署Prometheus Server 检查语法是否规范 部署node-exporter 部署Consul 直接请求API进行服务注册 使用register命令注册服务&#xff08;建议使用&#xff09; 单个和多个注册&#xff0c;多个后面多加了s 在Prometheus上做consul的服务发现 部署…...

JAVA SE -- 第十二天

&#xff08;全部来自“韩顺平教育”&#xff09; 常用类 一、包装类 1、包装类的分类 ①针对八种基本数据类型相应的引用类型--包装类 ②有了类的特点&#xff0c;就可以调用类中的方法 ③ 基本数据类型包装类booleanBooleancharCharacterbyteByteshortShortintInteger…...

实战:工作中对并发问题的处理

大家好&#xff0c;我是 方圆。最近在接口联调时发生了数据并发修改问题&#xff0c;我想把这个问题讲解一下&#xff0c;并把当时提出的解决方案进行实现&#xff0c;希望它能在大家以后在遇到同样的问题时提供一些借鉴和思考的方向。原文还是收录在我的 Github: enthusiasm 中…...

腾讯云Cloud Studio:基于Claude快速完成Excel工资自动核算

目录 1 什么是Cloud Studio&#xff1f;2 注册与代码管理2.1 账号注册2.2 Git关联 3 实战&#xff1a;Excel工资自动核算3.1 创建项目与配置3.2 “念咒师”Claude GPT3.3 代码编写与运行 1 什么是Cloud Studio&#xff1f; Cloud Studio是腾讯云为开发者提供的一个基于浏览器的…...

Spring Boot OAuth2 快速入门示例

系统要求 Spring Authorization Server 需要JDK1.8及以上版本。 项目搭建 使用在线项目初始化器 https://start.spring.io/ 生成项目[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ljKbMI4H-1690726855433)(images/screenshot_1690602511482.png)…...

MethodInterceptor

目录 1 MethodInterceptor 1.1 HandleSync 1.2 HandleException 1.3 /// This will be called via Reflection MethodInterceptor HandleSync private void HandleSync(IReadOnlyList<MethodFilterAttribute> filterAttributes, IReadOnlyList<ExceptionFilte…...

PID模块化__以stm32直流电机速度为例

文章目录 前言一、相关PID源码.c.h 二、如何使用1.创建变量2.初始化3.运算4.修改pid参数 总结 前言 本篇使用到的基于这个STM32CubeMX 直流电机PID速度控制、HAL库、cubemx、PID、速度控制、增量式 由于上次使用的pid没有模块化&#xff0c;当多出使用pid的时候就会很麻烦 所以…...

Java ~ Collection/Executor ~ DelayQueue【总结】

前言 文章 相关系列&#xff1a;《Java ~ Collection【目录】》&#xff08;持续更新&#xff09;相关系列&#xff1a;《Java ~ Executor【目录】》&#xff08;持续更新&#xff09;相关系列&#xff1a;《Java ~ Collection/Executor ~ DelayQueue【源码】》&#xff08;学…...

前端高级面试题-安全相关

1 XSS 跨⽹站指令码&#xff08;英语&#xff1a; Cross-site scripting &#xff0c;通常简称为&#xff1a; XSS &#xff09;是⼀种⽹站应⽤程式的安全漏洞攻击&#xff0c;是代码注⼊的⼀种。 它允许恶意使⽤者将程式码注⼊到⽹⻚上&#xff0c;其他使⽤者在观看⽹⻚时就会…...

【前缀和】560.和为 K 的子数组

Halo&#xff0c;这里是Ppeua。平时主要更新C&#xff0c;数据结构算法&#xff0c;Linux与ROS…感兴趣就关注我bua&#xff01; 和为K的子数组 题目:示例:题解&#xff1a;解法一:解法二: 题目: 示例: 题解&#xff1a; 解法一: 暴力解法:我们很容易想到通过两个for循环去遍…...

【Docker】安全及日志管理

安全及日志管理 Docker 安全及日志管理一&#xff1a;Docker 容器与虚拟机的区别1. 隔离与共享2. 性能与损耗 二&#xff1a;Docker 存在的安全问题1.Docker 自身漏洞2.Docker 源码问题 三&#xff1a;Docker 架构缺陷与安全机制1. 容器之间的局域网攻击2. DDoS 攻击耗尽资源3.…...

基于x-scan扫描线的3D模型渲染算法

基于x-scan算法实现的z-buffer染色。c#语言&#xff0c;.net core framework 3.1运行。 模型是读取3D Max的obj模型。 x-scan算法实现&#xff1a; public List<Vertex3> xscan() {List<Vertex3> results new List<Vertex3>();SurfaceFormula formula g…...

LeetCode36.Valid-Sudoku<有效的数独>

题目&#xff1a; 思路&#xff1a; 这题并不难&#xff0c;它类似于N皇后问题。在N皇后问题中&#xff0c;行&#xff0c;列&#xff0c;对角线&#xff0c;写对角线&#xff0c;都不能出现连续的皇后。 本题类似&#xff0c;不过他是行&#xff0c;列&#xff0c;还有一个B…...

Linux中的pause函数

2023年7月29日&#xff0c;周六上午 函数原型 在Linux中&#xff0c;pause()函数用于使当前进程暂停执行&#xff0c;直到接收到一个信号。 #include <unistd.h>int pause(void);pause()函数不接受任何参数。 通常&#xff0c;pause()函数用于编写简单的信号处理程序&…...

CommonCollections6链分析

前面和CC1一样 优点是不限制jdk版本和cc的版本 先开一个ChainedTransformer 然后创LazyMap 我们顺便执行一下避免上面写错 能弹计算器 没问题 后面就是CC6不同的地方了 我们需要一个TiedMapEntry 因为需要一个类调用了get方法 在TiedMapEntry的getValue()方法中调用了get()…...

KubeSphere 容器平台高可用:环境搭建与可视化操作指南

Linux_k8s篇 欢迎来到Linux的世界&#xff0c;看笔记好好学多敲多打&#xff0c;每个人都是大神&#xff01; 题目&#xff1a;KubeSphere 容器平台高可用&#xff1a;环境搭建与可视化操作指南 版本号: 1.0,0 作者: 老王要学习 日期: 2025.06.05 适用环境: Ubuntu22 文档说…...

React第五十七节 Router中RouterProvider使用详解及注意事项

前言 在 React Router v6.4 中&#xff0c;RouterProvider 是一个核心组件&#xff0c;用于提供基于数据路由&#xff08;data routers&#xff09;的新型路由方案。 它替代了传统的 <BrowserRouter>&#xff0c;支持更强大的数据加载和操作功能&#xff08;如 loader 和…...

SpringCloudGateway 自定义局部过滤器

场景&#xff1a; 将所有请求转化为同一路径请求&#xff08;方便穿网配置&#xff09;在请求头内标识原来路径&#xff0c;然后在将请求分发给不同服务 AllToOneGatewayFilterFactory import lombok.Getter; import lombok.Setter; import lombok.extern.slf4j.Slf4j; impor…...

Spring Cloud Gateway 中自定义验证码接口返回 404 的排查与解决

Spring Cloud Gateway 中自定义验证码接口返回 404 的排查与解决 问题背景 在一个基于 Spring Cloud Gateway WebFlux 构建的微服务项目中&#xff0c;新增了一个本地验证码接口 /code&#xff0c;使用函数式路由&#xff08;RouterFunction&#xff09;和 Hutool 的 Circle…...

LINUX 69 FTP 客服管理系统 man 5 /etc/vsftpd/vsftpd.conf

FTP 客服管理系统 实现kefu123登录&#xff0c;不允许匿名访问&#xff0c;kefu只能访问/data/kefu目录&#xff0c;不能查看其他目录 创建账号密码 useradd kefu echo 123|passwd -stdin kefu [rootcode caozx26420]# echo 123|passwd --stdin kefu 更改用户 kefu 的密码…...

OD 算法题 B卷【正整数到Excel编号之间的转换】

文章目录 正整数到Excel编号之间的转换 正整数到Excel编号之间的转换 excel的列编号是这样的&#xff1a;a b c … z aa ab ac… az ba bb bc…yz za zb zc …zz aaa aab aac…; 分别代表以下的编号1 2 3 … 26 27 28 29… 52 53 54 55… 676 677 678 679 … 702 703 704 705;…...

9-Oracle 23 ai Vector Search 特性 知识准备

很多小伙伴是不是参加了 免费认证课程&#xff08;限时至2025/5/15&#xff09; Oracle AI Vector Search 1Z0-184-25考试&#xff0c;都顺利拿到certified了没。 各行各业的AI 大模型的到来&#xff0c;传统的数据库中的SQL还能不能打&#xff0c;结构化和非结构的话数据如何和…...

java高级——高阶函数、如何定义一个函数式接口类似stream流的filter

java高级——高阶函数、stream流 前情提要文章介绍一、函数伊始1.1 合格的函数1.2 有形的函数2. 函数对象2.1 函数对象——行为参数化2.2 函数对象——延迟执行 二、 函数编程语法1. 函数对象表现形式1.1 Lambda表达式1.2 方法引用&#xff08;Math::max&#xff09; 2 函数接口…...

Windows电脑能装鸿蒙吗_Windows电脑体验鸿蒙电脑操作系统教程

鸿蒙电脑版操作系统来了&#xff0c;很多小伙伴想体验鸿蒙电脑版操作系统&#xff0c;可惜&#xff0c;鸿蒙系统并不支持你正在使用的传统的电脑来安装。不过可以通过可以使用华为官方提供的虚拟机&#xff0c;来体验大家心心念念的鸿蒙系统啦&#xff01;注意&#xff1a;虚拟…...

STM32标准库-ADC数模转换器

文章目录 一、ADC1.1简介1. 2逐次逼近型ADC1.3ADC框图1.4ADC基本结构1.4.1 信号 “上车点”&#xff1a;输入模块&#xff08;GPIO、温度、V_REFINT&#xff09;1.4.2 信号 “调度站”&#xff1a;多路开关1.4.3 信号 “加工厂”&#xff1a;ADC 转换器&#xff08;规则组 注入…...