[問題] Client-Server網頁開發的架構跟流程

看板Python作者 (令狐瑜)時間9年前 (2014/11/09 08:50), 編輯推噓3(3077)
留言80則, 6人參與, 最新討論串1/2 (看更多)
就如同題目 我想問的是很基礎的問題 事情是這樣的 我是網頁開發的初學者 這學期我上了一門課有教Javascript跟Python 最近公布了期末專題的題目 就是用Python寫server side 用Javascript寫client side 製作一個Web Application 我看去年作品有像關鍵字查節目表、線上乒乓球等等 沒有其他任何提示跟要求 可是我們老師課堂上也只有講講語法而已 所以作為一個初學者 我對Python的理解只停留在 "在command line輸入Python語法 產生對應結果" 完全沒辦法想像專題該如何完成以及Python網頁開發的流程和架構 所以希望開發經驗豐富的各位 可以為我介紹整個網頁開發的流程和架構 舉些我有在網路上看到的東西 jQuery, AJAX, JSON, CherryPy, Django, Google App Engine(好像有人說code 要deploy到這裡之類的) 可以告訴我這些東西在網頁開發中扮演那些腳色嗎? 詳細怎麼使用我相信我可以自己學好 畢竟我也是有累積了各種語言的coding經驗 不過現在就是缺了一個"大局觀" 到底每一層的東西要怎麼分工、怎麼連結在一起、怎麼做出一個互動性網頁 希望好心人可以給我一個完整的概念 指引我一條路QQ 非常感謝 -- ※ 發信站: 批踢踢實業坊(ptt.cc), 來自: 152.78.252.37 ※ 文章網址: http://www.ptt.cc/bbs/Python/M.1415494217.A.093.html

11/09 10:23, , 1F
不知道你的程度很難說明耶...你知道什麼叫 HTML/CSS 嗎
11/09 10:23, 1F

11/09 10:23, , 2F
HTTP request/response 呢?
11/09 10:23, 2F

11/09 10:24, , 3F
如果都不知道的話,建議你去看 web_design 置地文
11/09 10:24, 3F

11/09 10:25, , 4F
或是跑一遍 w3schools tutorial(雖然很爛)
11/09 10:25, 4F

11/09 16:59, , 5F
可以跟著Django的tutorial做一次
11/09 16:59, 5F

11/09 18:03, , 6F
我知道HTML 我也有寫過PHP網頁 我有資料庫的概念
11/09 18:03, 6F

11/09 18:05, , 7F
CSS我也用過 那篇置底文我大致都懂 也用過大部分
11/09 18:05, 7F

11/09 18:06, , 8F
現在是不知道Python跟做網頁有何干
11/09 18:06, 8F

11/09 18:07, , 9F
還有那些工具(framework?)在整個架構負責哪部分
11/09 18:07, 9F

11/09 18:38, , 10F
有寫過PHP就很好懂了,Python負責server端
11/09 18:38, 10F

11/09 18:38, , 11F
就像你在寫PHP一樣,會有server執行你寫的PHP
11/09 18:38, 11F

11/09 18:39, , 12F
server遇到request就產生對應的html回去給client
11/09 18:39, 12F

11/09 18:40, , 13F
所以Python要負責的就是根據request做對應的處理後
11/09 18:40, 13F

11/09 18:40, , 14F
產生對應的html回傳,例如要對資料庫處理,或進行運算
11/09 18:40, 14F

11/09 18:41, , 15F
的部分都是由Python完成的
11/09 18:41, 15F

11/10 00:00, , 16F
跟著django走吧,你會覺得其實跟你寫過的PHP差不多
11/10 00:00, 16F

11/10 00:00, , 17F
重點是你寫過的PHP是MVC架構的
11/10 00:00, 17F

11/10 00:03, , 18F
如果只是小型應用 選cherrypy吧 django 太肥 XD
11/10 00:03, 18F

11/10 02:27, , 19F
PHP大多只是讓 HTTP server (ex:Apache/Nginx)先處理過
11/10 02:27, 19F

