会员中心页面，如下图所示
用户登录后，修改密码页面，如下图所示
用户查看自己的评论页面，如下图所示
用户查看自己的登录日志页面，如下图所示
用户查看自己收藏的电影的页面，如下图所示
在上面的图片里，可以看到，整个页面的顶部和左侧都是一样的
在之前，已经把顶部部分单独定义在templates目录的home目录下
这里可以把用户主页的左侧也单独定义一个文件menu.html，然后让包含左侧部分的页面引入menu.html页面
menu.html页面的内容：
<div> <div> <a href="{{ url_for('home.user') }}"> <span></span> 会员中心 </a> <a href="{{ url_for('home.pwd') }}"> <span></span> 修改密码 </a> <a href="{{ url_for('home.comments',page=1) }}"> <span></span> 评论记录 </a> <a href="{{ url_for('home.loginlog',page=1) }}"> <span></span> 登录日志 </a> <a href="{{ url_for('home.moviecol',page=1) }}"> <span></span> 收藏电影 </a> </div> </div> 2. 定义用户登录后的主页面代码 2.1 在home目录下的forms.py文件中，定义用户主页显示用户详细信息的表单类UserdetailForm可以通过调用UserdetailForm表单类直接在前端页面上渲染生成用户详细信息的字段标签
from flask_wtf import FlaskForm from wtforms.fields import StringField, PasswordField, SubmitField, FileField, TextAreaField from wtforms.validators import DataRequired, EqualTo, Email, Regexp, ValidationError from app.models import User class UserdetailForm(FlaskForm): name = StringField( label="呢称", validators=[ DataRequired("请输入呢称！") ], description="呢称", render_kw={ "class": "form-control", "placeholder": "请输入呢称！" } ) email = StringField( label="邮箱", validators=[ DataRequired("请输入邮箱！"), Email("邮箱的格式不正确，请重新输入！") ], description="邮箱", render_kw={ "class": "form-control", "placeholder": "请输入邮箱！" } ) phone = StringField( label="手机号", validators=[ DataRequired("请输入手机号！"), Regexp("1[34578]\\d{9}", message="输入的手机号格式不正确！"), ], description="手机号", render_kw={ "class": "form-control", "placeholder": "请输入手机号！" } ) face = FileField( label="头像", validators=[ DataRequired("请上传头像！") ], description="头像" ) info = TextAreaField( label="简介", validators=[ DataRequired("请输入简介！") ], description="简介", render_kw={ "class": "form-control", "rows": "10" } ) submit = SubmitField( "保存修改", render_kw={ "class": "btn btn-success", } ) 2.2 定义用户主页面的视图函数user @home.route("/user/", methods=['GET', 'POST']) def user(): form = UserdetailForm() user = User.query.get(int(session.get("user_id"))) form.face.validators = [] if request.method == 'GET': form.name.data = user.name form.email.data = user.email form.phone.data = user.phone form.info.data = user.info if form.validate_on_submit(): data = form.data file_face = secure_filename(form.face.data.filename) if not os.path.exists(app.config['FC_DIR']): os.makedirs(app.config['FC_DIR']) os.chmod(app.config['FC_DIR']) user.face = change_filename(file_face) form.face.data.save(app.config['FC_DIR'] + user.face) name_count = User.query.filter_by(name=data.get("name")).count() if data.get("name") != user.name and name_count == 1: flash("用户名已经存在,请重新输入！", "err") return redirect(url_for("home.user")) email_count = User.query.filter_by(email=data.get("email")).count() if data.get("email") != user.email and email_count == 1: flash("邮箱已经存在，请重新输入！", "err") return redirect(url_for("home.user")) phone_count = User.query.filter_by(phone=data.get('phone')).count() if data.get("phone") != user.phone and phone_count == 1: flash("手机号已经存在，请重新输入！", "err") return redirect(url_for("home.user")) user.name = data.get("name") user.email = data.get("email") user.phone = data.get("phone") user.info = data.get("info") db.session.add(user) db.session.commit() flash("修改已经保存！", "ok") return redirect(url_for("home.user")) return render_template("home/user.html", form=form, user=user) 2.3 定义用户主页的前端页面 {% extends "home/home.html" %} {% block css %} <style> .col-lg-1, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-md-1, .col-md-10, .col-md-11, .col-md-12, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-sm-1, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-xs-1, .col-xs-10, .col-xs-11, .col-xs-12, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9 { padding-right: 3px; padding-left: 3px; } </style> {% endblock %} {% block content %} {% include "home/menu.html" %} <div> <div> <div> <h3><span></span> 会员中心</h3> </div> <div> <!--消息闪现--> {% for msg in get_flashed_messages(category_filter=["err"]) %} <p>{{ msg }}</p> {% endfor %} {% for msg in get_flashed_messages(category_filter=["ok"]) %} <p>{{ msg }}</p> {% endfor %} <form role="form" method="post" enctype="multipart/form-data"> <fieldset> <div> <label for="input_name"><span></span> {{ form.name.label }}</label> {{ form.name }} </div> <!--错误提示--> {% for err in form.name.errors %} <div> <font>{{ err }}</font> </div> {% endfor %} <div> <label for="input_email"><span></span> {{ form.email.label }}</label> {{ form.email }} </div> <!--错误提示--> {% for err in form.email.errors %} <div> <font>{{ err }}</font> </div> {% endfor %} <div> <label for="input_phone"><span></span> {{ form.phone.label }}</label> {{ form.phone }} </div> <!--错误提示--> {% for err in form.phone.errors %} <div> <font>{{ err }}</font> </div> {% endfor %} <div> <label for="input_face"><span></span> {{ form.face.label }}</label> {{ form.face }} {% if user.face %} <img src="{{ url_for('static',filename='uploads/users/'+user.face) }}"> {% else %} <img data-src="holder.js/100x100"> {% endif %} </div> <!--错误提示--> {% for err in form.face.errors %} <div> <font>{{ err }}</font> </div> {% endfor %} <div> <label for="input_info"><span></span> {{ form.info.label }}</label> {{ form.info }} </div> <!--错误提示--> {% for err in form.info.errors %} <div> <font>{{ err }}</font> </div> {% endfor %} {{ form.csrf_token }} {{ form.submit }} </fieldset> </form> </div> </div> </div> {% endblock %} {% block js %} <script> $(document).ready(function () { $("#m-1").addClass("active"); }); </script> {% endblock %} 3. 定义用户修改密码的页面代码 3.1 在home目录下的forms.py文件中，定义用户修改密码的表单类PwdForm