web笔记

<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()

js

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()

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

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

5.3 克拉默法则、逆矩阵和体积

5.3 克拉默法则、逆矩阵和体积

本节是使用代数而不是消元法来求解 A x b A\boldsymbol x\boldsymbol b Axb 和 A − 1 A^{-1} A−1。所有的公式都会除以 det ⁡ A \det A detA&#xff0c; A − 1 A^{-1} A−1 和 A − 1 b A^{-1}\boldsymbol b A−1b 中的每个元素都是一个行列式除以 A A A 的行列式。…
阅读更多...
C（十一）scanf、getchar（第三弹）

C（十一）scanf、getchar（第三弹）

问题引入&#xff1a;如何实现输入一串密码&#xff0c;如&#xff1a;“123 xxxx” &#xff0c;然后读取并确认&#xff0c;是 -- Y&#xff1b;否 -- N。 自然的&#xff0c;我们想到用scanf&#xff0c;但是在使用过程中你是否遇到跟我一样的困惑呢&#xff1f;如下&…
阅读更多...
如何高效删除 MySQL 日志表中的历史数据？实战指南

如何高效删除 MySQL 日志表中的历史数据？实战指南

在处理高并发的物联网平台或者其他日志密集型应用时&#xff0c;数据库中的日志表往往会迅速增长&#xff0c;数据量庞大到数百GB甚至更高&#xff0c;严重影响数据库性能。如何有效管理这些庞大的日志数据&#xff0c;特别是在不影响在线业务的情况下&#xff0c;成为了一项技…
阅读更多...
【LeetCode HOT 100】详细题解之二叉树篇

【LeetCode HOT 100】详细题解之二叉树篇

【LeetCode HOT 100】详细题解之二叉树篇 94 二叉树的中序遍历方法一&#xff1a;递归方法二&#xff1a;迭代 104 二叉树的最大深度方法一&#xff1a;递归方法二&#xff1a;迭代 226 翻转二叉树方法一&#xff1a;递归方法二&#xff1a;迭代 101 对称二叉树方法一&#xff…
阅读更多...
小程序-使用npm包

小程序-使用npm包

目录 Vant Weapp 安装 Vant 组件库 使用 Vant 组件 定制全局主题样式 API Promise化 1. 基于回调函数的异步 API 的缺点 2. 什么是 API Promise 化 3. 实现 API Promise 化 4.调用 Promise 化之后的异步 API 小程序对 npm 的支持与限制 目前&#xff0c;小程序中已经…
阅读更多...
Java 之深入理解 String、StringBuilder、StringBuffer

Java 之深入理解 String、StringBuilder、StringBuffer

前言 由于发现 String、StringBuilder、StringBuffer 面试的时候会经常问到&#xff0c;这里就顺便总结一下&#xff1a;本文重点会以这三个字符串类的性能、线程安全、存储结构这三个方面进行分析 ✨上期回顾&#xff1a;Java 哈希表 ✨目录 前言 String 介绍 String 的不可变…
阅读更多...
全局安装cnpm并设置其使用淘宝镜像的仓库地址（地址最新版）

全局安装cnpm并设置其使用淘宝镜像的仓库地址（地址最新版）

npm、cnpm和pnpm基本概念 首先介绍一下npm和cnpm是什么&#xff0c;顺便说一下pnpm。 npm npm&#xff08;Node Package Manager&#xff09;是Node.js的默认包管理器&#xff0c;用于安装、管理和分享JavaScript代码包。它是全球最大的开源库生态系统之一&#xff0c;提供了数…
阅读更多...
如何使用ssm实现基于HTML的中国传统面食介绍网站的搭建+vue

如何使用ssm实现基于HTML的中国传统面食介绍网站的搭建+vue

TOC ssm758基于HTML的中国传统面食介绍网站的搭建vue 第1章 绪论 1.1选题动因 当前的网络技术&#xff0c;软件技术等都具备成熟的理论基础&#xff0c;市场上也出现各种技术开发的软件&#xff0c;这些软件都被用于各个领域&#xff0c;包括生活和工作的领域。随着电脑和笔…
阅读更多...
微服务SpringGateway解析部署使用全流程

微服务SpringGateway解析部署使用全流程

官网地址&#xff1a; Spring Cloud Gateway 目录 1、SpringGateway简介 1、什么是网关 2、为什么用网关【为了转发】 2、应用&#xff1a; 1.启动nacos 2.创建网关项目 3.网关配置1 4.网关配置2【了解】 5.过滤器配置【了解】 1、SpringGateway简介 核心功能有三个&…
阅读更多...
Webpack模式-Resolve-本地服务器

Webpack模式-Resolve-本地服务器

目录 ResolveMode配置搭本地服务器区分环境配置 Resolve 前面学习时使用了各种各样的模块依赖&#xff0c;这些模块可能来自于自己编写的代码&#xff0c;也可能来自第三方库&#xff0c;在 Webpack 中&#xff0c;resolve 是用于解析模块依赖的配置项&#xff0c;它决定了 We…
阅读更多...
每日OJ题_牛客_DP13[NOIP2002 普及组]过河卒_路径dp_C++_Java

