2021级山软项目实训(九)——用户信息

目录

一、动机

二、登录和注册

2.1 注册

2.2 登录

三、用户行为

四、其他


一、动机

        我们的小程序在之前的开发一直没有加入用户,因此没法记录一些用户的行为,也没法保证我们的小程序的安全性。因此我们商讨过后,一致认为需要添加一个用户身份来使用小程序,这样我们可以记录其问答和游览的记录,以便其检索其历史记录。

二、登录和注册

2.1 注册

       我们计划使用手机号进行注册,但是我们实际上没有办法真正做到给用户发送验证码,因此我们暂时虚构一下,假装我们是使用的手机号注册。

        因此我们的注册页面首先需要的是输入手机号。这里需要判断手机号是否为空,如果为空,会弹窗显示手机号码为空。

        然后需要判断手机号码格式是否正确,需要判断手机号码是否为11位,是否有不符合规定的字符。

        如果都符合,则会检查我们的服务器中是否已经存储过这个手机号,避免重复注册,如果注册过我们会弹窗显示手机号已经被注册。

        此外,我们注册时候的密码应该保持在16位之内,且只能为英文字母和数字的组合。

        如果都符合,会在服务器上进行注册,保留用户的账号和密码。

        注册成功后会显示注册成功然后自动跳转到登录页面。在登录页面进行登录便可以进入主页面。

        注册页面的代码如下:

  register: function() {
    if (this.data.user.length == 0) {
        wx.showToast({
            title: '手机号不能为空',
            icon: 'error',
            duration: 1000 // 弹窗时间为1秒
        });
    } else if (this.data.user.length != 11) {
        wx.showToast({
            title: '手机号不符合格式',
            icon: 'error',
            duration: 1000
        })
    } else if (this.data.password.length == 0) {
        wx.showToast({
            title: '密码不能为空',
            icon: 'error',
            duration: 1000 // 弹窗时间为1秒
        });
    } else if (this.data.password.length > 16) {
        wx.showToast({
            title: '密码应在16位之内',
            icon: 'error',
            duration: 1000
        })
    } else {
        console.log(this.data.user)
        console.log(this.data.password)
        wx.request({
            url: 'https://www.aiguider666.asia/register',
            method: 'POST',
            header: {
                'content-type': 'application/x-www-form-urlencoded' // 确保内容类型为表单格式
            },
            data: {
                user_id: this.data.user,
                password: this.data.password
            },
            success: function(res) {
                if (res.statusCode == 200) {
                    wx.showToast({
                        title: '注册成功',
                        icon: 'success',
                        duration: 1000
                    })
                    setTimeout(function() {
                        wx.redirectTo({
                            url: '/pages/login/login',
                        });
                    }, 1000);
                } else {
                    wx.showToast({
                        title: "手机号已被注册",
                        icon: 'error',
                        duration: 1000
                    })
                    console.log(res)
                }
            },
            fail: function(err) {
                wx.showToast({
                    title: "请求失败",
                    icon: 'error',
                    duration: 1000
                })
                console.log(err)
            }
        })
    }
},
2.2 登录

        登录页面中我们使用手机号和密码进行登录。在上方的输入框中输入手机号,在下方的输入框中输入密码。

        同注册页面,我们会判断手机号和密码是否为空,手机号和密码是否符合格式。

        如果都符合格式,我们会检测账号和密码是否正确,是否能对应,如果正确,则跳转到主页。

        登录函数的代码如下:

  login: function() {
    let _this = this
    if (this.data.user.length == 0) {
      wx.showToast({
        title: '手机号不能为空',
        icon: 'error',
        duration: 1000 // 弹窗时间为1秒
      });
    } else if (this.data.user.length != 11) {
      wx.showToast({
        title: '手机号不符合格式',
        icon: 'error',
        duration: 1000
      });
    } else if (this.data.password.length == 0) {
      wx.showToast({
        title: '密码不能为空',
        icon: 'error',
        duration: 1000 // 弹窗时间为1秒
      });
    } else {
      wx.request({
        url: 'https://www.aiguider666.asia/login',
        method: 'POST',
        header: {
          'content-type': 'application/x-www-form-urlencoded' // 确保内容类型为表单格式
      },
        data: {
          user_id: this.data.user, // 修改为 user_id
          password: this.data.password
        },
        success: function(res) {
          if (res.data.message === "Login successful") { // 修改判断条件
            wx.showToast({
              title: "登录成功",
              icon: 'success',
              duration: 1000
            });
            console.log(_this.data.user)
            wx.setStorageSync('user', _this.data.user);
            setTimeout(function() {
              wx.redirectTo({
                url: '/pages/dialogue/dialogue',
              });
            }, 1000); 
          } else {
            wx.showToast({
              title: "账号或密码有误",
              icon: "error",
              duration: 1000
            });
          }
        },
        fail: function(err) {
          wx.showToast({
            title: "请求失败",
            icon: "error",
            duration: 1000
          });
        }
      });
    }
  },

