Flas初学习——第二天

最新推荐文章于 2024-11-02 15:22:06 发布

小k在努力

最新推荐文章于 2024-11-02 15:22:06 发布

阅读量440

点赞数 12

文章标签：学习 python 开发语言

本文链接：https://blog.csdn.net/qq_74061843/article/details/137056547

版权

本文详细介绍了如何在Flask应用中使用Jinja2模板语言，包括内置过滤器如`|length`，自定义过滤器如`datetime_format`的使用，以及控制语句、模板继承和静态文件（CSS/JS）的引用。

摘要由CSDN通过智能技术生成

jinja2过滤器的使用

简单来说就是|
直接上代码

from flask import Flask,render_template
from datetime import datetime
app = Flask(__name__)
class User:
    def __init__(self,username,email):
        self.username = username
        self.email = email

def datetime_format(value,format='%Y-%m-%d %H:%M:%S'):
    return value.strftime(format)
app.add_template_filter(datetime_format,"dfomat")

@app.route('/')
def hello_world():  # put application's code here
    user = User(username ='John',email = 'XX@qq.com')
    person = {'username':"张三",'email':"zhangsan@qq.com"}
    return render_template("index.html",user = user,person = person)
@app.route('/fiter')
def fiter():
    user = User(username='John', email='XX@qq.com')
    mytime = datetime.now()
    return render_template("fiter.html",user = user,mytime=mytime)
@app.route('/control')
def control():
    age = 17
    books = [{
        "name" : "三国演义",
        "author" : "罗贯中"
    },
        {
            "name":"水浒传",
            "author":"施耐庵"
        }
    ]
    return render_template('control.html',
                           age = age,books = books)
@app.route('/child1')
def child1():
    return render_template('child1.html')
@app.route('/static')
def staticfile():
    return render_template("static.html")
if __name__ == '__main__':
    app.run()

这是主运行文件写的东西,下面讲分块来解释

对于过滤器来说

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>过滤器使用demo</title>
</head>
<body>
<h1>过滤器</h1> 
#h1指一级标题
<div>{{ user.username }}-{{ user.username|length }}</div>
#div是讲内容逐行分开
#这里面的|length就是一种自带的过滤器,可以求长度,如下图那个John-4那个4就是
<div>{{ mytime|dfomat }}</div>
#这个就是自定义的过滤器了,看下面解释
</body>
</html>

来解释一下

自定义过滤器

def datetime_format(value,format='%Y-%m-%d %H:%M:%S'):
#其实也是一种函数,value是那个值,即形参,后面是这个值需要的形式
    return value.strftime(format)
app.add_template_filter(datetime_format,"dfomat")
#这个是取别名的过程,改名为dfomat

控制语句

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>控制demo</title>
</head>
<body>
{% if age>18 %}
#1,跟python区别就是{% %}
#2,要有endXX这个很重要
    <div>您可以进入网吧了</div>}
{% elif age == 18 %}
    <div>您来的挺巧,刚满18岁</div>
{% else  %}
    <div>您未成年,还是好好学习吧</div>
{% endif %}
{% for book in books %}
    <div>{{ book.name }}:{{ book.author }}</div>
{% endfor %}
</body>
</html>

跟

@app.route('/control')
def control():
    age = 17
    books = [{
        "name" : "三国演义",
        "author" : "罗贯中"
    },
        {
            "name":"水浒传",
            "author":"施耐庵"
        }
    ]
    #用了一个字典列表,用来遍历
    return render_template('control.html',
                           age = age,books = books)
 #一定不要忘记传递

呼应

继承模版

这是父模版

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>{% block title %}-{% endblock %}</title>
    #这个{%block %}就是留位置给子模版
</head>
<body>
<ul>
    <li><a href="#">首页</a></li>
	<li><a href="#">新闻</a></li>
	
#在Flask中，这段代码表示一个简单的HTML代码块，用于创建一个无序列表（<ul>），其中包含两个列表项（<li>）：
第一个列表项包含一个超链接（<a>），该超链接的href属性为空，即指向当前页面或站点的首页。
第二个列表项也包含一个超链接，其href属性同样为空，指向新闻部分。
    
</ul>
{% block body %}
{% endblock %}
<footer>这是底部的标签</footer>>
#这就是底模标签
</body>
</html>

这是子模版

{% extends "base.html"%}
#{%extends%}就是继承哪个父模版
{% block title %}
    我是子模版
{% endblock %}
{% block body %}
我是子模版的文字
{% endblock %}

css和js文件的运用与实现

静态文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="{{ url_for("static",filename = "css/css.css" ) }}">
    #link是引入了css文件,上面基本都是固定格式
    <script src = {{ url_for('static',filename = "js/study.js") }}></script>
    #script是引入了js文件
</head>
<body>
<img src="{{ url_for("static",filename = "R-C.jpg") }}" alt="">
</body>
</html>

css文件

body{
    background-color: pink;
}
#功能是给加一个背景颜色

js文件

alert("我是js文件");
#功能是在进入网站时加入一个对话框

效果如下
在这里插入图片描述

小k在努力

关注

12
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