Flask实战2问答平台-父模板抽离(登录注册界面)

我们写一个基模板,然后让其他的继承.
(1)新建基模板base.html
注意5,13,53行的{%%}块

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>{% block title %}{% endblock %}知了课堂</title><link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"><script src="https://cdn.bootcss.com/jquery/3.2.1/core.js"></script><script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script><link rel="stylesheet" href="{{url_for('static',filename = 'css/index.css')}}"><link rel="stylesheet" href="{{url_for('static',filename = 'css/base.css')}}">{% block head %}{% endblock %}
</head>
<body><nav class="navbar navbar-default"><div class="container-fluid"><!-- Brand and toggle get grouped for better mobile display --><div class="navbar-header"><button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"><span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button><a class="navbar-brand" href="#"><img class="logo" src="{{url_for('static',filename = 'Logo/cat.png')}}" alt=""></a></div><!-- Collect the nav links, forms, and other content for toggling --><div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"><ul class="nav navbar-nav"><li class="active"><a href="#">首页 <span class="sr-only">(current)</span></a></li><li><a href="#">发布问答</a></li></ul><form class="navbar-form navbar-left"><div class="form-group"><input type="text" class="form-control" placeholder="请输入关键字"></div><button type="submit" class="btn btn-default">搜索</button></form><ul class="nav navbar-nav navbar-right"><li><a href="{{url_for('login')}}">登录</a></li><li><a href="#">注册</a></li></ul></div><!-- /.navbar-collapse --></div><!-- /.container-fluid -->
</nav><div class="main">{% block main %}{% endblock %}</div></body>
</html>

base.html

.logo{width: 30px;height: 30px;
}
body{background-color: #f3f3f3;
}
.main{background: #fff;width: 730px;margin: 0 auto;overflow: hidden;
}

(2)此时index.html可更改如下

{% extends 'base.html' %}{% block title %} 首页 {% endblock %}{% block main %} 这是首页 {% endblock %}

(3)login.html

{% extends 'base.html' %}{% block head %}
<link rel="stylesheet" href="{{url_for('static',filename = 'css/login.css')}}">
{% endblock %}{% block main %} <h3 class="page-title">登录</h3><form action="" method="post"><div class="form-container"><div class="form-group"><label for="exampleInputEmail1">用户名</label><input type="email" class="form-control" id="exampleInputEmail1" placeholder="手机号码"></div><div class="form-group"><label for="exampleInputPassword1">密码</label><input type="password" class="form-control" id="exampleInputPassword1" placeholder="密码"></div><!-- <div class="checkbox"><label><input type="checkbox"> Check me out</label></div> --><button type="submit" class="btn btn-primary btn-block">Submit</button></div></form>
{% endblock %}

index.css

.logo{width: 30px;height: 25px;
}

.form-container{width: 300px;/*将div form-container居中*/margin: 0 auto;}
.page-title{text-align: center;
}
.main{height: 270px;
}

注册界面由登录界面作相应更改即可

{% extends 'base.html' %}{% block title %}注册
{% endblock %}{% block head %}
<link rel="stylesheet" href="{{url_for('static',filename = 'css/login-register.css')}}">
{% endblock %}{% block main %}
<h3 class="page-title">注册</h3><form action="" method="post"><div class="form-container"><div class="form-group"><label for="exampleInputEmail1">手机号码</label><input type="email" class="form-control" name='username' placeholder="用户名"></div><div class="form-group"><label for="exampleInputEmail1">用户名</label><input type="text" class="form-control" name="telephone" placeholder="手机号码"></div><div class="form-group"><label for="exampleInputPassword1">密码</label><input type="password" class="form-control" name="password1" placeholder="确认密码"></div><div class="form-group"><label for="exampleInputPassword1">确认密码</label><input type="password" class="form-control" name="password2" placeholder="确认密码"></div><!-- <div class="checkbox"><label><input type="checkbox"> Check me out</label></div> --><button type="submit" class="btn btn-primary btn-block">立即注册</button></div></form>
{% endblock %}

到这一步的时候,把login.css整合了一下,统一成了login-register.css
也就是login.html和register.html共用一个css.
login-register.css如下

.form-container{width: 300px;/*将div form-container居中*/margin: 0 auto;}
.page-title{text-align: center;
}
.main{height: 400px;
}

不要忘记在主py文件中添加视图函数
最终效果

Flask实战2问答平台-父模板抽离(登录注册界面)相关推荐

flask实战之问答平台(参考b站视频)
准备新建一个项目,在项目中添加一个config.py文件,用来进行邮箱验证码,cookie,和session和一些加密等的配置这样看来config.py是项目的一部分了,但是还要在app.py中进 ...
Flask实战2问答平台-发布问答界面完成
当我们登录进来后,我们便可以发布问答了,注意一点再未登录之前,我们是不能点击发布问答的,这一点我们在下一篇文章中实现. (1)新建question.html,还是继承base.html {% ext ...
Flask实战2问答平台-登录限制(装饰器)
我们来解决上一文章说到的,为登录不能点击发布问答功能 (一)先写一个装饰器装饰器教程参考廖雪峰教程 http://t.cn/RK0SaGl from functools import wraps # ...
Flask实战2问答平台-问答详情完成
首页文章已经布局完成,这次要完成的功能是点击文章,跳转到文章详情页. 新建detail.html {% extends 'base.html' %} {% block title %}详情{% end ...
Flask实战2问答平台-首页布局,功能完成
首页需要用来显示文章 index.html如下 {% extends 'base.html' %}{% block title %} 首页 {% endblock %}{% block head %} ...
Flask实战2问答平台-发布问答功能完成
我们需要新建一个表,可以采用两种方式: (1)手动建表 (2)使用flask_migrate. 说一下使用第二种方法建表的方式 (1)在models.py文件中添加如下代码 class Questio ...
Flask实战2问答平台-完成登录注册功能
本来可以提前完成这篇的,结果测试时发现了一些问题,稍后将会提到. 上篇中我们已经完成了登录注册的界面,现在具体完成其具体功能. 1.注册功能因为注册成功后,才能登录,我们在主py文件中添加如下 @a ...
Flask实战2问答平台--导航条
项目总览 1.新建index.html 2.引入css,js .链接http://v3.bootcss.com/getting-started/ 3.导入当行条代码,代码链接http://v3.boo ...
python flask框架发布问答平台注册页面_Python|Flask框架实现QQ账号登录
本文首发于微信公众号:"算法与编程之美",欢迎关注,及时了解更多此系列文章. 前期准备因为注册QQ互联需要已备案的网站,所以需要准备一个已备案的网站与域名. 首先访问QQ互联平台 ...

Flask实战2问答平台-父模板抽离(登录注册界面)

Flask实战2问答平台-父模板抽离(登录注册界面)相关推荐

最新文章

热门文章