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

web笔记

news 2025/11/3 21:44:46

<form method="POST" action="{{ url_for('register') }}"><label for="username">用户名:</label><input type="text" id="username" name="username" required><br><label for="password">密码:</label><input type="password" id="password" name="password" required><br><label for="confirm_password">确认密码:</label><input type="password" id="confirm_password" name="confirm_password" required><br><button type="submit">注册</button>
</form>

required 是HTML5引入的属性，表示该输入字段为必填项

<br> 是 HTML 中的一个标签，用来创建换行

id 用于前端定位元素，通常在 CSS 和 JavaScript 中使用。
name 用于后端接收表单数据，后端通过 name 来获取提交的表单值。

Flask接收前端的数据

@app.route('/register', methods=['GET', 'POST'])
def register():if request.method == 'POST':username = request.form['username']password = request.form['password']confirm_password = request.form['confirm_password']

Flask把数据发送给前端

@app.route('/')
def index():# 传递数据到前端data = {'title': 'Flask 示例','user': '小明','items': ['苹果', '香蕉', '橙子']}return render_template('index.html', data=data)

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><title>{{ data.title }}</title>
</head>
<body><h1>欢迎, {{ data.user }}</h1><ul>{% for item in data.items %}<li>{{ item }}</li>{% endfor %}</ul>
</body>
</html>

微信小程序前端传递给flask

JS文件

wx.request({url: 'http://your_flask_server/submit', // Flask后端地址method: 'POST',data: {key: 'value', // 要提交的数据},success: function (res) {console.log('提交成功', res.data);},fail: function (err) {console.error('提交失败', err);}
});

res 是 wx.request 方法的回调函数中接收到的响应对象

通常包括以下几个部分：

data: 后端返回的实际数据内容。
statusCode: HTTP 状态码（如 200 表示成功）。
header: 返回的响应头信息。

flask代码

from flask import Flask, request, jsonifyapp = Flask(__name__)@app.route('/submit', methods=['POST'])
def submit():data = request.json  # 获取提交的数据# 处理数据return jsonify({'status': 'success', 'data': data})if __name__ == '__main__':app.run(debug=True)

微信小程序前后端注册操作

wx.request({url: 'http://your_flask_server/register', // Flask后端地址method: 'POST',data: {username: this.data.username,password: this.data.password,},success: function (res) {if (res.data.status === 'success') {wx.showToast({title: '注册成功',});} else {wx.showToast({title: '注册失败',icon: 'none',});}},fail: function (err) {wx.showToast({title: '请求失败',icon: 'none',});}
});

flask后端

from flask import Flask, request, jsonify
import pymysqlapp = Flask(__name__)# 数据库连接
def connect_db():return pymysql.connect(host='localhost', user='root', password='123456', database='hukehan', charset='utf8mb4')@app.route('/register', methods=['POST'])
def register():data = request.jsonusername = data.get('username')password = data.get('password')# 数据库操作conn = connect_db()cursor = conn.cursor()try:cursor.execute("INSERT INTO users (username, password) VALUES (%s, %s)", (username, password))conn.commit()return jsonify({'status': 'success'})except Exception as e:conn.rollback()return jsonify({'status': 'error', 'message': str(e)})finally:cursor.close()conn.close()if __name__ == '__main__':app.run(debug=True)

cursor = conn.cursor() 是在数据库连接中创建一个游标对象（cursor）。游标用于执行 SQL 查询和获取结果。

小程序登陆的前后端

wx.request({url: 'http://your_flask_server/login', // Flask后端地址method: 'POST',data: {username: this.data.username,password: this.data.password,},success: function (res) {if (res.data.status === 'success') {wx.showToast({title: '登录成功',});// 跳转到首页或其他页面wx.redirectTo({url: '/pages/home/home' // 修改为目标页面路径});} else {wx.showToast({title: '登录失败',icon: 'none',});}},fail: function (err) {wx.showToast({title: '请求失败',icon: 'none',});}
});

from flask import Flask, request, jsonify, session
import pymysqlapp = Flask(__name__)
app.secret_key = 'your_secret_key'  # 设置 session 密钥def connect_db():return pymysql.connect(host='localhost', user='root', password='123456', database='hukehan', charset='utf8mb4')@app.route('/login', methods=['POST'])
def login():data = request.jsonusername = data.get('username')password = data.get('password')conn = connect_db()cursor = conn.cursor()try:cursor.execute("SELECT * FROM users WHERE username = %s AND password = %s", (username, password))user = cursor.fetchone()if user:session['username'] = user[1]  # 假设 username 是第二列return jsonify({'status': 'success'})else:return jsonify({'status': 'error', 'message': '用户名或密码错误'})except Exception as e:return jsonify({'status': 'error', 'message': str(e)})finally:cursor.close()conn.close()if __name__ == '__main__':app.run(debug=True)

