基于項目實例的軟件工程課程改革-以公司網站設計為例

陳 曉李燕龍王小瓊

(1.桂林電子科技大學信息科技學院，廣西 桂林 541004；2.桂林電子科技大學教學實踐部，廣西 桂林 541004)

基于項目實例的軟件工程課程改革-以公司網站設計為例

陳 曉1李燕龍2王小瓊1

(1.桂林電子科技大學信息科技學院，廣西 桂林 541004；2.桂林電子科技大學教學實踐部，廣西 桂林 541004)

選取公司網站設計的項目案例貫穿于軟件工程教學實踐的始終，提升了教學效果。文章在基于HTML5-CSS3和Jquery前端技術以及PHP后臺技術下，采用Axure RP設計網站原型，使用MVC的開發模式，完成一個具有完整功能的公司網站。并能夠實現方便的添加，修改和刪除，后臺主要實現對用戶以及新聞、活動、產品和留言信息進行管理。系統界面美觀、內容豐富，很好的實現了與用戶的交互。

HTML5-CSS3；Jquery；Axure RP；公司網站

軟件工程作為計算機專業學生的專業基礎課程，是一門理論性和實踐性相結合的綜合課程。軟件工程課程圍繞軟件開發過程的流程、技術和思想等內容開展課程，旨在培養一批從事軟件開發、測試、項目管理等的高級專門人才[1]。

國內外很多高校的教師針對軟件工程課程作出了改革與研究，發現軟件工程課程教學過程中存在很多問題。目前，項目驅動法是大家比較公認的教學手段之一[2]。項目驅動法教學模式使得學生將學與做相結合，極大的激發了學生的學習興趣和求知欲望，培養學生自主學習、分析問題以及解決問題的能力。

但是，在項目驅動法教學實踐過程中仍然存在著問題[3]，比如項目實例數目不一，實例之間難易不同，教學實例之間頻繁切換等等。這些問題導致學生對軟件開發流程缺乏一個全局的理解，阻礙了學生學習的積極性。因此，本文提出在軟件工程教學過程中，要遵循同一完整實例貫徹始終的授課方式。在選取案例的時候，選擇一個相對綜合卻又涉及技術知識比較基礎的案例——公司網站設計。

1 總體設計

成功的公司網站，對于一家公司是必不可少的。完善的需求分析與設計決定了一個公司網站設計成功的一半。

（1）網站需求分析

本文網站有三個方面需要考慮：①樹立公司形象；②閱讀簡約不繁雜，直觀公司新聞、生活以及產品動態；③有簡捷管理的后臺系統。另外，還應該實現和在線客戶的留言互動。

（2）總體結構

本文網站的主要功能模塊結構示意圖如圖1所示：

圖1 公司網站功能模塊圖

本文網站包括兩大部分：網站前端和后臺管理，其中網站前端為用戶可視并且可使用部分功能，后臺管理為管理員使用的功能。

（3）網站流程

本文網站流程設計思想如下：

①用戶（這里主要指直接瀏覽本網站的用戶，不包括后臺具有管理功能的用戶）根據自己的瀏覽方式請求服務端給予數據來瀏覽本網站，并可發布在線留言與管理員進行交互。

②服務端在接到用戶的請求后，及時顯示用戶需要瀏覽的信息。并可存取來自前端用戶發布的在線留言信息。

③管理員在后臺管理系統里面可以對當前所有的信息進行管理，可方便處理新聞、活動、產品以及用戶發布的在線留言信息。

④后臺管理員可以通過后臺系統提供的添加管理員用戶功能直接對管理用戶進行添加，以達到多用戶管理的目的。

⑤管理員在需要刪除某條記錄時，可通過查找到該條記錄來進行刪除操作。

公司網站設計流程圖如圖2所示：

圖2 公司網站設計流程圖

2 方案選擇

（1）原型設計-Axure RP

Axure RP是美國Axure Software Solution公司旗艦產品，是一個專業的快速原型設計工具，讓負責定義需求和規格、設計功能和界面的專家能夠快速創建應用軟件或Web網站的線框圖、流程圖、原型和規格說明文檔。作為專業的原型設計工具，它能快速、高效的創建原型，同時支持多人協作設計和版本控制管理[4]。Axure RP已被一些大公司采用。Axure RP的使用者主要包括商業分析師、信息架構師、可用性專家、產品經理、IT咨詢師、用戶體驗設計師、交互設計師、界面設計師等，另外，架構師、程序開發工程師也在使用Axure。

（2）服務器端語言選擇-PHP

