Day 16 Flask 超連結與圖片(偏前端)

2022 iThome 鐵人賽

DAY 16

Modern Web

資工琪琪的後端學習筆記(python&flask)系列第 16 篇

14th鐵人賽

jddj42840

團隊imac_Big3

2022-10-01 14:20:32

2497 瀏覽

分享至

HTML網頁基礎

HTML

網頁前端的最基礎部分，下方為HTML最基礎的程式碼架構

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>這個是標題</title>
</head>
<body>
    這是網頁主畫面的內容
</body>
</html>

HTML 超連結、圖片

前後端互動 : 超連結

可以讓使用者容易上手的互動介面

基礎仍是網址的概念，但提供良好的互動介面，讓一般使用者能輕易上手
簡單易用
<a herf='網址'>可點擊的內容</a>

前後端互動 : 連結

在網頁中顯示圖片

利用以下HTML顯示圖片
<img src="圖片網址">

練習:建立基本的網站內容

基礎教學:第一個網頁

我們可以利用template樣板引擎試試看

教程: 點擊這裡

我們先在專案目錄底下創一個名叫templates目錄，並在底下創建一個index.html(名字自己取)

名字要對應到python那邊的檔名

以下是python 以及我第一個網頁的 code

# Flask網站前後端互動 09 - 超連結與圖片
# 載入Flask、Request、render_template
from flask import Flask, request, render_template

# 建立 Application 物件,設定靜態檔案的路徑處理
app = Flask(__name__, static_folder="public", static_url_path="/")

# 處理路徑 / 的對應函市


@app.route("/")
def index():
    return render_template("index.html")


# 啟動Server
app.run()

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>這是標題</title>
</head>

<body>
    <h3>網頁的主畫面</h3>
</body>

</html>

成果:

之後我們可以增加一些其他功能例如超連結、圖片

在html上增加一個超連結

在HTML檔案上增加 <a herf='網址'>可點擊的內容</a>，記得每次html編輯完先存檔

成果:

在自己的網站新增其他自己的網頁

利用<a herf='自己的網址'>可點擊的內容</a>此語法，跟自己的網站互動
我們在原始的index.html裡增加一個超連結有三種寫法，最後的呈現都是一樣的

再來在python檔裡增加一個page路徑

ㄟ!?template阿~那我們還要在templates裡再增加一個page.html，code在詳細資料內

   <!DOCTYPE html>
   <html lang="en">

   <head>
       <meta charset="UTF-8">
       <meta http-equiv="X-UA-Compatible" content="IE=edge">
       <meta name="viewport" content="width=device-width, initial-scale=1.0">
       <title>page1</title>

   </head>

   <body>
       <h1>這是分頁</h1>
   </body>

   </html>

我們會看到以下結果:

新增圖片

在html 新增<img src="圖片網址">此語法達成目的

方法
1. 從別人的網站取得
2. 放在google 雲端並將圖片設為公開
3. 利用靜態檔案處理方法解決
  1.在專案目錄底下新增一個public目錄，並放入圖片(名字隨意，要對應到靜態檔案處理的參數)

2.我們在html那邊新增一個圖檔

code 總覽

python -> 0725practice.py


# Flask網站前後端互動 09 - 超連結與圖片
# 載入Flask、Request、render_template
from flask import Flask, request, render_template

# 建立 Application 物件,設定靜態檔案的路徑處理
# http://127.0.0.1:5000/head.png 為圖片路徑
app = Flask(__name__, static_folder="public", static_url_path="/")

# 處理路徑 / 的對應函市


@app.route("/")
def index():
    return render_template("index.html")


@app.route("/page")
def page():
    return render_template("page.html")


# 啟動Server
app.run()

html(1) -> index.html


<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>這是標題</title>
</head>

<body>
    <h3>網頁的主畫面</h3>
    <a href="https://google.com/">連結到google</a>
    <br>
    <h3>第二個網頁 寫法1</h3>
    <a href="http://127.0.0.1:5000/page">連結到自己的分頁</a>
    <br>
    <h3>第二個網頁 寫法2</h3>
    <a href="/page">連結到自己的分頁</a>
    <br>
    <h3>第二個網頁 寫法3</h3>
    <a href="http://localhost:5000/page">連結到自己的分頁</a>
    <br>
    <img src="http://127.0.0.1:5000/head.png">
</body>

</html>

html(2) -> page.html


<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>page1</title>

</head>

<body>
    <h1>這是分頁</h1>
</body>

</html>

專案目錄結構: