陳 曉李燕龍王小瓊

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

基于項(xiàng)目實(shí)例的軟件工程課程改革-以公司網(wǎng)站設(shè)計(jì)為例

陳 曉1李燕龍2王小瓊1

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

選取公司網(wǎng)站設(shè)計(jì)的項(xiàng)目案例貫穿于軟件工程教學(xué)實(shí)踐的始終，提升了教學(xué)效果。文章在基于HTML5-CSS3和Jquery前端技術(shù)以及PHP后臺(tái)技術(shù)下，采用Axure RP設(shè)計(jì)網(wǎng)站原型，使用MVC的開發(fā)模式，完成一個(gè)具有完整功能的公司網(wǎng)站。并能夠?qū)崿F(xiàn)方便的添加，修改和刪除，后臺(tái)主要實(shí)現(xiàn)對(duì)用戶以及新聞、活動(dòng)、產(chǎn)品和留言信息進(jìn)行管理。系統(tǒng)界面美觀、內(nèi)容豐富，很好的實(shí)現(xiàn)了與用戶的交互。

HTML5-CSS3；Jquery；Axure RP；公司網(wǎng)站

軟件工程作為計(jì)算機(jī)專業(yè)學(xué)生的專業(yè)基礎(chǔ)課程，是一門理論性和實(shí)踐性相結(jié)合的綜合課程。軟件工程課程圍繞軟件開發(fā)過程的流程、技術(shù)和思想等內(nèi)容開展課程，旨在培養(yǎng)一批從事軟件開發(fā)、測試、項(xiàng)目管理等的高級(jí)專門人才[1]。

國內(nèi)外很多高校的教師針對(duì)軟件工程課程作出了改革與研究，發(fā)現(xiàn)軟件工程課程教學(xué)過程中存在很多問題。目前，項(xiàng)目驅(qū)動(dòng)法是大家比較公認(rèn)的教學(xué)手段之一[2]。項(xiàng)目驅(qū)動(dòng)法教學(xué)模式使得學(xué)生將學(xué)與做相結(jié)合，極大的激發(fā)了學(xué)生的學(xué)習(xí)興趣和求知欲望，培養(yǎng)學(xué)生自主學(xué)習(xí)、分析問題以及解決問題的能力。

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

1 總體設(shè)計(jì)

成功的公司網(wǎng)站，對(duì)于一家公司是必不可少的。完善的需求分析與設(shè)計(jì)決定了一個(gè)公司網(wǎng)站設(shè)計(jì)成功的一半。

（1）網(wǎng)站需求分析

本文網(wǎng)站有三個(gè)方面需要考慮：①樹立公司形象；②閱讀簡約不繁雜，直觀公司新聞、生活以及產(chǎn)品動(dòng)態(tài)；③有簡捷管理的后臺(tái)系統(tǒng)。另外，還應(yīng)該實(shí)現(xiàn)和在線客戶的留言互動(dòng)。

（2）總體結(jié)構(gòu)

本文網(wǎng)站的主要功能模塊結(jié)構(gòu)示意圖如圖1所示：

圖1 公司網(wǎng)站功能模塊圖

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

（3）網(wǎng)站流程

本文網(wǎng)站流程設(shè)計(jì)思想如下：

①用戶（這里主要指直接瀏覽本網(wǎng)站的用戶，不包括后臺(tái)具有管理功能的用戶）根據(jù)自己的瀏覽方式請(qǐng)求服務(wù)端給予數(shù)據(jù)來瀏覽本網(wǎng)站，并可發(fā)布在線留言與管理員進(jìn)行交互。

②服務(wù)端在接到用戶的請(qǐng)求后，及時(shí)顯示用戶需要瀏覽的信息。并可存取來自前端用戶發(fā)布的在線留言信息。

③管理員在后臺(tái)管理系統(tǒng)里面可以對(duì)當(dāng)前所有的信息進(jìn)行管理，可方便處理新聞、活動(dòng)、產(chǎn)品以及用戶發(fā)布的在線留言信息。

④后臺(tái)管理員可以通過后臺(tái)系統(tǒng)提供的添加管理員用戶功能直接對(duì)管理用戶進(jìn)行添加，以達(dá)到多用戶管理的目的。

⑤管理員在需要?jiǎng)h除某條記錄時(shí)，可通過查找到該條記錄來進(jìn)行刪除操作。

公司網(wǎng)站設(shè)計(jì)流程圖如圖2所示：

圖2 公司網(wǎng)站設(shè)計(jì)流程圖

2 方案選擇

（1）原型設(shè)計(jì)-Axure RP

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

（2）服務(wù)器端語言選擇-PHP

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

本文網(wǎng)站使用PHP、JavaScript作為主要程序開發(fā)語言，采用MVC模式的構(gòu)架， mysql數(shù)據(jù)庫。系統(tǒng)界面美觀內(nèi)容豐富，很好的實(shí)現(xiàn)了與用戶的交互。

（3）HTML5和CSS3新技術(shù)

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

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

圖3 網(wǎng)站部分頁面

HTML5規(guī)范開發(fā)完成時(shí)，將成為主流。據(jù)統(tǒng)計(jì)2013年全球?qū)⒂?0億手機(jī)瀏覽器支持HTML5，同時(shí)HTML Web開發(fā)者數(shù)量將達(dá)到200萬。毫無疑問，HTML5將成為未來5-10年內(nèi)，移動(dòng)互聯(lián)網(wǎng)領(lǐng)域的主宰者。

3 軟件結(jié)果測試與性能分析

前端主頁面上完美實(shí)現(xiàn)了HTML5和CSS3中的新技術(shù)，摒棄了js和jQ帶來的代碼繁瑣，實(shí)現(xiàn)了更美觀的效果。本文的動(dòng)態(tài)主頁上面，使用了CSS3優(yōu)先級(jí)疊加效果。

由于后臺(tái)系統(tǒng)的安全性，所以在登錄界面沒有添加注冊(cè)功能，把注冊(cè)功能放在了登錄成功后。

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

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

圖4 留言管理界面

4 結(jié)束語

采用同一項(xiàng)目實(shí)例貫穿始終的教學(xué)實(shí)踐方法，極大的提高了軟件工程課程的教學(xué)效果，學(xué)生對(duì)公司網(wǎng)站設(shè)計(jì)實(shí)例的參與度與響應(yīng)度提高，更有學(xué)生的作品作為桂林市中小型公司的商業(yè)網(wǎng)站投入使用，該方法極大的提升了教學(xué)效率和提高了學(xué)生的實(shí)踐能力。

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

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

[3] 譚貌,李友芝,陳良軍.軟件工程專業(yè)多課程協(xié)作項(xiàng)目驅(qū)動(dòng)教學(xué)模式研究[J].計(jì)算機(jī)教育,2011,(4):26-29.

[4] 呂皓月.網(wǎng)站藍(lán)圖:Axure RP高保真網(wǎng)頁原型制作[M].北京:清華大學(xué)出版社,2012.

[5] 陳浩.零基礎(chǔ)學(xué)PHP[M].北京:機(jī)械工業(yè)出版社,2014.

[6] 陸凌牛.HTML5與 CSS3權(quán)威指南(上冊(cè))[M].2版.北京:機(jī)械工業(yè)出版社,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

桂林電子科技大學(xué)信息科技學(xué)院教育教學(xué)改革項(xiàng)目“《軟件工程》課程項(xiàng)目驅(qū)動(dòng)教學(xué)模式改革”（2015JGY39）。

陳曉（1988－），女，桂林電子科技大學(xué)信息科技學(xué)院助教，碩士研究生，研究方向?yàn)閳D像處理、三維重建。