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():"""注冊請求的參數： 手機號、短信驗證碼、密碼、確認密碼參數格式：json"""# 獲取請求的json數據，返回字典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")# 校驗參數if not all([mobile, sms_code, password, password2]):return jsonify(errno=RET.PARAMERR, errmsg="參數不完整")# 判斷手機號格式if not re.match(r"1[34578]\d{9}", mobile):# 表示格式不對return jsonify(errno=RET.PARAMERR, errmsg="手機號格式錯誤")if password != password2:return jsonify(errno=RET.PARAMERR, errmsg="兩次密碼不一致")# 從redis中取出短信驗證碼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="讀取真實短信驗證碼異常")# 判斷短信驗證碼是否過期if real_sms_code is None:return jsonify(errno=RET.NODATA, errmsg="短信驗證碼失效")# 刪除redis中的短信驗證碼，防止重復使用校驗try:redis_store.delete("sms_code_%s" % mobile)except Exception as e:current_app.logger.error(e)# 判斷用戶填寫短信驗證碼的正確性if real_sms_code != sms_code:return jsonify(errno=RET.DATAERR, errmsg="短信驗證碼錯誤")# 判斷用戶的手機號是否注冊過# try:# user = User.query.filter_by(mobile=mobile).first()# except Exception as e:# current_app.logger.error(e)# return jsonify(errno=RET.DBERR, errmsg="數據庫異常")# else:# if user is not None:# # 表示手機號已存在# return jsonify(errno=RET.DATAEXIST, errmsg="手機號已存在")# 鹽值 salt# 注冊# 用戶1 password="123456" + "abc" sha1 abc$hxosifodfdoshfosdhfso# 用戶2 password="123456" + "def" sha1 def$dfhsoicoshdoshfosidfs## 用戶登錄 password ="123456" "abc" sha256 sha1 hxosufodsofdihsofho# 保存用戶的注冊數據到數據庫中user = User(name=mobile, mobile=mobile)# user.generate_password_hash(password)user.password = password # 設置屬性try:db.session.add(user)db.session.commit()except IntegrityError as e:# 數據庫操作錯誤后的回滾db.session.rollback()# 表示手機號出現了重復值，即手機號已注冊過current_app.logger.error(e)return jsonify(errno=RET.DATAEXIST, errmsg="手機號已存在")except Exception as e:db.session.rollback()# 表示手機號出現了重復值，即手機號已注冊過current_app.logger.error(e)return jsonify(errno=RET.DBERR, errmsg="查詢數據庫異常")# 保存登錄狀態到session中session["name"] = mobilesession["mobile"] = mobilesession["user_id"] = user.id# 返回結果return jsonify(errno=RET.OK, errmsg="注冊成功")
modle.py中
class User(BaseModel, db.Model):"""用戶"""__tablename__ = "ih_user_profile"id = db.Column(db.Integer, primary_key=True) # 用戶編號name = db.Column(db.String(32), unique=True, nullable=False) # 用戶暱稱password_hash = db.Column(db.String(128), nullable=False) # 加密的密碼mobile = db.Column(db.String(11), unique=True, nullable=False) # 手機號real_name = db.Column(db.String(32)) # 真實姓名id_card = db.Column(db.String(20)) # 身份證號avatar_url = db.Column(db.String(128)) # 用戶頭像路徑houses = db.relationship("House", backref="user") # 用戶發布的房屋orders = db.relationship("Order", backref="user") # 用戶下的訂單# 加上property裝飾器后，會把函數變為屬性，屬性名即為函數名@propertydef password(self):"""讀取屬性的函數行為"""# print(user.password) # 讀取屬性時被調用# 函數的返回值會作為屬性值# return "xxxx"raise AttributeError("這個屬性只能設置，不能讀取")# 使用這個裝飾器, 對應設置屬性操作@password.setterdef password(self, value):"""設置屬性 user.passord = "xxxxx":param value: 設置屬性時的數據 value就是"xxxxx", 原始的明文密碼:return:"""self.password_hash = generate_password_hash(value)# def generate_password_hash(self, origin_password):# """對密碼進行加密"""# self.password_hash = generate_password_hash(origin_password)
2.注冊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>愛家-注冊</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="手機號" 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="圖片驗證碼" 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="短信驗證碼" required><div class="phonecode input-group-addon"><a class="phonecode-a" href="javascript:;" onclick="sendSMSCode();">獲取驗證碼</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="確認密碼" 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">立即注冊</button><p class="login-a">已有賬號，<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.注冊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();});// 為表單的提交補充自定義的函數行為 （提交事件e）$(".form-register").submit(function(e){// 阻止瀏覽器對于表單的默認自動提交行為e.preventDefault();var mobile = $("#mobile").val();var phoneCode = $("#phonecode").val();var passwd = $("#password").val();var passwd2 = $("#password2").val();if (!mobile) {$("#mobile-err span").html("請填寫正確的手機號！");$("#mobile-err").show();return;} if (!phoneCode) {$("#phone-code-err span").html("請填寫短信驗證碼！");$("#phone-code-err").show();return;}if (!passwd) {$("#password-err span").html("請填寫密碼!");$("#password-err").show();return;}if (passwd != passwd2) {$("#password2-err span").html("兩次密碼不一致!");$("#password2-err").show();return;}// 調用ajax向后端發送注冊請求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")}, // 請求頭，將csrf_token值放到請求中，方便后端csrf進行驗證success: function (resp) {if (resp.errno == "0") {// 注冊成功，跳轉到主頁location.href = "/index.html";} else {alert(resp.errmsg);}}})});
})