每日OJ题_牛客_DP13[NOIP2002 普及组]过河卒_路径dp_C++_Java

目录 牛客_DP13[NOIP2002 普及组]过河卒_路径dp 题目解析 C代码1 C代码2 Java代码 牛客_DP13[NOIP2002 普及组]过河卒_路径dp [NOIP2002 普及组] 过河卒_牛客题霸_牛客网 (nowcoder.com) 描述&#xff1a; 棋盘上 A点有一个过河卒&#xff0c;需要走到目标 B点。卒行走的…
阅读更多...
业务封装与映射 -- 业务映射路径

业务封装与映射 -- 业务映射路径

为什么需要封装映射 OTN网络客户业务种类繁多&#xff08;例如SDH、以太网、视频&#xff09;&#xff0c;且业务大小不一&#xff08;例如STM-1、STM-4、STM-16&#xff09;&#xff0c;为了便于传输、管理客户业务&#xff0c;保证设备间互联互通&#xff0c;ITU-T定义了OTN接…
阅读更多...
《深度学习》OpenCV 角点检测、特征提取SIFT 原理及案例解析

《深度学习》OpenCV 角点检测、特征提取SIFT 原理及案例解析

目录 一、角点检测 1、什么是角点检测 2、检测流程 1&#xff09;输入图像 2&#xff09;图像预处理 3&#xff09;特征提取 4&#xff09;角点检测 5&#xff09;角点定位和标记 6&#xff09;角点筛选或后处理&#xff08;可选&#xff09; 7&#xff09;输出结果 3、邻域…
阅读更多...
物联网智能项目全面解析

物联网智能项目全面解析

目录 引言 一、物联网概述 1.1 什么是物联网 1.2 物联网的历史与发展 二、物联网智能项目分类 三、关键组件与技术 3.1 传感器和执行器 3.2 连接技术 3.3 数据处理与分析 3.4 用户界面 四、物联网智能项目案例分析 4.1 智能家居 4.2 智慧城市 4.3 工业物联网 4.4…
阅读更多...
前端编程艺术（2）----CSS

前端编程艺术（2）----CSS

目录 1.CSS 2.CSS引入 3.选择器 1.标签选择器 2.类选择器 3.id选择器 4.属性选择器 5.后代选择器 5.直接子元素选择器 6.伪类选择器 链接相关 动态伪类 结构化伪类 否定伪类 其他伪类 UI元素状态伪类 4.字体 1.font-family 2.font-size 3.font-style 4.fo…
阅读更多...
C++之多线程

C++之多线程

前言 多线程和多进程是并发编程的两个核心概念，它们在现代计算中都非常重要，尤其是在需要处理大量数据、提高程序性能和响应能力的场景中。 多线程的重要性： 资源利用率：多线程可以在单个进程中同时执行多个任务，这可以更有效地利用CPU资源，特别是在多核处理器上。 性…
阅读更多...
奔驰EQS450suv升级增强AR抬头显示HUD案例分享

奔驰EQS450suv升级增强AR抬头显示HUD案例分享

以下是奔驰 EQS450 SUV 升级增强版 AR 抬头显示的一般改装案例步骤及相关信息&#xff1a; 配件&#xff1a;通常包括显示屏、仪表模块、饰板等。 安装步骤&#xff1a; 1. 拆下中控的仪表。 2. 在仪表上预留位置切割出合适的孔位&#xff0c;用于安装显示器。 3. 将显示器…
阅读更多...
（IDEA）spring项目导入本地jar包方法和项目打包时找不到引入本地jar包的问题解决方案

（IDEA）spring项目导入本地jar包方法和项目打包时找不到引入本地jar包的问题解决方案

系列文章目录 文章目录 系列文章目录一、&#xff08;IDEA&#xff09;spring项目导入本地jar包方法和项目打包时找不到引入本地jar包的问题解决方案1.资料 一、&#xff08;IDEA&#xff09;spring项目导入本地jar包方法和项目打包时找不到引入本地jar包的问题解决方案 1.资料…
阅读更多...
Python案例--水仙花数的探索之旅

Python案例--水仙花数的探索之旅

一、引言 水仙花数&#xff0c;也称为阿姆斯特朗数&#xff0c;是一种特殊的三位数&#xff0c;其各位数字的立方和等于其本身。例如&#xff0c;153就是一个水仙花数&#xff0c;因为 135333153135333153。这种数字的发现不仅展示了数字的内在美&#xff0c;也激发了人们对数…
阅读更多...
大学学校用电安全远程监测预警系统

大学学校用电安全远程监测预警系统

1.概述&#xff1a; 该系统是基于移动互联网、云计算技术&#xff0c;通过物联网传感终端&#xff0c;将办公建筑、学校、医院、工厂、体育场馆、宾馆、福利院等人员密集场所的电气安全数据&#xff0c;实时传输至安全用申管理服务器&#xff0c;为用户提供不间断的数据跟踪&a…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023