基于Vue框架開發(fā)的學(xué)生管理系統(tǒng)

李 云

（長(zhǎng)治職業(yè)技術(shù)學(xué)院，山西 長(zhǎng)治 046000）

由于JavaScript的應(yīng)用，網(wǎng)頁(yè)設(shè)計(jì)變得更加動(dòng)態(tài)以及功能越來(lái)越強(qiáng)大。我們把很多傳統(tǒng)的服務(wù)端代碼放到了瀏覽器中，這樣就產(chǎn)生成千上萬(wàn)連接html和css文件的JavaScript代碼，這些代碼缺乏組織性與條理性。因此，越來(lái)越多的網(wǎng)頁(yè)開發(fā)者開始使用JavaScript框架，例如，ANGULAR、REACT以及Vue。Vue是一款友好的、多性能、多用途、輕量級(jí)的JavaScript框架，它能夠幫設(shè)計(jì)者創(chuàng)建維護(hù)性更強(qiáng)、測(cè)試性更高的代碼庫(kù)；Vue也是漸進(jìn)式的JavaScript框架[1]，即，如果設(shè)計(jì)者已經(jīng)有了一個(gè)線程的服務(wù)端應(yīng)用，可以將Vue作為該應(yīng)用的一部分嵌入其中，帶來(lái)更加豐富的交互體驗(yàn)。Vue還有一個(gè)重要的特點(diǎn)是實(shí)現(xiàn)了前后端的分離，前端負(fù)責(zé)頁(yè)面的渲染和部分頁(yè)面交互的邏輯，然后通過(guò)網(wǎng)絡(luò)請(qǐng)求與后端進(jìn)行數(shù)據(jù)的交互；后端則著重關(guān)注業(yè)務(wù)邏輯的處理，直接操控?cái)?shù)據(jù)庫(kù)。前后端分離后，前后端開發(fā)模式由串行變?yōu)椴⑿?，使開發(fā)效率顯著提高[2]。這樣如果有一天要更新網(wǎng)頁(yè)部分，后臺(tái)連接數(shù)據(jù)庫(kù)的地方是可以不用變動(dòng)的，前后端都是獨(dú)立且又有關(guān)聯(lián)的。同時(shí)，如果網(wǎng)站遭受到黑客攻擊，黑客也只能訪問(wèn)到前端的Web服務(wù)器，訪問(wèn)不到后端的應(yīng)用服務(wù)器，大大提高了安全性。

現(xiàn)如今，手機(jī)App極大方便了人們的生活，人們可以隨時(shí)隨地利用手機(jī)進(jìn)行娛樂、辦公、通信和學(xué)習(xí)。但在很多高職院校中，仍然采取傳統(tǒng)的教學(xué)管理模式，很多教學(xué)教務(wù)方面的工作還是采用紙質(zhì)辦公、計(jì)算機(jī)處理模式，教學(xué)資料、學(xué)生資料乃至?xí)h內(nèi)容、通知等，還是打印出來(lái)，分發(fā)到各個(gè)部門。這些資料在印刷、轉(zhuǎn)送、通知等過(guò)程中浪費(fèi)了大量的人力、物力和時(shí)間，各部門的信息也得不到有效溝通，給工作帶來(lái)了很大不便，相關(guān)工作人員的工作受到很大限制。隨著網(wǎng)絡(luò)的發(fā)展，普通的教學(xué)管理方式正面臨著變革[3]，借助計(jì)算機(jī)、手機(jī)、互聯(lián)網(wǎng)等無(wú)紙化辦公方式，很容易實(shí)現(xiàn)信息共享和協(xié)同辦公，可以減輕教師和行政人員的工作負(fù)擔(dān)，讓老師們從煩瑣、重復(fù)的低級(jí)勞動(dòng)中解放出來(lái)，騰出精力和時(shí)間去做更有意義、更有價(jià)值的工作與研究，并且節(jié)約了學(xué)校資金和社會(huì)能源，可以說(shuō)是一舉多得。基于以上背景，筆者試著利用HTML5中網(wǎng)頁(yè)自適應(yīng)于各種終端屏幕的功能、Vue的漸進(jìn)式的JavaScript框架以及可打包性，采用前后端分離的部署方式，做一個(gè)學(xué)生信息管理系統(tǒng)的App。

1 需求分析

為了滿足需求，此App應(yīng)具備登錄功能和對(duì)數(shù)據(jù)的基本操作功能，還應(yīng)為將來(lái)其他功能的擴(kuò)展和添加留出空間。

