3.3.3-Flask - 模板渲染【多选一:Flask系列】
第1关:模板渲染 - 变量输出
1.py
from flask import Flask, render_template, request
app = Flask(__name__)
map = {
"1": {
"id": "1",
"sex": "女",
"age": "18",
"introduce": "不忘初心,方得始终",
"interest": "偶尔发发神经,听听歌,看看新闻。"
},
"2": {
"id": "2",
"sex": "男",
"age": "18",
"introduce": "不忘初心,方得始终",
"interest": "偶尔发发神经,听听歌,吹吹口琴。"
}
}
#####Begin#####
@app.route('/index',methods=['GET','POST'])
def index():
id = request.args.get('name')
return render_template("1.html", id=map[id]['id'], sex=map[id]['sex'], age=map[id]['age'], introduce=map[id]['introduce'],interest=map[id]['interest'])
#####End#####
if __name__ == '__main__':
app.run(host="0.0.0.0", port=8080)
1.html
<!DOCTYPE HTML>
<html lang="zh-Hans">
<head>
<meta charset="utf-8">
<link rel='stylesheet' href={{url_for('static',filename='css/css.css')}} type='text/css'/>
<link rel='stylesheet' href={{url_for('static',filename='css/font-awesome.min.css')}} type='text/css'/>
<link rel='stylesheet' href={{url_for('static',filename='css/style.css')}} type='text/css'/>
<title>I am I - 个人主页</title>
<script src={{url_for('static',filename='js/jquery.min.js')}}></script>
<script src={{url_for('static',filename='js/skel.min.js')}}></script>
<script src={{url_for('static',filename='js/util.js')}}></script>
</head>
<body>
<div id="wrapper">
<article id="about-me" class="panel ">
<div class="image" style="background-image: url('/static/images/1.jpg'); background-position: center center;">
<img src="/static/images/1.jpg" alt="" data-position="center center" style="display: none;">
</div>
<div class="content">
<div class="inner">
<header>
<h2>关于我</h2>
<blockquote>不管是友情还是爱情,你来,我热情相拥。你走,我坦然放手!</blockquote>
</header>
<p>
<!-----Begin----->
<strong>ID:</strong>{{id}}<br>
<strong>性别:</strong>{{sex}}<br>
<strong>年龄:</strong>{{age}}<br>
<strong>签名:</strong>{{introduce}}<br>
<strong>兴趣:</strong>{{interest}}<br>
<!-----End----->
<del></del>
</p>
</div>
</div>
</article>
</div>
</body>
</html>
第2关:模板渲染 - 循环语句
2.py
from flask import Flask, render_template, request
app = Flask(__name__)
List = [
{
"name": "alice",
"time": "2019-10-18",
}, {
"name": "iris",
"time": "2019-10-18",
}, {
"name": "Violet",
"time": "2019-10-18",
}
]
#####Begin#####
@app.route("/index", methods=['GET','POST'])
def index():
return render_template('2.html', websites=List)
#####End#####
if __name__ == '__main__':
app.run(host="0.0.0.0", port=8080)
2.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Flask 循环</title>
<link rel='stylesheet' href={{url_for('static',filename='layui/css/layui.css')}} type='text/css'/>
<script src={{url_for('static',filename='layui/layui.all.js')}}></script>
</head>
<body>
<table class="layui-table">
<colgroup>
<col width="150">
<col width="200">
</colgroup>
<thead>
<tr>
<th>昵称</th>
<th>加入时间</th>
</tr>
</thead>
<tbody>
<!-----Begin----->
{% for item in websites %}
<tr>
<td>{{ item['name'] }}</td>
<td>{{ item['time'] }}</td>
</tr>
{% endfor %}
<!-----End----->
</tbody>
</table>
</body>
</html>
第3关:模板渲染 - 判断渲染
3.py
from flask import Flask, render_template, request
app = Flask(__name__)
#####Begin#####
@app.route('/index/0')
def index_0():
return render_template('3.html', index=0)
@app.route('/index/1')
def index_1():
return render_template('3.html', index=1)
#####End#####
if __name__ == '__main__':
app.run(host="0.0.0.0", port=8080)
3.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Flask - if</title>
<link rel='stylesheet' href={{url_for('static',filename='layui/css/layui.css')}} type='text/css'/>
<script src={{url_for('static',filename='layui/layui.all.js')}}></script>
<link rel='stylesheet' href={{url_for('static',filename='layui/css/global.css')}} type='text/css'/>
</head>
<body>
<div class="fly-header layui-bg-black">
<div class="layui-container">
<ul class="layui-nav fly-nav layui-hide-xs">
<li class="layui-nav-item layui-this">
<a href="JavaScript:void(0)"><i class="iconfont icon-jiaoliu"></i>交流</a>
</li>
<li class="layui-nav-item">
<a href="JavaScript:void(0)"><i class="iconfont icon-iconmingxinganli"></i>案例</a>
</li>
<li class="layui-nav-item">
<a href="JavaScript:void(0)" target="_blank"><i class="iconfont icon-ui"></i>框架</a>
</li>
</ul>
<ul class="layui-nav fly-nav-user">
<!-----Begin----->
{% if index == 0 %}
<!-- 未登入的状态 -->
<li class="layui-nav-item">
<a class="iconfont icon-touxiang layui-hide-xs" href="JavaScript:void(0)"></a>
</li>
<li class="layui-nav-item">
<a href="JavaScript:void(0)">登入</a>
</li>
<li class="layui-nav-item">
<a href="JavaScript:void(0)">注册</a>
</li>
<li class="layui-nav-item layui-hide-xs">
<a href="JavaScript:void(0)" class="iconfont icon-qq"></a>
</li>
<li class="layui-nav-item layui-hide-xs">
<a href="JavaScript:void(0)" class="iconfont icon-weibo"></a>
</li>
{% elif index == 1 %}
<!-- 登入后的状态 -->
<li class="layui-nav-item">
<a class="fly-nav-avatar" href="javascript:;">
<cite class="layui-hide-xs">Alice</cite>
<i class="iconfont icon-renzheng layui-hide-xs" title="认证信息:Alice"></i>
<i class="layui-badge fly-badge-vip layui-hide-xs">VIP3</i>
<img src="https://www.educoder.net/api/attachments/423495">
</a>
</li>
{% endif %}
<!-----End----->
</ul>
</div>
</div>
</body>
</html>