11/10 02:29, , 20F
HTTP request 再呼叫 PHP code,然後 PHP 內部 lib 又
11/10 02:29, 20F

11/10 02:31, , 21F
處理了一些事,你纔可以直接寫 PHP handler function
11/10 02:31, 21F

11/10 02:32, , 22F
然後取得 request 的一些資料(像是用 $_GET取得 query
11/10 02:32, 22F

11/10 02:36, , 23F
parameter),並且回傳 HTML,這些 HTML 又由 PHP Lib
11/10 02:36, 23F

11/10 02:36, , 24F
和 HTTP server 包裝成 response 傳回 client 端。
11/10 02:36, 24F

11/10 02:37, , 25F
Python 看你是要自己處理 TCP connection 還是用內建的
11/10 02:37, 25F

11/10 02:38, , 26F
http.serve 都是很底層的方式。再來就是用 HTTP server
11/10 02:38, 26F

11/10 02:40, , 27F
或是 cherrypy 這種來做比較強大的 HTTP 處理。
11/10 02:40, 27F

11/10 02:42, , 28F
注意這裡不是說兩者等價 XD
11/10 02:42, 28F

11/10 02:44, , 29F
前面都是在處理 HTTP protocol 的抽象化,Django 則更
11/10 02:44, 29F

11/10 02:46, , 30F
多琢磨在網站程式架構的軟工上面。最大的部分就是MVC,
11/10 02:46, 30F

11/10 02:47, , 31F
像是 URL routing、HTML template、 database model 等
11/10 02:47, 31F

11/10 02:47, , 32F
軟體架構方便你撰寫大型網站。不過當你寫遊戲的時候這
11/10 02:47, 32F

11/10 02:50, , 33F
些東西可能並不是很適合。你可以看看 Django 的 tute
11/10 02:50, 33F

11/10 02:51, , 34F
會更有感覺,再來自行判斷需不需要 Django 的幫助。
11/10 02:51, 34F

11/10 02:53, , 35F
再來就是你 Client 端到底熟悉嗎?知道如何使用 JS 操
11/10 02:53, 35F

11/10 02:54, , 36F
作 DOM 做一些效果或 check 嗎?如果會的話我想 JQuery
11/10 02:54, 36F

11/10 02:55, , 37F
概念上應該不會太難。
11/10 02:55, 37F

11/10 02:59, , 38F
如果不熟悉就到 tute 的網站仔細看一遍,等學完基本的
11/10 02:59, 38F

11/10 03:00, , 39F
程式語法及DOM操作後,一定會提到 AJAX。其實這個名字
11/10 03:00, 39F

11/10 03:00, , 40F
已經跟原本不太符合了,不過現在簡單來說就是由你的JS
11/10 03:00, 40F

11/10 03:01, , 41F
程式向 server 發起 request(而非由browser)。這樣的好
11/10 03:01, 41F

11/10 03:02, , 42F
處是當你取得 response 後可以由 js 來處理並 update
11/10 03:02, 42F

11/10 03:03, , 43F
部分的網頁內容,可以避免整頁重整的閃爍問題。
11/10 03:03, 43F

11/10 03:04, , 44F
前面一直提到 response,通常 response 都是 HTML 頁面
11/10 03:04, 44F

11/10 03:04, , 45F
但是當用了 ajax,你的 response 可以只回傳一些資料,
11/10 03:04, 45F

11/10 03:05, , 46F
再由 js 處理並加入 html 當中。這裡就要講到資料的
11/10 03:05, 46F

11/10 03:06, , 47F
serialization。一般資料在不同程式語言的記憶體layout
11/10 03:06, 47F

11/10 03:07, , 48F
一定會不同。像是 Python 的 Object 和 JS 的 object
11/10 03:07, 48F

11/10 03:07, , 49F
顯然差很多。serialization 就是把資料的表達方式規格
11/10 03:07, 49F

11/10 03:09, , 50F
化。這種規格化可以是 binary (前32bit放 first field
11/10 03:09, 50F

11/10 03:09, , 51F
等),或是人類理解的 text。XML 和 JSON 就是屬於後者
11/10 03:09, 51F

