目录
一、动机
我们的小程序在之前的开发一直没有加入用户,因此没法记录一些用户的行为,也没法保证我们的小程序的安全性。因此我们商讨过后,一致认为需要添加一个用户身份来使用小程序,这样我们可以记录其问答和游览的记录,以便其检索其历史记录。
二、登录和注册
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)