基于Vue框架開發的學生管理系統

李 云

（長治職業技術學院，山西 長治 046000）

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

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

1 需求分析

為了滿足需求，此App應具備登錄功能和對數據的基本操作功能，還應為將來其他功能的擴展和添加留出空間。

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

數據的基本操作功能：管理員可根據實際情況對學生的數據進行查詢、修改、刪除和插入新記錄等操作。

2 系統設計

首先，根據學生的信息特點，創建MySql數據庫：學生管理（xsgl）。在這里使用MySql數據庫的原因，是因為它是具有輕量級、開源的、可跨平臺的數據庫，數據處理速度快，可靠性強，很少出現宕機，安裝也Element UI和Vant UI，這兩個是開源的移動前端組件庫，它們包含幾十個高質量組件，覆蓋幾乎所有移動端各類場景，能夠幫助我們做出更具移動端特性的頁面。隨后創建Vue的單文件組件，它包含了各自的html、JavaScript、css內容。設計出登錄頁面（如圖1所示），并在Google瀏覽器中用開發者工具打開，以便查看效果和調試代碼。

圖1 登錄頁面

為了防止過度調用監控事件而產生卡頓，需要通過定義屬性，進行雙向綁定改變body的高度，watch()方法在監測窗口大小變化時觸發，通過改變屬性值達到預期效果，主要代碼如下：很方便等優點。在數據庫中創建用戶表、學生表、班級表和專業表等數據表，用戶表中數據為登錄做準備，學生表和班級表中的數據會基于“班級代碼”做一個關聯，便于此后擴展出專業信息、教師信息、住宿信息等，可以將這個App的功能擴展得更加完善和強大。

其次，利用IDEA工具創建Web項目，項目中內置tomcat服務器，此服務器是一個開源的Web服務器，具有處理HTML頁面的功能，另外，它還是Servlet和JSP的容器，獨立的Servlet容器是tomcat的默認模式，使用方便。此項目中需要完成的任務有：連接數據庫，對數據庫中的數據進行查詢、刪除、增加、修改編寫相關的Servlet文件。

最后，創建Vue項目。創建初期，需注意同時加載

該頁面要完成登錄功能，給“登錄”按鈕設定動作，將獲取到的兩個文本框中的內容，利用ajax傳值，在Web項目中查找是否在數據庫的用戶表中存在相同的記錄，用來測試用戶名和密碼是否正確，正確則登錄成功，否則登錄失敗，SQL語句為

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

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

圖2 學生管理頁面

圖3 展開后的信息

在頁面中，要想查找學生信息，可以在搜索框中輸入關鍵字，這個關鍵字可以是任何的學生信息中的內容。首先要給搜索框添加@click="load"屬性，搜索時會自動調用load()方法，方法如下：

瀏覽器發送一個HTTP請求，HTTP請求由Web容器分配給特定的Servlet進行處理，Servlet的本質是一個Java對象，這個對象擁有一系列的方法來處理HTTP請求，進行頁面導航和業務層邏輯的處理。采用這種方式前提是要能區分請求的方式，并把請求的參數進行封裝。一個請求對應一個Servlet，需要在Web項目中分別書寫出來。

上述代碼發送的請求頁面中“QueryServlet”就是Web項目中進行查詢的Servlet。在這里，參數被封裝為json格式，并連帶type: "xsb.query"（這對應的是一條SQL語句）一起發送到“QueryServlet”，再由這個對象將參數獲得并調用真正參與查詢的類，進而從數據庫中查詢到所需要的結果。QueryServlet中調用查詢類的代碼如下：

例如，要查詢學生信息，可以在搜索框中輸入任何想查詢的結果，就能顯示出想要的結果，如搜索出所有的男生，在搜索框中輸入“男”，就會出現所有性別為“男”的學生（如圖4所示）。要想實現這個功能，SQL語句是重點：

圖4 按性別搜索

這段SQL語句完成任務：將xsb重命名為x，小括號中進行子查詢，查詢xsb中所有字段，并用concat函數將每行的每一個字段連接起來，并用空格隔開，這是為了保持字段的的獨立性，每一個字段不要和其他字段有勾連，為進行模糊查詢做準備，將這樣的字段組合后重新定義為一個新的字段“cha”，將學生表中每一項和這個“cha”組成一個新的表，起名叫“tab”，并對它進行模糊查詢，最后小括號中的“?”代表在搜索框中輸入的關鍵字。

依次添加刪除、修改、增加功能，這樣學生信息管理系統就趨于完善。如果再將院校機構設置、新聞瀏覽、招生就業、學生成績查詢、課表查詢等功能頁面添加進去，就會成為一個展示學校信息的集瀏覽和查詢功能相結合的專屬的網站。

3 打包

所有的功能和頁面都完成后，開始進行打包和生成App。

首先，在運行窗口用代碼進行打包，打包的源文件是Vue項目中的dist文件夾，打包代碼如下：

其次，在打包后，需要用HBuilder軟件生成App。HBuilder是現在常用的打包工具，打包過程相當于給制作出的網頁套一個手機App的外殼，關鍵是，這款軟件還是我們國人自己研發出來的。在設置基本信息時，應用名稱就是你希望生成的App的名稱，在這里設置為學生管理，其中的Appid需從云端自動獲取。配置圖標也就是生成的App的圖標樣式，盡量選擇有一定含義的圖片，筆者在這里將自己學校的校徽作為App的運行圖標。設置完成后，執行“發行”—“發行為原生安裝包”，并選擇生成的apk種類為“Android”。

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

圖5 運行為手機App

4 結束語

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

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

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