你的第一個網站
現在的你,看完了我的上一篇部落格,我相信你已經學會了如何安裝軟體包以及如何建立骨架專案目錄。
現在的我,將教你建立你的第一個網站。
安裝的軟體包是lpthw.web,這是你要安裝的"Web框架"。
在命令符中安裝,輸入pip install lpthw.web,很顯然,在上一篇我給你解釋了pip的強大。
安裝完成之後,其實是不能立即使用的,我們得考慮到版本問題,你現在就去py檔案裡輸入import web,得到的結果無疑是報錯。
我現在使用的是python 3.7版本,我得將web的版本配置一下:
繼續在命令符輸入pip install web.py==0.40.dev0
現在我們的python3.7可以使用web模組了。
下一步想必不用我多說描述了吧,就是複製我們上篇部落格建立的專案骨架模板,然後進行修改:
gothonweb是我們程式碼的主體目錄;templates是用來存放html程式碼的,對網頁進行操作。tests是自動化測試。
gothonweb、tests這兩個資料夾裡都要建立一個__init__.py,沒錯,和我上篇部落格寫的方法一模一樣。
現在我們來建立一個最基本的lpthw.web的應用程式,測試一下8080網路埠是否可用,在bin資料夾下建立一個app.py:
import web
urls=(
'/',"index"
)
app=web.application(urls,globals())
class index(object):
def GET(self):
greeting="Hello HuangPaoPao"
return render.index(greeting = greeting)
if __name__=="__main__":
app.run()
然後我們直接執行這個app.py檔案,如果沒問題的話,你應該看見這樣的結果:
接下來就是開啟你的瀏覽器,輸入localhost:8080/,你應該會看見這樣的介面:
到現在,我都還沒講到任何Web相關的工作原理。確保你已經成功執行出來並從你的瀏覽器得到這樣的結果,我將講解相關的工作原理。
1.瀏覽器通過網路連線到你的電腦,它的名字叫做localhost,這是一個標準的稱謂,代表你這臺計算機,不管你給它取名叫啥。它使用的網路埠是8080。
2.連線成功之後,瀏覽器對app.py這個應用程式發出了HTTP請求,要求訪問URL,這是網站的第一個URL。
3.在app.py裡面,有一個urls元組,就定義了'/'和'index'的匹配關係,意思是這樣的:如果有人用/訪問這個瀏覽器,lpthw.web將會找到class index,
從而用它處理這個瀏覽器的請求,完成操作。所以我們用 localhost:8080/ 來訪問,後面有一個/ 。
4.現在lpthw.web找到了class index,然後針對這個類的一個例項呼叫了index.GET,返回了"Hello HuangPaoPao"這樣的字串,再傳遞給瀏覽器。
5.最後,lpthw.web完成了對於瀏覽器請求的處理,將響應(response)回傳給瀏覽器,於是你就看到了你的瀏覽器打印出了Hello HuangPaoPao。
確保你弄懂了以上的工作原理,現在我們對瀏覽器進一步的html處理,就是給它改變一下字型的大小和顏色,以及網頁的名字。
這個時候,我們就用上了templates資料夾,我說過,這是存放html檔案的地方。
於是在templates資料夾裡建立一個index.html檔案:
$def with (greeting)
<html>
<head>
<title>Gothons Of Planet Percal #25</title>
</head>
<body>
$if greeting:
I just wanted to say <em style="color: green; font-size: 2em;">$greeting </em>.
$else:
<em>Hello</em>, world!
</body>
</html>
注意,html也有四個空格的敏感縮排。你如果沒學html的話,就大概瀏覽一下程式碼即可,說實話,我也沒學過html。
現在我們配置好了index.html,我們現在就要修改app.py程式碼,讓它對接html的功能:
如果你是直接用python直接編寫程式碼,請看下列程式碼:
import web
urls=(
'/',"index"
)
app=web.application(urls,globals())
render=web.template.render('templates/')
class index(object):
def GET(self):
greeting="Hello HuangPaoPao"
return render.index(greeting = greeting)
if __name__=="__main__":
app.run()
如果你是第三方編譯平臺,比如vs code,pycharm等,如果執行上列程式碼報錯,請看下列程式碼:
import web
import os
root = os.path.dirname(__file__) #找到本檔案的目錄路徑,存到root變數。
urls=(
'/hello',"index" #
)
app=web.application(urls,globals())
# render=web.template.render('templates/')
#老是報錯No template named index,說是找不到index,估計是我用第三方編輯器,Python找錯目錄了。
render = web.template.render(os.path.join(root, '..', 'templates/'))
#os.path.join是把目錄和檔名合成一個路徑。可以理解為直接定位正確目錄找到templates資料夾。
class index(object):
def GET(self):
greeting="Hello HuangPaoPao"
return render.index(greeting = greeting) #引用index.html的功能
if __name__=="__main__":
app.run()
原因我已經在上列的程式碼註釋裡面寫出來了,第三方編譯程式碼的平臺估計是影響python找對正確的目錄,於是引用了os模組,
讓os模組的功能直接定位正確的目錄,併成功執行程式碼。
接下來還是一樣的,直接執行這個修改後的app.py:
這時候,你只需要重新整理一下瀏覽器:
你可以看見,在html的作用下,網頁的名字改成了:Gothons Of Planet Percal #25
字型的顏色改成了綠色,字型的格式變成了斜體。
官方解釋:網頁模板被渲染成了標準有效的HTML原始碼。
render=web.template.render('templates/')
render可以說是一個魔法函式,它看到了你需要的是index.html,於是跑到了templates/目錄下找到名字為index.html的檔案,然後完成渲染轉換。
雖然能讓瀏覽器顯示你的訊息是很有趣的事情,但是如果能讓使用者通過表單提交文字就更有趣了。
所以我們就要建立一個html檔案,這個檔案顯示你輸入的視窗。
在templates資料夾裡建立一個hello_form.html:
<html>
<head>
<title>Sample Web Form</title>
</head>
<body>
<h1>Fill Out This Form</h1>
<form action="/hello" method="POST">
Your Name: <input type="text" name="name">
<br/>
A greeti: <input type="text" name="greet">
<br/>
<input type="submit">
</form>
</body>
</html>
我們先來提前預覽以下這個檔案的效果(程式碼還沒有打完):
我們可以注意到,這個html檔案已經很好地建立了使用者輸入的視窗,但是從程式碼部分我們來分析研究:
name、greet是兩個需要輸入資料的變數。
method指向了POST函式,所以要改變GET的作用,讓GET負責列印這個輸入視窗的頁面,POST負責輸入資料後的操作。
所以這個時候,大家都知道怎麼修改app.py了:
import webimport os root = os.path.dirname(__file__) #找到本檔案的目錄路徑,存到root變數。
urls=( '/hello',"index" #這兒將‘/’改成‘/hello’,訪問網站時就是localhost:8080/hello )
app=web.application(urls,globals()) # render=web.template.render('templates/') #老是報錯No template named index,說是找不到index,估計是我用第三方編輯器,Python找錯目錄了。
render = web.template.render(os.path.join(root, '..', 'templates/')) #os.path.join是把目錄和檔名合成一個路徑。可以理解為直接定位正確目錄找到templates資料夾。
class index(object): def GET(self): return render.hello_form() #改變GET的作用,改成列印輸入視窗的html def POST(self): #因為html檔案中method指向了POST,故輸入資料後的操作讓POST函式負責。 form=web.input(name="Nobydy",greet="Hi") #建立需要輸入資料的變數。此時為預設變數。 greeting="Hello ,%s,%s"%(form.name,form.greet) return render.index(greeting = greeting)
if __name__=="__main__": app.run() 以上全部完成之後,繼續在終端執行app.py:
輸出結果: