【建置環境說明】
開發環境是win11,python是3.10.7版本,編碼的工具是Visual Studio Code(簡稱vscode)
【本篇說明】
為了讓前端網頁(HTML)能和後端伺服器(server)互動,之前這篇【第2步:使用 Flask建立後端server】已完成 Flask建立web服務,本篇主要是提供簡單版HTML程式碼(僅供參考,請讀者自行修改延伸),並執行本機測試。
第三步:建立前端HTML網頁
輸入以下HTML程式碼:(這邊使用vscode點選"新增檔案",並取名為firstscreen.html)<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>第一個網頁</title>
</head>
<body>
<h3>網頁的主畫面</h3>
歡迎來到我的第一個網頁
</body>
</html>
第四步:本機測試
在vscode內點選"執行 Python 檔案"或是在終端機輸入以下:pyhton 你的檔名.py,可參考-22【python kivy app 開發】使用vscode編輯的實用技巧分享(這些你一定要知道!)

▲說明:出現以上就代表本機伺服器運行中,會產出一個本機固定的網址
接著開啟瀏覽器,並輸入網址:http://127.0.0.1:5000

就會進入到上面所編輯的HTML網頁

如果要中斷本機伺服器運行,就在終端機按照指示: Press CTRL+C to quit
【本篇小結】
完成本機測試後,接下來就進入部署雲端的步驟,這部分也會花比較多篇幅分享,也是這系列重點所在。
【本篇結束】
在自學路上難免遇到困難,只要堅持到底,相信就會有所成果,期勉大家一同努力。