Web項目開發過程模型教學研究

楊群偉，廖潔，蘇華玲

（廈門華廈學院，福建 廈門 361021）

0 引 言

Web程序設計是一門綜合性學科，對學生的實踐技能要求較高，要求學生通過該門課程的學習，掌握網站開發及設計、程序設計、數據庫管理等多項技能。在Web程序設計課程中，項目式教學比較常用，就是通過項目的方式，在實施完成一個項目的過程中進行專業知識和技能的滲透，從而進行理論知識向實踐的轉化，幫助學生掌握Web程序設計的關鍵技術。

項目式教學過程除了讓學生掌握具體技術還應當教會學生項目實施過程，包括基本工作步驟，先后關系，每個步驟要做的內容，讓學生有全局性視野，具備獨立把控項目開發設計能力，而不是依賴教師的指導亦步亦趨。

本文提供了一個教學案例示范，通過一個轉賬小應用向讀者展示了Web應用的基本開發過程，然后進行分析總結，提出了Web項目開發的基本過程模型。該過程模型具備通用性，可用于教學參考，有助于廣大Web教學從業人員指導學生進行開發設計。

1 Web應用開發教學案例

通過一個基于Python Flask框架的轉賬應用來說明Web應用的基本開發邏輯。該應用模擬用戶銀行轉賬行為，可以登錄系統，轉賬和查看歷史轉賬，具有3個頁面，分別是登錄頁，詳情頁和轉賬頁，各頁面界面效果如下：

頁面一：登錄頁面，如圖1所示，用戶可以輸入用戶名、密碼實現登錄。

圖1 登錄頁面

頁面二：賬單詳情頁，如圖2所示，用戶登錄后可以查看歷史賬單信息，賬單數據從數據庫中讀取。

圖2 賬單詳情

頁面三：轉賬頁，如圖3所示，支持轉賬功能，轉賬成功向數據庫寫入一條賬單。

圖3 轉賬頁

1.1 頁面及其交互設計

三個頁面的交互邏輯如圖4所示。

圖4 頁面交互流程

（1）登錄頁登錄成功后會跳轉到詳情頁面。

（2）詳情頁面點擊退出鏈接返回登錄頁。

（3）詳情頁點擊轉賬鏈接跳轉到轉賬頁。

（4）轉賬頁成功轉賬后跳轉到詳情頁，詳情頁會顯示新的轉賬記錄。

注意：用戶在能夠查看詳情頁和訪問轉賬頁的前提是必須先登錄，如果沒有登錄直接訪問這兩個頁面服務器端應該做一個重定向的響應，讓瀏覽器跳轉到登錄頁讓用戶執行登錄操作。

1.2 URL設計

該應用包含3個頁面4個鏈接，3個頁面每個對應1個URL，另外1個URL是退出登錄，該動作不需要頁面，只需要重定向到登錄頁即可。因此，URL設計如表1所示。

表1 URL設計

1.3 Web頁面模板設計

在Flask框架當中，采用Jinja2模板系統實現了頁面框架和數據的分離，在頁面模板中使用{{variable}}標記位在邏輯代碼中進行數據替換，通過{% for %}循環語句根據數據集合實現頁面元素的批量生成。Jinja2模板系統還能支持模板繼承，如下所示login.html和index.html繼承了base.html模板，base.html留了兩個塊{%block title%}和{%block body%}由子模版填充。在頁面響應邏輯代碼中需要使用get_template（）獲得模板創建模板對象，然后調用模板對象的render（）函數實現數據的填充生成實際頁面。

1.4 數據庫設計及讀寫操作

在本應用中使用數據庫時只涉及到一張賬單表，賬單表的字段設計如表2所示，有5個字段，分別是<序號，付款方，收款方，金額，備注信息>，各個字段的數據類型分別是<整數，文本，文本，整數，文本>。一個典型的數據記錄是<1，張三，李四，100，車費>表示張三轉了100美元給李四，原因是“車費”。對于數據庫庫軟件的選擇，可以選擇MySQL或者mariadb等開源SQL數據庫類型，在這個簡單應用中數據庫使用了sqlite簡單數據庫。

表2 賬單表

對于這個簡單應用，數據庫采用sqlite3簡單數據庫，對數據庫讀寫操作包含3個功能：連接到數據庫、添加轉賬記錄和查詢轉賬記錄功能，采用嵌入式sql語言實現，代碼如下所示：

1.5 頁面響應邏輯設計

