【Flask微电影】05.搭建前台页面-会员登录注册和会员中心

搭建前台主页页面

静态文件放入static目录下

创建基础页面base.html

创建base.html用于公用的页面顶部和底部

app/templates/home/base.html

修改静态文件为{{ url_for('static', filename='base/css/bootstrap.min.css') }}格式，添加内容块{% block content %}{% endblock %}，用于中部内容显示

    
    
    
    
    
    
    
    
    
    
    
    





    

        
        

            
                
                
                
            
            
                 微电影
            
        
        
        
        

            

                

                    
                    
                         搜索
                    
                
            
            

                

                     电影
                
                

                     登录
                
                

                     注册
                
                

                     退出
                
                

                     会员
                
            
        
        

    




    {% block content %}{% endblock %}




    

        

            

                

                    © 2018 flaskmovie 备案
                
            
        
    

创建index.html模板

app/templates/home/index.html

{% extends 'home/base.html' %}

{% block content %}
    
你好
{% endblock %}

加载模板到首页视图

修改app/home/views.py

from . import home
from flask import render_template


@home.route("/")
def index():
    return render_template('home/index.html')

访问 http://127.0.0.1:5000/ 即可看到index页面

image.png

知识点

1. 静态文件引入：{{ url_for('static', filename='文件路径') }}
2. 定义路由：{{ url_for('模块名.视图名', 变量=参数) }}
3. 定义数据块：{% block 数据块名称 %}...{% endblock %}

搭建会员登录页面

创建登录页面login.html

创建app/templates/home/login.html

引入数据块，添加登录的表单

{% extends 'home/base.html' %}

{% block content %}
    

        

            

                

                    
 会员登录
                
                

                    

                        

                            

                                 账号
                                
                            
                            

                            

                                 密码
                                
                            
                            

                            登录
                        
                    
                
            
        
    
{% endblock %}

创建登录和登出视图

在app/home/views.py中添加

@home.route('/login/')
def login():
    return render_template('home/login.html')


@home.route('/logout/')
def logout():
    return redirect(url_for('home.login'))

访问 http://127.0.0.1:5000/login/ 或 http://127.0.0.1:5000/login/ 即可看到登录表单

image.png

修改base.html登录退出链接

     登录


     退出

这样上方的登录退出链接就会生效了。

搭建会员注册页面

创建注册表单register.html

新建app/templates/home/register.html

{% extends 'home/base.html' %}

{% block content %}
    

        

            

                

                    
 会员注册
                
                

                    

                        

                            

                                 昵称
                                
                            
                            

                            

                                 邮箱
                                
                            
                            

                            

                                 手机
                                
                            
                            

                            

                                 密码
                                
                            
                            

                            

                                 确认密码
                                
                            
                            

                            注册
                        
                    
                
            
        
    
{% endblock %}

创建注册视图

在app/home/views.py增加

@home.route('/register/')
def register():
    return render_template('home/register.html')

image.png

修改base.html注册链接

     注册

这样顶部的注册链接就可用了

搭建会员中心页面

创建会员中心菜单usermenu.html

app/templates/usermenu.html

用于会员中心左侧菜单栏

    

        
             会员中心
        
        
             修改密码
        
        
             评论记录
        
        
             登录日志
        
        
             收藏电影
        
    

修改base.html添加css数据块

页面顶部style标签中

    
    
    {% block css %}{% endblock %}

创建会员中心user.html

增加额外的css，用于该页面的样式

{% extends 'home/base.html' %}

{% block css %}
    
{% endblock %}

{% block content %}
    {% include 'home/usermenu.html' %}
    

        

            

                
 会员中心
            
            

                

                    

                        

                             昵称
                            
                        
                        

                        

                             邮箱
                            
                        
                        

                        

                             手机
                            
                        
                        

                        

                             头像
                            
                             上传头像
                            
                        
                        

                        

                             简介
                            
                        
                        

                         保存修改
                    
                
            
        
    
{% endblock %}

image.png

创建修改密码pwd.html

{% extends 'home/base.html' %}

{% block css %}
    
{% endblock %}

{% block content %}
    {% include 'home/usermenu.html' %}
    

        

            

                
 会员中心
            
            

                

                    

                        

                             旧密码
                            
                        
                        

                        

                             新密码
                            
                        
                        

                         修改密码
                    
                
            
        
    