三、用户行为

        我们发现,很多网站或者app或给用户分配token以进行用户的验证,我们这里没有使用token而是直接使用我们的手机号进行用户信息的验证。因此需要我们将登录页面输入的手机号码传递到跳转到的新页面。

        由于不再回到登录页面,我们使用wx.redirectTo进行跳转,这样不会显示上方的返回按钮。但是有一个问题就是wx.directTo没法直接传递参数,因此我们使用全局存储,将手机号传递到全局临时存储,在新页面获取之后存储到新页面并进行销毁。

        在其他页面可以直接传递用户手机号。

        代码如下:

            wx.setStorageSync('user', _this.data.user);
   const user = wx.getStorageSync('user');

   this.setData({
     user: user
   })
   console.log(user);
   wx.removeStorageSync('user');

        这样我们就可以记录用户的问答和游览记录了。

四、其他

        在我的队友编写好服务器上的后端接口之前,我是用localhost建了本地数据库并进行了测试,使用python的Flask库编写的,仅供参考,代码如下:

# 牛马灰灰的python学习


from flask import Flask, request, jsonify
import pymysql


app = Flask(__name__)


# 登录
@app.route('/login', methods=['POST'])
def login():
    data = request.json
    username = data.get('username')
    password = data.get('password')

    print(username)
    print("=========")
    print(password)

    if not username or not password:
        return jsonify({'success': False, 'message': '账号或密码不能为空'}), 400

    # 连接到MySQL数据库
    conn = pymysql.connect(
        host='localhost',
        user='root',
        password='Studyboy99',
        database='xmsx'
    )

    cursor = conn.cursor()
    c = conn.cursor()
    c.execute('SELECT * FROM user WHERE id = %s AND password = %s', (username, password))
    user = c.fetchone()
    conn.close()

    if user:
        return jsonify({'success': True, 'message': '登录成功'})
    else:
        return jsonify({'success': False, 'message': '账号或密码错误'})


# 注册
@app.route('/register', methods=['POST'])
def register():
    data = request.json
    username = data.get('username')
    password = data.get('password')

    if not username or not password:
        return jsonify({'success': False, 'message': '手机号或密码不能为空'}), 400

    if len(username) != 11:
        return jsonify({'success': False, 'message': '手机号不符合格式'}), 400

    if len(password) > 16:
        return jsonify({'success': False, 'message': '密码应在16位之内'}), 400

    # 连接到MySQL数据库
    conn = pymysql.connect(
        host='localhost',
        user='root',
        password='Studyboy99',
        database='xmsx'
    )

    cursor = conn.cursor()
    c = conn.cursor()
    c.execute('SELECT * FROM user WHERE id = %s', (username,))
    user = c.fetchone()

    if user:
        conn.close()
        return jsonify({'success': False, 'message': '手机号已经被注册'}), 409  # 409 Conflict
    else:
        c.execute('INSERT INTO user (id, password) VALUES (%s, %s)', (username, password))
        conn.commit()
        conn.close()
        return jsonify({'success': True, 'message': '注册成功'}), 201  # 201 Created


if __name__ == '__main__':
    app.run(debug=True)
  • 1
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值