web笔记 - 技术栈

html 复制代码

<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接收前端的数据

python 复制代码

@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把数据发送给前端

python 复制代码

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

html 复制代码

<!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代码

python 复制代码

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)

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

python 复制代码

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后端

python 复制代码

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 查询和获取结果。

小程序登陆的前后端

python 复制代码

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',
    });
  }
});

python 复制代码

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

python 复制代码

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

跳转的个人信息页面

python 复制代码

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

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

python 复制代码

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

python 复制代码

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

python 复制代码

/* 样式文件 */
.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

python 复制代码

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