python制作前端页面模块--Flask模块

什么是Flask?

Flask是一个web框架,也就是说web为你提供工具,库和技术来允许你构建一个web应用程序。这个web应用程序可以是一些web页面、博客、wiki、基于web的日历应用或商业网站。
Flask属于微框架这一类别,微框架通常是很小且不依赖外部库的框架。优点是框架很轻量,更新时依赖少,并且专注安全方面的bug,缺点是,你不得不自己做更多的工作,或通过添加插件增加自己的依赖列表。

通过flask来写一个简单的网页

# 1. 导入Flask类
from flask import Flask
app = Flask(__name__)

# 实现主页
@app.route('/')
def index():
    return  "这是网站的主页"

# 基本路由   /login/---访问路径
# 视图函数   告诉app当用户访问/login/这个路径时, 执行login函数的内容, 最终将return的内容返回给客户端;
@app.route('/login/')
def login():
    return  '<h1 style="color:red">login......</h1>'


if __name__ == '__main__':
    # 运行Flask应用
    # 如何设置, 使得服务器主机的浏览器可以访问?  '0.0.0.0'开放所有的IP, 使得可以访问
    # 如何修改端口?  # 可能会报错:Address already in use
    app.run(host='0.0.0.0', port=5000)

在这里插入图片描述

路由与变量规则

# request叫做请求上下文
from flask import  Flask, request
app = Flask(__name__)

# 常用动态路由的规则:
#     1). url路由的一部分可以标记为变量, <变量名>;
#     2):. flask中路由变量可以指定的类型: int, string, float, uuid
@app.route("/<int:id>/comments/")
def comments(id):
    return "这是一个%s评论页面" %(id)

# 字符串
@app.route("/welcome/<string:username>/")
def welcome(username):
    return  "<h1>欢迎用户%s登陆网站</h1>" %(username)


#  重点request:
#  Flask 从客户端收到请求时,要让视图函数能访问一些对象,这样才能处理请求。
#  请求对象就是一个很好的例子,它封装了客户端发送的 HTTP 请求。即request;
# 解决问题:
#       特殊的URL地址: http://www.baidu.com/query?id=123&name=westos
# http://127.0.0.1:5000/login2/?username=westos&password=westos
@app.route('/query')
def query():
    # 获取客户端的用户代理;
    user_agent = request.user_agent
    # 获取客户端的IP地址;
    req_addr = request.remote_addr
    # 获取用户请求url地址里面key值对应的value值;
    id = request.args.get('id')
    name = request.args.get('name')

    # 查看客户端的HTTP请求方式;
    reqMethod = request.method

    # 将字符串信息返回给客户端浏览器/其他, 默认以html方式显示, 如果需要换行, 加html的标签<br/>;
    return  """
    请求的用户代理: %s  <br/>
    请求的客户端Ip: %s  <br/>
    请求的id号: %s   <br/>
    用户名: %s  <br/>
    请求方式: %s
    """ %(user_agent, req_addr, id, name, reqMethod)

if __name__ == '__main__':
    app.run()

在这里插入图片描述

在这里插入图片描述
在这里插入图片描述

http请求方法

GET:
1.获取页面信息
2.可以提交数据信息,但是不安全
例如:当你输入用户名密码时,你的密码会显示在url的后面
http://127.0.0.1:5000/login2/?username=westos&password=westos
POST:
提交服务器需要的请求信息,有利于数据的安全性;

自定义错误页面

1). 为什么要自定义错误页面?
如果你在浏览器的地址栏中输入了不可用的路由,那么会显示一个状态码为 404 的错误页
面。现在这个错误页面太简陋、平庸.

2). 如何自定义错误页面?
像常规路由一样,Flask 允许程序使用基于模板的自定义错误页面。
最常见的错误代码有两个:
- 404,客户端请求未知页面或路由时显示;
- 500,有未处理的异常时显示。

登录验证之http请求方法GET实现案例

from flask import Flask, render_template, request, redirect

app = Flask(__name__)
@app.route('/')
def index():
    return  "<h1>主页</h1>"

@app.route('/login/')
def login():
    # 一般情况, 不会直接把html文件内容直接返回;
    # 而是将html文件保存到当前的templates目录中;
    #       1). 通过render_template方法调用;
    #       2). 默认情况下,Flask 在程序文件夹中的 templates 子文件夹中寻找模板。
    return  render_template('login.html')


