夏江林 杜源 羅祥斌

（四川輕化工大學(xué)計(jì)算機(jī)學(xué)院 四川 宜賓 644000）

引言

如今在線教育類產(chǎn)品深受人們的喜愛，在家足不出戶就能隨時(shí)隨地學(xué)習(xí)，作業(yè)輔導(dǎo)類軟件較為常見，但是專注于老師在線作業(yè)批改的軟件并不多，為此，我們設(shè)計(jì)了一款老師和學(xué)生可以跨時(shí)間，跨地點(diǎn)，跨平臺(tái)使用的作業(yè)批改系統(tǒng)。本文主要探討系統(tǒng)基于SpringBoot，Cordova等技術(shù)實(shí)現(xiàn)HybridApp[2]。

1 系統(tǒng)總體設(shè)計(jì)

系統(tǒng)前后端分離，采用移動(dòng)混合應(yīng)用開發(fā)技術(shù)，主要分為客戶端和服務(wù)器端兩大部分?？蛻舳瞬捎靡苿?dòng)應(yīng)用框架Framework7和Vue框架，同時(shí)采用了Cordova跨平臺(tái)開發(fā)框架。服務(wù)器端采用Tomcat9.0作為服務(wù)器，基于SpringBoot進(jìn)行后臺(tái)開發(fā)，使用Mybatis持久層框架連接Mysql數(shù)據(jù)庫和Shiro安全框架執(zhí)行用戶身份驗(yàn)證。系統(tǒng)架構(gòu)如圖1所示。

2 系統(tǒng)功能模塊設(shè)計(jì)

根據(jù)需求設(shè)計(jì)，主要有如下的功能模塊。登錄注冊：用戶需先進(jìn)行注冊登陸才能正常使用批改系統(tǒng)相關(guān)功能；作業(yè)上傳：學(xué)生用戶拍照上傳習(xí)題作業(yè)，可根據(jù)要批改的學(xué)科上傳多張作業(yè)照片；作業(yè)批改：老師批改上傳的作業(yè)；支付：學(xué)生用戶在使用批改功能時(shí)需要支付一定的作業(yè)批改費(fèi)用；圈子：用戶進(jìn)行學(xué)習(xí)交流，分享生活的一個(gè)社交圈子。

3 數(shù)據(jù)庫設(shè)計(jì)

數(shù)據(jù)庫采用Mysql關(guān)系型數(shù)據(jù)庫。如圖2所示，針對不同的用戶群體設(shè)計(jì)了角色表（role），通過id設(shè)置用戶的角色。與role表對應(yīng)的是權(quán)限表（permission），roleid對應(yīng)不同的操作權(quán)限，如學(xué)生只能上傳而不能批改作業(yè)。作業(yè)表（homework）中通過id區(qū)別不同作業(yè)，表中設(shè)置了isdeal表字段標(biāo)識(shí)作業(yè)的批改狀態(tài)，作業(yè)一經(jīng)批改后其批改標(biāo)識(shí)將被更改，作業(yè)便不會(huì)再出現(xiàn)在待批改的作業(yè)列表中，保證同一份作業(yè)不會(huì)被反復(fù)批改。圖片表（img）存儲(chǔ)了每一份作業(yè)圖片的存儲(chǔ)路徑，查詢作業(yè)時(shí)通過作業(yè)圖片的絕對路徑找到對應(yīng)的圖片。此外還設(shè)計(jì)有作業(yè)類型表（htype）和用戶表（user）等。

4 后端設(shè)計(jì)

4.1 SpringBoot技術(shù)[3]

SpringBoot是對Spring的全新升級，使用注解形式配置，項(xiàng)目使用Maven技術(shù)進(jìn)行管理。SpringBoot用于后臺(tái)技術(shù)開發(fā)，接收前端的請求和數(shù)據(jù)，在Service層進(jìn)行邏輯判斷處理，返回請求的數(shù)據(jù)和結(jié)果。

4.2 Mybatis技術(shù)

Mybatis是一種輕量級的數(shù)據(jù)庫開發(fā)框架，在項(xiàng)目的dao層進(jìn)行使用?；赟pringBoot框架的整合，在使用上無需再寫xml配置文件，使用@select、@update、@delete、@insert注解標(biāo)記在方法上實(shí)現(xiàn)增、刪、改、查操作。完成后臺(tái)的服務(wù)（Service）層對數(shù)據(jù)庫的訪問。

4.3 Shiro技術(shù)[4]

Shiro是一種Java的安全框架，在Web應(yīng)用開發(fā)過程中實(shí)現(xiàn)用戶的身份驗(yàn)證、授權(quán)、密碼的管理。用戶的登錄信息Shiro把它放在自己的Subject組件里，再由Realm組件作為橋梁，在數(shù)據(jù)庫里面進(jìn)行用戶身份信息的訪問。

5 前端設(shè)計(jì)

5.1 界面設(shè)計(jì)

為了給用戶帶來良好的使用體驗(yàn)，產(chǎn)品采用以藍(lán)色為主白色為輔的色調(diào)。藍(lán)色象征學(xué)海，白色象征書本。學(xué)生用戶只有上傳作業(yè)的功能，而教師用戶可以同時(shí)上傳批改作業(yè)。產(chǎn)品還包含聊天界面和圈子界面。

5.2 Framework7技術(shù)

系統(tǒng)UI界面采用Framework7框架，它是一種仿真Android、IOS、WP等平臺(tái)的前端框架，它所提供的界面效果近乎原生移動(dòng)應(yīng)用，從而通過設(shè)計(jì)H5界面來開發(fā)Android、IOS界面。

5.3 Vue技術(shù)

使用Vue前端框架，利用vue的特性，可以非常方便的在不同組件之間傳遞參數(shù)。同時(shí)Framework7和Vue可以結(jié)合，開發(fā)出近乎原生應(yīng)用效果的產(chǎn)品。

5.4 Cordova技術(shù)[5]

Cordova是一種將WEB產(chǎn)品打包成Android、IOS兩大平臺(tái)應(yīng)用程序的轉(zhuǎn)換工具，由此實(shí)現(xiàn)本系統(tǒng)的跨平臺(tái)支持。Cordova的開源相機(jī)插件以及圖片編輯插件，可以通過JS代碼調(diào)用，實(shí)現(xiàn)拍照及圖片編輯功能。

5.5 前后端分離數(shù)據(jù)交互

系統(tǒng)采用ajax異步技術(shù)實(shí)現(xiàn)前后端傳遞數(shù)據(jù)，利用JSON作為數(shù)據(jù)媒介。

6 結(jié)語

本文設(shè)計(jì)了一種基于SpringBoot，F(xiàn)ramework7和Cordova的跨平臺(tái)作業(yè)批改系統(tǒng)，相對于傳統(tǒng)的原生應(yīng)用開發(fā)，采用移動(dòng)應(yīng)用混合開發(fā)技術(shù)實(shí)現(xiàn)了同一份代碼經(jīng)過封裝能夠運(yùn)行在不同平臺(tái)上，極大的節(jié)省了開發(fā)的人力和時(shí)間成本。