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

web笔记

article 2024/10/1 8:55:18 
<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, jsonify

app = 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 pymysql

app = 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.json
    username = 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 pymysql

app = 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.json
    username = 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, jsonify

app = 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'}), 401

if __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, jsonify

app = 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'}), 401

if __name__ == '__main__':
    app.run()


http://www.kler.cn/news/327228.html

相关文章：

  • uni-app ios 初次进入网络没有加载 导致出现异常
  • 计算机毕业设计 基于深度学习的短视频内容理解与推荐系统的设计与实现 Python+Django+Vue 前后端分离 附源码 讲解 文档
  • nacos client 本地缓存问题
  • 信息安全数学基础（23）一般二次同余式
  • 正则表达式使用指南(内容详细，通俗易懂)
  • YOLOv8改进 - 注意力篇 - 引入SCAM注意力机制
  • 【2025】基于Spring Boot的智慧农业小程序（源码+文档+调试+答疑）
  • plt绘画三维曲面
  • Android OTA升级
  • excel快速入门(二)
  • Redis缓存技术 基础第二篇（Redis的Java客户端）
  • Ingress Gateway 它负责处理进入集群的 HTTP 和 TCP 流量
  • 七星创客：重塑商业模式认知
  • 在 Linux 中，要让某一个线程或进程排他性地独占一个 CPU
  • AI芯片WT2605C赋能厨房家电，在线对话操控，引领智能烹饪新体验：尽享高效便捷生活
  • Linux：文件描述符介绍
  • 【SpringBoot详细教程】-08-MybatisPlus详细教程以及SpringBoot整合Mybatis-plus【持续更新】
  • 端点安全服务：全面的端点安全解决方案
  • 初识CyberBattleSim
  • sql语法学习 sql各种语法 sql增删改查 数据库各种操作 数据库指令
  • 自动化测试中如何精确模拟富文本编辑器中的输入与提交？
  • Pytorch-LSTM轴承故障一维信号分类(一)
  • 如何在 Amazon EMR 中运行 Flink CDC Pipeline Connector
  • 【笔记】如何将本地的.md变成不影响阅读的类pdf模式
  • COMP 6714-Info Retrieval and Web Search笔记week2
  • 解决 Android WebView 无法加载 H5 页面常见问题的实用指南
  • Another redis desktop manager使用说明
  • 在IntelliJ IDEA中设置文件自动定位
  • 劳易测ODT3CL1-2M漫反射传感器荣获 “2024 MM《现代制造》创新产品奖”
  • AWS Network Firewall - IGW方式配置只应许白名单域名出入站