目前流行的程序開發語言主要有ASP、JSP和PHP[5]。三者都提供在 HTML代碼中混合某種程序代碼、由語言引擎解釋執行程序代碼的能力。然而，相較與ASP、JSP，PHP有其便于部署，可快速開發并且使用靈活等特點，比較適合于做中小型系統的快速開發。同時相較于JSP，PHP由于處理簡單，所以在一定程度上執行速度優于JSP。

本文網站使用PHP、JavaScript作為主要程序開發語言，采用MVC模式的構架， mysql數據庫。系統界面美觀內容豐富，很好的實現了與用戶的交互。

（3）HTML5和CSS3新技術

網絡上形形色色的公司網站，或多或少有一些動態效果的展示，如：幻燈片、自動移動的div，以及目錄的點擊效果，焦點獲取效果。在沒有HTML5和CSS3之前，這些技術使用js或者jquery是非常繁瑣的。

但是現在，有了HTML5和CSS3，多增加了很多新標簽和新屬性[6]，簡化了工作。如HTML5中input的type屬性增加了幾種可取值，對于不支持這幾種新增值的瀏覽器會統一解析為text類型；CSS3中的漸變、圓角、陰影和優先級等，CSS3的新技術還有很多，它能做出折疊動畫等等比Flash更好的技術效果。如使用 position: fixed;絕對定位和 position: relative;相對定位，并配合 Z-index: 0; (取值區間為-9999至9999，數字越大優先級越高)可以實現疊加效果，如圖3所示：

圖3 網站部分頁面

HTML5規范開發完成時，將成為主流。據統計2013年全球將有10億手機瀏覽器支持HTML5，同時HTML Web開發者數量將達到200萬。毫無疑問，HTML5將成為未來5-10年內，移動互聯網領域的主宰者。

3 軟件結果測試與性能分析

前端主頁面上完美實現了HTML5和CSS3中的新技術，摒棄了js和jQ帶來的代碼繁瑣，實現了更美觀的效果。本文的動態主頁上面，使用了CSS3優先級疊加效果。

由于后臺系統的安全性，所以在登錄界面沒有添加注冊功能，把注冊功能放在了登錄成功后。

主界面的背景完全沒有用到背景圖片，是利用了 CSS3的新技術，使得背景顏色進行角度、方向漸變色，達到了美觀界面的效果。.......

在留言管理方面，為了區分該條信息是否是客服查看過的，增加了一項狀態屬性，如圖4所示用未查閱/已處理來進行分辨，方便了客服處理。

圖4 留言管理界面

4 結束語

采用同一項目實例貫穿始終的教學實踐方法，極大的提高了軟件工程課程的教學效果，學生對公司網站設計實例的參與度與響應度提高，更有學生的作品作為桂林市中小型公司的商業網站投入使用，該方法極大的提升了教學效率和提高了學生的實踐能力。

[1] 郁書好,蘇守寶,劉正余.基于項目驅動的軟件工程教學模式研究[J].皖西學院學報,2009,25(5):60-62.

[2] 左貴啟,徐卓然,陽小華.軟件工程項目驅動教學模式的研究與實踐[J].中國電力教育,2012,(19):30-31.

[3] 譚貌,李友芝,陳良軍.軟件工程專業多課程協作項目驅動教學模式研究[J].計算機教育,2011,(4):26-29.

[4] 呂皓月.網站藍圖:Axure RP高保真網頁原型制作[M].北京:清華大學出版社,2012.

[5] 陳浩.零基礎學PHP[M].北京:機械工業出版社,2014.

[6] 陸凌牛.HTML5與 CSS3權威指南(上冊)[M].2版.北京:機械工業出版社,2013.

Software engineering curriculum reform based on.project instance--an example of company website

The paper chooses.project of company website design, throughout the software engineering teaching practice and it is effective to the teaching. Based on HTML5-CSS3 and Jquery, also the back-end technology of PHP, the paper uses Axure RP to design website prototype, and the MVC development pattern. Then.fully functional corporate website is completed and it achieves.goal of addition, modify and delete easily. Also the website background completes the management of users, as well as news, events, products and messages. Because of the beautiful interface, rich content, the system achieves.good interaction with users.

HTML5-CSS3;Jquery;Axure RP;company website

G642..

A....

1008-1151(2015)08-0117-02

2015-07-12

桂林電子科技大學信息科技學院教育教學改革項目“《軟件工程》課程項目驅動教學模式改革”（2015JGY39）。

陳曉（1988－），女，桂林電子科技大學信息科技學院助教，碩士研究生，研究方向為圖像處理、三維重建。