李慧春,王成喜,董學陽,陳中澳,朱博洋,邵錦出,吳櫻華

1(吉林大學 公共計算機教學與研究中心,長春 130021)

2(吉林大學 計算機科學與技術學院,長春 130021)

3(吉林大學 管理學院,長春 130021)

4(吉林大學 外國語學院,長春 130021)

學科競賽是提高大學生創(chuàng)新能力和綜合素質的一項重要舉措.國家、省市、高校每年都會針對在校大學生組織各種競賽活動.實踐證明,學生在競賽活動中經過系統(tǒng)訓練,其就業(yè)或深造質量高,普遍受到用人單位和高校研究生導師的歡迎[1].課外實踐活動、創(chuàng)新創(chuàng)業(yè)活動等能夠促進理論知識內化,提高大學生理論聯(lián)系實際的能力,以及運用所學知識解決實際問題的能力[2,3].為了支撐學校舉辦的各級學科競賽、課外實踐與創(chuàng)新創(chuàng)業(yè)活動,吉林大學實踐創(chuàng)新平臺下屬的網絡開發(fā)團隊開發(fā)了大學生實踐創(chuàng)新管理平臺.通過該平臺,同學們可以及時掌握各種活動動態(tài)、查看各團隊資料、做團隊宣傳或招募隊友,遇到問題發(fā)帖求助,達到物盡其用,人盡其才的目的.

1 功能設計

本文網站開發(fā)的初衷是為本校學生參加學科競賽等活動招募隊友提供平臺.以“互聯(lián)網+大學生創(chuàng)新創(chuàng)業(yè)大賽”為例,需要多學科的同學合作完成[4]:計算機相關專業(yè)的學生開發(fā)出優(yōu)秀的作品,管理或經濟學院的學生輔助撰寫項目策劃書,錄制作品運行視頻,表達能力強的同學負責寫PPT,完成答辯.有時還需要英語專業(yè)的同學搜集外國的相關資料,并將項目介紹翻譯成英語表達.如果僅是熟悉的同學很難組成一支能獲獎的團隊.同時,有參賽熱情、有能力、有時間的同學因為找不到組織,也不了解競賽時間、流程等而無法參加比賽.

在學校方面,很多高校建立了創(chuàng)新創(chuàng)業(yè)平臺,工程訓練中心等基地,致力于培養(yǎng)學生的實踐與創(chuàng)新能力[5,6].但是缺少宣傳途徑,導致受眾面窄,基地的使用率也不高.

根據以上需求,本文開發(fā)了大學生實踐創(chuàng)新管理網站.目前系統(tǒng)分為注冊登錄、最新動態(tài)、團隊信息與BBS 系統(tǒng)4 個板塊.

(1)注冊登錄.學生需要輸入姓名、學生證號,并設定昵稱、密碼,選擇角色后進行注冊.憑學生證號與密碼進行登錄.登錄后可以報名加入自己感興趣的團隊,也可以在BBS 上發(fā)帖與他人交流信息.未登錄用戶僅可瀏覽當前的動態(tài)及各團隊的信息,訪問BBS.

(2)最新動態(tài).在網站首頁上方以輪播圖的形式展示最近可以參加的活動、最近完成的競賽現(xiàn)場報道及獲獎團隊的采訪等.點擊可進入動態(tài)詳情.此欄目有助于同學們及時了解競賽等活動的進展,并激發(fā)同學們加入的熱情.

(3)團隊信息.在網站首頁按創(chuàng)建時間降序排列團隊列表.列表的每個條目代表一個團隊,顯示團隊頭像、團隊名稱及團隊的精簡介紹.點擊團隊可跳轉到團隊的詳情頁面.在團隊的詳情頁面會展示團隊的通知公告、現(xiàn)有成員、圖片集等更多信息.團隊管理員還可以查看到申請加入此團隊的學生信息表.

(4)BBS 系統(tǒng).主要用于學科交流與信息共享,登錄以后可以發(fā)帖,也可以回復,以樹形圖的形式展現(xiàn).發(fā)帖人和系統(tǒng)管理員都有權限刪除帖子.

2 權限分配

本文網站分配了系統(tǒng)管理員、團隊管理員和普通成員3 種角色,每種角色擁有不同的權限:

(1)系統(tǒng)管理員.擁有最高的權限,是平臺的維護者,可以是多個人.系統(tǒng)管理員可以發(fā)布最新動態(tài)信息,根據用戶提供的資料創(chuàng)建新團隊,或者刪除已有的違規(guī)團隊,并具有團隊管理員的所有權限.