完成本應用的最后一步是實現頁面響應邏輯，頁面響應的基本模式是：獲得數據（典型的是從數據庫中讀），獲取HTML模板，然后將數據替換到模板預留的位置上生成完整頁面。例如在詳情頁的生成代碼當中，有如下3步：

2 分析總結

麻雀雖小五臟俱全，本文這個示例轉賬應用雖然簡單，卻能夠體現Web應用開發的一般過程。通過本文的示例應用我們可以觀察到，一個Web應用的基本的開發邏輯是：

2.1 設計各個Web頁面及其交互

這里的頁面交互說的的是頁面間跳轉，而不是頁面本身的動畫效果。這里有兩種技術實現方式，HTML超鏈接方式和HTTP重定向方式。

（1）HTML超連接方式：前端用戶通過點擊HTML超鏈接主動跳轉到其他頁面。

（2）HTTP重定向方式：在 HTTP 協議中，重定向操作由服務器通過發送特殊的響應（即 redirects）而觸發。HTTP 協議的重定向響應的狀態碼為 3xx，并且在報文頭部攜帶了跳轉目的地Location信息。

2.2 設計各個Web頁面的URL訪問入口

每個頁面都需要具備一個URL形式的訪問入口，每個URL則對應一個頁面響應邏輯。

URL和響應函數的對應關系又稱為URL路由。在Flask框架中，URL和響應代碼的對應關系使用@app.route裝飾器函數進行注冊。其他的框架往往有不同的實現方式，例如Django框架需要專門創建一個urls.py文件使用字典方式手工注冊。在URL的匹配當中還可以使用正則表達式提取URL相關數據并帶入到函數內部使用。

2.3 設計各個Web頁面的模板文件

對于第1部設計的Web頁面需要對應設計模板文件。在成熟的Web頁面開發框架中一般會設計某種模板語言實現數據的占位和HTML元素的批量創建填充。在Flask框架中使用jinja2模塊來實現，而Django則使用自己內置模板模塊的實現。

這一部分還應包含前端CSS代碼和JS代碼部分，以提升頁面渲染效果和用戶行為交互效果，這部分內容在本文這個示例項目沒有體現。

2.4 設計數據庫及其讀寫操作

數據庫的讀寫往往需要使用特定的驅動器，例如在Python中使用sqlite和MySQL數據庫要分別使用不同的驅動器。使用傳統驅動器模式需要在宿主語言和SQL語言之間進行數據轉換操作，極其不便。因此在一些成熟的Web框架中通常會采用ORM的機制降低程序語言和SQL數據庫的繁瑣數據轉換關系，例如django和JavaHibernate框架

2.5 設計和實現頁面響應邏輯

這個地方是開發人員集中寫代碼的地方，頁面生成的方式也有兩種：

（1）后端生成方式：基本邏輯是從數據源（例如數據庫）獲得數據，然后將讀取的數據填充到Web頁面模板生成最終的HTML頁面交給瀏覽器。這種方式的特點是在后端生成，消耗服務器端的處理器資源。這是本文實例項目采用的方式。

（2）前端生成方式：后端只返回基本HTML頁面，前端通過Ajax方式從后端取數據后再添加、修改頁面DOM結構。這種方式的特點是前端生成，消耗客戶端處理器資源，服務器端處理器資源消耗較小。

總體而言，Web項目開發過程是先前端，后后端的設計實現過程?？偨Y如圖5所示。

圖5 Web應用開發邏輯模型

注意到在這個模型當中，前面1～4步的所有設計最終都會體現到第5步代碼設計當中。因此前4步完成之后才能進入第5步的設計執行，而前4步一般可以并行操作。

當然這是對于簡單網站的設計分析，對于復雜應用，在后端的設計上還會涉及到分布式計算、中間件、緩存等組件的設計，因此在第5步之前還可以增加更多步驟。相關內容本文不再展開討論。

3 結 論

其實實現一個基于Web的應用開發并不難，關鍵是要掌握Web應用開發的基本過程。本文以PythonFlask后端作為示例，但是提出的開發過程模型卻適用于任何Web項目。在理解了這個基本“套路”后能夠很快理解任何一種語言的后端開發框架，因為大部分Web框架基本都是圍繞URL路由、HTML模板、數據庫處理等內容進行設計的。

另外，本文描述的開發模型和Web開發模式MVC架構有所不同，MVC架構描述的是應用代碼框架結構，用于指導具體代碼開發，而本文更多的是工程化實施的流程步驟抽象，用于指導工程實施步驟與順序。