第一個Python網頁

建立資料夾架構

root

----static

|---css
|----images

|----js

----templates

css 資料夾

index.css

js

index.js

templates

index.html,jinja2

index.py

from flask import Flask,render_template

# 要載入這二個套件

app = Flask(__name__)

@app.route("/")

def index():

return render_template("index.html,jinja2")

# 這裡要指向首頁檔案的名稱

@app.route("/user")

def user():

return "<h1>user!</h1><p>這是我的第2頁</p>"

@app.route("/product")

def product():

return "<h1>product!</h1><p>這是我的第3頁</p>"

index.html.jinja2

<!DOCTYPE html>

<head>

</head>

<body>

jinja home

<header>Header content</header>

<main>Main content</main>

<aside>Sidebar content</aside>

<footer>Footer content</footer>

</body>

</html>

index.css

body,

html {

margin: 0;

padding: 0;

}

#wrapper {

width: 95%;

max-width: 1200px;

margin: 0 auto;

}

header,

main,

aside,

footer {

padding: 1rem;

}

img {

max-width: 100%;

height: auto;

}

/* Base styles for mobile first */

#wrapper {

width: 95%;

}

/* Tablets and up */

@media (min-width: 768px) {

#wrapper {

width: 90%;

}

main {

float: left;

width: 70%;

}

aside {

float: right;

width: 30%;

}

/* Desktops and up */

@media (min-width: 992px) {

#wrapper {

max-width: 1140px;

}

啟動

先進虛擬環境再執行

flask --app index run --debug

就會出現網頁的網址, 結束按CTRL+C