(2)團隊管理員.在注冊該角色的同時選擇歸屬團隊.通過系統(tǒng)管理員驗證后具備編輯團隊詳情頁面的權限,包括團隊介紹、上傳團隊相冊、發(fā)布通知等.當有新人申請加入團隊時,可收到系統(tǒng)通知.根據申請人填寫的信息表選擇驗證通過或拒絕請求.一名團隊管理員只能管理一個團隊,但是可以做為普通成員加入其它多個團隊.

(3)普通成員.登錄以后可以申請加入感興趣的團隊.團隊管理員驗證通過后自動在團隊詳情頁面顯示新成員的頭像、姓名、專業(yè)信息.普通成員可以維護自己的空間,如基本信息、個性簽名和興趣愛好等,讓更多的同學了解自己.

以上3 種角色是用戶在注冊時手動選擇的.注冊新的系統(tǒng)管理員帳號及團隊管理員帳號時所有當前系統(tǒng)管理員都會收到通知,至少一名系統(tǒng)管理員同意方可通過,保證平臺的安全性.注冊普通成員角色不需要驗證.

3 系統(tǒng)實現(xiàn)

3.1 數據庫實現(xiàn)

平臺數據庫使用MySQL 實現(xiàn).MySQL 是小型關系型數據庫,目前被廣泛地應用在Internet 上的中小型網站中.它將數據放在不同的表中.Java 語言通過JDBC 連接MySQL 進行訪問[7,8].

本文把建立數據庫各表的語句以xxx.sql 腳本文件形式保存在工程的目錄里,移植時將這些語句在MySQL 的命令行終端運行一下即可在新環(huán)境下重新創(chuàng)建各表.他人維護數據庫也很方便.部分數據庫模型圖如圖1所示.

圖1 數據庫模型圖

本文的BBS 系統(tǒng)部分是使用遞歸方法實現(xiàn)的.數據庫中BBS 文章表的“pid”字段表示帖子的父親“id”,即本帖是對哪個帖子的回復.“pid”為0 的帖子為根帖,或者叫帖子的主題.“rootid”字段表示根帖“id”,是冗余字段,使用的目的是提高效率.“isleaf”字段記錄帖子下有沒有回復,0 代表葉節(jié)點沒有回復了,1 是非葉節(jié)點還有回復,同樣為冗余字段.

BBS 系統(tǒng)的帖子很多,需要按發(fā)帖時間由新到舊分頁展示,假定當前展示的是第pageNo 頁,每頁展示pageSize 條根帖,變量類型都為int,那么從數據庫表bbs 中取出所有該頁所需展示根帖的sql 語句為:

String sql=“select * from bbs where pid=0 order by id desc limit ” + (pageNo – 1)* pageSize + “,” +pageSize;

將取出的數據存入鏈表,同時檢查每條數據的“isleaf”屬性,如果不為0 則以該數據的“id”為參數,遞歸查找該結點下的所有回復,并插入鏈表中該結點的后面.為了展示更加美觀,遞歸函數同時傳入了一個“l(fā)evel”參數,初值為0,遞歸每增加一級,“l(fā)evel”加1.展示時在帖子前面加入“l(fā)evel”個縮進占位符號“--”.

團隊表的“teamicon”字段、團隊成員的“membericon”字段及團隊相冊的“filename”字段都代表圖片的名字.為了保證圖片命名在數據庫中的唯一性,本文使用與當前日期和時間相關的UUID 生成圖片名,使用的java 語句如下:

UUID.randomUUID().toString();

圖片存放在服務器上相應的文件夾中.

3.2 前端實現(xiàn)

平臺界面使用HTML5、CSS 與JavaScript 技術結合實現(xiàn),在Andriod 和iOS 系統(tǒng)的終端及電腦的瀏覽器上都有良好的展示效果[9].

(1)HTML5 技術應用:HTML5 是HTML 的第5 次重大修改,它在原來版本的基礎上添加了很多新特性,更加適用于移動互聯(lián)網.本文在HTML5 的meta 標簽下設置“name=viewport”可以使得頁面在移動端的設備屏幕上全屏顯示.網頁中元素的寬度用百分比或數值設置.

