基于Vue的義務支教城鎮村中小學教育網站

周城樂，蔡爾曼，陸梓豪，劉泳茵，鄭曉培

（廣州新華學院信息科學學院，東莞 523000）

0 引言

大學生支教活動從1994年開始，已經持續了近三十年。目前來說支教學校暫未覆蓋全面，人員方面也較少，因為有些學校較為偏僻，許多事情處理得并不完善；此外，物質條件相對艱苦，在一定程度上對支教人員、支教效果產生了不小的影響［1］。

該平臺為支教這一活動帶來更大的便捷。不僅能讓大學生注冊登錄還能讓社會人士注冊登錄，該平臺有志愿者進行實地考察，以最真實的圖片還原當地環境；志愿者會與當地人員溝通，并將情況如實更新在平臺上，給予報名人更多的選擇。此外，針對每一個地方的不同教學教材，該平臺還可提供專門的培訓，以便支教志愿者可以進行有針對性的備課。

1 相關技術

1.1 Vue框架

本平臺使用的前端框架是當下應用較為廣泛的Vue框架，它是一套構建用戶界面的輕量級漸進式框架，基于數據驅動和組件化的思想構建前端頁面，采用自底向上漸進式增量開發、設計［2］。通過MVVM模式（見圖1）思想實現數據雙向綁定，讓數據操作更為簡單。Vue框架的核心只關注視圖層，其具有易使用性、靈活性、高性能等特點。若使用Vue框架的開發人員具有HTML、CSS以及JavaScript的基礎，即可快速上手，簡單易學。

其提供的API參考了各大主流框架，簡單靈活并可以開發任意規模的應用，是目前應用廣泛的前端首選框架。為了提升用戶體驗和界面的美觀程度，本平臺的前端開發引入了ElementUI開源的組件庫，它是一套為前端開發者量身定做的組件庫。它不依賴于Vue，是現階段和Vue配合進行項目開發的一個較好的UI庫，其中有許多現成的框架，可以節約編寫樣式的時間，并且大大提高編程速率［3］。

1.2 SpringBoot框架

SpringBoot框架是Java平臺上的一種開源應用框架，它是基于Spring設計的全新開源輕量級框架。它繼承了Spring的優良特性，自帶Tomcat服務或Jetty等Servlet容器，簡化Spring應用的開發及搭建過程，實現了自動配置。SpringBoot框架中有兩個非常重要的策略：開箱即用和約定優于配置，SpringBoot提供了大量依賴包，無需配置文件即可實現大部分功能。同時根據軟件設計標準提供給開發人員一個默認框架，減少了大量配置工作，并且可以自動完成代碼編譯、測試和打包等工作，極大地提高了開發效率［3］。本平臺利用SpringBoot的優勢進行后臺管理系統的設計。

1.3 MySQL和Redis數據庫

MySQL是Web應用方面最好的關系數據庫管理應用軟件之一。MySQL具有體積小、速度快、總體擁有成本低、源代碼開源，支持多種操作系統等特點；核心程序采用完全的多線程編程，可以充分利用CPU。

Redis遠程字典服務是一個高性能的keyvalue存儲系統［4］，具有速度快、支持豐富數據類型、支持數據備份、持久化存儲、操作原子性等特性。

2 平臺功能設計與實現

2.1 總體設計

界面設計要符合人機界面設計的基本原則，保證網站的操作簡單和細節透明，本平臺界面采用單頁面開發方式，使用Vue框架進行開發，搭配ElementUI進行界面美化。前端的功能面向用戶，主要包括：首頁頁面、社區頁面、用戶信息頁面、客服頁面以及視頻資源頁面。后端則是連接數據庫，與前端做數據交互。后端能對相關信息進行管理，包括信息的增、刪、改、查等功能。前后端的具體設計模塊如圖2所示。

根據平臺需求分析，該平臺主要包括：熱門信息、新聞查詢、話題交流、用戶信息、客服以及視頻資源。

2.1.1 熱門信息、新聞查詢

