出於對網站製作以及前端的喜愛，恰好又懂一點python的知識，想想python會的wed框架不過就兩個，django和flask，秉承簡單好上手的原則我選擇了flask這個小框架，非常適合建站新人練手。
這次的主要目的是建一個可以在局域網訪問的小網站，內容比較簡單。只要你鏈接了同一個wifi，你就可以通過ip+端口的形式進行訪問，可以滿足多臺設備訪問。
flask框架目錄
網上關於flask的安裝教程比較多，我就不介紹了，直接使用pycharm+pythob3.6操作一波
flask最簡單的框架，你需要在工程目錄Flaskr下包含一個app目錄，我取名叫flaskr，在flaskr目錄下面主要包含兩個子目錄，一個是static，他裏面一般放一些靜態文件，例如圖片，音頻，txt之類的資源；一個是templates目錄，裏面存放了html文件，html模板之類的，我的目錄裏還建立的Admin和Home，主要是爲了以後拓展使用，現在可以忽略，然後flasker
.py文件，這個是程序的入口文件，它最好和templates在同一級目錄下面，方便查找html模板，最後的models.py主要是和數據庫建立鏈接，也屬於之後的拓展，現在先完成靜態網站，不要考慮數據庫的情況。
flaskr.py程序核心入口
其中主要分爲4部分，分別是導入庫，初始化，頁面路由，程序執行
1.在導入庫的部分，儘量一次性將之後會用到的庫放在一起，一起導入，看起來也舒服。
2.接着是初始化，這部分很重要，獲取一個app實例爲之後運行做準備
3.然後是頁面路由，這就是你網站的結構了，頁面路由的實現是靠python裝飾器實現的綁定，十分簡潔優雅，app.route()中的參數包括了，路徑字符串，‘/’就代表了根目錄；methods請求屬性列表，代表了網站可以接收get和post兩個請求，關於get和post兩者的區別，我之前的博客也提到過。最後的返回值是一個html模板，flask會首先在與入口文件的同級目錄下的templates文件中的html文件進行匹配，必須是同級哦，至於模板的封裝運用到了一個強大的函數render_template()
4.最後就是程序執行，程序執行放在if判斷中，if判斷下的程序當該文件作爲外部文件導入到其他python文件中時，其中的程序不會運行，而直接運行該py文件就沒有這個障礙。其中的app.run()是一個死循環用來充當服務器，debug屬性設爲True，就可以在網頁上打印錯誤信息，host設置爲‘0.0.0.0’，程序會自動匹配主機的可用網絡ip。關於最後一步也十分重要，具體實現我之前也提到過，如果遇到問題，點擊下方鏈接查看解決方法。
# all the imports i will use
import os
import sqlite3
from flask import Flask, request, session, g, redirect, url_for, abort, \
render_template, flash
from flask_script import Manager
# 初始化
app = Flask(__name__)
manager = Manager(app)
# 頁面路由,優雅
@app.route('/',methods=['Get','Post'])
def hello():
return render_template('home/index.html')
@app.route('/user/',methods=['Get','Post'])
def first():
return render_template('home/word_up.html')
# 程序執行
if __name__ == "__main__":
app.run(debug='True',host="0.0.0.0")
最後
最後你只需要將自己寫的html文件放入tamplates目錄下的相應位置，相應的css文件放在static目錄下，就可以局域網訪問這些頁面了。
附上我的根頁面，index.html
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>標籤對話框點擊確認動畫特效</title>
<link rel="stylesheet" href="../static/box.css">
</head>
<body>
<div class="bkg">
<div class="content">
<div>
心在這裏
</div>
<div>
詩卻在遠方
</div>
<a href="/user/">確定</a>
</div>
</div>
</body>
</html>
index的css
*{
margin: 0;
padding: 0;
}
body{
text-align: center;
width: 100%;
background: rgb(52,102,153,0.2);
}
.bkg{
position: relative;
background-color: rgb(153,102,255,0.2);
width: 360px;
height: 400px;
margin:200px auto;
border-radius: 6%;
box-shadow: 5px 5px 10px 1px rgb(153,102,255,0.3);
transition: 0.4s;
}
.bkg:hover{
width: 500px;
}
.content{
/* 子絕父相 */
position: absolute;
background-color: rgba(153,102,255,0.1);
left: 0;
top: 0;
right: 0;
bottom: 0;
margin:100px auto;
width: 200px;
border-radius: 8%;
text-align: center;
padding: 30px 20px;
font-family: "arial rounded mt bold";
font-size: 30px;
box-shadow: 5px 5px 10px 0.2px rgb(33,66,99,0.2);
}
a{
font-size: 20px;
width: 100px;
margin: auto;
display: block;
margin-top: 50px;
text-decoration: none;
color: rgb(104,100,155,0.9);
font-weight: 900;
border: 3px solid rgb(104,100,155,0.7);
border-radius: 15%;
}
a:hover{
display: block;
margin-top: 50px;
text-decoration: none;
color: rgb(51,0,102,0.9);
font-weight: 900;
border: 3px solid rgb(51,0,102,0.9);
border-radius: 15%;
background: rgb(51,0,102,0.4);
transform: scale(1.1,1.1);
}
至於word_up.html我之前的博客依然有源碼，附上鍊接：
flask框架我還在學習中，日後會做一些，登陸表單驗證，以及一些動態效果。