(2)CSS 技術應用:CSS(Cascading Style Sheet)層疊樣式表是設置網頁上HTML 元素屬性的語言,如控制網頁布局、顏色、背景、寬度、高度、文字字體等,使網頁更加美觀.在.html 文件中引入“uiStyle.css”文件的語句如下:

這樣就可以同步.css 文件定義的風格到該HTML頁面了.當.css 文件中定義的樣式改變時,它控制的所有.html 文件樣式都會發(fā)生改變,達到網站頁面風格的統(tǒng)一.

(3)JavaScript 技術應用:JavaScript 腳本編寫的程序可以直接寫入Web 頁面并由調用它的瀏覽器來解釋執(zhí)行,作用是在客戶端完成一些基本的交互,提高客戶端的響應時間.本文網站應用了JavaScript 程序對即將提交到服務器的數據作驗證,如學生證號是否合法,表單必填項是否完整等.另外鼠標經過圖片時顯示可操作按鈕等瀏覽器操作也是用JavaScript 來實現(xiàn)的.

3.3 服務端實現(xiàn)

本文網站是用Eclipse 工具開發(fā)的,開發(fā)語言是Java,項目部署在Tomcat 服務器上,使用了動態(tài)網頁開發(fā)技術JSP 和Servlet.

(1)Eclipse 工具和JDK(Java Development Kit):Eclipse 是Java 的集成開發(fā)環(huán)境[10].Eclipse 可以從Eclipse 官網直接下載并安裝.Eclipse 安裝后還需要安裝并配置JDK.JDK 是整個Java 的核心,包括了Java運行環(huán)境、Java 工具和Java 基礎類庫.

(2)Tomcat 服務器:Apache Tomcat 是一個免費開源的Web 應用服務器,屬于輕量級應用服務器,在中小型系統(tǒng)和并發(fā)訪問不是很多的場合下被普遍使用,是開發(fā)和調試JSP 程序的首選[11].在Eclipse 工具的“Windows”菜單下,選擇“Preferences”進入偏好設置頁面,可以將Tomcat 所在的本地目錄加入服務器運行環(huán)境中.創(chuàng)建一個“Dynamic Web Project”類型工程,在Eclipse 中點擊運行按鈕,可以自動啟動Tomcat,并將項目部署到Tomcat,這時就能夠在瀏覽器中以http 方式訪問工程下的JSP 或者HTML 文件了.

(3)JSP 全稱是Java Server Pages,主要是在HTML 網頁中利用<% %>來插入Java 代碼.JSP 具有銜接作用,既可以做頁面和數據的展示,又可以進行業(yè)務邏輯處理.JSP 在服務器端最后也是通過轉化為Servlet 執(zhí)行的.本文開發(fā)的網站中JSP 文件主要負責頁面顯示,Servlet 文件主要負責業(yè)務邏輯控制.

(4)Servlet:Servlet 是一個Java 應用程序,用來處理客戶端請求并做出響應,它實現(xiàn)了Sun 公司定義的Servlet 接口.Web 服務器收到一個http 請求后,會將請求移交給Servlet 容器.Servlet 容器首先對所請求的URL 進行解析并根據web.xml 配置文件找到相應的處理Servlet,同時將request 和response 對象傳遞給它.Servlet 通過request 對象可知道客戶端的請求者、請求信息以及其它信息.Servlet 在處理完請求后會把所有需要返回的信息放入response 對象中并返回到客戶端.例如,下載圖片時,如果需要下載的圖片名稱為“icon”,實現(xiàn)該功能的Servlet 為ImageServlet,使用get 方式獲取圖片并顯示的HTML 語句為:

其中,request 和response 為doGet 函數的參數,ROOTPATH 為String 類型常量,表示圖片存放在服務器中的路徑.另外,本文還定義了上傳圖片、表單提交等Servlet.

3.4 關鍵技術

為了使本文網站更加簡潔、美觀、易用,開發(fā)時對很多技術細節(jié)進行了處理.以下舉3 例進行說明:

(1)圖片上傳:HTML 默認的文件上傳按鈕比較單調,與網站風格不搭配,而且選擇本地圖片后只顯示圖片的路徑,不能實現(xiàn)圖片的預覽.本文網站重新設計了圖片上傳按鈕樣式,并實現(xiàn)了圖片的預覽效果.首先用“span”標簽做出一個沒有功能的上傳按鈕,然后在此按鈕的相同位置加入一個透明度為0 的“input”標簽,令其“type=file”,實現(xiàn)真正的本地文件選擇的功能.在JSP 文件中對選擇文件事件進行監(jiān)聽,當用戶選擇圖片后,立即在相關區(qū)域顯示出來,至此實現(xiàn)了圖片的預覽效果.當用戶確認上傳帶圖片的表單時,將此表單再轉交給專門負責上傳圖片的Servlet 處理.本網站在實現(xiàn)上傳圖片到服務器及顯示本地圖片時引入了Apache開源組織的“commons-fileupload-1.3.3.jar”和“commons-io-2.6.jar”兩個jar 包,簡化了文件上傳和下載操作.

(2)tab 選項卡:導航條tab 在網頁中非常常見,可以實現(xiàn)頁面視圖的切換,常見的tab 切換類型有:鼠標滑過切換、點擊切換、延遲切換以及自動切換.本文網站在團隊詳情頁面加入了點擊tab 進行視圖切換的效果.實現(xiàn)時應用了HTML 的無序列表標簽“ul”和列表項目定義標簽“l(fā)i”.在每個“l(fā)i”內再利用標簽“a”將“onclick”事件綁定到自定義的JS 函數“showSection()”,參數為所點擊tab 的序號.在此函數里實現(xiàn)選中tab 下的視圖顯示功能,即將視圖的“display”屬性設為空,其它tab 下的視圖隱藏,即“display”屬性設為“none”,同時對選中tab 的文字樣式和下面的小箭頭位置進行修改.

(3)網頁cookie:cookie 是網站為了辨別用戶身份、進行section 跟蹤而儲存在用戶本地終端上的數據.每個cookie 都是一個鍵值對.本文網站定義了兩類cookie,分別用于存儲滾動條位置和團隊詳情頁面被選中的tab 序號,達到用戶進入二級頁面瀏覽后再返回時頁面與進入之前完全相同的效果,給用戶良好的體驗.在JSP 文件的頁面退出事件回調函數“window.onbeforeunload()”中設置cookie,在頁面加載事件函數“window.onload()”中取出cookie 并應用它們來設置頁面顯示位置.將表示滾動條位置的鍵“scrollPos”設置為變量“y”并存儲在cookie 中的JavaScript 語句為:

document.cookie=“scrollPos=”+y;

4 平臺效果

為了展示網站的運行效果,本文在一臺蘋果XR型號手機的safari 瀏覽器上登錄網站,截取了一部分界面,具體包括:注冊、網站首頁、團隊詳情與BBS 首頁.登錄使用帳號為系統(tǒng)管理員“王宏”,如圖2所示.

圖2 吉林大學實踐創(chuàng)新管理平臺

從圖2可以看到,本文網站設計以深綠色為主,更具理性色彩,突出了網站正規(guī)正式并值得信賴的特征,也展現(xiàn)了大學生積極向上,蓬勃發(fā)展的精神面貌.網站清晰簡潔,功能連貫,有利于提高大學生對網站的認可度.

由于網站僅面向本校的師生,且出于安全考慮,當前只對校園網用戶開放了使用權限,校園網外無法訪問本網站.項目部署在一臺本地服務器上,服務器的配置為:8 核CPU,8 GB 內存,1 TB 硬盤,Windows Server 2008 企業(yè)版64 位操作系統(tǒng).網站使用的域名是在阿里云平臺上購買的.同時在阿里云平臺上購買了SSL 證書,以便于部分瀏覽器通過https 安全協(xié)議訪問本網站[12].

5 結論與展望

吉林大學實踐創(chuàng)新平臺主要服務于本科生課外實踐.經過幾個學期的發(fā)展與完善,培養(yǎng)出多個轉入實踐運營的項目團隊.大學生實踐創(chuàng)新管理平臺本身也是大學生創(chuàng)新創(chuàng)業(yè)項目的作品之一,由實踐創(chuàng)新平臺下屬的網絡開發(fā)團隊建設并維護.本文對網站架構及開發(fā)中使用的技術進行了介紹.在當前廣受關注的“互聯(lián)網+”背景下,管理網站的應用為實踐創(chuàng)新平臺提供了快捷、高效的宣傳渠道,也為學生之間交流信息提供了良好平臺.根據運營需要,后續(xù)會加入“實創(chuàng)檔案”功能,將優(yōu)秀項目成果、優(yōu)秀項目答辯過程視頻等在網站上展示出來,以供后期有計劃參與大學生實踐創(chuàng)新項目的學生進行學習參考.