基于Vue的義務(wù)支教城鎮(zhèn)村中小學(xué)教育網(wǎng)站

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

（廣州新華學(xué)院信息科學(xué)學(xué)院，東莞 523000）

0 引言

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

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

1 相關(guān)技術(shù)

1.1 Vue框架

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

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

1.2 SpringBoot框架

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

1.3 MySQL和Redis數(shù)據(jù)庫

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

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

2 平臺功能設(shè)計與實現(xiàn)

2.1 總體設(shè)計

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

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

2.1.1 熱門信息、新聞查詢

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

2.1.2 話題交流

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

2.1.3 用戶信息

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

2.1.4 視頻

進入該頁面可以獲取許多對應(yīng)支教學(xué)校的教學(xué)技巧、備課技巧等。

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

2.2 后端功能

2.2.1 用戶信息管理

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

2.2.2 支教學(xué)校信息查詢

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

2.2.3 熱門新聞信息管理

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

2.2.4 視頻信息管理

后臺人員對相關(guān)支教學(xué)校的相應(yīng)視頻進行分類式發(fā)布、刪除、修改、查看。

要加快建設(shè)市級大宗農(nóng)產(chǎn)品交易服務(wù)中心，集中力量搭建農(nóng)產(chǎn)品物流信息平臺，大力支持各類涉農(nóng)電子商務(wù)平臺和特色電子商務(wù)，加快發(fā)展農(nóng)產(chǎn)品大市場、大流通。同時，大力發(fā)展現(xiàn)代物流網(wǎng)絡(luò)，為農(nóng)村產(chǎn)業(yè)融合奠定一個堅實的物質(zhì)基礎(chǔ)。

2.2.5 話題信息管理

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

2.3 前后端設(shè)計

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

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

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

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

2.5 前端界面展示

根據(jù)系統(tǒng)架構(gòu)設(shè)計以及功能模塊設(shè)計，完成代碼編寫與調(diào)試。網(wǎng)站首頁頁面和話題頁面分別如圖3和圖4所示。

3 結(jié)語

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