基于SpringBoot和Framework7框架的作業批改系統設計

夏江林 杜源 羅祥斌

（四川輕化工大學計算機學院 四川 宜賓 644000）

引言

如今在線教育類產品深受人們的喜愛，在家足不出戶就能隨時隨地學習，作業輔導類軟件較為常見，但是專注于老師在線作業批改的軟件并不多，為此，我們設計了一款老師和學生可以跨時間，跨地點，跨平臺使用的作業批改系統。本文主要探討系統基于SpringBoot，Cordova等技術實現HybridApp[2]。

1 系統總體設計

系統前后端分離，采用移動混合應用開發技術，主要分為客戶端和服務器端兩大部分。客戶端采用移動應用框架Framework7和Vue框架，同時采用了Cordova跨平臺開發框架。服務器端采用Tomcat9.0作為服務器，基于SpringBoot進行后臺開發，使用Mybatis持久層框架連接Mysql數據庫和Shiro安全框架執行用戶身份驗證。系統架構如圖1所示。

2 系統功能模塊設計

根據需求設計，主要有如下的功能模塊。登錄注冊：用戶需先進行注冊登陸才能正常使用批改系統相關功能；作業上傳：學生用戶拍照上傳習題作業，可根據要批改的學科上傳多張作業照片；作業批改：老師批改上傳的作業；支付：學生用戶在使用批改功能時需要支付一定的作業批改費用；圈子：用戶進行學習交流，分享生活的一個社交圈子。

3 數據庫設計

數據庫采用Mysql關系型數據庫。如圖2所示，針對不同的用戶群體設計了角色表（role），通過id設置用戶的角色。與role表對應的是權限表（permission），roleid對應不同的操作權限，如學生只能上傳而不能批改作業。作業表（homework）中通過id區別不同作業，表中設置了isdeal表字段標識作業的批改狀態，作業一經批改后其批改標識將被更改，作業便不會再出現在待批改的作業列表中，保證同一份作業不會被反復批改。圖片表（img）存儲了每一份作業圖片的存儲路徑，查詢作業時通過作業圖片的絕對路徑找到對應的圖片。此外還設計有作業類型表（htype）和用戶表（user）等。

4 后端設計

4.1 SpringBoot技術[3]

SpringBoot是對Spring的全新升級，使用注解形式配置，項目使用Maven技術進行管理。SpringBoot用于后臺技術開發，接收前端的請求和數據，在Service層進行邏輯判斷處理，返回請求的數據和結果。

4.2 Mybatis技術

Mybatis是一種輕量級的數據庫開發框架，在項目的dao層進行使用。基于SpringBoot框架的整合，在使用上無需再寫xml配置文件，使用@select、@update、@delete、@insert注解標記在方法上實現增、刪、改、查操作。完成后臺的服務（Service）層對數據庫的訪問。

4.3 Shiro技術[4]

Shiro是一種Java的安全框架，在Web應用開發過程中實現用戶的身份驗證、授權、密碼的管理。用戶的登錄信息Shiro把它放在自己的Subject組件里，再由Realm組件作為橋梁，在數據庫里面進行用戶身份信息的訪問。

5 前端設計

5.1 界面設計

為了給用戶帶來良好的使用體驗，產品采用以藍色為主白色為輔的色調。藍色象征學海，白色象征書本。學生用戶只有上傳作業的功能，而教師用戶可以同時上傳批改作業。產品還包含聊天界面和圈子界面。

5.2 Framework7技術

系統UI界面采用Framework7框架，它是一種仿真Android、IOS、WP等平臺的前端框架，它所提供的界面效果近乎原生移動應用，從而通過設計H5界面來開發Android、IOS界面。

5.3 Vue技術

使用Vue前端框架，利用vue的特性，可以非常方便的在不同組件之間傳遞參數。同時Framework7和Vue可以結合，開發出近乎原生應用效果的產品。

5.4 Cordova技術[5]

Cordova是一種將WEB產品打包成Android、IOS兩大平臺應用程序的轉換工具，由此實現本系統的跨平臺支持。Cordova的開源相機插件以及圖片編輯插件，可以通過JS代碼調用，實現拍照及圖片編輯功能。

5.5 前后端分離數據交互

系統采用ajax異步技術實現前后端傳遞數據，利用JSON作為數據媒介。

6 結語

本文設計了一種基于SpringBoot，Framework7和Cordova的跨平臺作業批改系統，相對于傳統的原生應用開發，采用移動應用混合開發技術實現了同一份代碼經過封裝能夠運行在不同平臺上，極大的節省了開發的人力和時間成本。