flask框架之页面控制（内容有点多）

最新推荐文章于 2024-04-29 15:37:54 发布

童心（成都）

最新推荐文章于 2024-04-29 15:37:54 发布

阅读量1.6k

点赞数 1

分类专栏： python 文章标签： python flask

本文链接：https://blog.csdn.net/qq_40237472/article/details/89358188

版权

python 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

使用pycharm开发工具，创建flask项目：

运行调试创建项目是否成功，看到浏览器有小火箭在飞就表示创建成功：

创建一下目录结构的html以及python文件：

html.html页面代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>这个是html页面</title>
</head>
<body>
    <div>这个是html页面</div>
    <div>用户名：{{ username }}</div>
    <div>性别：{{ gender }}</div>
    <div>年龄：{{ age }}</div><br/><br/><br/>

</body>
</html>

html2.html页面代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>这个是html页面</title>
</head>
<body>
    <div>这个是html页面</div>
    <div>用户名：{{ username }}</div>
    <div>性别：{{ gender }}</div>
    <div>年龄：{{ age }}</div><br/><br/><br/>
<div>用户名：{{ person.name }}
    <div>年龄：{{ person.age }}<br/><br/><br/>
        <div>百度：{{ websites.baidu }}
            <div>谷歌：{{ websites.google }}
                <div>百度：{{ websites['baidu'] }}
            <div>谷歌：{{ websites['google'] }}

</body>
</html>

forxh.html页面代码：

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/html">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<br>
    <h2>字典循环</h2>
    {% for k,v in user.items() %}
        <p>{{ k }}:{{ v }}</p>
    {% endfor %}
    <hr></br>
    <h2>列表循环，if判断</h2>
    {% for website in websites %}
        <o>{{ website }}</o>
        {% if website == 'baidu.com' %}
            <p>这个是百度</p>
        {% elif website == 'google.com' %}
            <p>这个是谷歌</p>
        {% endif %}
    {% endfor %}
    <hr></br>
    <h2>列表中放字典的循环</h2>
    <table>
        <thead>
            <th>书名</th>
            <th>作者</th>
            <th>价格</th>
        </thead>
        <tbody>
            {% for book in books %}
                <tr>
                    <td>{{ book.name }}</td>
                    <td>{{ book.author }}</td>
                     <td>{{ book.price }}</td>
                </tr>
            {% endfor %}
        </tbody>
    </table>
    <hr></br>
    过滤器（名字霸气，作用鸡肋）
    </br>
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;avatar|default('xxx')
    </br>
    1. |default() 过滤器：变量为空，指定默认值
    </br>
    2. |length() 过滤器：列表、字符串、字典长度
</body>
</html>

beijicheng.tml页面代码：（被继承的页面）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>{% block title %}被继承标题{% endblock %}</title>
    {% block head %}
    {% endblock %}
</head>
    <style>
        .native{
            background-color: black;
            color: beige;
            width: 100%;
            height: 50px;
            text-align: center;
            margin-top: 20px;
        }
    </style>
<body>
    <div class="native">模板继承</div>
    <h1>这个模板被jicheng.html页面模板继承整个模板</h1>
    {# 通过 block 标签可以在jicheng.html自定义子模板的内容 #}
    {% block main %}
    {% endblock %}
</body>
</html>

jicheng.html页面代码：（继承页面）

{% extends 'beijicheng.html' %}
{% block title%}
    已经改变标题
{% endblock %}

{% block head %}
    <style>
        .neirong{
            text-align: center;
            width: 100%;
            height: 300px;
            background-color: aqua;
            color: crimson;
            font-size: 30px
        }
    </style>
    <link>
    <script>

    </script>
{% endblock %}

{% block main %}
    <div class="neirong">子模板（jicheng.html）通过block标签与父模板（beijicheng.html）连通，可在子模板中自定义内容</div>
{% endblock %}

app.py文件冲python代码：

from flask import Flask,url_for,redirect,render_template

# 初始化一个flask对象，传一个__name__的参数
app = Flask(__name__)

# @app.route是一个装饰器
# @ 开头，在函数上面，说明是装饰器
# 这个装饰器的作用，是做一个url与视图函数的映射
@app.route('/')
def hello_world():
 #   print(url_for('my_list'))
  #  print(url_for('article',id = 'abc'))
    return '我是毛毛'

@app.route('/list/')
def my_list():
    return list

# url 传参
@app.route('/article/<id>/')
def article(id):
    return u'您请求的id是: %s'% id

# 引入重定向redirect，
@app.route('/index/')
def index():
    login_url = url_for('login')
    # 开启重定向，条状login路径，并显示其内容
    return redirect(login_url)
    return u'这是首页'
@app.route('/login/')
def login():
    return u'这是登录页面'

# 页面跳转，创建页面html.html
# 传递单个参数
@app.route('/html/')
def html():
    return render_template('html.html',username = u'毛毛',gender = u'男',age = u'28')
# 传递字典参数
@app.route('/html1/')
def html1():
    context = {
        'username': u'毛毛',
        'gender': u'男',
        'age' :u'28'
    }
    return render_template('html.html',**context)
# 对象属性参数
@app.route('/html2/')
def html2():
    class Person(object):
        name = u'小毛哥'
        age = 18
    p = Person()

    context = {
        'username': u'毛毛',
        'gender': u'男',
        'age' :u'28',
        'person':p,
        'websites':{
            'baidu':'www.baidu.com',
            'google':'www.google.com'
        }
    }
    return render_template('html2.html',**context)

# for遍历
@app.route('/forxh/')
def forxh():
    user = {
        'username': u'毛毛',
        'gender': u'男',
        'age' :u'28'
    }
    websites = ['baidu.com','google.com']
    books = [
        {
            'name':u'西游记',
            'author':u'吴承恩',
            'price':100
        },
        {
            'name': u'红楼梦',
            'author': u'曹雪芹',
            'price': 200
        },
        {
            'name': u'三个演义',
            'author': u'罗贯中',
            'price': 300
        }
    ]
    for k,v in user.items():
        print(k)
        print(v)
    return render_template('forxh.html',user = user,websites = websites,books = books)

# jicheng.html 页面没有内容，所显示内容继承于beijicehng.html
@app.route('/beijicheng/')
def beijicheng():
    return render_template('beijicheng.html')
@app.route('/jicheng/')
def jicheng():
    return render_template('jicheng.html')
# 类继承
class Person(object):
    name = '毛毛'
    age =18
class Student(Person):
    def stuty(self):
        pass

# 主函数入口
if __name__ == '__main__':
    app.run(debug=True)

童心（成都）

关注

1
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
flask框架之页面控制（内容有点多）

使用pycharm开发工具，创建flask项目：运行调试创建项目是否成功，看到浏览器有小火箭在飞就表示创建成功：创建一下目录结构的html以及python文件：html.html页面代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8">...
复制链接

扫一扫