微信小程序表单提交（本地开发）

一、前言

在昨天的FLASK服务器的基础上进行，后面做一下记录
没有什么参考性的

环境

虚拟机环境：unbuntu20.4

本地环境：windows11

编译器：微信开发者(前端)，jupyter(后端)

使用工具：xshell

注意

微信开发者工具关闭http校验功能

二、准备

JUYPTER

1.进入虚拟环境notebookenv

source notebookenv/bin/activate

2,打开jupyter

jupyter notebook --allow-root

3.打开网站

MYSQL

 mysql -u root -p

三、代码编写

功能说明

简单模式

实现微信小程序向后端提交表单数据（包括用户名和邮箱）

并将这些数据存储到后端(后端使用FLASK框架)的 MySQL 数据库中，我们需要完成以下几个步骤：

微信小程序前端

页面状态

index.wxml

<form bindsubmit="submitForm">
  <input name="username" type="text" placeholder="用户名"/>
  <input type="text" name="email" placeholder="请输入邮箱"/>
  <button form-type="submit">提交</button>
</form>

index.js

Page({
  submitForm: function(e) {
    const formData = {
      username: e.detail.value.username,
      email: e.detail.value.email
    };

    wx.request({
      url: 'http://192.168.215.136:5000/submit', // 替换为你的Flask应用URL
      method: 'POST',
      data: formData,
      header: {
        'Content-Type': 'application/json'
      },
      success: function(res) {
        console.log('提交成功', res.data);
      },
      fail: function(err) {
        console.error('提交失败', err);
      }
    });
  }
});

MYSQL

1.创建database

 create database test3;

使用数据库

use test3

2.创建test2的user表格

CREATE TABLE users (
  id INT AUTO_INCREMENT PRIMARY KEY,
  username VARCHAR(255) NOT NULL,
  email VARCHAR(255) NOT NULL
);

FLASK后端

测试mysql和flask是否相连是否可以插入

test.py 

from flask import Flask, jsonify
import pymysql

app = Flask(__name__)

# 配置MySQL连接
mysql_config = {
    'host': 'localhost',
    'user': 'myuser',  # 替换为你的MySQL用户名
    'password': '123456',  # 替换为你的MySQL密码
    'db': 'test3',  # 替换为你的数据库名
    'charset': 'utf8mb4',
    'cursorclass': pymysql.cursors.DictCursor
}

# 创建数据库连接池
def get_db_connection():
    return pymysql.connect(**mysql_config)

@app.route('/')
def index():
    return "Welcome to the Flask App!"

@app.route('/insert_data', methods=['GET'])
def insert_data():
    data_to_insert = {
        'username': 'testuser',
        'email': 'test@example.com'
    }
    try:
        db = get_db_connection()
        cursor = db.cursor()
        # 插入数据
        sql = "INSERT INTO users (username, email) VALUES (%(username)s, %(email)s)"
        cursor.execute(sql, data_to_insert)
        db.commit()
        return jsonify({'message': 'Data inserted successfully'}), 200
    except Exception as e:
        return jsonify({'error': 'Failed to insert data', 'message': str(e)}), 500
    finally:
        if db:
            db.close()

if __name__ == '__main__':
    app.run(host='0.0.0.0', port=5000, debug=True)

运行代码 

 python test.py

登录 

http://localhost（自己ip）:5000/insert_data

页面

select * from users;

 

FLASK后端代码

from flask import Flask, jsonify, request
import pymysql

app = Flask(__name__)

# 配置MySQL连接
mysql_config = {
    'host': 'localhost',
    'user': 'myuser',  # 替换为你的MySQL用户名
    'password': '123456',  # 替换为你的MySQL密码
    'db': 'test3',  # 替换为你的数据库名
    'charset': 'utf8mb4',
    'cursorclass': pymysql.cursors.DictCursor
}

# 创建数据库连接池
def get_db_connection():
    return pymysql.connect(**mysql_config)

@app.route('/submit', methods=['POST'])
def submit_form():
    if request.is_json:
        data = request.get_json()
        username = data.get('username')
        email = data.get('email')

        if not username or not email:
            return jsonify({'error': 'Missing username or email'}), 400

        try:
            db = get_db_connection()
            cursor = db.cursor()
            # 插入数据
            sql = "INSERT INTO users (username, email) VALUES (%s, %s)"
            cursor.execute(sql, (username, email))
            db.commit()
            cursor.close()
            db.close()
            return jsonify({'message': 'Data inserted successfully'}), 201
        except pymysql.Error as e:
            return jsonify({'error': 'Database error', 'message': str(e)}), 500
    else:
        return jsonify({'error': 'Request must be JSON'}), 400

if __name__ == '__main__':
    app.run(host='0.0.0.0', port=5000, debug=True)

查看数据库