登錄功能：為了確保信息安全，每次退出App后都需要重新輸入登錄名和密碼才可以重新進(jìn)入系統(tǒng)，每隔30分鐘沒有進(jìn)行任何數(shù)據(jù)操作，則自動(dòng)退出App。

數(shù)據(jù)的基本操作功能：管理員可根據(jù)實(shí)際情況對(duì)學(xué)生的數(shù)據(jù)進(jìn)行查詢、修改、刪除和插入新記錄等操作。

2 系統(tǒng)設(shè)計(jì)

首先，根據(jù)學(xué)生的信息特點(diǎn)，創(chuàng)建MySql數(shù)據(jù)庫(kù)：學(xué)生管理（xsgl）。在這里使用MySql數(shù)據(jù)庫(kù)的原因，是因?yàn)樗蔷哂休p量級(jí)、開源的、可跨平臺(tái)的數(shù)據(jù)庫(kù)，數(shù)據(jù)處理速度快，可靠性強(qiáng)，很少出現(xiàn)宕機(jī)，安裝也Element UI和Vant UI，這兩個(gè)是開源的移動(dòng)前端組件庫(kù)，它們包含幾十個(gè)高質(zhì)量組件，覆蓋幾乎所有移動(dòng)端各類場(chǎng)景，能夠幫助我們做出更具移動(dòng)端特性的頁(yè)面。隨后創(chuàng)建Vue的單文件組件，它包含了各自的html、JavaScript、css內(nèi)容。設(shè)計(jì)出登錄頁(yè)面（如圖1所示），并在Google瀏覽器中用開發(fā)者工具打開，以便查看效果和調(diào)試代碼。

圖1 登錄頁(yè)面

為了防止過(guò)度調(diào)用監(jiān)控事件而產(chǎn)生卡頓，需要通過(guò)定義屬性，進(jìn)行雙向綁定改變body的高度，watch()方法在監(jiān)測(cè)窗口大小變化時(shí)觸發(fā)，通過(guò)改變屬性值達(dá)到預(yù)期效果，主要代碼如下：很方便等優(yōu)點(diǎn)。在數(shù)據(jù)庫(kù)中創(chuàng)建用戶表、學(xué)生表、班級(jí)表和專業(yè)表等數(shù)據(jù)表，用戶表中數(shù)據(jù)為登錄做準(zhǔn)備，學(xué)生表和班級(jí)表中的數(shù)據(jù)會(huì)基于“班級(jí)代碼”做一個(gè)關(guān)聯(lián)，便于此后擴(kuò)展出專業(yè)信息、教師信息、住宿信息等，可以將這個(gè)App的功能擴(kuò)展得更加完善和強(qiáng)大。

其次，利用IDEA工具創(chuàng)建Web項(xiàng)目，項(xiàng)目中內(nèi)置tomcat服務(wù)器，此服務(wù)器是一個(gè)開源的Web服務(wù)器，具有處理HTML頁(yè)面的功能，另外，它還是Servlet和JSP的容器，獨(dú)立的Servlet容器是tomcat的默認(rèn)模式，使用方便。此項(xiàng)目中需要完成的任務(wù)有：連接數(shù)據(jù)庫(kù)，對(duì)數(shù)據(jù)庫(kù)中的數(shù)據(jù)進(jìn)行查詢、刪除、增加、修改編寫相關(guān)的Servlet文件。

最后，創(chuàng)建Vue項(xiàng)目。創(chuàng)建初期，需注意同時(shí)加載

該頁(yè)面要完成登錄功能，給“登錄”按鈕設(shè)定動(dòng)作，將獲取到的兩個(gè)文本框中的內(nèi)容，利用ajax傳值，在Web項(xiàng)目中查找是否在數(shù)據(jù)庫(kù)的用戶表中存在相同的記錄，用來(lái)測(cè)試用戶名和密碼是否正確，正確則登錄成功，否則登錄失敗，SQL語(yǔ)句為

其中，usertable為用戶表，username為登錄的用戶名，password為登錄的密碼，將用登錄時(shí)填寫的用戶名和密碼，與用戶表中已有的信息進(jìn)行比對(duì)，判斷是否有一條完全相同的記錄。