@app.route('/login2/')
def login2():
    # 获取用户输入的用户名
    username = request.args.get('username', None)
    password = request.args.get('password', None)
    # 逻辑处理, 用来判断用户和密码是否正确;
    if username == 'root' and password == 'redhat':
        # 重定向到指定路由;
        return  redirect('/')
        # return "登录成功"
    else:
        return  "登录失败"

if __name__ == '__main__':
    app.run()

html(login.html)
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>



<h1>用户登录</h1>

<!--将form表单提交的数据传输给/login2/这个路由-->
<form action="/login2/">
    <!--相当于key值, 输入的数据相当于value值;-->
    用户: <input type="text" placeholder="用户名" name="username"><br/>
    密码: <input type="password" placeholder="密码" name="password"><br/>

    <input type="submit"  value="登录">


</form>
</body>
</html>

登录验证值http请求值POST的方法

from flask import  Flask, request, render_template, redirect
app = Flask(__name__)


@app.route('/')
def index():
    return  "这是主页"


# 默认路由只支持get方法, 如何指定接受post方法?
@app.route('/login/', methods=['GET', 'POST'])
def login():
    if request.method == 'POST':
        # 难点: post请求提交的数据如何获取?
        print(request.form)
        username = request.form.get('username', None)

        password = request.form.get('password', None)
        # 如果用户名和密码正确, 跳转到主页;
        if username == 'root' and password == 'redhat':
            return  redirect('/')
        # 如果登录不正确, 则警告红色信息;还是在登录页面;
        else:
            # 可以给html传递变量
            return  render_template('login_post.html',
                                    errMessages="用户名或者密码错误"
                                    )
    else:
        return  render_template('login_post.html')


@app.errorhandler(404)
def page_not_found(e):
    return  render_template("404.html"), 404

@app.errorhandler(500)
def internal_server_error(e):
    return  render_template("500.html"), 500
if __name__ == '__main__':
    app.run()
html(login_post.html)
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<form action="/login/" method="post">
    <input type="text" placeholder="用户名" name="username"><br/>
    <input type="password" placeholder="密码" name="password"><br/>
    <input type="submit" value="登录">

    <span style='color:red'>{{errMessages}}</span>
</form>

</body>
</html>
html(404.html):
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>




<h1 style="color: red">404</h1>
</body>
</html>
html(500.html)
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>



<h1 style="color: green"> 服务器正忙, 请稍后再试</h1>
</body>
</html>

什么是模板引擎?

在搭建网站的过程中,为了网站风格保持一致,很多代码都会大量的重复多次去写,如果需要更新改变风格,那么更新的量是巨大的,过分耗费人力物力。
使用模板你可以设置你的页面的基本布局,并提及哪个元素将发生变化。这种方式可以定义你的网页头部与尾部,并在所有页面都和其保持一致,如果需要改变,只需要改一个地方就行。
使用模板引擎创建/更新/维护你的应用会节约很多的时间。

什么是Jinja2模板引擎

1.python的web开发中,业务逻辑(实质上就是视图函数的内容)和页面逻辑(html文件)分开的,使得代码的可读性增强,代码容易理解和维护;
2.模板渲染:在html文件中,通过动态赋值,将重新翻译好的html文件(模板引擎生效)返回给用户的过程。
3.其他的模板引擎:Mako,Template,Jinja2

语法

1). Jinja2变量显示语法: {{ 变量名 }}
完整的过滤器查看位置: http://jinja.pocoo.org/docs/templates/#builtin-filters
Jinja2变量内置过滤器:
safe 渲染值时不转义
capitalize 把值的首字母转换成大写,其他字母转换成小写
lower 把值转换成小写形式
upper 把值转换成大写形式
title 把值中每个单词的首字母都转换成大写
trim 把值的首尾空格去掉
striptags 渲染之前把值中所有的 HTML 标签都删掉

如何自定义过滤器?

扫描二维码关注公众号,回复: 5411603 查看本文章

2). for循环:

    {% for i in li %}
    {% endfor %}

3). if语句

    {% if user == "westos" %}
    {% elif user == 'hello' %}
    {% else %}
    {% endif%}

4). 宏的操作====相当于函数

  • 如何定义宏?
