大學(xué)生實踐創(chuàng)新管理平臺①

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

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

2(吉林大學(xué) 計算機(jī)科學(xué)與技術(shù)學(xué)院,長春 130021)

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

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

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

1 功能設(shè)計

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

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

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

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

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

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

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

2 權(quán)限分配

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

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

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

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

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

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

3.1 數(shù)據(jù)庫實現(xiàn)

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

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

圖1 數(shù)據(jù)庫模型圖

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

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

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

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

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

UUID.randomUUID().toString();

圖片存放在服務(wù)器上相應(yīng)的文件夾中.

3.2 前端實現(xiàn)

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

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

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

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

(3)JavaScript 技術(shù)應(yīng)用:JavaScript 腳本編寫的程序可以直接寫入Web 頁面并由調(diào)用它的瀏覽器來解釋執(zhí)行,作用是在客戶端完成一些基本的交互,提高客戶端的響應(yīng)時間.本文網(wǎng)站應(yīng)用了JavaScript 程序?qū)磳⑻峤坏椒?wù)器的數(shù)據(jù)作驗證,如學(xué)生證號是否合法,表單必填項是否完整等.另外鼠標(biāo)經(jīng)過圖片時顯示可操作按鈕等瀏覽器操作也是用JavaScript 來實現(xiàn)的.

3.3 服務(wù)端實現(xiàn)

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

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

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

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

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

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

3.4 關(guān)鍵技術(shù)

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

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

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

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

document.cookie=“scrollPos=”+y;

4 平臺效果

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

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

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

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

5 結(jié)論與展望

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