1. 程式人生 > >你的第一個網站

你的第一個網站

 

現在的你,看完了我的上一篇部落格,我相信你已經學會了如何安裝軟體包以及如何建立骨架專案目錄。

現在的我,將教你建立你的第一個網站。

 

安裝的軟體包是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 web
import 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:

 

輸出結果: