# 使用 Flask 框架製作網站─公告欄網頁 ###### tags: `Python` `flask` `Coding` ## 前情提要 在[上一篇文章](https://finrodchen.net/2020/06/05/python-flask/)中，我們已經運用 Flask 框架完成了基礎網站結構的架設，接下來我們要幫這個網站加入公告欄的功能。 ## 網站架構 ![](https://i.imgur.com/8jq0ii3.png) 這個公告欄網站分成三個部分，分別是網頁、網站程式以及資料庫，如同圖中的架構，網頁部分呈現公告欄的外觀以及公告內容；網站程式則負責將我們新增/更新/刪除的內容傳遞給資料庫，資料庫保存資料之後再顯示於網頁上。 這篇文章將先從網頁建立開始，筆記在 Flask 框架中如何將網頁與網站程式整合，下一篇文章則會完成程式與資料庫的建立及測試。 ## 基底網頁(base.html) 在 Flask 框架中提供了區塊的設計`{% 我是區塊 %}`，我們可以先建立一個基底網頁base.html，預先設定網站中每一個都相同的部分，例如`<meta>`、`<sheetstyle>`等的屬性，接著將在base.html文件中圈出特定的區塊，這些區塊在其他的網頁中會變成可變動的內容區域。簡單來說，就是整個網站的網頁都是依照基底網頁的設計產生，而在基底網頁中圈出的區塊位置，便是各個網站頁面能自訂內容的。不囉嗦現在就開始製作基底網頁吧！ 首先為了符合 Flask 框架的架構，我們要在網站程式app.py的目錄內新增一個名稱為"templates"的資料夾，並在其中建立base.html網頁。 將base.html以編輯器打開，先給予它網頁的基本架構： ```htmlmixed= <!doctype html> <html lang="zh-Hant-TW"> <!-- 網頁語言 --> <head> <!-- 網頁標頭 --> <meta charset="utf-8"> <!-- 網頁字元編碼 --> <meta name="description" content="以Flask框架製作的簡易公告欄"> <meta name="author" content="finrodchen.net"> <!-- 網頁基本資料 --> </head> <body> <!-- 網頁內容 --> </body> </html> ``` 接著我們在head和body標籤中額外加入 Flask 框架的區塊： ```htmlmixed= <head> {% block head %} <!-- head區塊開始 --> {% endblock %} <!-- head區塊結束 --> </head> <body> {% block body %} <!-- body區塊開始 --> {% endblock %} <!-- body區塊結束 --> </body> ``` 這樣就完成base網頁的設定了。 ## 公布欄首頁(index.html) 由於基底網頁已經設定好了，因此這個網站中的其他網頁的結構就會變得非常簡單，就像是這樣：(對，就是這麼簡單) ```htmlmixed= {% extends 'base.html' %} <!-- 指定參照的基底網頁 --> {% block head %} <!-- head區塊開始 --> {% endblock %} <!-- head區塊結束 --> {% block body %} <!-- body區塊開始 --> {% endblock %} <!-- body區塊結束 --> ``` 接下來我們先在head區塊中放入首頁的標題，這個標題會出現在瀏覽器的分頁標籤上。 ```htmlmixed= {% block head %} <!-- head區塊開始 --> <title>簡易公告欄 by Finrodchen</title> {% endblock %} <!-- head區塊結束 --> ``` 接著我們要在body區塊中建立公告欄的內容，整個網頁中分為兩個區塊： - 公告欄本體(包含公告事項、說明、公告人、建立時間、刪除/更新功能) - 發布公告的表單(讓使用者能填寫上述內容的表單) 首先我們先寫上公告欄網頁的標題，接著再建立有5個欄位的表格，容納公告欄中的資訊，使用HTML語法中的`<table>`標籤。 ```htmlmixed= <h1 style="text-align: center;"> 重要事項公告欄 <!-- h1標題`,設定為置中--> </h1> <table border='1' align='center'> <!-- 設定表格框線及置中 --> <tr> <!-- 表格表頭 --> <th>公告事項</th> <th>說明</th> <th>公告人</th> <th>建立時間</th> <th>操作</th> </tr> <tr> <!-- 這裡我先填入內容，下一篇文章導入資料庫 的時候會改為讀取資料庫中的內容。 --> <td>公告001</td> <td>這是公告001的說明</td> <td>小明</td> <td>2020/06/08</td> <td> 刪除 <br> 更新 </td> </tr> </table> ``` 接下來我們再加入發布公告用的表單，使用的是`<form>`標籤： ```htmlmixed= <br> <hr> <!-- 為了美觀加入分行和水平線區隔公告欄與表單 --> <br> <form align='center'> <!-- 分別建立3個要輸入的項目 在input標籤中定義輸入屬性為文字 給予欄位名稱及ID標記(用於對應資料庫內容) 最後在placeholder屬性中提示使用者應填寫的資訊 --> <label for="title">公告事項</label><br> <input type="text" name="title" id="title" placeholder="請輸入公告事項"><br><br> <label for="content">公告說明</label><br> <input type="text" name="content" id="content" placeholder="請輸入公告說明"><br><br> <label for="person">公告人</label><br> <input type="text" name="person" id="person" placeholder="請輸入公告發佈人"><br><br> <input type="submit" value="新增公告事項"> <!-- 因為目前尚未連結資料庫，所以這個表單還無法收集資料 --> </form> ``` 到這邊公告欄的首頁就完成了，現階段可以看到網頁的外觀已經很好的呈現了，但公告欄和表單在連上資料庫前還無法工作。最後我們還要增加一個更新公告用的網頁，其中也包含了一個和首頁類似的表單，用於更新現有的公告事項。 ## 更新網頁(update.html) 更新公告用的網頁架構相對簡單，僅需要一個表單更新現有的資訊即可，但由於目前的網頁尚未與資料庫連結，因此這個更新網頁也是先以完成架構為目標。 首先先代入基底網頁(base.html)的基本架構，並加上網站標題及網頁中的標題： ```htmlmixed= {% extends 'base.html' %} <!-- 指定參照的基底網頁 --> {% block head %} <!-- head區塊開始 --> <title>公告更新</title> <!-- 網頁標題 --> {% endblock %} <!-- head區塊結束 --> {% block body %} <!-- body區塊開始 --> <h2 style="text-align: center;"> 公告更新 <!-- h2標題`,設定為置中--> </h2> {% endblock %} <!-- body區塊結束 --> ``` 接著在標題後加入更新內容所使用的表單： ```htmlmixed= <form align='center'> <!-- 分別建立3個要輸入的項目 在input標籤中定義輸入屬性為文字 給予欄位名稱及ID標記(用於對應資料庫內容) 新增了value屬性，用於顯示預設的內容在表單輸入欄位中 與資料庫連結後value屬性會直接引用特定公告的資料內容 --> <label for="title">公告事項</label><br> <input type="text" name="title" id="title" value="公告001"><br><br> <label for="content">公告說明</label><br> <input type="text" name="content" id="content" value="這是公告001的說明"><br><br> <label for="person">公告人</label><br> <input type="text" name="person" id="person" value="小明"><br><br> <input type="submit" value="更新公告"> <!-- 因為目前尚未連結資料庫，所以這個表單還無法收集資料 --> </form> ``` 到這邊我們就完成這個公告欄網頁所有需要的頁面了，下一篇文章就會修改`app.py`網站後端程式，並建立公告欄對應的資料庫，屆時會再回頭修正`index.html`和`update.html`的部分欄位，整個網站就完成了！ ## 完整程式碼 - base.html ```htmlmixed= <!doctype html> <html lang="zh-Hant-TW"> <!-- 網頁語言 --> <head> <!-- 網頁標頭 --> <meta charset="utf-8"> <!-- 網頁字元編碼 --> <meta name="description" content="以Flask框架製作的簡易公告欄"> <meta name="author" content="finrodchen.net"> <!-- 網頁基本資料 --> {% block head %} <!-- head區塊開始 --> {% endblock %} <!-- head區塊結束 --> </head> <body> <!-- 網頁內容 --> {% block body %} <!-- body區塊開始 --> {% endblock %} <!-- body區塊結束 --> </body> </html ``` - index.html ```htmlmixed= {% extends 'base.html' %} <!-- 指定參照的基底網頁 --> {% block head %} <!-- head區塊開始 --> <title>簡易公佈欄 by Finrodchen</title> {% endblock %} <!-- head區塊結束 --> {% block body %} <!-- body區塊開始 --> <h1 style="text-align: center;"> 重要事項公告欄 <!-- h1標題 --> </h1> <table border='1' align='center'> <tr> <!-- 表格表頭 --> <th>公告事項</th> <th>說明</th> <th>公告人</th> <th>建立時間</th> <th>操作</th> </tr> <tr> <!-- 這裡我先填入內容，下一篇文章導入資料庫 的時候會改為讀取資料庫中的內容。 --> <td>公告001</td> <td>這是公告001的說明</td> <td>小明</td> <td>2020/06/08</td> <td> 刪除 <br> 更新 </td> </tr> </table> <br> <hr> <br> <form align='center'> <!-- 分別建立3個要輸入的項目 在input標籤中定義輸入屬性為文字 給予欄位名稱及ID標記(用於對應資料庫內容) 最後在placeholder屬性中提示使用者應填寫的資訊 --> <label for="title">公告事項</label><br> <input type="text" name="title" id="title" placeholder="請輸入公告事項"><br><br> <label for="content">公告說明</label><br> <input type="text" name="content" id="content" placeholder="請輸入公告說明"><br><br> <label for="person">公告人</label><br> <input type="text" name="person" id="person" placeholder="請輸入公告發佈人"><br><br> <input type="submit" value="新增公告事項"> <!-- 因為目前尚未連結資料庫，所以這個表單還無法收集資料 --> </form> {% endblock %} <!-- body區塊結束 --> ``` - update.html ```htmlmixed= {% extends 'base.html' %} <!-- 指定參照的基底網頁 --> {% block head %} <!-- head區塊開始 --> <title>公告更新</title> <!-- 網頁標題 --> {% endblock %} <!-- head區塊結束 --> {% block body %} <!-- body區塊開始 --> <h2 style="text-align: center;"> 公告更新 <!-- h2標題`,設定為置中--> </h2> <form align='center'> <!-- 分別建立3個要輸入的項目 在input標籤中定義輸入屬性為文字 給予欄位名稱及ID標記(用於對應資料庫內容) 新增了value屬性，用於顯示預設的內容在表單輸入欄位中 與資料庫連結後value屬性會直接引用特定公告的資料內容 --> <label for="title">公告事項</label><br> <input type="text" name="title" id="title" value="公告001"><br><br> <label for="content">公告說明</label><br> <input type="text" name="content" id="content" value="這是公告001的說明"><br><br> <label for="person">公告人</label><br> <input type="text" name="person" id="person" value="小明"><br><br> <input type="submit" value="更新公告"> <!-- 因為目前尚未連結資料庫，所以這個表單還無法收集資料 --> </form> {% endblock %} <!-- body區塊結束 --> ```
Last changed by  
 
Finrodchen
3481

Read more

台股個股線圖繪製─Python筆記(2)

台股個股線圖 這篇的內容很單純，就是要畫出這個圖啦！！！ 在前一篇文章中，我們已經能使用twstock模組抓取特定個股的交易歷史，並且使用pandas模組把清單(list)加上表頭並轉換成Data Frame資料表，接著再將資料表的內容儲存為.csv檔案。接下來只要我們定期更新個股股價，便能開始研究價格走勢了。 在這張圖中我們可以看到幾個主要項目： K線 K線又稱作蠟燭線，一根蠟燭表示一天自開盤到收盤的價格表現，其中紅色代表上漲，綠色代表下跌，而中間的蠟燭上下限標記開盤及收盤價格，K線的上下橫線則為當日最高與最低價格。

5/20/2024
股票交易策略回測─Python筆記

前情提要 之前我們建立了自動抓取股票歷史交易數據的程式，藉由這個程式我們能自由擷取想研究的股票的歷史資料。而這些資料除了可以用來繪製線圖以外，最常被使用的就是「交易策略回測」了。利用過往的成交資料，套入自訂的交易策略並模擬交易，由程式中設定的條件交由電腦幫我們下單，藉這樣的回測可以驗證你的交易策略是否有效。 首先我們先複習一下抓取歷史股價資料的程式，原先我使用的是twstock模組，但考慮到抓取美股資料的需求，因此將資料來源換成yfinance也就是從Yahoo財經抓取資料，並存成CSV，供接下來的程式使用。 import yfinance as yf import pandas as pd from pandas_datareader import data from datetime import datetime

