楊群偉，廖潔，蘇華玲

（廈門華廈學(xué)院，福建 廈門 361021）

0 引 言

Web程序設(shè)計(jì)是一門綜合性學(xué)科，對學(xué)生的實(shí)踐技能要求較高，要求學(xué)生通過該門課程的學(xué)習(xí)，掌握網(wǎng)站開發(fā)及設(shè)計(jì)、程序設(shè)計(jì)、數(shù)據(jù)庫管理等多項(xiàng)技能。在Web程序設(shè)計(jì)課程中，項(xiàng)目式教學(xué)比較常用，就是通過項(xiàng)目的方式，在實(shí)施完成一個項(xiàng)目的過程中進(jìn)行專業(yè)知識和技能的滲透，從而進(jìn)行理論知識向?qū)嵺`的轉(zhuǎn)化，幫助學(xué)生掌握Web程序設(shè)計(jì)的關(guān)鍵技術(shù)。

項(xiàng)目式教學(xué)過程除了讓學(xué)生掌握具體技術(shù)還應(yīng)當(dāng)教會學(xué)生項(xiàng)目實(shí)施過程，包括基本工作步驟，先后關(guān)系，每個步驟要做的內(nèi)容，讓學(xué)生有全局性視野，具備獨(dú)立把控項(xiàng)目開發(fā)設(shè)計(jì)能力，而不是依賴教師的指導(dǎo)亦步亦趨。

本文提供了一個教學(xué)案例示范，通過一個轉(zhuǎn)賬小應(yīng)用向讀者展示了Web應(yīng)用的基本開發(fā)過程，然后進(jìn)行分析總結(jié)，提出了Web項(xiàng)目開發(fā)的基本過程模型。該過程模型具備通用性，可用于教學(xué)參考，有助于廣大Web教學(xué)從業(yè)人員指導(dǎo)學(xué)生進(jìn)行開發(fā)設(shè)計(jì)。

1 Web應(yīng)用開發(fā)教學(xué)案例

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

頁面一：登錄頁面，如圖1所示，用戶可以輸入用戶名、密碼實(shí)現(xiàn)登錄。

圖1 登錄頁面

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

圖2 賬單詳情

頁面三：轉(zhuǎn)賬頁，如圖3所示，支持轉(zhuǎn)賬功能，轉(zhuǎn)賬成功向數(shù)據(jù)庫寫入一條賬單。

圖3 轉(zhuǎn)賬頁

1.1 頁面及其交互設(shè)計(jì)

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

圖4 頁面交互流程

（1）登錄頁登錄成功后會跳轉(zhuǎn)到詳情頁面。

（2）詳情頁面點(diǎn)擊退出鏈接返回登錄頁。

（3）詳情頁點(diǎn)擊轉(zhuǎn)賬鏈接跳轉(zhuǎn)到轉(zhuǎn)賬頁。

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

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

1.2 URL設(shè)計(jì)

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

表1 URL設(shè)計(jì)

1.3 Web頁面模板設(shè)計(jì)

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

1.4 數(shù)據(jù)庫設(shè)計(jì)及讀寫操作

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

表2 賬單表

對于這個簡單應(yīng)用，數(shù)據(jù)庫采用sqlite3簡單數(shù)據(jù)庫，對數(shù)據(jù)庫讀寫操作包含3個功能：連接到數(shù)據(jù)庫、添加轉(zhuǎn)賬記錄和查詢轉(zhuǎn)賬記錄功能，采用嵌入式sql語言實(shí)現(xiàn)，代碼如下所示：

1.5 頁面響應(yīng)邏輯設(shè)計(jì)

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

2 分析總結(jié)

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

2.1 設(shè)計(jì)各個Web頁面及其交互

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

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

（2）HTTP重定向方式：在 HTTP 協(xié)議中，重定向操作由服務(wù)器通過發(fā)送特殊的響應(yīng)（即 redirects）而觸發(fā)。HTTP 協(xié)議的重定向響應(yīng)的狀態(tài)碼為 3xx，并且在報(bào)文頭部攜帶了跳轉(zhuǎn)目的地Location信息。

2.2 設(shè)計(jì)各個Web頁面的URL訪問入口

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

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

2.3 設(shè)計(jì)各個Web頁面的模板文件

對于第1部設(shè)計(jì)的Web頁面需要對應(yīng)設(shè)計(jì)模板文件。在成熟的Web頁面開發(fā)框架中一般會設(shè)計(jì)某種模板語言實(shí)現(xiàn)數(shù)據(jù)的占位和HTML元素的批量創(chuàng)建填充。在Flask框架中使用jinja2模塊來實(shí)現(xiàn)，而Django則使用自己內(nèi)置模板模塊的實(shí)現(xiàn)。

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

2.4 設(shè)計(jì)數(shù)據(jù)庫及其讀寫操作

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

2.5 設(shè)計(jì)和實(shí)現(xiàn)頁面響應(yīng)邏輯

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

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

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

總體而言，Web項(xiàng)目開發(fā)過程是先前端，后后端的設(shè)計(jì)實(shí)現(xiàn)過程?？偨Y(jié)如圖5所示。

圖5 Web應(yīng)用開發(fā)邏輯模型

注意到在這個模型當(dāng)中，前面1～4步的所有設(shè)計(jì)最終都會體現(xiàn)到第5步代碼設(shè)計(jì)當(dāng)中。因此前4步完成之后才能進(jìn)入第5步的設(shè)計(jì)執(zhí)行，而前4步一般可以并行操作。

當(dāng)然這是對于簡單網(wǎng)站的設(shè)計(jì)分析，對于復(fù)雜應(yīng)用，在后端的設(shè)計(jì)上還會涉及到分布式計(jì)算、中間件、緩存等組件的設(shè)計(jì)，因此在第5步之前還可以增加更多步驟。相關(guān)內(nèi)容本文不再展開討論。

3 結(jié) 論

其實(shí)實(shí)現(xiàn)一個基于Web的應(yīng)用開發(fā)并不難，關(guān)鍵是要掌握Web應(yīng)用開發(fā)的基本過程。本文以PythonFlask后端作為示例，但是提出的開發(fā)過程模型卻適用于任何Web項(xiàng)目。在理解了這個基本“套路”后能夠很快理解任何一種語言的后端開發(fā)框架，因?yàn)榇蟛糠諻eb框架基本都是圍繞URL路由、HTML模板、數(shù)據(jù)庫處理等內(nèi)容進(jìn)行設(shè)計(jì)的。

另外，本文描述的開發(fā)模型和Web開發(fā)模式MVC架構(gòu)有所不同，MVC架構(gòu)描述的是應(yīng)用代碼框架結(jié)構(gòu)，用于指導(dǎo)具體代碼開發(fā)，而本文更多的是工程化實(shí)施的流程步驟抽象，用于指導(dǎo)工程實(shí)施步驟與順序。