登錄成功后，將進(jìn)入“學(xué)生管理”頁(yè)面（如圖2所示），由于是在手機(jī)上顯示，所以只能看到學(xué)生信息中的“學(xué)號(hào)”“姓名”“性別”這三項(xiàng)基本內(nèi)容，為了能看到學(xué)生的所有信息，設(shè)置了每一項(xiàng)前面的下拉箭頭，可以展開學(xué)生信息的所有內(nèi)容（如圖3所示），再次單擊前端箭頭符號(hào)，信息將會(huì)收起來(lái)。這些功能就是利用Element-UI和Vant UI中的組件實(shí)現(xiàn)的，這些功能的添加，更加符合手機(jī)用戶的操作習(xí)慣。

圖2 學(xué)生管理頁(yè)面

圖3 展開后的信息

在頁(yè)面中，要想查找學(xué)生信息，可以在搜索框中輸入關(guān)鍵字，這個(gè)關(guān)鍵字可以是任何的學(xué)生信息中的內(nèi)容。首先要給搜索框添加@click="load"屬性，搜索時(shí)會(huì)自動(dòng)調(diào)用load()方法，方法如下：

瀏覽器發(fā)送一個(gè)HTTP請(qǐng)求，HTTP請(qǐng)求由Web容器分配給特定的Servlet進(jìn)行處理，Servlet的本質(zhì)是一個(gè)Java對(duì)象，這個(gè)對(duì)象擁有一系列的方法來(lái)處理HTTP請(qǐng)求，進(jìn)行頁(yè)面導(dǎo)航和業(yè)務(wù)層邏輯的處理。采用這種方式前提是要能區(qū)分請(qǐng)求的方式，并把請(qǐng)求的參數(shù)進(jìn)行封裝。一個(gè)請(qǐng)求對(duì)應(yīng)一個(gè)Servlet，需要在Web項(xiàng)目中分別書寫出來(lái)。

上述代碼發(fā)送的請(qǐng)求頁(yè)面中“QueryServlet”就是Web項(xiàng)目中進(jìn)行查詢的Servlet。在這里，參數(shù)被封裝為json格式，并連帶type: "xsb.query"（這對(duì)應(yīng)的是一條SQL語(yǔ)句）一起發(fā)送到“QueryServlet”，再由這個(gè)對(duì)象將參數(shù)獲得并調(diào)用真正參與查詢的類，進(jìn)而從數(shù)據(jù)庫(kù)中查詢到所需要的結(jié)果。QueryServlet中調(diào)用查詢類的代碼如下：

例如，要查詢學(xué)生信息，可以在搜索框中輸入任何想查詢的結(jié)果，就能顯示出想要的結(jié)果，如搜索出所有的男生，在搜索框中輸入“男”，就會(huì)出現(xiàn)所有性別為“男”的學(xué)生（如圖4所示）。要想實(shí)現(xiàn)這個(gè)功能，SQL語(yǔ)句是重點(diǎn)：

圖4 按性別搜索

這段SQL語(yǔ)句完成任務(wù)：將xsb重命名為x，小括號(hào)中進(jìn)行子查詢，查詢xsb中所有字段，并用concat函數(shù)將每行的每一個(gè)字段連接起來(lái)，并用空格隔開，這是為了保持字段的的獨(dú)立性，每一個(gè)字段不要和其他字段有勾連，為進(jìn)行模糊查詢做準(zhǔn)備，將這樣的字段組合后重新定義為一個(gè)新的字段“cha”，將學(xué)生表中每一項(xiàng)和這個(gè)“cha”組成一個(gè)新的表，起名叫“tab”，并對(duì)它進(jìn)行模糊查詢，最后小括號(hào)中的“?”代表在搜索框中輸入的關(guān)鍵字。

依次添加刪除、修改、增加功能，這樣學(xué)生信息管理系統(tǒng)就趨于完善。如果再將院校機(jī)構(gòu)設(shè)置、新聞瀏覽、招生就業(yè)、學(xué)生成績(jī)查詢、課表查詢等功能頁(yè)面添加進(jìn)去，就會(huì)成為一個(gè)展示學(xué)校信息的集瀏覽和查詢功能相結(jié)合的專屬的網(wǎng)站。

3 打包

所有的功能和頁(yè)面都完成后，開始進(jìn)行打包和生成App。

首先，在運(yùn)行窗口用代碼進(jìn)行打包，打包的源文件是Vue項(xiàng)目中的dist文件夾，打包代碼如下：