11/10 03:10, , 52F
他們規範了一些常見的資料形態(integer,string,array)
11/10 03:10, 52F

11/10 03:11, , 53F
的文字表達方式,讓不同程式、儲存媒介都可以瞭解。這
11/10 03:11, 53F

11/10 03:12, , 54F
樣你就可以在 python 把資料 serialize 後放入 respons
11/10 03:12, 54F

11/10 03:15, , 55F
再由 JS deserialize 得到資料來處理。
11/10 03:15, 55F

11/10 03:16, , 56F
前端現在很流行的還有像是 backbone、angular等架構,
11/10 03:16, 56F

11/10 03:17, , 57F
等你瞭解這些基本概念後再去看會覺得很舒服(?)XD
11/10 03:17, 57F

11/10 03:17, , 58F
現在基本上你提到的幾個 component 都串聯起來了,最後
11/10 03:17, 58F

11/10 03:18, , 59F
一個是 GAE。 GAE 基本上你可以想象他是一個幫你架好
11/10 03:18, 59F

11/10 03:19, , 60F
HTTP server,灌好環境(python、library、database)的
11/10 03:19, 60F

11/10 03:20, , 61F
一臺 server。所以你只要上傳程式就可以直接變成網站。
11/10 03:20, 61F

11/10 03:20, , 62F
不過比較特別的是你要注意他『灌』的那些環境可能跟一
11/10 03:20, 62F

11/10 03:21, , 63F
般不太一樣,所以你需要好好看一遍他有哪些東西可以用
11/10 03:21, 63F

11/10 03:22, , 64F
我這輩子第一次寫網站(國中用 frontpage 拉的除外)就
11/10 03:22, 64F

11/10 03:23, , 65F
是 Django + GAE + Google map 和 FB 的 js api。瞭解
11/10 03:23, 65F

11/10 03:25, , 66F
第一次寫要串聯一定很痛苦XD 遇到問題先寫看看試看看就
11/10 03:25, 66F

11/10 03:25, , 67F
對了。有的時候遠比看一堆資料還來得有用!
11/10 03:25, 67F

11/10 03:26, , 68F
PS. 我對遊戲部分不熟,所以可能要看其他版友的經驗了
11/10 03:26, 68F

11/10 03:30, , 69F
還有,等你實際寫過後會發現我講的很多是簡化甚至錯誤
11/10 03:30, 69F

11/10 03:31, , 70F
的,這裡只是用比較易懂的方式講解。也有可能是我本來
11/10 03:31, 70F

11/10 03:31, , 71F
概念就不好啦,畢竟一輩子也沒寫過幾次網頁 XD
11/10 03:31, 71F

11/10 06:53, , 72F
非常謝謝你願意花時間回了這麼詳細QQ
11/10 06:53, 72F

11/10 06:54, , 73F
我今天看了很多資料 在看你說的東西有比較懂了!
11/10 06:54, 73F

11/10 06:54, , 74F
被你一說我才發現我好像寫過client端的Javascript
11/10 06:54, 74F

11/10 06:55, , 75F
當時應該就是Server端的部分有人用Python寫好了所以
11/10 06:55, 75F

11/10 06:56, , 76F
我才沒有知覺XD 現在我要來認真檢視一下哪個framework
11/10 06:56, 76F

11/10 06:56, , 77F
比較適合我想做的東西了 超感謝你的解惑!!
11/10 06:56, 77F

11/13 15:43, , 78F
事實上 server 端用什麼語言,包括 PHP,都可以啦!
11/13 15:43, 78F

11/13 15:45, , 79F
只是想說一開始寫 PHP 普遍過於依賴嵌入功能。並沒有說
11/13 15:45, 79F

11/13 15:45, , 80F
PHP 沒辦法達到什麼功能或多不好之類的XD
11/13 15:45, 80F
文章代碼(AID): #1KNhf92J (Python)
文章代碼(AID): #1KNhf92J (Python)