user = cursor.fetchone() 是从数据库查询结果中获取一条记录

如果没有更多的行可返回，fetchone() 会返回 None

(1, 'username', 'password')  # 假设用户表的字段为 id, username, password

跳转的个人信息页面

@app.route('/profile', methods=['GET'])
def profile():if 'username' in session:return jsonify({'status': 'success', 'username': session['username']})else:return jsonify({'status': 'error', 'message': '未登录'})

微信小程序的登陆案例==================================

from flask import Flask, request, jsonifyapp = Flask(__name__)@app.route('/login', methods=['POST'])
def login():# 通过 request.json 来获取 JSON 格式的数据data = request.get_json()username = data.get('username')password = data.get('password')# 假设这里进行一些简单的验证，实际中应使用更安全的验证方式if username == '1' and password == '1':return jsonify({'message': '登录成功', 'status': 'success'})else:return jsonify({'message': '登录失败', 'status': 'fail'}), 401if __name__ == '__main__':app.run()

Page({data: {username: '',password: ''},onUsernameInput: function(e) {this.setData({username: e.detail.value});},onPasswordInput: function(e) {this.setData({password: e.detail.value});},login: function() {const { username, password } = this.data;if (!username ||!password) {wx.showToast({title: '请输入账号和密码',icon: 'none'});return;}wx.request({url: 'http://127.0.0.1:5000/login',method: 'POST',data: {username,password},success: function(res) {if (res.statusCode === 200) {// 获取后端返回的数据const data = res.data;wx.showToast({title: data.message,icon: data.status === 'success'? 'success' : 'none'});if (data.status === 'success') {// 可以在这里进行登录成功后的页面跳转等操作}} else {wx.showToast({title: '登录失败',icon: 'none'});}},fail: function(err) {wx.showToast({title: '网络错误',icon: 'none'});console.error(err);}});}
});

css

/* 样式文件 */
.container {display: flex;flex-direction: column;justify-content: center;align-items: center;height: 100vh;background-color: #f5f5f5;padding: 20px;
}.input-group {width: 100%;max-width: 300px;margin-bottom: 20px;
}input {width: 100%;padding: 10px;border: 1px solid #ccc;border-radius: 4px;font-size: 16px;
}button {width: 100%;max-width: 300px;padding: 10px;background-color: #007bff;color: white;border: none;border-radius: 4px;font-size: 16px;cursor: pointer;
}button:hover {background-color: #0056b3;
}

html

<view class="container"><view class="input-group"><input type="text" placeholder="请输入用户名" bindinput="onUsernameInput" /></view><view class="input-group"><input type="password" placeholder="请输入密码" bindinput="onPasswordInput" /></view><button bindtap="login">登录</button>
</view>

=======-变换 css和html不变

Page({data: {username: '',password: ''},onUsernameInput: function(e) {this.setData({username: e.detail.value});},onPasswordInput: function(e) {this.setData({password: e.detail.value});},login: function() {const { username, password } = this.data;if (!username || !password) {wx.showToast({title: '请输入账号和密码',icon: 'none'});return;}wx.request({url: 'http://127.0.0.1:5000/login',method: 'POST',data: {username,password},success: function(res) {if (res.statusCode === 200) {const data = res.data;wx.showToast({title: data.message,icon: data.status === 'success' ? 'success' : 'none'});if (data.status === 'success') {// 登录成功后，处理返回的数据const userData = data.data; // 获取数组数据console.log(userData); // 这里可以根据需要进行进一步处理// 可以在这里进行页面跳转等操作}} else {wx.showToast({title: '登录失败',icon: 'none'});}},fail: function(err) {wx.showToast({title: '网络错误',icon: 'none'});console.error(err);}});}
});

from flask import Flask, request, jsonifyapp = Flask(__name__)# 假设这是你要发送给前端的数组数据
user_data = [{"id": 1, "username": "user1"},{"id": 2, "username": "user2"},{"id": 3, "username": "user3"}
]@app.route('/login', methods=['POST'])
def login():data = request.get_json()username = data.get('username')password = data.get('password')if username == '1' and password == '1':# 登录成功时返回数据return jsonify({'message': '登录成功', 'status': 'success', 'data': user_data})else:return jsonify({'message': '登录失败', 'status': 'fail'}), 401if __name__ == '__main__':app.run()

web笔记

<form method"POST" action"{{ url_for(register) }}"><label for"username">用户名:</label><input type"text" id"username" name"username" required><br><label for"p…...

编程日记 2024/10/2 7:49:42

文章目录前言　　 1.Lab: Unprotected admin functionality　 2.Lab: Unprotected admin functionality with unpredictable URL　　 3.Lab: User role controlled by request parameter　　 4.Lab:User role can be modified in user profile　 5.Lab: User ID controlled by…...

编程日记 2024/10/2 7:46:39

iOS 项目中的多主题颜色设计与实现

引言在现代iOS应用中，用户对个性化体验的需求越来越高，除了功能上的满足，多样的视觉风格也是提升用户体验的重要手段之一。提供多主题颜色的切换功能不仅能满足用户的审美偏好，还可以让应用更具活力，适应不同场景下的…...

编程日记 2024/10/2 7:43:36

Android Camera2 与 Camera API技术探究和RAW数据采集

Android Camera2 Android Camera2 是 Android 系统中用于相机操作的一套高级应用程序接口（API），它取代了之前的 Camera API。以下是关于 Android Camera2 的一些主要信息： 主要特点： 强大的控制能力：提供…...

编程日记 2024/10/2 7:42:35

[python][pipenv]pipenv的使用

pipenv 是一个 Python 开发工作流程的工具，它旨在将 pip 的包管理和 virtualenv 的虚拟环境管理结合起来。以下是一些基本的 pipenv 使用方法： 安装 pipenv： 如果你还没有安装 pipenv，可以通过 pip 安装它： pip insta…...

编程日记 2024/10/2 7:41:34

SpringSession微服务

一.在linux中确保启动起来redis和nacos 依赖记得别放<dependencyManagement></dependencyManagement>这个标签去了 1.首先查看已经启动的服务 docker ps 查看有没有安装redis和nacos 2.启动redis和nacos 发现没有启动redis和nacos,我们先来启动它。，…...

编程日记 2024/10/2 7:39:33

强化学习：通过试错学习最优策略---示例：使用Q-Learning解决迷宫问题

强化学习（Reinforcement Learning, RL）是一种让智能体（agent）在与环境交互的过程中，通过最大化某种累积奖励来学习如何采取行动的学习方法。它适用于那些需要连续决策的问题，比如游戏、自动驾驶和机器人控制…...

编程日记 2024/10/2 7:33:27

OpenGL ES 纹理(7)

OpenGL ES 纹理(7) 简述通过前面几章的学习，我们已经可以绘制渲染我们想要的逻辑图形了，但是如果我们想要渲染一张本地图片，这就需要纹理了。纹理其实是一个可以用于采样的数据集，比较典型的就是图片了，我们知道我…...

编程日记 2024/10/2 7:30:24

【C#】CacheManager：高效的 .NET 缓存管理库

在现代应用开发中，缓存是提升性能和降低数据库负载的重要技术手段。无论是 Web 应用、桌面应用还是移动应用，缓存都能够帮助减少重复的数据查询和处理，从而提高系统的响应速度。然而，管理缓存并不简单，尤其是当你需要处…...

编程日记 2024/10/2 7:29:23

【数学分析笔记】第4章第2节导数的意义和性质（2）

4. 微分 4.2 导数的意义与性质 4.2.3 单侧导数 f ′ ( x ) lim ⁡ Δ x → 0 f ( x Δ x ) − f ( x ) Δ x lim ⁡ x → x 0 f ( x ) − f ( x 0 ) x − x 0 f(x)\lim\limits_{\Delta x\to 0}\frac{f(x\Delta x)-f(x)}{\Delta x}\lim\limits_{x\to x_0}\frac{f(x)-f(x_0)…...

编程日记 2024/10/2 7:28:23

深度学习：迁移学习

目录一、迁移学习 1.什么是迁移学习 2.迁移学习的步骤 1、选择预训练的模型和适当的层 2、冻结预训练模型的参数 3、在新数据集上训练新增加的层 4、微调预训练模型的层 5、评估和测试二、迁移学习实例 1.导入模型 2.冻结模型参数 3.修改参数 4.创建类&#xff…...

编程日记 2024/10/2 7:27:22

Footprint Growthly Quest 工具：赋能 Telegram 社区实现 Web3 飞速增长

作者：Stella L (stellafootprint.network) 在 Web3 的快节奏世界里，社区互动是关键。而众多 Web3 社区之所以能够蓬勃发展，很大程度上得益于 Telegram 平台。正因如此，Footprint Analytics 精心打造了 Growthly —— 一款专为 Tel…...

编程日记 2024/10/2 7:26:21

进入xwindows后挂起键盘鼠标没有响应@FreeBSD

问题： 在升级pkg包后，系统无法进入xfce等xwindows，表现为黑屏和看见鼠标，左上角有一个白字符块，键盘鼠标没有反应，整个系统卡住。但是可以ssh登录，内部的服务一切正常。表现处理过程&#xf…...

编程日记 2024/10/2 7:25:20

CentOS7.9 snmptrapd更改162端口

端口更改前：命令： netstat -an |grep 162 [root@kibana snmp]# netstat -an | grep 162 udp 0 0 0.0.0.0:162 0.0.0.0:* unix 3 [ ] STREAM CONNECTED 45162 /run/systemd/journal/stdout u…...

编程日记 2024/10/2 7:24:19

模糊测试SFuzz亮相第32届中国国际信息通信展览会

9月25日，被誉为“中国ICT市场的创新基地和风向标”的第32届中国国际信息通信展在北京盛大开幕，本次展会将在为期三天的时间内，为信息通信领域创新成果、尖端技术和产品提供国家级交流平台。开源网安携模糊测试产品及相关解决方案精彩亮相&…...

编程日记 2024/10/2 7:20:14

CMake学习

向大佬lyf学习，先把其8服务器中所授fine 文章目录前言一、CMakeList.txt 命令1. 最外层CMakeLists1.1 cmake_minimum_required（）1.2 project（）1.3 set（）1.4 add_subdirectory（&…...

编程日记 2024/10/2 7:19:13

书生·浦语大模型全链路开源开放体系

书生浦语大模型全链路开源开放体系大模型应用生态的发展和繁荣是建立在模型基座强大的通用基础能力之上的。上海AI实验室联合团队研究认为，大模型各项性能提升的基础在于语言建模能力的增强，对于大模型的研究应回归语言建模本质，通过更高质量…...

编程日记 2024/10/2 7:17:11

PHP安装swoole扩展无效，如何将文件上传至Docker容器

目录过程操作方式过程在没有使用过云服务器以前，Docker这个平台一直都很神秘。在我申请了华为云服务器，并使用WordPress镜像去搭建自己的网站以后，我不得不去把Docker平台弄清楚，原因是我使用的一个主题需要安装swoole扩展，才能够正常启用。而要将swoole.so这个扩展…...

编程日记 2024/10/2 7:16:10

Web3.0 应用项目

Web3.0 是下一代互联网的概念，旨在去中心化、用户拥有数据控制权和通过区块链技术实现信任的网络。Web3.0的应用项目主要集中在区块链、加密货币、去中心化应用 (DApps)、去中心化金融 (DeFi)、NFT（非同质化代币）等领域。以下是一些典型的 We…...

编程日记 2024/10/2 7:15:09

Linux 学习笔记（十六）—— 重定向与缓冲区

一、文件重定向矩阵的下标，也就是文件描述符的分配规则，是从0开始空的最小的文件描述符分配给进程新打开的文件；文件输出重定向的原理是，关掉1（输出），然后打开文件，这个新打开的文…...

编程日记 2024/10/2 7:14:08

linux之kylin系统nginx的安装

一、nginx的作用 1.可做高性能的web服务器直接处理静态资源（HTML/CSS/图片等），响应速度远超传统服务器类似apache支持高并发连接 2.反向代理服务器隐藏后端服务器IP地址，提高安全性 3.负载均衡服务器支持多种策略分发流量…...

编程新知 2025/10/30 6:12:30

DAY 47

三、通道注意力 3.1 通道注意力的定义 # 新增：通道注意力模块（SE模块） class ChannelAttention(nn.Module):"""通道注意力模块(Squeeze-and-Excitation)"""def __init__(self, in_channels, reduction_rat…...

编程新知 2025/11/2 20:05:34

TRS收益互换：跨境资本流动的金融创新工具与系统化解决方案

一、TRS收益互换的本质与业务逻辑 （一）概念解析 TRS（Total Return Swap）收益互换是一种金融衍生工具，指交易双方约定在未来一定期限内，基于特定资产或指数的表现进行现金流交换的协议。其核心特征包括&am…...

编程新知 2025/11/2 0:31:23

[Java恶补day16] 238.除自身以外数组的乘积

给你一个整数数组 nums，返回数组 answer ，其中 answer[i] 等于 nums 中除 nums[i] 之外其余各元素的乘积。题目数据保证数组 nums之中任意元素的全部前缀元素和后缀的乘积都在 32 位整数范围内。请不要使用除法，且在 O(n) 时间复杂度…...

编程新知 2025/10/3 13:53:38

HDFS分布式存储 zookeeper

hadoop介绍狭义上hadoop是指apache的一款开源软件用java语言实现开源框架，允许使用简单的变成模型跨计算机对大型集群进行分布式处理（1.海量的数据存储 2.海量数据的计算）Hadoop核心组件 hdfs（分布式文件存储系统）&a…...

编程新知 2025/10/25 3:24:02

A2A JS SDK 完整教程：快速入门指南

目录什么是 A2A JS SDK?A2A JS 安装与设置A2A JS 核心概念创建你的第一个 A2A JS 代理A2A JS 服务端开发A2A JS 客户端使用A2A JS 高级特性A2A JS 最佳实践A2A JS 故障排除什么是 A2A JS SDK? A2A JS SDK 是一个专为 JavaScript/TypeScript 开发者设计的强大库&#xff…...

编程新知 2025/9/29 5:00:25

push [特殊字符] present

push 🆚 present 前言present和dismiss特点代码演示 push和pop特点代码演示前言在 iOS 开发中，push 和 present 是两种不同的视图控制器切换方式，它们有着显著的区别。 present和dismiss 特点在当前控制器上方新建视图层级需要手动调用…...

编程新知 2025/10/28 15:15:54

Caliper 配置文件解析：fisco-bcos.json

config.yaml 文件 config.yaml 是 Caliper 的主配置文件，通常包含以下内容： test:name: fisco-bcos-test # 测试名称description: Performance test of FISCO-BCOS # 测试描述workers:type: local # 工作进程类型number: 5 # 工作进程数量monitor:type: - docker- pro…...

编程新知 2025/10/24 15:14:02

PostgreSQL——环境搭建

一、Linux # 安装 PostgreSQL 15 仓库 sudo dnf install -y https://download.postgresql.org/pub/repos/yum/reporpms/EL-$(rpm -E %{rhel})-x86_64/pgdg-redhat-repo-latest.noarch.rpm# 安装之前先确认是否已经存在PostgreSQL rpm -qa | grep postgres# 如果存在&#xff0…...

编程新知 2025/10/28 21:05:15

前端中slice和splic的区别

1. slice slice 用于从数组中提取一部分元素，返回一个新的数组。特点： 不修改原数组：slice 不会改变原数组，而是返回一个新的数组。提取数组的部分：slice 会根据指定的开始索引和结束索引提取数组的一部分。不包含…...

编程新知 2025/9/18 9:49:21

web笔记

相关文章：

web笔记

【网络安全】-访问控制-burp(1~6)

iOS 项目中的多主题颜色设计与实现

Android Camera2 与 Camera API技术探究和RAW数据采集

[python][pipenv]pipenv的使用

SpringSession微服务

强化学习：通过试错学习最优策略---示例：使用Q-Learning解决迷宫问题

OpenGL ES 纹理(7)

【C#】CacheManager：高效的 .NET 缓存管理库

【数学分析笔记】第4章第2节导数的意义和性质（2）

深度学习：迁移学习

Footprint Growthly Quest 工具：赋能 Telegram 社区实现 Web3 飞速增长

进入xwindows后挂起键盘鼠标没有响应@FreeBSD

CentOS7.9 snmptrapd更改162端口

模糊测试SFuzz亮相第32届中国国际信息通信展览会

CMake学习

书生·浦语大模型全链路开源开放体系

PHP安装swoole扩展无效，如何将文件上传至Docker容器

Web3.0 应用项目

Linux 学习笔记（十六）—— 重定向与缓冲区

linux之kylin系统nginx的安装

DAY 47

TRS收益互换：跨境资本流动的金融创新工具与系统化解决方案

[Java恶补day16] 238.除自身以外数组的乘积

HDFS分布式存储 zookeeper

A2A JS SDK 完整教程：快速入门指南

push [特殊字符] present

Caliper 配置文件解析：fisco-bcos.json

PostgreSQL——环境搭建

前端中slice和splic的区别