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