Python 初级入狱5(数据可视化)

数据可视化内容介绍:Flask入门,Echarts应用,WordCloud应用

  • 一、关于Flask框架
  • 二、通过实例学习Flask框架
  • 三、动态渲染HTML网页

一、关于Flask框架

1.1 了解框架
FIask作为Web框架,它的作用主要是为了开发Web应用程序,那么我们首先来了解下Web应用程序。Web应用程序(World Wide Web)诞生最初目的,是为了利用互联网交流工作文档。
Python 初级入狱5(数据可视化)_第1张图片一切从客户端发起请求开始。

  • 所有Flask程序都必须创建一个程序实例。
  • 当客户端想要获取资源时,-般会通过浏览器发起HTTP请求。
  • 此时,Web服务器使用一
    种名为WEB服务器网关接口的WSGI (Web Server Gateway Interface)
    协议,把来自客户端的请求都交给Flask程序实例。
  • Flask使用Werkzeug来做路由分发(URL请求和视图函数之间的对应关系)。根据每个URL请求,找到具体的视图函数。
  • 在Flask程序中Jinja2,路由一 般是通过程序实例的装饰器实现。通过调用视图函数,获取到数据后,把数据传入HTML模板文件中,模板引擎负责渲染HTTP响应数据,然后由Flask返回响应数据给浏览器,最后浏览器显示返回的结果。

二、通过实例学习Flask框架

  • 创建Flask项目
    Python 初级入狱5(数据可视化)_第2张图片
    Python 初级入狱5(数据可视化)_第3张图片

  • 点击app.py文件运行Flask方法
    Python 初级入狱5(数据可视化)_第4张图片
    Python 初级入狱5(数据可视化)_第5张图片

  • 开启Debug模式(作用:可以不需要重启服务修改网页内容)
    Python 初级入狱5(数据可视化)_第6张图片

  • Werkzeug:获取API内容参数(通过不同类型的参数匹配不同函数

 #通过访问路劲:获取用户的字符串参数
@app.route('/user/')
def wordl_name(name):
    return '''
        Hello World!
        你好!%s 先生/女士
    '''%name
#通过访问路劲:获取用户的整形参数
@app.route('/user/')
def wordl_name2(id):
    return '''
        Hello World!
        你好!%d 欢迎光临
    '''%id
  • Jinja2:渲染HTML模板(通过render_template返回给用户渲染后的网页文件
 	
#导入render_template包(Jinja2的工具包)
from flask import Flask,render_template

#通过render_template返回给用户渲染后的网页文件
@app.route('/')
def index():
    return render_template("index.html")
==在项目Template文件下创建.html文件==

Python 初级入狱5(数据可视化)_第7张图片

三、动态渲染HTML网页

  1. 通过render_template把动态变量发送给客户端

    #通过render_template返回给用户渲染后的网页文件
    @app.route('/')
    def index():
        time = datetime.date.today()         #普通变量
        names = ["小吴","小明","小俊","小花"]   #列表变量
        task = {
           "事情":"打扫家务","时间":"3小时","实际":"2小时","多做":"整理衣物"}  #字典变量
        return render_template("index.html",var = time,list = names,task = task)
    
  2. 网页渲染从服务器端请求参数

     <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>吴之家</title>
    </head>
    <body>
    &nbsp;&nbsp;&nbsp;现在的时间是{
           {
            var }}<br/>
    今天的值班人员是:   <!-- 使用大阔号与百分号括起来的是控制结构·还有if -->
    {
           % for run in list %}
        <li>{
           {
            run }}</li>
    {
           % endfor %}
    任务:<br/>        <!-- 了解一下如何在页面打印表格·以及如何迭代 -->
        <table border="1">
            {
           % for key,value in task.items() %}  <!-- items把一个对象迭代成[(key:value),( ),( )]方式 -->
                <tr>
                    <td>{
           {
            key }}</td>
                    <td>{
           {
            value }}</td>
                </tr>
            {
           % endfor %}
        </table>
    </body>
    </html>
    
  3. 客户端通过表单提交给服务端发送参数

 #导入Flask包
from flask import Flask,render_template,request
import datetime

#表单提交
@app.route('/test/register')
def register():
    return render_template("register.html")

#接收表单提交的路由·需要指定methods请求方式
@app.route('/result',methods = ["POST","GET"])
def result():
    if request.method == "POST":    #通过request判断是否是post请求内容
        result = request.form       #获取请求form表单内容
        return render_template("result.html",result = result)

#Flask应用程序实例的run方法启动WEB服务器
if __name__ == '__main__':
    app.run()

register.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>register</title>
</head>
<body>
<form action="http://localhost:5000/result" method="post">
    <p>姓名:<input type="text" name="name"></p>
    <p>年龄:<input type="text" name="age"></p>
    <p>性别:<input type="text" name="sex"></p>
    <p>地址:<input type="text" name="adds"></p>
     <p><input type="submit" value="提交"></p>
</form>

</body>
</html>

result.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>result</title>
</head>
<body>
{
     % for key,value in result.items() %}
    <li>{
     {
      key }}:{
     {
      value }}</li>
{
     % endfor %}
</body>
</html>

Python 初级入狱5(数据可视化)_第8张图片
提交表单信息发送给服务端
Python 初级入狱5(数据可视化)_第9张图片
服务端处理响应结果返回对应网页以及参数
Python 初级入狱5(数据可视化)_第10张图片

你可能感兴趣的:(Python,python,java,web,flask,sqlite)