【Flask】網頁設計教學(三)：資料由後端送至前端－恩哥Python量化教室-零基礎也能學會Python

【Flask】網頁設計教學(三)：資料由後端送至前端

一、前言

【Flask】網頁設計教學(一)：快速搭起後端伺服器

【Flask】網頁設計教學(二)：配置文件config想知道config是什麼就先看過來

上一篇說到配置文件config管理配置的部分，這篇來講解flask基礎的把資料由後端送至前端的其中一種方法，沒錯方法太多這邊講最簡單的那種。

之後會介紹更多常用及常出現的方法。

二、Flask後端

後端的部分最簡單，李資料處理好之後放在render_template裡面就可以了，這個範例中我定義了name及兩個tuple分別是columns及data。

為了防止錯亂，直接在render_template中name就用name傳出去，columns用columns等。

# server.py
from flask import Flask
from flask import render_template, jsonify, request
from werkzeug.wrappers import Response
import config # 配置文件
import json
from jinja2 import Markup
import datetime

# =============================================================================
# 配置及定義
# =============================================================================
app = Flask(__name__)
app.config.from_object(config)


# =============================================================================
# 基本
# =============================================================================

@app.route("/home", methods=['GET'])
def home():
    name = '恩哥'
    columns = ('a', 'b', 'c', 'd')
    data = (7, 8, 9, 10)
    return render_template("home.html", 
                           name=name,
                           columns=columns,
                           data=data)

if __name__ == '__main__':
    app.run(host='0.0.0.0', port='5000')

# config.py
# 配置文件
DEBUG = True
JSON_AS_ASCII = False

三、html前端

前端的部分很簡單，剛剛在flask後端裡面送過來的變數用兩個大括弧包起來就可以調用了，例如剛剛的name在這邊使用就用{{name}}，

剛剛的tuple在這邊用{% for 自訂變數名稱 in 剛剛送進來的變數%}結束時也要{% endfor %}，而後一樣用{{自訂變數名稱}}就可以使用了，

例如這邊{% for col in columns %}而後我想在全圈範圍都加上<th>{{col}}</th>。

<html>
  <head>
    <title>恩哥Python</title>
  </head>
  <body>
    <h1>恩哥Python</h1>
    <p>歡迎來到恩哥Python 你要的這裡都有</p>
    <div>
      <h2>我的名字 >>> {{name}}</h2>
      <table>
        <tr>
          {% for col in columns %}
          <th>{{col}}</th>
          {% endfor %}
        </tr>
        <tr>
          {% for cell in data %}
          <td>{{cell}}</td>
          {% endfor %}
        </tr>
      </table>
    </div>
  </body>
</html>