Flask web开发之路六
紧接着上篇文档,写模板继承和block,URL链接和加载静态文件
模板继承和block
项目结构
主app文件代码:
from flask import Flask,render_template app = Flask(__name__) #class Person(object):
#name = ''
#age = 0 #class Student(Person):
#pass @app.route('/')
def index():
return render_template('index.html') @app.route('/login/')
def login():
return render_template('login.html') if __name__ == '__main__':
app.run(debug=True)
base.html代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>{% block title %}{% endblock %}</title>
<style>
.nav{
background: #000000;
height:100px;
}
ul{
overflow:hidden;
}
ul li {
float:left;
list-style:none;
padding:0 10px;
line-height:65px;
}
}
ul li a{
color: #ffffff;
}
</style>
</head>
<body>
<div class="nav">
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">发布问答</a></li> </ul>
</div>
{% block main %}{% endblock %}
</body>
</html>
index.html代码:
{% extends 'base.html' %}
{% block title %}
首页
{% endblock %}
{% block main %} <hi>这是首页</hi> {% endblock %}
login.html代码:
{% extends 'base.html' %}
{% block title %}
登录
{% endblock %}
{% block main %}
<hi>这是首页</hi>
{% endblock %}
### 继承和block:
1. 继承作用和语法:
* 作用:可以把一些公共的代码放在父模板中,避免每个模板写同样的代码。
* 语法:
```
{% extends 'base.html' %}
```
2. block实现:
* 作用:可以让子模板实现一些自己的需求。父模板需要提前定义好。
* 注意点:字模板中的代码,必须放在block块中。
URL链接和加载静态文件
项目结构
主app文件代码:
from flask import Flask,render_template app = Flask(__name__) @app.route('/')
def index():
return render_template('index.html') @app.route('/login/')
def login():
return render_template('login.html') if __name__ == '__main__':
app.run(debug=True)
index.html代码;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="{{ url_for('static',filename='css/index.css') }}">
<script src="{{ url_for('static',filename ='js/index.js') }}"></script>
</head>
<body>
<a href="{{ url_for('login') }}">登录</a>
<img src="{{ url_for('static',filename= 'images/zhuanli.jpg') }}" alt="">
</body>
</html>
login.html代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<h1>这是登录页面</h1>
</body>
</html>
CSS文件代码:
a{
background: red;
}
### url链接:使用`url_for(视图函数名称)`可以反转成url。
### 加载静态文件:
1. 语法:`url_for('static',filename='路径')`
2. 静态文件,flask会从`static`文件夹中开始寻找,所以不需要再写`static`这个路径了。
3. 可以加载`css`文件,可以加载`js`文件,还有`image`文件。
```
第一个:加载css文件
<link rel="stylesheet" href="{{ url_for('static',filename='css/index.css') }}">
第二个:加载js文件
<script src="{{ url_for('static',filename='js/index.js') }}"></script>
第三个:加载图片文件
<img src="{{ url_for('static',filename='images/zhiliao.png') }}" alt="">
Flask web开发之路六的更多相关文章
- Flask web开发之路九
flask_scripts介绍 项目结构如下: flask_script_demo.py文件: from flask import Flask app = Flask(__name__) @app.r ...
- Flask web开发之路一
之前学过一段时间的flask,感觉还是挺好用的,自己的专利挖掘项目也想这个web框架来搭建,于是重新开始基础学习 环境:win10,python3.6,pycharm2017,虚拟环境virtuale ...
- Flask web开发之路十四
今天开始Flask的实战,创建一个项目,实现包括用户登录.注册.注销.发表博客.评论以及检索等功能 首先给出项目结构: 1.config.py文件: 存放各种配置信息 import os # dial ...
- Flask web开发之路十三
g对象 ### 保存全局变量的g属性:g:global1. g对象是专门用来保存用户的数据的.2. g对象在一次请求中的所有的代码的地方,都是可以使用的. 项目结构: g_demo.py文件代码: f ...
- Flask web开发之路十二
ge请求和post请求 ### get请求和post请求:1. get请求: * 使用场景:如果只对服务器获取数据,并没有对服务器产生任何影响,那么这时候使用get请求. * 传参:get请求传参是放 ...
- Flask web开发之路十一
首先写一下cookie和session的概念,然后是Flask中session的工作机制以及操作session ### cookie: 1. `cookie`出现的原因:在网站中,http请求是无状态 ...
- Flask web开发之路十
首先介绍循环引用的问题: 当一个模块需要引用另一个模块的类,而另一个模块又需要引用这个模块的类时,就出现了循环引用,而没法导入类,这时候可以切断其中一条引用路径,增加一个模块 项目结构: models ...
- Flask web开发之路八
今天写Flask_SQLAlchemy的外键及其关系 ### Flask-SQLAlchemy外键及其关系: 主app文件代码: from flask import Flask from flask_ ...
- Flask web开发之路七
今天写SQLAlchemy数据库 首先介绍ORM的概念: ORM,Object类,Relationship:关系,Mapping:映射,也就是模型关系映射 flask-sqlalchemy是一套ORM ...
随机推荐
- 图像的视差匹配(Stereo Matching)
这里要求用我们自己计算得到的视差图和给的视差图作比較来比較我们得到的视差图的好坏程度,我视差图返回的值是计算得到的视差乘以3之后的图,所以在计算时我不是两个值相差大于1,而是大于3.由于两个图像都乘3 ...
- C#串口SerialPort常用属性方法
SerialPort(): //属性 .BaudRate;获取或设置波特率 .BytesToRead;得到 接收到数据的字节数 .BytesToWrites;得到送往串口的字节数 .DataBits; ...
- 使用EF操作不同数据库(以SQLite为例)
最近一直在和数据库作对. 从安卓平台上给了我个SQLite数据库,要求程序能够读取不同的文件.由于字段实在太多,不愿意直接使用原来直接读取datatable的方式来做,手动写映射太痛苦...于是想起来 ...
- linux下无法执行PHP命令,错误 php: command not found
在linux下执行php时无法执行,报错:php: command not found 解决方法: export PATH=$PATH:/usr/local/php7/bin 可以输入echo $PA ...
- request.GetResponse()超时的解决办法
var request = (HttpWebRequest)WebRequest.Create(url); request.Timeout = Timeout.Infinite; request.Ke ...
- MySQL保存历史执行语句
MySQL想查看历史执行语句,不能像linux那样通过命令查看 只能将每条执行语句保存到LOG里面,然后通过LOG文件再查找 修改my.cnf配置文件 [mysqld] 字段部分,定义LOG名字为ex ...
- 在Pandas中更改列的数据类型【方法总结】
先看一个非常简单的例子: a = [['a', '1.2', '4.2'], ['b', '70', '0.03'], ['x', '5', '0']] df = pd.DataFrame(a) 有什 ...
- JVM 内部原理(五)— 基本概念之 Java 虚拟机官方规范文档,第 7 版
JVM 内部原理(五)- 基本概念之 Java 虚拟机官方规范文档,第 7 版 介绍 版本:Java SE 7 每位使用 Java 的程序员都知道 Java 字节码在 Java 运行时(JRE - J ...
- EasyUI datagrid columns 中 field 区分大小写
columns: [ [ {field: 'id', title: 'ID'}, {field: 'name', title: 'NAME'}, {field: 'DT_CRT_TM', title: ...
- vscode忽略node_module
1.文件 ---> 首选项 ---> 设置 英文版对应:File ---> Preferences-> User Settings 2.打开 setting.json 3.将 ...