進入該平臺后可以根據各種支教活動的熱門信息、新聞資訊、各大高校的信息來搜索支教學校。

2.1.2 話題交流

進入該頁面并且登錄成功后可以在該區域發表話題，分享教學以及生活方面的支教經驗，為后續人員提醒；也可以分享支教趣事、校園風景等；還可在話題下進行評論，便于網友們在該頁面實時交流心得體會等。

2.1.3 用戶信息

進入該頁面完成注冊后，系統將識別用戶的身份，區分是大學生還是社會人員，統一將信息錄入后臺。若是大學生，則會反饋出學校專門的頁面，里面包含該學生所屬學校發布的支教學校的相關信息，包括教師的住宿、入校通知、校園風光等，此外還包含該信息對應的學生學歷、年級、專業等，對于已報名的學生，學校還會發布相應的任務；若是社會人員，則會包含個人信息的錄入，收藏的視頻、文章、學校，以及報名后所獲得的任務。

2.1.4 視頻

進入該頁面可以獲取許多對應支教學校的教學技巧、備課技巧等。

進入該頁面后可以與該平臺客服取得聯系，使用者提出的問題，以及舉報、投訴或者急救需求都能得到解決。

2.2 后端功能

2.2.1 用戶信息管理

只有用戶本人可在個人頁面登錄自己的個人信息，對個人信息進行增加、刪除、查看、修改。

2.2.2 支教學校信息查詢

對支教學校信息模板進行管理，以便于用戶輸入某個特定的詞語時或者相關的詞語時可以查詢、篩選想要的信息。

2.2.3 熱門新聞信息管理

后臺人員對相關的熱門信息、新聞進行發布、查看、刪除、修改。

2.2.4 視頻信息管理

后臺人員對相關支教學校的相應視頻進行分類式發布、刪除、修改、查看。

要加快建設市級大宗農產品交易服務中心，集中力量搭建農產品物流信息平臺，大力支持各類涉農電子商務平臺和特色電子商務，加快發展農產品大市場、大流通。同時，大力發展現代物流網絡，為農村產業融合奠定一個堅實的物質基礎。

2.2.5 話題信息管理

用戶可以發布、修改、刪除、查詢自己的話題或者評論。

2.3 前后端設計

前端設計了多個頁面，將常見的功能都添加進來。前端使用Vue.js框架等前端語言編寫，同時使用了ElementUI組件庫來美化頁面。

后臺設置了信息管理等模塊功能，應用Java語言編寫，并利用Springboot框架的優良特性來提高編程效率。采用的是MySQL數據庫。該系統共用到了五個數據表，分別是支教活動信息表（z_activities）、支教資訊列表（z_news）、用戶信息表（z_users）、視頻信息表（x_videos）和實踐地信息表（z_address），使用主鍵相關聯可以很好地提高空間利用率，也方便信息的增刪改操作［5］。

2.4 系統實現

系統主要分為平臺前端界面實現和后臺管理兩大部分。前端界面使用Vue.js實現，核心功能是為用戶提供頁面展示的信息、播放視頻、信息查詢、社區分享等功能頁面。后臺通過SpringBoot框架，利用Java語言和MySQL、Redis數據庫進行開發。在數據庫設計上，以MySQL為主，以Redis為輔，MySQL作為主存儲，Redis用于緩存，加快系統的訪問速度。視頻播放、搜索功能等高性能需求使用Redis，而活動信息展示等不需要高性能的需求則使用MySQL［6］，以此來提高網站性能。服務接口API，實現前端界面與后臺管理的直接交互。

2.5 前端界面展示

根據系統架構設計以及功能模塊設計，完成代碼編寫與調試。網站首頁頁面和話題頁面分別如圖3和圖4所示。

3 結語

該平臺以城鎮村支教為主要發展點，以網站的形式為用戶提供登錄途徑。大力支持支教活動，為貧困地區帶來更好的服務和支持，盡量確保不遺漏任何一個貧困地區，將該項活動推廣至全國各地。