Day 3: 從爬蟲到架站-建置網站

第 12 屆 iThome 鐵人賽

DAY 1

自我挑戰組

從爬蟲到架站系列第 4 篇

12th鐵人賽

jeff3071

2020-09-04 14:29:50

1759 瀏覽

分享至

Flask

首先用pip安裝Flask，接者創建一個app.py。

app.py

import flask
from flask import render_template, url_for, redirect, request, jsonify, Response #之後會用到的

app = flask.Flask(__name__)
app.config["DEBUG"] = True

@app.route('/', methods=['GET'])
def index():
    return render_template('index.html')
if __name__ == '__main__':
    app.run()

接著下python app.py就可以執行了，但是這邊還沒創建Html檔，所以會報錯，因為使用了render_template，需要再創建一個templates資料夾，並在資料夾內創建index.html

回到網頁，就會看到全白的網站了。

Html

未來可能會用到許多頁面，而這些頁面通常會共用一個header，所以我這邊將它獨立為一個header.html。

header.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://cdn.bootcss.com/jquery/3.0.0/jquery.min.js"></script>
    <title>Document</title>
</head>
    <body>
        <nav class="navbar navbar-expand-lg navbar-light bg-light">
            <a class="navbar-brand" href="/">中職球員數據</a>
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup"
                aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarNavAltMarkup">
                <div class="navbar-nav">
                    <a class="nav-item nav-link" href="/">首頁 <span class="sr-only">(current)</span></a>
                </div>
            </div>
        </nav>
    </body>
</html>

這邊我使用了bootstrap來進行排版

回到index.html，因為Flask支援jinja 2，讓我能直接引入header。官方文件

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>數據可視化</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"
        integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
    <script src="https://cdn.bootcss.com/jquery/3.0.0/jquery.min.js"></script>
    <script type="text/javascript" src="https://assets.pyecharts.org/assets/echarts.min.js"></script>
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
        integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous">
    </script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"
        integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous">
    </script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
        integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous">
    </script>
</head>
<body>
    <div class="container">
        {% include 'header.html' %}
    </div>
<body>
<html>