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

小程序实现存储用户注册信息功能前后端+数据库联调

article 2025/3/11 13:04:57

小程序前端：js

register.js

// pages/register/register.js
Page({
  data: {
      username: '',
      password: '',
      confirmPassword: ''
  },
  onInputUsername(e) {
      this.setData({
          username: e.detail.value
      });
  },
  onInputPassword(e) {
      this.setData({
          password: e.detail.value
      });
  },
  onInputConfirmPassword(e) {
      this.setData({
          confirmPassword: e.detail.value
      });
  },
  onRegister() {
      const { username, password, confirmPassword } = this.data;
      if (!username || !password || !confirmPassword) {
          wx.showToast({
              title: '请填写所缺信息',
              icon: 'none'
          });
          return;
      }

      // 用户名格式验证（至少5个字符，包含字母和数字）
      const usernameRegex = /^(?=.*[a-zA-Z])(?=.*\d)[a-zA-Z\d]{5,}$/;
      if (!usernameRegex.test(username)) {
          wx.showToast({
              title: '用户名必须是5位以上英文和数字的组合',
              icon: 'none'
          });
          return;
      }

      // 密码格式验证（至少5个字符，包含字母和数字）
      const passwordRegex = /^(?=.*[a-zA-Z])(?=.*\d)[a-zA-Z\d]{5,}$/;
      if (!passwordRegex.test(password)) {
          wx.showToast({
              title: '密码必须是5位以上数字和英文组成',
              icon: 'none'
          });
          return;
      }

      // 密码一致性验证
      if (password !== confirmPassword) {
          wx.showToast({
              title: '两次输入的密码不一致',
              icon: 'none'
          });
          return;
      }

      // 向后端发送注册请求
      wx.request({
          url: 'http://127.0.0.1:5000/register',  // 替换为后端API的地址
          method: 'POST',
          data: {
              username: username,
              password: password  // 删除了email字段
          },
          success: (res) => {
              if (res.statusCode === 201) {
                  wx.showToast({
                      title: '注册成功',
                      icon: 'success'
                  });
                  setTimeout(() => {
                      wx.navigateTo({
                          url: '/pages/index/index',
                          success: function (res) {
                              console.log('跳转成功', res);
                          },
                          fail: function (err) {
                              console.log('跳转失败', err);
                          }
                      });
                  }, 1000);
              } else {
                  wx.showToast({
                      title: res.data.message || '注册失败',
                      icon: 'none'
                  });
              }
          },
          fail: (err) => {
              wx.showToast({
                  title: '请求失败，请稍后再试',
                  icon: 'none'
              });
              console.error(err);
          }
      });
  },
  navigateToLogin() {
      wx.navigateTo({
          url: '/pages/index/index'
      });
  }
});

在这里插入图片描述
此处是前端向后端传输用户名和密码的数据

小程序后端：python的Flask架构

注册表.py

from flask import Flask, request, jsonify
import pyodbc

app = Flask(__name__)

# 数据库连接字符串
odbc_connection_string = 'DRIVER={ODBC Driver 17 for SQL Server};SERVER=LAPTOP-HK70OB6H\SQLSERVER;DATABASE=Register;UID=zyt;PWD=Sr6220033'

# 连接数据库
def get_db_connection():
    conn = pyodbc.connect(odbc_connection_string)
    return conn

@app.route('/register', methods=['POST'])
def register():
    # 获取前端传来的数据
    username = request.json.get('username')
    password = request.json.get('password')

    if not username or not password:
        return jsonify({"message": "用户名和密码是必填项"}), 400

    # 保存到数据库
    try:
        conn = get_db_connection()
        cursor = conn.cursor()

        # 插入数据，不再包含 email
        cursor.execute("INSERT INTO Users (Username, Password) VALUES (?, ?)", (username, password))
        conn.commit()

        return jsonify({"message": "用户注册成功"}), 201
    except Exception as e:
        return jsonify({"message": str(e)}), 500
    finally:
        conn.close()

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

其中，此处为后端响应前端的接口，采集信息数据

在这里插入图片描述

小程序数据库：SQL Server（暂定）

启动 SQL Server配置管理器里的TCP协议

以防止之后会出现服务器连接异常情况在这里插入图片描述

需要部署ODBC数据源

添加数据源

数据源名称：自拟（建议：MySQLServer）
服务器名称：选择SQL server配置管理器中启动的服务器
在这里插入图片描述
我这里是

LAPTOP-HK70OB6H\SQLSERVER

默认选项即可
在这里插入图片描述
选择创建好的数据库

完成即可

在SQL Server Management Studio中创建用户信息注册表

CREATE TABLE Users (
    Username NVARCHAR(100) NOT NULL,        -- 用户名
    Password NVARCHAR(255) NOT NULL,        -- 密码
    CreateDate DATETIME DEFAULT GETDATE()   -- 注册时间
);