0.頁面展示效果
1.設置用戶實名認證信息–后端代碼
@api.route("/users/auth", methods=["POST"])
@login_required
def set_user_auth():"""保存實名認證信息"""user_id = g.user_id# 獲取參數req_data = request.get_json()if not req_data:return jsonify(errno=RET.PARAMERR, errmsg="參數錯誤")real_name = req_data.get("real_name") # 真實姓名id_card = req_data.get("id_card") # 身份證號# 參數校驗if not all([real_name, id_card]):return jsonify(errno=RET.PARAMERR, errmsg="參數錯誤")# 保存用戶的姓名與身份證號try:User.query.filter_by(id=user_id, real_name=None, id_card=None)\.update({"real_name": real_name, "id_card": id_card})db.session.commit()except Exception as e:current_app.logger.error(e)db.session.rollback()return jsonify(errno=RET.DBERR, errmsg="保存用戶實名信息失敗")return jsonify(errno=RET.OK, errmsg="OK")
2.前端代碼
<!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/plugins/bootstrap-datepicker/css/bootstrap-datepicker.min.css" rel="stylesheet"><link href="/static/css/ihome/main.css" rel="stylesheet"><link href="/static/css/ihome/profile.css" rel="stylesheet">
</head>
<body><div class="container"><div class="top-bar"><div class="nav-bar"><h3 class="page-title">實名認證</h3><a class="nav-btn fl" href="/my.html"><span><i class="fa fa-angle-left fa-2x"></i></span></a></div></div><div class="menus-con"><ul class="menus-list"><li><div class="menu-title"><h3>認證信息</h3></div><div class="menu-content"><form id="form-auth" method="post"><div class="form-group"><label for="real-name">真實姓名</label><input type="text" class="form-control" name="real_name" id="real-name" ></div><div class="form-group"><label for="id-card">身份證號碼</label><input type="text" class="form-control" name="id_card" id="id-card"></div> <div class="error-msg"><i class="fa fa-exclamation-circle"></i>信息填寫不完整,請補全信息</div><input type="submit" class="btn btn-success" value="保存"></form></div></li></ul></div><div class="popup_con"><div class="popup"><p>保存成功!</p></div><div class="mask"></div></div><div class="footer"><p><span><i class="fa fa-copyright"></i></span>愛家租房 享受家的溫馨</p></div> </div><script src="/static/js/jquery.min.js"></script><script src="/static/js/jquery.form.min.js"></script><script src="/static/plugins/bootstrap/js/bootstrap.min.js"></script><script src="/static/plugins/bootstrap-datepicker/js/bootstrap-datepicker.min.js"></script><script src="/static/plugins/bootstrap-datepicker/locales/bootstrap-datepicker.zh-CN.min.js"></script><script src="/static/js/ihome/auth.js"></script>
</body>
</html>
3.js代碼
function showSuccessMsg() {$('.popup_con').fadeIn('fast', function() {setTimeout(function(){$('.popup_con').fadeOut('fast',function(){}); },1000) });
}function getCookie(name) {var r = document.cookie.match("\\b" + name + "=([^;]*)\\b");return r ? r[1] : undefined;
}$(document).ready(functifon(){// 查詢用戶的實名認證信息$.get("/api/v1.0/users/auth", function(resp){// 4101代表用戶未登錄if ("4101" == resp.errno) {location.href = "/login.html";} else if ("0" == resp.errno) {// 如果返回的數據中real_name與id_card不為null,表示用戶有填寫實名信息if (resp.data.real_name && resp.data.id_card) {$("#real-name").val(resp.data.real_name);$("#id-card").val(resp.data.id_card);// 給input添加disabled屬性,禁止用戶修改$("#real-name").prop("disabled", true);$("#id-card").prop("disabled", true);// 隱藏提交保存按鈕$("#form-auth>input[type=submit]").hide();}} else {alert(resp.errmsg);}}, "json");// 管理實名信息表單的提交行為$("#form-auth").submit(function(e){e.preventDefault();// 如果用戶沒有填寫完整,展示錯誤信息var realName = $("#real-name").val();var idCard = $("#id-card").val();if (realName == "" || idCard == "") {$(".error-msg").show();}// 將表單的數據轉換為json字符串var data = {real_name: realName,id_card: idCard};var jsonData = JSON.stringify(data);// 向后端發送請求$.ajax({url:"/api/v1.0/users/auth",type:"post",data: jsonData,contentType: "application/json",dataType: "json",headers: {"X-CSRFTOKEN": getCookie("csrf_token")},success: function (resp) {if (0 == resp.errno) {$(".error-msg").hide();// 顯示保存成功的提示信息showSuccessMsg();$("#real-name").prop("disabled", true);$("#id-card").prop("disabled", true);$("#form-auth>input[type=submit]").hide();}}});})})
4.獲取用戶實名認證信息–后端代碼
@api.route("/users/auth", methods=["GET"])
@login_required
def get_user_auth():"""獲取用戶的實名認證信息"""user_id = g.user_id# 在數據庫中查詢信息try:user = User.query.get(user_id)except Exception as e:current_app.logger.error(e)return jsonify(errno=RET.DBERR, errmsg="獲取用戶實名信息失敗")if user is None:return jsonify(errno=RET.NODATA, errmsg="無效操作")return jsonify(errno=RET.OK, errmsg="OK", data=user.auth_to_dict())