（7）Flask微電影之會員中心頁面搭建

時間 2019-11-06

標籤 flask 會員中心頁面搭建欄目 Python 简体版

原文原文鏈接

1、添加會員中心頁面的路由css

修改app/home/views.py內容，追加會員有關的5個路由：html

 1 # coding:utf8
 2 from . import home
 3 from flask import render_template, redirect, url_for
 4 
 5 @home.route("/")
 6 def index():
 7     return render_template("home/index.html")
 8 
 9 @home.route("/login/")
10 def login():
11     return render_template("home/login.html")
12 
13 @home.route("/logout/")
14 def logout():
15     return redirect(url_for("home.login"))
16 
17 @home.route("/regist/")
18 def regist():
19     return render_template("home/register.html")
20 
21 # 會員中心
22 @home.route("/user/")
23 def user():
24     return render_template("home/user.html")
25 
26 @home.route("/pwd/")
27 def pwd():
28     return render_template("home/pwd.html")
29 
30 @home.route("/comments/")
31 def comments():
32     return render_template("home/comments.html")
33 
34 @home.route("/loginlog/")
35 def loginlog():
36     return render_template("home/loginlog.html")
37 
38 @home.route("/moviecol/")
39 def moviecol():
40     return render_template("home/moviecol.html")

2、首頁樣式調整flask

3、會員中心頁左側菜單部分瀏覽器

建立templates/home/menu.html頁面：app

 1 <div class="col-md-3">
 2     <div class="list-group">
 3         <a href="{{url_for('home.user')}}" class="list-group-item active">
 4             <span class="glyphicon glyphicon-user"></span>&nbsp;會員中心
 5         </a>
 6         <a href="{{url_for('home.pwd')}}" class="list-group-item">
 7             <span class="glyphicon glyphicon-lock"></span>&nbsp;修改密碼
 8         </a>
 9         <a href="{{url_for('home.comments')}}" class="list-group-item">
10             <span class="glyphicon glyphicon-comment"></span>&nbsp;評論記錄
11         </a>
12         <a href="{{url_for('home.loginlog')}}" class="list-group-item">
13             <span class="glyphicon glyphicon-calendar"></span>&nbsp;登陸日誌
14         </a>
15         <a href="{{url_for('home.moviecol')}}" class="list-group-item">
16             <span class="glyphicon glyphicon-heart"></span>&nbsp;收藏電影
17         </a>
18     </div>
19 </div>

4、建立會員中心頁url

建立app/templates/home/user.html文件，內容：spa

 1 {% extends "home/home.html" %}
 2 
 3 {% block css %}
 4 <style>
 5     .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 {
 6         padding-right: 3px;
 7         padding-left: 3px;
 8     }
 9 </style>
10 {% endblock %}
11 
12 {% block content %}
13 {% include "home/menu.html" %}
14 <div class="col-md-9">
15     <div class="panel panel-warning">
16         <div class="panel-heading">
17             <h3 class="panel-title"><span class="glyphicon glyphicon-map-marker"></span>&nbsp;會員中心</h3>
18         </div>
19         <div class="panel-body">
20             <form role="form">
21                 <fieldset>
22                     <div class="form-group">
23                         <label for="input_name"><span class="glyphicon glyphicon-user"></span>&nbsp;暱稱</label>
24                         <input id="input_name" class="form-control" placeholder="暱稱" name="name" type="text" autofocus
25                                value="jinlong">
26                     </div>
27                     <div class="col-md-12" id="error_name"></div>
28                     <div class="form-group">
29                         <label for="input_email"><span class="glyphicon glyphicon-envelope"></span>&nbsp;郵箱</label>
30                         <input id="input_email" class="form-control" placeholder="郵箱" name="email" type="email"
31                                autofocus value="1780316635@qq.com">
32                     </div>
33                     <div class="col-md-12" id="error_email"></div>
34                     <div class="form-group">
35                         <label for="input_phone"><span class="glyphicon glyphicon-phone"></span>&nbsp;手機</label>
36                         <input id="input_phone" class="form-control" placeholder="手機" name="phone" type="text" autofocus
37                                value="13700632835">
38                     </div>
39                     <div class="col-md-12" id="error_phone"></div>
40                     <div class="form-group">
41                         <label for="input_face"><span class="glyphicon glyphicon-picture"></span>&nbsp;頭像</label>
42                         <img src="holder.js/100x100" class="img-responsive img-rounded">
43                         <a class="btn btn-primary" style="margin-top:6px;"><span
44                                 class="glyphicon glyphicon-open"></span>&nbsp;上傳頭像</a>
45                         <input id="input_face" class="form-control" name="face" type="hidden" autofocus>
46                     </div>
47                     <div class="col-md-12" id="error_face"></div>
48                     <div class="form-group">
49                         <label for="input_info"><span class="glyphicon glyphicon-edit"></span>&nbsp;簡介</label>
50                         <textarea class="form-control" rows="10" id="input_info">十年窗下無人問，一鳴驚人天下知</textarea>
51                     </div>
52                     <div class="col-md-12" id="error_info"></div>
53                     <a href="user.html" class="btn btn-success"><span class="glyphicon glyphicon-saved"></span>&nbsp;保存修改</a>
54                 </fieldset>
55             </form>
56         </div>
57     </div>
58 </div>
59 {% endblock %}