Flask项目--注册
生活随笔
收集整理的這篇文章主要介紹了
Flask项目--注册
小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
0.效果展示
1.后端代碼
# coding:utf-8from . import api from flask import request, jsonify, current_app, session from ihome.utils.response_code import RET from ihome import redis_store, db, constants from ihome.models import User from sqlalchemy.exc import IntegrityError import re@api.route("/users", methods=["POST"]) def register():"""注冊(cè)請(qǐng)求的參數(shù)： 手機(jī)號(hào)、短信驗(yàn)證碼、密碼、確認(rèn)密碼參數(shù)格式：json"""# 獲取請(qǐng)求的json數(shù)據(jù)，返回字典req_dict = request.get_json()mobile = req_dict.get("mobile")sms_code = req_dict.get("sms_code")password = req_dict.get("password")password2 = req_dict.get("password2")# 校驗(yàn)參數(shù)if not all([mobile, sms_code, password, password2]):return jsonify(errno=RET.PARAMERR, errmsg="參數(shù)不完整")# 判斷手機(jī)號(hào)格式if not re.match(r"1[34578]\d{9}", mobile):# 表示格式不對(duì)return jsonify(errno=RET.PARAMERR, errmsg="手機(jī)號(hào)格式錯(cuò)誤")if password != password2:return jsonify(errno=RET.PARAMERR, errmsg="兩次密碼不一致")# 從redis中取出短信驗(yàn)證碼try:real_sms_code = redis_store.get("sms_code_%s" % mobile)except Exception as e:current_app.logger.error(e)return jsonify(errno=RET.DBERR, errmsg="讀取真實(shí)短信驗(yàn)證碼異常")# 判斷短信驗(yàn)證碼是否過期if real_sms_code is None:return jsonify(errno=RET.NODATA, errmsg="短信驗(yàn)證碼失效")# 刪除redis中的短信驗(yàn)證碼，防止重復(fù)使用校驗(yàn)try:redis_store.delete("sms_code_%s" % mobile)except Exception as e:current_app.logger.error(e)# 判斷用戶填寫短信驗(yàn)證碼的正確性if real_sms_code != sms_code:return jsonify(errno=RET.DATAERR, errmsg="短信驗(yàn)證碼錯(cuò)誤")# 判斷用戶的手機(jī)號(hào)是否注冊(cè)過# try:# user = User.query.filter_by(mobile=mobile).first()# except Exception as e:# current_app.logger.error(e)# return jsonify(errno=RET.DBERR, errmsg="數(shù)據(jù)庫(kù)異常")# else:# if user is not None:# # 表示手機(jī)號(hào)已存在# return jsonify(errno=RET.DATAEXIST, errmsg="手機(jī)號(hào)已存在")# 鹽值 salt# 注冊(cè)# 用戶1 password="123456" + "abc" sha1 abc$hxosifodfdoshfosdhfso# 用戶2 password="123456" + "def" sha1 def$dfhsoicoshdoshfosidfs## 用戶登錄 password ="123456" "abc" sha256 sha1 hxosufodsofdihsofho# 保存用戶的注冊(cè)數(shù)據(jù)到數(shù)據(jù)庫(kù)中user = User(name=mobile, mobile=mobile)# user.generate_password_hash(password)user.password = password # 設(shè)置屬性try:db.session.add(user)db.session.commit()except IntegrityError as e:# 數(shù)據(jù)庫(kù)操作錯(cuò)誤后的回滾db.session.rollback()# 表示手機(jī)號(hào)出現(xiàn)了重復(fù)值，即手機(jī)號(hào)已注冊(cè)過current_app.logger.error(e)return jsonify(errno=RET.DATAEXIST, errmsg="手機(jī)號(hào)已存在")except Exception as e:db.session.rollback()# 表示手機(jī)號(hào)出現(xiàn)了重復(fù)值，即手機(jī)號(hào)已注冊(cè)過current_app.logger.error(e)return jsonify(errno=RET.DBERR, errmsg="查詢數(shù)據(jù)庫(kù)異常")# 保存登錄狀態(tài)到session中session["name"] = mobilesession["mobile"] = mobilesession["user_id"] = user.id# 返回結(jié)果return jsonify(errno=RET.OK, errmsg="注冊(cè)成功")
modle.py中
2.注冊(cè)html代碼
<!DOCTYPE html> <html> <head> <meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"><title>愛家-注冊(cè)</title><link href="/static/plugins/bootstrap/css/bootstrap.min.css" rel="stylesheet"><link href="/static/plugins/font-awesome/css/font-awesome.min.css" rel="stylesheet"><link href="/static/css/reset.css" rel="stylesheet"><link href="/static/css/ihome/main.css" rel="stylesheet"><link href="/static/css/ihome/register.css" rel="stylesheet"> </head> <body><div class="container"><div class="logo-bar"><a href="/"><img src="/static/images/logo@128x59.png"></a></div><form class="form-register"><div class="form-group form-group-lg"><div class="input-group"><div class="input-group-addon"><i class="fa fa-mobile fa-2x fa-fw"></i></div><input type="number" class="form-control" name="mobile" id="mobile" placeholder="手機(jī)號(hào)" required></div></div><div class="error-msg" id="mobile-err"><i class="fa fa-exclamation-circle"></i><span></span></div><div class="form-group form-group-lg"><div class="input-group"><div class="input-group-addon"><i class="fa fa-image fa-lg fa-fw"></i></div><input type="text" class="form-control" name="imagecode" id="imagecode" placeholder="圖片驗(yàn)證碼" required><div class="input-group-addon image-code" onclick="generateImageCode();"><img src=""></div></div></div><div class="error-msg" id="image-code-err"><i class="fa fa-exclamation-circle"></i><span></span></div><div class="form-group form-group-lg"><div class="input-group"><div class="input-group-addon"><i class="fa fa-envelope-o fa-lg fa-fw"></i></div><input type="text" class="form-control" name="phonecode" id="phonecode" placeholder="短信驗(yàn)證碼" required><div class="phonecode input-group-addon"><a class="phonecode-a" href="javascript:;" onclick="sendSMSCode();">獲取驗(yàn)證碼</a></div></div></div><div class="error-msg" id="phone-code-err"><i class="fa fa-exclamation-circle"></i><span></span></div><div class="form-group form-group-lg"><div class="input-group"><div class="input-group-addon"><i class="fa fa-lock fa-lg fa-fw"></i></div><input type="password" class="form-control" name="password" id="password" placeholder="密碼" required></div></div><div class="error-msg" id="password-err"><i class="fa fa-exclamation-circle"></i><span></span></div><div class="form-group form-group-lg"><div class="input-group"><div class="input-group-addon"><i class="fa fa-lock fa-lg fa-fw"></i></div><input type="password" class="form-control" name="password2" id="password2" placeholder="確認(rèn)密碼" required></div></div><div class="error-msg" id="password2-err"><i class="fa fa-exclamation-circle"></i><span></span></div><button type="submit" class="btn btn-lg btn-theme btn-block">立即注冊(cè)</button><p class="login-a">已有賬號(hào)，<a href="/login.html">立即登陸</a></p></form></div><script src="/static/js/jquery.min.js"></script><script src="/static/plugins/bootstrap/js/bootstrap.min.js"></script><script src="/static/js/ihome/register.js"></script> </body> </html>3.注冊(cè)js代碼
$(document).ready(function() {generateImageCode();$("#mobile").focus(function(){$("#mobile-err").hide();});$("#imagecode").focus(function(){$("#image-code-err").hide();});$("#phonecode").focus(function(){$("#phone-code-err").hide();});$("#password").focus(function(){$("#password-err").hide();$("#password2-err").hide();});$("#password2").focus(function(){$("#password2-err").hide();});// 為表單的提交補(bǔ)充自定義的函數(shù)行為 （提交事件e）$(".form-register").submit(function(e){// 阻止瀏覽器對(duì)于表單的默認(rèn)自動(dòng)提交行為e.preventDefault();var mobile = $("#mobile").val();var phoneCode = $("#phonecode").val();var passwd = $("#password").val();var passwd2 = $("#password2").val();if (!mobile) {$("#mobile-err span").html("請(qǐng)?zhí)顚懻_的手機(jī)號(hào)！");$("#mobile-err").show();return;} if (!phoneCode) {$("#phone-code-err span").html("請(qǐng)?zhí)顚懚绦膨?yàn)證碼！");$("#phone-code-err").show();return;}if (!passwd) {$("#password-err span").html("請(qǐng)?zhí)顚懨艽a!");$("#password-err").show();return;}if (passwd != passwd2) {$("#password2-err span").html("兩次密碼不一致!");$("#password2-err").show();return;}// 調(diào)用ajax向后端發(fā)送注冊(cè)請(qǐng)求var req_data = {mobile: mobile,sms_code: phoneCode,password: passwd,password2: passwd2,};var req_json = JSON.stringify(req_data);$.ajax({url: "/api/v1.0/users",type: "post",data: req_json,contentType: "application/json",dataType: "json",headers: {"X-CSRFToken": getCookie("csrf_token")}, // 請(qǐng)求頭，將csrf_token值放到請(qǐng)求中，方便后端csrf進(jìn)行驗(yàn)證success: function (resp) {if (resp.errno == "0") {// 注冊(cè)成功，跳轉(zhuǎn)到主頁(yè)location.href = "/index.html";} else {alert(resp.errmsg);}}})}); })總結(jié)
以上是生活随笔為你收集整理的Flask项目--注册的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 仓库体积过大，如何减小？
- 下一篇： 计算机网络应用云计算,计算机网络云计算的