1注册
在实际开发中经常前后分离，前端只复杂页面跳转，后端负责对ajax请求提交的数据进行处理。
下面就为前后分离过程中用同一个路由对注册的操作
@user_blue.route('/register/', methods=['GET'])
def register():
return render_template('register.html')
对ajax传递的数据进行处理
@user_blue.route('/register/', methods=['POST'])
def my_register():
# 获取参数
# 1.验证参数是否都填写了
mobile = request.form.get('mobile')
imagecode = request.form.get('imagecode')
passwd = request.form.get('passwd')
passwd2 = request.form.get('passwd2')
if not all([mobile, imagecode, passwd, passwd2]):
return jsonify({'code': 1001, 'msg': '请填写完整的参数'})
# 2.验证手机号正确
if not re.match('^1[3456789]\d{9}$', mobile):
return jsonify({'code': 1002, 'msg': '手机号不正确'})
# 3.验证图片验证码
if session['img_code'] != imagecode:
return jsonify({'code': 1003, 'msg': '验证码不正确'})
# 4.密码和确认密码是否一致
if passwd != passwd2:
return jsonify({'code': 1004, 'msg': '密码不一致'})
# 验证手机号是否被注册
user = User.query.filter_by(phone=mobile).first()
if user:
return jsonify({'code': 1005, 'msg': '手机号已被注册，请重新注册'})
# 创建注册信息
user = User()
user.phone = mobile
user.name = mobile
user.password = passwd
user.add_update()
return jsonify({'code': 200, 'msg': '请求成功'})
其中all([a,b,c])可以判断列表中的每个元素是否都不为空；
注册的ajax请求
$(".form-register").submit(function(e){
e.preventDefault();
mobile = $("#mobile").val();
imagecode = $("#imagecode").val();
passwd = $("#password").val();
passwd2 = $("#password2").val();
if (!mobile) {
$("#mobile-err span").html("请填写正确的手机号！");
$("#mobile-err").show();
return;
}
if (!passwd) {
$("#password-err span").html("请填写密码!");
$("#password-err").show();
return;
}
//异步提交注册请求，ajax
$.ajax({
url:'/user/register/',
type:'POST',
dataType:'json',
data:{'mobile': mobile, 'imagecode': imagecode,
'passwd': passwd, 'passwd2': passwd2},
success:function (data) {
console.log(data)
if(data.code == '200'){
$(location).attr('href', '/user/my_login/')
}
if(data.code == '1002'){
$('#mobile-err span').html(data.msg)
$('#mobile-err').show()
}
if(data.code == '1003'){
$('#imagecode-err span').html(data.msg)
$('#imagecode-err').show()
}
if(data.code == '1004'){
$('#password2-err span').html(data.msg)
$('#password2-err').show()
}
if(data.code == '1005'){
$('#password2-err span').html(data.msg)
$('#password2-err').show()
}
},
error:function (data) {
alert('error')
}
})
});
$(location).attr('href', '/user/my_login/')用于在ajax请求成功后跳转至指定路由
if(data.code == '200'){
$(location).attr('href', '/user/my_login/')
}
在ajax请求中，如果ajax请求中有部分参数缺失或者错误，将不会报错而是不执行ajax请求。
2验证码
用ajax请求生成验证码
function generateImageCode() {
// 获取验证码，并渲染页面
$.ajax({
url: '/user/code/',
dataType: 'json',
type: 'GET',
success:function (data) {
// 渲染验证码
console.log(data)
$('.image-code').html(data.data)
// tod0:将字符串生成图片
}
})
}
后端生成验证码
@user_blue.route('/code/', methods=['GET'])
def get_code():
# 获取验证码
# 方式1：后端生成图片，并返回验证码图片的地址（不推荐）
# 方式2：后端只生成随机参数，返回给页面，在页面中再生成图片(前端做)（推荐）
s = 'abcdefghijklmnopqrstuvwxyz1234567890'
code = ''
for i in range(4):
code += random.choice(s)
session['img_code'] = code
return jsonify({'code': 200, 'msg': '请求成功', 'data': code})
3登陆
@user_blue.route('/my_login/', methods=['GET'])
def my_login():
return render_template('login.html')
login_manage = LoginManager()
@user_blue.route('/my_login/', methods=['POST'])
def my_login_in():
mobile = request.form.get('mobile')
passwd = request.form.get('passwd')
if not all([mobile, passwd]):
return jsonify({'code': 1001, 'msg': '密码和账号不能为空'})
user = User.query.filter(User.phone == mobile).first()
if not user:
return jsonify({'code': 1002, 'msg': '该账号没有被注册，请前往登陆界面注册'})
if user.check_pwd(passwd):
login_user(user)
return jsonify({'code': 200, 'msg': '请求成功'})
else:
return jsonify({'code': 1003, 'msg': '密码错误'})
回调函数
@login_manage.user_loader
def load_user(user_id):
return User.query.filter(User.id == user_id).first()
manage页面中初始化
login_manage.init_app(app)
Ajax请求
$(".form-login").submit(function(e){
$.ajax({
url:'/user/my_login/',
type:'POST',
dataType:'json',
data:{'mobile': mobile, 'passwd': passwd},
success:function (data) {
if(data.code == '200'){
$(location).attr('href', '/user/my/')
}
},
error:function (data) {
alert('error')
}
})
});
在用flask_login进行登陆操作时，在用户(User)模型中必须继承UserMixin否则执行到login_user(user)代码的时候会报缺少is_activate参数；在ajax请求中return返回值的类型必须与请求时的datatype类型一致，否则会一直执行error对应的函数。