{% endblock %}

image.png

修改usermuene.html菜单激活状态

切换菜单，li便签不是选中状态，增加id

    

        
             会员中心
        
        
             修改密码
        
        
             评论记录
        
        
             登录日志
        
        
             收藏电影
        
    

修改base.html创建js数据块

添加到页面底部上方，用于该页面的js添加

{% block js %}{% endblock %}

修改user.html和pwd.html菜单选中active

修改user.html，底部增加以下代码，当点击会员中心后，会在id="m-1"上添加active的样式，表明激活该选项。

{% block js %}
    
{% endblock %}

修改pwd.html，底部增加

{% block js %}
    
{% endblock %}

image.png

image.png

创建评论记录comments.html

{% extends 'home/base.html' %}

{% block css %}
    
{% endblock %}

{% block content %}
    {% include 'home/usermenu.html' %}
    

        

            

                
 评论记录
            
            

                

                    

                        
                            
                                
                            
                        
                        

                            

                                

                                    xiaoli
                                    评论于
                                    2017-03-01 09:12:51
                                
                            
                            

                                
这电影真好看！
                            
                        
                    
                    

                        
                            
                                
                            
                        
                        

                            

                                

                                    xiaoli
                                    评论于
                                    2017-03-01 09:12:51
                                
                            
                            

                                
这电影真好看！
                            
                        
                    
                
                

                    

                        

                            

                                
                                    首页
                                
                            
                            

                                
                                    上一页
                                
                            
                            
1 / 10
                            

                                
                                    下一页
                                
                            
                            

                                
                                    尾页
                                
                            
                        
                    
                
            
        
    
{% endblock %}

{% block js %}
    
{% endblock %}

image.png

创建用户日志userlog.html

{% extends 'home/base.html' %}

{% block css %}
    
{% endblock %}

{% block content %}
    {% include 'home/usermenu.html' %}
    

        

            

                
 登录日志
            
            

                

                    

                        
编号
                        
登录时间
                        
登录IP
                        
登录地址
                    
                    

                        
1
                        
2017-01-01 12:00:00
                        
192.168.4.1
                        
云南昆明
                    
                    

                        
1
                        
2017-01-01 12:00:00
                        
192.168.4.1
                        
云南昆明
                    
                
            
        
    
{% endblock %}

{% block js %}
    
{% endblock %}

image.png

创建收藏电影moviecollect.html

{% extends 'home/base.html' %}

{% block css %}
    
{% endblock %}

{% block content %}
    {% include 'home/usermenu.html' %}
    

        

            

                
 收藏电影
            
            

                

                    

                        

                            
                                
                            
                        
                        

                            
环太平洋播放影片
                            该片主要讲述了人类为了抵抗怪兽的进攻，研制出了高大的机器战士与来犯怪兽进行对抗的故事。
                        
                    
                    

                        

                            
                                
                            
                        
                        

                            
环太平洋播放影片
                            该片主要讲述了人类为了抵抗怪兽的进攻，研制出了高大的机器战士与来犯怪兽进行对抗的故事。
                        
                    
                
                

                    

                        

                            

                                
                                    首页
                                
                            
                            

                                
                                    上一页
                                
                            
                            
1 / 10
                            

                                
                                    下一页
                                
                            
                            

                                
                                    尾页
                                
                            
                        
                    
                
            
        
    
{% endblock %}

{% block js %}
    
{% endblock %}

image.png

创建会员中心视图

在app/home/views.py增加

@home.route('/user/')
def user():
    return render_template('home/user.html')


@home.route('/pwd/')
def pwd():
    return render_template('home/pwd.html')


@home.route('/comments/')
def comments():
    return render_template('home/comments.html')


@home.route('/userlog/')
def userlog():
    return render_template('home/userlog.html')


@home.route('/moviecollect/')
def moviecollect():
    return render_template('home/moviecollect.html')

修改base.html会员和主页链接

     电影


     会员

修改user.html和pwd.html按钮链接

当用户点击按钮会自动跳转到会员中心，表单提交试用js实现，后面再增加。

user.html

 保存修改

pwd.html

 修改密码

修改login.html和register.html按钮链接

login.html

登录

register.html

注册