5/31/2022
台股資料爬蟲─Python筆記(1)

Python爬蟲基本知識 Python憑藉簡單易懂的程式語言寫法及廣大開發者的模組支援，可以非常容易的達到在網頁上抓取公開內容，再整理成特定資料型態的需求。開發一個Python爬蟲，我們要具備以下能力： 對Python語言的基本理解：了解模組的引用，資料的整理及保存(或進一步的使用資料) 對資料的基本理解：了解爬蟲收集而來的資料結構，並能篩選出需要的內容 努力的尋找解答：自學過程中常遇到各種Bug，多半都可以靠Google大神幫忙，但要能盡量評估自己遇到的狀況，再耐心的尋找合適的解答 要準備的東西 Python開發環境(我的版本是3.8.2)

4/17/2022
Neevo - 用零碎時間賺一杯咖啡

簡介Neevo Neevo是Defined Crowd這間公司旗下的一個產品，Defined Crowd在做的事情是提供各大企業AI訓練的服務，協助改善AI在語音辨識、文字轉語音以及圖像物體辨識的準確度。 為了完成這些AI訓練，過程中需要不停的加入人為的修正，讓AI往更接近人類的表達或辨識方向前進，以此為基礎Defined Crowd開發了Neevo這個產品，運用大眾的力量協助訓練AI，對上述的AI判斷做出評價，回饋到系統中進一步改善系統，而協助訓練的我們會收到一點報酬(就像標題說的XDDD)。 如何註冊 在Neevo的首頁點選「Join Today」的按鈕，可以選擇用電子郵件或是Facebook註冊。

5/28/2021
Read more from Finrodchen
Published on HackMD