其次，在打包后，需要用HBuilder軟件生成App。HBuilder是現(xiàn)在常用的打包工具，打包過(guò)程相當(dāng)于給制作出的網(wǎng)頁(yè)套一個(gè)手機(jī)App的外殼，關(guān)鍵是，這款軟件還是我們國(guó)人自己研發(fā)出來(lái)的。在設(shè)置基本信息時(shí)，應(yīng)用名稱就是你希望生成的App的名稱，在這里設(shè)置為學(xué)生管理，其中的Appid需從云端自動(dòng)獲取。配置圖標(biāo)也就是生成的App的圖標(biāo)樣式，盡量選擇有一定含義的圖片，筆者在這里將自己學(xué)校的?；兆鳛锳pp的運(yùn)行圖標(biāo)。設(shè)置完成后，執(zhí)行“發(fā)行”—“發(fā)行為原生安裝包”，并選擇生成的apk種類為“Android”。

打包完成后，將生成的apk文件保存并運(yùn)行安裝在安卓手機(jī)中，這個(gè)App就制作完成了，可以正式使用了（如圖5所示）。

圖5 運(yùn)行為手機(jī)App

4 結(jié)束語(yǔ)

前后端分離是現(xiàn)階段設(shè)計(jì)網(wǎng)頁(yè)的主流技巧。一是職責(zé)劃分需要，頁(yè)面開發(fā)和業(yè)務(wù)邏輯開發(fā)并行可縮短開發(fā)周期；二是術(shù)業(yè)有專攻，隨著頁(yè)面的交互、UI要求不斷提升，前端設(shè)計(jì)人員在頁(yè)面方面的開發(fā)更具有專業(yè)性；三是前端具有強(qiáng)大的生態(tài)系統(tǒng)，有許多現(xiàn)成的組件和框架可以進(jìn)行大項(xiàng)目的模塊化開發(fā)，真正意義上實(shí)現(xiàn)交互和邏輯、邏輯和物理上的完全分離。

前后端分離的優(yōu)點(diǎn)是：對(duì)于中大型項(xiàng)目，能夠提升開發(fā)效率，提高交互和UI效果，縮短開發(fā)周期；前端能夠處理一大部分驗(yàn)證和交互邏輯，從而減少與服務(wù)器間的交互次數(shù)，減小服務(wù)器處理壓力，并且頁(yè)面是由瀏覽器渲染生成；前端具有強(qiáng)大的組件庫(kù)和處理工具，項(xiàng)目更容易跨平臺(tái)；可以降低維護(hù)成本；接口和前端組件能夠重復(fù)使用。缺點(diǎn)是：需要更多的溝通成本；未進(jìn)行前后端分離時(shí)，由后端開發(fā)人員完成整個(gè)項(xiàng)目的開發(fā)；前后端分離后需要和前端設(shè)計(jì)者就接口進(jìn)行溝通和聯(lián)調(diào)；對(duì)于小、交互性要求不高的項(xiàng)目，進(jìn)行前后端分離反而效率較低；部署流程更復(fù)雜。前后端分離一般是兩個(gè)項(xiàng)目環(huán)境，需要投入更多硬件和運(yùn)營(yíng)維護(hù)。

利用Vue框架開發(fā)的App具有輕巧、靈活等特點(diǎn)，它不僅易于上手，而且還便于與第三方庫(kù)或已完成的項(xiàng)目進(jìn)行整合。當(dāng)前階段，在移動(dòng)終端的使用越來(lái)越廣泛，我國(guó)的網(wǎng)絡(luò)技術(shù)越來(lái)越成熟，用戶的各類需求種類越來(lái)越多的背景下，利用Vue開發(fā)手機(jī)App將成為一種趨勢(shì)，可以預(yù)測(cè)的是，這種前端技術(shù)很有可能遍布從Web到桌面應(yīng)用，從計(jì)算機(jī)、移動(dòng)端到智能電視、游戲機(jī)等各個(gè)角落。同時(shí)，開發(fā)一個(gè)功能齊全、使用簡(jiǎn)單的學(xué)生管理系統(tǒng)App，具有積極的社會(huì)意義。設(shè)計(jì)并制作一個(gè)完整的校園網(wǎng)站可以滿足教師和學(xué)生的雙重訪問(wèn)需求，還會(huì)給學(xué)校帶來(lái)一定的廣告效應(yīng)，再將這個(gè)網(wǎng)站打包成App，這個(gè)系統(tǒng)將會(huì)擴(kuò)展到學(xué)校的方方面面，相信一定會(huì)提高學(xué)校管理者的工作效率和工作的靈活性。