（8）Flask微电影项目会员中心其他页面搭建
会员中心修改密码、评论、登录日志和收藏电影4个页面的内容。
一、修改密码页面：
{% 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 class="col-md-9">
<div class="panel panel-warning">
<div class="panel-heading">
<h3 class="panel-title"><span class="glyphicon glyphicon-map-marker"></span> 会员中心</h3>
</div>
<div class="panel-body">
<form role="form">
<fieldset>
<div class="form-group">
<label for="input_oldpwd"><span class="glyphicon glyphicon-lock"></span> 旧密码</label>
<input id="input_oldpwd" class="form-control" placeholder="旧密码" name="oldpwd" type="password"
autofocus>
</div>
<div class="col-md-12" id="error_oldpwd"></div>
<div class="form-group">
<label for="input_newpwd"><span class="glyphicon glyphicon-lock"></span> 新密码</label>
<input id="input_newpwd" class="form-control" placeholder="新密码" name="newpwd" type="password"
autofocus>
</div>
<div class="col-md-12" id="error_newpwd"></div>
<a href="login.html" class="btn btn-success"><span class="glyphicon glyphicon-edit"></span> 修改密码</a>
</fieldset>
</form>
</div>
</div>
</div>
{% endblock %}
{% block js %}
<script>
$(document).ready(function () {
$("#m-2").addClass("active");
});
</script>
{% endblock %}
修改密码页面效果图：
二、评论页面：
{% 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 class="col-md-9">
<div class="panel panel-warning">
<div class="panel-heading">
<h3 class="panel-title"><span class="glyphicon glyphicon-map-marker"></span> 评论记录</h3>
</div>
<div class="panel-body">
<ul class="commentList">
<li class="item cl">
<a href="user.html">
<i class="avatar size-L radius">
<img alt="50x50" src="holder.js/50x50" class="img-circle" style="border:1px solid #abcdef;">
</i>
</a>
<div class="comment-main">
<header class="comment-header">
<div class="comment-meta">
<a class="comment-author" href="user.html">xiaoli</a>
评论于
<time title="2016-12-07 09:12:51" datetime="2016-12-07 09:12:51">2017-03-01 09:12:51
</time>
</div>
</header>
<div class="comment-body">
<p>这电影真好看！</p>
</div>
</div>
</li>
<li class="item cl">
<a href="user.html">
<i class="avatar size-L radius">
<img alt="50x50" src="holder.js/50x50" class="img-circle" style="border:1px solid #abcdef;">
</i>
</a>
<div class="comment-main">
<header class="comment-header">
<div class="comment-meta">
<a class="comment-author" href="user.html">xiaoli</a>
评论于
<time title="2016-12-07 09:12:51" datetime="2016-12-07 09:12:51">2017-03-01 09:12:51
</time>
</div>
</header>
<div class="comment-body">
<p>这电影真好看！</p>
</div>
</div>
</li>
<li class="item cl">
<a href="user.html">
<i class="avatar size-L radius">
<img alt="50x50" src="holder.js/50x50" class="img-circle" style="border:1px solid #abcdef;">
</i>
</a>
<div class="comment-main">
<header class="comment-header">
<div class="comment-meta">
<a class="comment-author" href="user.html">xiaoli</a>
评论于
<time title="2016-12-07 09:12:51" datetime="2016-12-07 09:12:51">2017-03-01 09:12:51
</time>
</div>
</header>
<div class="comment-body">
<p>这电影真好看！</p>
</div>
</div>
</li>
<li class="item cl">
<a href="user.html">
<i class="avatar size-L radius">
<img alt="50x50" src="holder.js/50x50" class="img-circle" style="border:1px solid #abcdef;">
</i>
</a>
<div class="comment-main">
<header class="comment-header">
<div class="comment-meta">
<a class="comment-author" href="user.html">xiaoli</a>
评论于
<time title="2016-12-07 09:12:51" datetime="2016-12-07 09:12:51">2017-03-01 09:12:51
</time>
</div>
</header>
<div class="comment-body">
<p>这电影真好看！</p>
</div>
</div>
</li>
<li class="item cl">
<a href="user.html">
<i class="avatar size-L radius">
<img alt="50x50" src="holder.js/50x50" class="img-circle" style="border:1px solid #abcdef;">
</i>
</a>
<div class="comment-main">
<header class="comment-header">
<div class="comment-meta">
<a class="comment-author" href="user.html">xiaoli</a>
评论于
<time title="2016-12-07 09:12:51" datetime="2016-12-07 09:12:51">2017-03-01 09:12:51
</time>
</div>
</header>
<div class="comment-body">
<p>这电影真好看！</p>
</div>
</div>
</li>
</ul>
<div class="col-md-12 text-center">
<nav aria-label="Page navigation">
<ul class="pagination">
<li>
<a href="#" aria-label="First">
<span aria-hidden="true">首页</span>
</a>
</li>
<li>
<a href="#" aria-label="Previous">
<span aria-hidden="true">上一页</span>
</a>
</li>
<li><a href="#">1 / 10</a></li>
<li>
<a href="#" aria-label="Next">
<span aria-hidden="true">下一页</span>
</a>
</li>
<li>
<a href="#" aria-label="Last">
<span aria-hidden="true">尾页</span>
</a>
</li>
</ul>
</nav>
</div>
</div>
</div>
</div>
{% endblock %}
{% block js %}
<script>
$(document).ready(function () {
$("#m-3").addClass("active");
});
</script>
{% endblock %}
评论页面效果图：
三、登录日志页面：
{% 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 class="col-md-9">
<div class="panel panel-warning">
<div class="panel-heading">
<h3 class="panel-title"><span class="glyphicon glyphicon-map-marker"></span> 登录日志</h3>
</div>
<div class="panel-body">
<table class="table table-bordered">
<tr>
<td style="width:10%">编号</td>
<td style="width:30%">登录时间</td>
<td style="width:30%">登录IP</td>
<td style="width:30%">登录地址</td>
</tr>
<tr>
<td>1</td>
<td>2017-01-01 12:00:00</td>
<td>192.168.4.1</td>
<td>云南昆明</td>
</tr>
<tr>
<td>1</td>
<td>2017-01-01 12:00:00</td>
<td>192.168.4.1</td>
<td>云南昆明</td>
</tr>
<tr>
<td>1</td>
<td>2017-01-01 12:00:00</td>
<td>192.168.4.1</td>
<td>云南昆明</td>
</tr>
<tr>
<td>1</td>
<td>2017-01-01 12:00:00</td>
<td>192.168.4.1</td>
<td>云南昆明</td>
</tr>
<tr>
<td>1</td>
<td>2017-01-01 12:00:00</td>
<td>192.168.4.1</td>
<td>云南昆明</td>
</tr>
</table>
</div>
</div>
</div>
{% endblock %}
{% block js %}
<script>
$(document).ready(function () {
$("#m-4").addClass("active");
});
</script>
{% endblock %}
登录日志页面效果图：
四、收藏电影页面：
{% 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 class="col-md-9">
<div class="panel panel-warning">
<div class="panel-heading">
<h3 class="panel-title"><span class="glyphicon glyphicon-map-marker"></span> 收藏电影</h3>
</div>
<div class="panel-body">
<div class="col-md-12">
<div class="media">
<div class="media-left">
<a href="play.html">
<img class="media-object" src="holder.js/131x83" alt="环太平洋">
</a>
</div>
<div class="media-body">
<h4 class="media-heading">环太平洋<a href="play.html" class="label label-primary pull-right"><span
class="glyphicon glyphicon-play"></span>播放影片</a></h4>
该片主要讲述了人类为了抵抗怪兽的进攻，研制出了高大的机器战士与来犯怪兽进行对抗的故事。
</div>
</div>
<div class="media">
<div class="media-left">
<a href="play.html">
<img class="media-object" src="holder.js/131x83" alt="环太平洋">
</a>
</div>
<div class="media-body">
<h4 class="media-heading">环太平洋<a href="play.html" class="label label-primary pull-right"><span
class="glyphicon glyphicon-play"></span>播放影片</a></h4>
该片主要讲述了人类为了抵抗怪兽的进攻，研制出了高大的机器战士与来犯怪兽进行对抗的故事。
</div>
</div>
<div class="media">
<div class="media-left">
<a href="play.html">
<img class="media-object" src="holder.js/131x83" alt="环太平洋">
</a>
</div>
<div class="media-body">
<h4 class="media-heading">环太平洋<a href="play.html" class="label label-primary pull-right"><span
class="glyphicon glyphicon-play"></span>播放影片</a></h4>
该片主要讲述了人类为了抵抗怪兽的进攻，研制出了高大的机器战士与来犯怪兽进行对抗的故事。
</div>
</div>
<div class="media">
<div class="media-left">
<a href="play.html">
<img class="media-object" src="holder.js/131x83" alt="环太平洋">
</a>
</div>
<div class="media-body">
<h4 class="media-heading">环太平洋<a href="play.html" class="label label-primary pull-right"><span
class="glyphicon glyphicon-play"></span>播放影片</a></h4>
该片主要讲述了人类为了抵抗怪兽的进攻，研制出了高大的机器战士与来犯怪兽进行对抗的故事。
</div>
</div>
<div class="media">
<div class="media-left">
<a href="play.html">
<img class="media-object" src="holder.js/131x83" alt="环太平洋">
</a>
</div>
<div class="media-body">
<h4 class="media-heading">环太平洋<a href="play.html" class="label label-primary pull-right"><span
class="glyphicon glyphicon-play"></span>播放影片</a></h4>
该片主要讲述了人类为了抵抗怪兽的进攻，研制出了高大的机器战士与来犯怪兽进行对抗的故事。
</div>
</div>
</div>
<div class="col-md-12 text-center" style="margin-top:6px;">
<nav aria-label="Page navigation">
<ul class="pagination">
<li>
<a href="#" aria-label="First">
<span aria-hidden="true">首页</span>
</a>
</li>
<li>
<a href="#" aria-label="Previous">
<span aria-hidden="true">上一页</span>
</a>
</li>
<li><a href="#">1 / 10</a></li>
<li>
<a href="#" aria-label="Next">
<span aria-hidden="true">下一页</span>
</a>
</li>
<li>
<a href="#" aria-label="Last">
<span aria-hidden="true">尾页</span>
</a>
</li>
</ul>
</nav>
</div>
</div>
</div>
</div>
{% endblock %}
{% block js %}
<script>
$(document).ready(function () {
$("#m-5").addClass("active");
});
</script>
{% endblock %}
收藏电影页面效果图：
【结束】
（8）Flask微电影项目会员中心其他页面搭建的更多相关文章
- （7）Flask微电影之会员中心页面搭建
一.添加会员中心页面的路由 修改app/home/views.py内容,追加会员有关的5个路由: # coding:utf8 from . import home from flask import ...
- flask 微电影网站
flask简介 轻量级web应用框架 WSGI工具箱才用Werkzeug 模版引擎则使用Jinja2 Flask使用BSD授权 1.virtualenv的使用 (1)创建虚拟环境:virtualenv ...
- DEDE首页会员部分，后台登陆,会员登录相关页面
首页会员涉及部分 \templets\default\style\page.css \member\ajax_loginsta.php 会员登录页面涉及部分 \member\templets\inde ...
- C#7.2——编写安全高效的C#代码 c# 中模拟一个模式匹配及匹配值抽取 走进 LINQ 的世界 移除Excel工作表密码保护小工具含C#源代码 腾讯QQ会员中心g_tk32算法【C#版】
C#7.2——编写安全高效的C#代码 2018-11-07 18:59 by 沉睡的木木夕, 123 阅读, 0 评论, 收藏, 编辑 原文地址:https://docs.microsoft.com/ ...
- Flask租房项目总结
该Flask项目历时3天,开发小组6人,目的是开发一个租房web项目,该项目采用前后端分离模式. Flask租房项目总结 分析需求文档,需要完成的功能模块有: 登陆注册 首页展示,首页搜索 详情展示, ...
- 巡风代码架构简介以及Flask的项目文件结构简介
一.巡风: 巡风是一款什么东西,想必安全同行都不陌生吧.用它作为内网漏洞扫描管理架构是一种很好的选择,扫描快,开源,还可自己编写符合规则的POC直接放入相应目录来扩展.今天下午趁着有点时间捋了一下巡风 ...
- Python+Flask+Gunicorn 项目实战(一) 从零开始，写一个Markdown解析器 —— 初体验
(一)前言 在开始学习之前,你需要确保你对Python, JavaScript, HTML, Markdown语法有非常基础的了解.项目的源码你可以在 https://github.com/zhu-y ...
- PHPCMS登录后不是进入会员中心而是转入登录前页最新代码
phpcms比如会员在登录前是停留在下载页面的,但是下载页面是要求会员登录后才能下载,所以会员就有这个登陆过程,但是一般的会员系统是登录进会员中心的,就会有点体验不好 这里教大家修改下 能达到登录后 ...
- Ecstore 会员中心 菜单添加一项
1.会员中心 添加菜单 ecstore_合并支付总结_会员中心添加菜单_20160113 class : b2c_ctl_site_member (图 1) 第一步: (图1) ...
随机推荐
- Java开发环境之JDK
查看更多Java开发环境配置,请点击<Java开发环境配置大全> 零章:JDK安装教程 1)下载JDK安装包 http://www.oracle.com/technetwork/java/ ...
- Beta版本冲刺及发布成绩汇总
作业要求 1.作业内容: 作业具体要求及评分标准的链接 2.评分细则 1.冲刺内容占30分. (1) 各成员两天完成的工作,以及后续两天的任务安排(表格的形式记录各个成员这两天的工作,表格内容参考S ...
- 两个好的k8s周边项目，mark
这段时间没有应用, 但应该过段时间就可以派上用场了. 1,像写shell脚本一样写一个operator. https://github.com/flant/shell-operator 2,多集群的k ...
- Hikari java数据库连接池实战
环境InterlliJ2016.3 MySQL5.7.12 pom依赖: <dependency> <groupId>com.zaxxer</groupId> & ...
- 《exception》第九次团队作业：Beta冲刺与验收准备(第二天)
一.项目基本介绍 项目 内容 这个作业属于哪个课程 任课教师博客主页链接 这个作业的要求在哪里 作业链接地址 团队名称 Exception 作业学习目标 1.掌握软件黑盒测试技术:2.学会编制软件项目 ...
- ThinkPHP远程调用模块的操作方法 URL 参数格式
* 远程调用模块的操作方法 URL 参数格式 [项目://][分组/]模块/操作 * @param string $url 调用地址 * @param string|array $vars 调用参数 ...
- HDU-2196-Computer(树上DP)
链接: http://acm.hdu.edu.cn/showproblem.php?pid=2196 题意: A school bought the first computer some time ...
- 牛客小白月赛12 H 华华和月月种树
题目链接: 题意:有三个操作 操作 1:表示节点 i 长出了一个新的儿子节点,权值为0,编号为当前最大编号 +1(也可以理解为,当前是第几个操作 1,新节点的编号就是多少). 操作 2:表示华华上线做 ...
- go 学习 （五）：goroutine 协程
一.goroutine 基础 定义 使用者分配足够多的任务,系统能自动帮助使用者把任务分配到 CPU 上,让这些任务尽量并发运作,此机制在Go中称作 goroutine goroutine 是 Go语 ...
- python 微服务开发书中几个方便的python框架
python 微服务开发是一本讲python 如果进行微服务开发的实战类书籍,里面包含了几个很不错的python 模块,记录下,方便后期回顾学习 处理并发的模块 greenlet && ...