<!--相当于python里面的定义函数, 后面使用的场景: 分页显示-->
{%  macro render(id) %}
    <h1>hello world {{ id }}</h1>
{% endmacro %}
  • 如何调用宏?
<!--调用定义好的宏(类似于python中的函数)-->
{{ render(1) }}
{{ render(2) }}
{{ render(3) }}

5). include包含操作
如何使用: {% include “06_inclued.html”%}

6). 模板的继承: 一般网站的导航栏和底部不会变化, 为了避免重复编写导航栏信息;

  • 如何定义模板?
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>{% block title %}  {% endblock %}</title>
    </head>
    <body>
    <div style="width: 100px; height: 200px" > 这是导航栏</div>
    {% block body %}

    hello

    {% endblock %}

    <div style="width: 100px; height: 200px" >这是底部</div>

    </body>
    </html>

如何继承基模板?

{% extends  '06_base.html'%}

{% block title %}
#继承案例
{% endblock %}
{% block body %}
<span style="color: green">这是最新填的block内容</span>

{% endblock %}

例子

from flask import  Flask, render_template
app = Flask(__name__)

class User(object):
    def __init__(self, name, age):
        self.name = name
        self.age = age

    def __str__(self):
        return  "<User: %s>" %(self.name)

@app.route('/')
def index():
    message = " this is a Message "
    li = ['fentiao', 'fensi', 'fendai']
    info = {
        'name': 'fentiao',
        'age':10
    }
    fentiao = User(name="粉条", age=5)
    tags = "<h1>hello world</h1>"

    return  render_template('06_index.html',
                            message=message,
                            names = li,
                            info=info,
                            fentiao=fentiao,
                            tags = tags
                         )



@app.route('/users/')
def users():
    usersinfo = [('user%s' %(i), "password%s" %(i)) for i in range(100)]
    return  render_template('06_users.html',
                            usersinfo = usersinfo
                            )



@app.route("/macro/")
def macro():
    return  render_template('06_macro.html')




@app.route('/extends/')
def extends():
    return  render_template('06_use_block.html')
# **********************自定义过滤器******************************
# 定义一个函数
def format_data(s):
    return  "这是一个过滤器:" + s
# 将该函数添加到默认过滤器中;
app.add_template_filter(format_data, 'fmt')


if __name__ == '__main__':
    app.run()


html(index.html)
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<p>{{ message  | fmt}}</p>
<p>{{ message  | lower}}</p>
<p>{{ message  | upper}}</p>
<p>{{ message  | title}}</p>
<p>{{ message  | capitalize}}</p>
<p>{{ names }}</p>
<p>{{ info }}</p>
<p>{{ fentiao }}</p>
<p>{{ tags | striptags }}</p>
{{ tags  | safe }}

</body>
</html>
html(users.html)
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<table border="1">
    <tr>
        <td>名称</td>
        <td>密码</td>
    </tr>

    {% for item in usersinfo %}
    <tr>
        <td>{{ item.0 }}</td>
        {% if item.1 == 'password2' %}
        <td><span style="color: red">{{ item.1 }}</span></td>
        {% else %}
        <td><span style="color: green">{{ item.1 }}</span></td>
        {% endif %}
    </tr>
    {% endfor %}
</table>


</body>
</html>
html(macro.html)
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<!--相当于python里面的定义函数, 后面使用的场景: 分页显示-->
{%  macro render(id) %}
    <h1>hello world {{ id }}</h1>
{% endmacro %}

<!--调用定义好的宏(类似于python中的函数)-->
{{ render(1) }}
{{ render(2) }}
{{ render(3) }}
{{ render(4) }}
{{ render(5) }}
{{ render(6) }}



{% include  "06_inclued.html"%}



</body>
</html>
html(user_block.html)
{% extends  '06_base.html'%}

{% block title %}
    继承案例
{% endblock %}


{% block body %}
<span style="color: green">这是最新填的block内容</span>

{% endblock %}
html(base.html) 是block继承的父html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>{% block title %}  {% endblock %}</title>
</head>
<body>
<div style="width: 100px; height: 200px" > 这是导航栏</div>
{% block body %}

hello

{% endblock %}

<div style="width: 100px; height: 200px" >这是底部</div>

</body>
</html>

猜你喜欢

转载自blog.csdn.net/qq_37037438/article/details/87971659