首先个人中心的展示为以下的效果
个人中心属于单独的一个板块了，所以我们先单独给他开一个视图函数，名字取为user
新建为视图函数的第一步就是注册蓝图对象，前面写过很多次了，这次就不放步骤了
然后以下为前端的代码
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>用户中心</title> 6 <link rel="stylesheet" type="text/css" href="../../static/news/css/reset.css"> 7 <link rel="stylesheet" type="text/css" href="../../static/news/css/main.css"> 8 <script type="text/javascript" src="../../static/news/js/jquery-1.12.4.min.js"></script> 9 <script type="text/javascript" src="../../static/news/js/jquery.form.min.js"></script> 10 <script type="text/javascript" src="../../static/news/js/main.js"></script> 11 </head> 12 <body> 13 <div class="header_con"> 14 <div class="header"> 15 <a href="{{ url_for("index.index") }}" class="logo fl"><img src="../../static/news/images/logo.png" alt="logo"></a> 16 <div class="user_login fr" style="display: block;"> 17 <img src="{% if context.user.avatar_url %}{{ context.user.avatar_url }}{% else %}../../static/news/images/person01.png{% endif %}" class="lgin_pic"> 18 <a href="{{ url_for("user.user_info") }}">{{ context.user.nick_name }}</a> 19 <a href="javascript:;"onclick="logout()">退出</a> 20 </div> 21 </div> 22 </div> 23 24 <div class="conter_con"> 25 <div class="user_menu_con fl"> 26 <div class="user_center_pic"> 27 <img src="../../static/news/images/user_pic.png" alt="用户图片"> 28 </div> 29 <div class="user_center_name">{{ context.user.nick_name }}</div> 30 31 <ul class="option_list"> 32 <li class="active"><a href="{{ url_for("user.base_info") }}" target="main_frame">基本资料</a></li> 33 <li><a href="../../static/news/html/user_pic_info.html" target="main_frame">头像设置</a></li> 34 <li><a href="../../static/news/html/user_follow.html" target="main_frame">我的关注</a></li> 35 <li><a href="../../static/news/html/user_pass_info.html" target="main_frame">密码修改</a></li> 36 <li><a href="../../static/news/html/user_collection.html" target="main_frame">我的收藏</a></li> 37 <li><a href="../../static/news/html/user_news_release.html" target="main_frame">新闻发布</a></li> 38 <li><a href="../../static/news/html/user_news_list.html" target="main_frame">新闻列表</a></li> 39 </ul> 40 </div> 41 42 <div class="user_con fr"> 43 <iframe src="{{ url_for("user.base_info") }}" frameborder="0" name="main_frame" class="main_frame" id="main_frame"></iframe> 44 </div> 45 </div> 46 <div class="footer"> 47 <div class="footer_links"> 48 <a href="">关于我们</a> 49 <span>|</span> 50 <a href="">联系我们</a> 51 <span>|</span> 52 <a href="">招聘人才</a> 53 <span>|</span> 54 <a href="">友情链接</a> 55 </div> 56 <p class="copyright"> 57 CopyRight © 2018 新经资讯信息技术有限公司 All Rights Reserved<br /> 58 电话：010-****888 京ICP备*******8号 59 </p> 60 </div> 61 62 <!-- 登录表单 --> 63 <form class="login_form_con"> 64 <div class="login_form"> 65 <div class="login_title"> 66 <h3>登 录</h3> 67 <a href="javascript:;" class="shutoff"></a> 68 </div> 69 <div class="form_group"> 70 <input type="text" name="username" autocomplete="off"> 71 <div class="input_tip">用户名/手机号</div> 72 </div> 73 <div class="form_group"> 74 <input type="password" name="password"> 75 <div class="input_tip">密码(不少于6位)</div> 76 </div> 77 <input type="submit" name="" value="登 录" class="input_sub"> 78 <div class="down_link">还没有账号？<a href="#" class="to_register">立即注册</a></div> 79 </div> 80 <div class="mask"></div> 81 </form> 82 83 <!-- 注册表单 --> 84 <form class="register_form_con"> 85 <div class="register_form"> 86 <div class="register_title"> 87 <h3>注 册</h3> 88 <a href="javascript:;" class="shutoff"></a> 89 </div> 90 <div class="form_group"> 91 <input type="text" name="username" autocomplete="off" class="phone_input"> 92 <div class="input_tip">手机号</div> 93 <div class="error_tip">手机号不能为空</div> 94 </div> 95 <div class="form_group"> 96 <input type="password" name="code_pwd" class="code_pwd"> 97 <div class="input_tip">手机验证码</div> 98 <a href="javascript:;" class="get_code">点击获取验证码</a> 99 <div class="error_tip">验证码不能为空</div> 100 </div> 101 <div class="form_group"> 102 <input type="password" name="password" class="pass_input"> 103 <div class="input_tip">密码(不少于6位)</div> 104 <div class="error_tip">密码不能为空</div> 105 </div> 106 <div class="form_group"> 107 <input type="password" name="code_pwd" class="code_pwd"> 108 <div class="input_tip">图形验证码</div> 109 <img src="../../static/news/images/pic_code.png" class="get_pic_code"> 110 <div class="error_tip">图形码不能为空</div> 111 </div> 112 113 <div class="form_group2 clearfix"> 114 <input type="checkbox" class="agree_input" checked> 115 <p>同意使用条款，并已阅读"跟帖评论自律管理承诺书"</p> 116 <div class="error_tip">请勾选</div> 117 </div> 118 <input type="submit" name="" value="注 册" class="input_sub"> 119 <div class="down_link">已有账号？<a href="#" class="to_login">立即登录</a></div> 120 </div> 121 <div class="mask"></div> 122 </form> 123 </body> 124 </html>
以下是后端的代码
1 from . import user_blue 2 from flask import render_template,redirect,g,url_for,request,session,jsonify,current_app 3 from info.utlis.tools import user_login_data 4 from info.response_code import RET 5 from info import db 6 @user_blue.route("/user_info") 7 @user_login_data 8 def user_info(): 9 #接收用户信息 10 user = g.user 11 if not user: 12 #判断如果用户没有登录的话就直接跳转到主页面 13 return redirect(url_for('index.index')) 14 #创建上下文 15 context = { 16 "user": user 17 } 18 #返回个人中心页面 19 return render_template("news/user.html",context = context)
这里我们认为应该就能显示出来了，但是加载页面后却显示以下情况，没有找到页面？？？
我们再次查看前端代码中43行可以看到使用了iframe技术，用于页面嵌套页面的，也就是说我们这里还有一个页面根本就没有找到
我们再次查看前端代码中43行可以看到使用了iframe技术，用于页面嵌套页面的，也就是说我们这里还有一个页面根本就没有找到
这里templates中有user_base.html这个前端文件也就是说我们的user.html这个前端文件中没有嵌套成功，我们返回43行中进行修改，用url_for这个函数直接传我们新建的base_info这个视图函数的路径
1 <iframe src="{{ url_for("user.base_info") }}" frameborder="0" name="main_frame" class="main_frame" id="main_frame"></iframe>
这里修改完后不要忘记上面也要修改
1 <li class="active"><a href="{{ url_for("user.base_info") }}" target="main_frame">基本资料</a></li>
以下是base_info 视图函数的代码，用于基本资料的展示和设置
1 @user_blue.route("/base_info",methods = ["POST","GET"]) 2 @user_login_data 3 def base_info(): 4 user = g.user 5 if not user: 6 return redirect(url_for('index.index'))#这里用url_for 传入主视图函数的路径 7 8 9 context = { 10 "user": user 11 } 12 return render_template("news/user_base_info.html", context=context)
这样简单的个人中心展示就完成了
最后就得完善基本资料的功能了。（要做到以下的效果
以下是后端的代码
1 @user_blue.route("/base_info",methods = ["POST","GET"]) 2 @user_login_data 3 def base_info(): 4 #接收用户信息同时判断是否登录 5 user = g.user 6 if not user: 7 return redirect(url_for('index.index')) 8 #当需要提交数据的时候 9 if request.method == "POST": 10 #接收参数 11 signature = request.json.get("signature",None) 12 nick_name = request.json.get("nick_name", None) 13 gender = request.json.get("gender", None) 14 #判断参数是否为空 15 if not all([signature,nick_name,gender]): 16 return jsonify(errno=RET.PARAMERR, errmsg="数据接收不齐全") 17 #判断gender是否在MAN和WOMAN两个选项之中 18 if not gender in ["MAN","WOMAN"]: 19 return jsonify(errno=RET.PARAMERR, errmsg="数据错误") 20 #逻辑添加到数据库 21 user.gender = gender 22 user.nick_name = nick_name 23 user.signature = signature 24 try: 25 #上传到数据库 26 db.session.commit() 27 except Exception as e: 28 current_app.logger.error(e) 29 return jsonify(errno=RET.PARAMERR, errmsg="数据错误") 30 #更新session信息 31 session['nick_name'] = user.nick_name 32 return jsonify(errno=RET.OK, errmsg="成功") 33 #传递上下文 34 context = { 35 "user": user 36 } 37 return render_template("news/user_base_info.html", context=context)