（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) ...
随机推荐
- 使用三层交换实现不同网段、不同 VLAN 互通
上一篇实现了使用Trunk做跨交换机VLAN通信,这一篇就试试使用三层交换实现不同网段,不同VLAN间的通信. 实验拓扑 在一台三层交换机下面连接一台二层交换机,再在二层交换机下面连接两台VPC,地址 ...
- Django-模型层(多表操作)
目录 1.创建模型 1.1方式一:自行创建第三张表 1.2方式二:通过ManyToManyField自动创建第三张表 1.3关于db_column和verbose_name 1.4关于on_delet ...
- MongoDB 分片问题汇总
分片是MongoDB的扩展方式,通过分片能够增加更多的机器来用对不断增加的负载和数据,还不影响应用. 1.分片简介 分片是指将数据拆分,将其分散存在不同机器上的过程.有时也叫分区.将数据分散在不同的机 ...
- Local CubeMap实现玻璃折射
这个方法来自于Arm公司Cave Demo中的冰雕效果 原文提供了一种计算折射向量的方法, 这里用个更简单的方式尝试发现效果也不错: float3 v = -normalize(_WorldSpace ...
- Python 爬虫js加密破解（三） 百度翻译 sign
第一步: 模拟抓包分析加密参数 第二步: 找到加密字段 调试出来的sign和抓取得到的数据一致,都是 275626.55195 第三部: 分析js加密方法 第四部:运行js代码: 仅供交流学习使用
- 学习app开发思路
1.首先在学习之前进行一次或者是整体或者是部分的检测,当第一次检测就通过,则可以认为是熟练掌握的东西(可以在后期对其进行验证是否是熟练)2.后面的学习过程,对回答的正确与否以及从第一次开始学习到目前为 ...
- 二维数组中的查找 - Java版 -简单二分查找 -<<剑指Offer>> -水题
如题 (总结) -认真读题, 还WA了一次, https://www.nowcoder.com/practice/abc3fe2ce8e146608e868a70efebf62e?tpId=13&am ...
- Map遍历效率比较
1.由来 上次博客提到了Map的四种遍历方法,其中有的只是获取了key值或者是value值,但我们应该在什么时刻选择什么样的遍历方式呢,必须通过实践的比较才能看到效率. 也看了很多文章,大家建议使用e ...
- zabbix4.2.5常见问题指南
一.zabbix配置postgres监控 rpm -ivh https://download.postgresql.org/pub/repos/yum/9.5/redhat/rhel-7-x86_64 ...
- postgres主从基于流复制
环境: CentOS Linux release 7.6.1810 (Core) 内核版本:3.10.0-957.10.1.el7.x86_64 node1:192.168.216.130 node2 ...