齊善魯 馬徳俊 梁雪

摘要：基于SpringBoot與Vue框架，通過前后端分離的方式搭建了一種方便學(xué)生查閱、教師教學(xué)的開放式軟件開發(fā)案例教學(xué)平臺。平臺后端利用MyBatis框架訪問數(shù)據(jù)庫，采用SpringBoot框架進行后端邏輯設(shè)計，封裝API接口供前端進行請求訪問，前端采用漸進式的Vue框架進行界面設(shè)計與實現(xiàn)，最終設(shè)計了基于B/S架構(gòu)的開放式軟件開發(fā)案例教學(xué)平臺，實現(xiàn)了對不同系統(tǒng)架構(gòu)、不同類型的軟件開發(fā)案例的管理與展示。

關(guān)鍵詞：SpringBoot;軟件開發(fā);教學(xué)案例;Vue;開放式

中圖分類號：TP311? ? ? 文獻標(biāo)識碼：A

文章編號：1009-3044（2021）28-0071-03

開放科學(xué)（資源服務(wù)）標(biāo)識碼（OSID）：

Design of Open Software Development Case Teaching Platform Based on SpringBoot

QI Shan-lu， MA De-jun， LIANG Xue

（School of Computer and Control Engineering， Yantai University， Yantai 264005， China）

Abstract： Based on the framework of SpringBoot and Vue， an open software development case teaching platform is built， which is convenient for students to consult and teachers to teach. The back-end of the platform uses mybatis framework to access the database， uses springboot framework to design the back-end logic， encapsulates the API interface for the front-end to request access， and the front-end uses the progressive Vue framework to design and implement the interface. Finally， an open software development case teaching platform based on B / S architecture is designed， which realizes the teaching of different system architectures management and presentation of different types of software development cases.

Key words： SpringBoot; software development; teaching case; Vue;open style

1 背景

以服務(wù)為導(dǎo)向，以用戶需求為目標(biāo)，以互聯(lián)網(wǎng)和云計算為載體的“互聯(lián)網(wǎng)+”式的軟件開發(fā)方法逐漸成為各互聯(lián)網(wǎng)公司的主流開發(fā)方式。為滿足就業(yè)需求，現(xiàn)階段的各層次的學(xué)校在軟件開發(fā)教學(xué)方面大都在傳統(tǒng)教學(xué)模式基礎(chǔ)上應(yīng)用軟件開發(fā)案例教學(xué)平臺，輔助教師教學(xué)與指導(dǎo)。

本平臺的開發(fā)使用了能夠快速開發(fā)Spring應(yīng)用的SpringBoot框架，以及具有數(shù)據(jù)雙向綁定特點的Vue框架;收集了不同類型的軟件開發(fā)案例，涉及不同的應(yīng)用領(lǐng)域，培養(yǎng)學(xué)生對不同方向，不同的技術(shù)架構(gòu)的開發(fā)都能夠有深刻的理解，對技術(shù)體系有較全面的把握。案例教學(xué)平臺融合大數(shù)據(jù)、人工智能、云計算和物聯(lián)網(wǎng)等技術(shù)，使得教學(xué)案例能夠銜接前沿技術(shù)，將軟件開發(fā)教學(xué)培養(yǎng)和未來最具有發(fā)展?jié)摿Φ男袠I(yè)緊密聯(lián)系在一起。

2 相關(guān)技術(shù)概述

2.1 SpringBoot框架

SpringBoot框架繼承了Spring框架的優(yōu)良特性并改善了Spring框架存在的弊端。它與傳統(tǒng)的SpringMVC框架相比， SpringBoot簡化了復(fù)雜的手動配置，實現(xiàn)自動配置，不需要XML等配置文件，降低項目搭建的復(fù)雜度[1]。同時它集成了大量常用的第三方庫配置（例如Jackson、JDBC、MySQL等），SpringBoot對這些第三庫可以直接調(diào)用，減少對第三方代碼的編寫，可以將更多的時間放到代碼的業(yè)務(wù)邏輯上[2]。

2.2 Vue框架

Vue是一套構(gòu)建用戶界面的漸進式框架，采用自底向上增量式開發(fā)的設(shè)計方式。Vue以組件化思想和數(shù)據(jù)驅(qū)動為核心，通過運用虛擬DOM提升前端的性能，具有體積輕、開發(fā)效率高、數(shù)據(jù)雙向綁定的特點。除此之外，框架擁有自身的龐大的生態(tài)系統(tǒng)，使其能夠便于與第三方庫進行整合[3]。

3 平臺功能設(shè)計

本平臺的主要功能是為學(xué)校開展軟件開發(fā)課程提供輔助教學(xué)，使課程結(jié)合應(yīng)用，更加生動。本平臺主要分為兩個角色即用戶角色（教師和學(xué)生）、管理員角色。根據(jù)角色分為用戶模塊、管理員模塊兩個主要模塊。

與傳統(tǒng)的教學(xué)軟件相比，本平臺是基于開放式，遵守開放共享的原則。用戶模塊不僅擁有傳統(tǒng)教學(xué)軟件所就有的功能，還具有自己獨特的功能。用戶不僅能進行注冊、登錄，對所需要的案例進行查詢操作，并根據(jù)自己的需求進行預(yù)覽和評論。而且還可以根據(jù)自己的需求對案例進行修改、上傳。

管理員模塊主要是管理員登錄后臺管理界面進行管理，主要分為四個子模塊，分別為用戶管理子模塊、案例管理子模塊、案例類型管理子模塊、評論管理子模塊。用戶管理子模塊主要進行用戶的增加、刪除、修改、查詢、修改用戶狀態(tài)。案例管理子模塊主要實現(xiàn)案例的增加、刪除、修改、查詢、評論案例等功能。案例類型管理子模塊案例類型的增加、刪除、修改、查詢等功能。評論管理子模塊主要根據(jù)用戶對案例的評分和反饋意見進行數(shù)據(jù)可視化和分析，根據(jù)用戶反饋的意見對案例進行完善。平臺的主要模塊與功能如圖1所示。

4 總體設(shè)計

4.1 系統(tǒng)架構(gòu)

本平臺采經(jīng)典的MVC模式，M就是指業(yè)務(wù)模型，V是指用戶界面，C是指控制器，此模式有利于前后端代碼的分離[4]。后端采用的SpringBoot、MyBatis框架進行設(shè)計，該框架將后端分為Dao層、Service層、Controller層三層模式，其中Dao層與Service層就是業(yè)務(wù)模型的細(xì)分。Dao層主要是做數(shù)據(jù)持久層的工作，負(fù)責(zé)將與數(shù)據(jù)庫進行聯(lián)絡(luò)的方法封裝成接口（CURD接口），在Dao層的XML文件中編寫對應(yīng)方法的SQL語句對數(shù)據(jù)庫進行訪問，實現(xiàn)對數(shù)據(jù)的增加、刪除、修改、查詢等任務(wù)。Service層主要負(fù)責(zé)編寫平臺的業(yè)務(wù)邏輯，負(fù)責(zé)相應(yīng)功能的設(shè)計，調(diào)用Dao層接口，接收Dao層返回的數(shù)據(jù)，完成項目基本功能的實現(xiàn)。Controller層即控制層，主要功能是請求和響應(yīng)控制，主要負(fù)責(zé)前后端交互，接收前端發(fā)送的請求，調(diào)用Service層的定義的方法，接收Service層返回的數(shù)據(jù)，最后將封裝好的JSON數(shù)據(jù)返回到前端視圖層進行展示。前端運用Vue框架進行設(shè)計，其界面就是指視圖層（View層）。View層主要任務(wù)是與用戶進行交互，通過瀏覽器，負(fù)責(zé)獲取用戶相關(guān)的訪問請求和信息，將訪問請求提交到后端控制層，以及接收從后端傳輸?shù)臄?shù)據(jù)。平臺的整體架構(gòu)設(shè)計如圖2所示。

4.2 數(shù)據(jù)庫設(shè)計

數(shù)據(jù)庫設(shè)計是指對于一個給定的應(yīng)用環(huán)境，構(gòu)造出最優(yōu)的數(shù)據(jù)庫模式，建立數(shù)據(jù) 庫及其應(yīng)用系統(tǒng)，使之能夠有效地存儲數(shù)據(jù)，滿足各種用戶的應(yīng)用需求[5]。本平臺數(shù)據(jù)庫表主要由用戶表（b_user）、管理員表（b_admin）、案例類型表（b_casetype）、案例表（b_case）、評論表（b_message）組成。

用戶實體類是整個平臺最核心的內(nèi)容，主要包括用戶ID（id）、用戶名（username）、密碼（password）、手機號（phone）、用戶狀態(tài)（state）、郵箱（email）等屬性，其state為布爾類型，state為true則狀態(tài)為可啟用，state為false則狀態(tài)為不可用。此外，還需要通過用戶名與密碼屬性進行登錄判斷和攔截。案例類型實體類，主要由類型ID（id）、類型名稱（typeName），類型簡介（account）組成。增加此實體類是方便管理員對案例進行管理和分類，方便用戶按照特定的分類進行查詢。作為一個案例教學(xué)平臺，案例是最主要的元素，將案例抽象為一個實體類，案例實體類主要包括主案例名稱（casename）、作者（author）、類型（tid與案例類型ID相關(guān)聯(lián)）、案例簡介（account）、案例附件（casepath）、案例狀態(tài)（state）等屬性。其中state為布爾類型，用戶提交新的案例，管理員將進行審核，state為flase代表審核中;state則變?yōu)閠rue則審核通過。評論實體類與案例實體類是多對一的關(guān)系，根據(jù)案例ID設(shè)置約束進行關(guān)聯(lián)。評論實體類主要包括，評論ID（id）、案例ID（cid與案例ID相關(guān)聯(lián)），評論人（cname）、評論內(nèi)容（account）、評分（grade）、滿意程度（satisfaction）等屬性。其整體E-R圖如圖3所示。

4.3 系統(tǒng)安全設(shè)計

在傳統(tǒng)的網(wǎng)頁設(shè)計中，view層是由后端控制的，用戶的請求到達后端的控制器中，只有當(dāng)安全沒有絲毫異常的情況下，后端才會將完成數(shù)據(jù)的渲染，返回給前端視圖。本平臺開發(fā)運用了Vue框架，view層的跳轉(zhuǎn)頁面的權(quán)力就轉(zhuǎn)移到了前端框架中[6-7]。使用路由進行不同視圖組件之間的導(dǎo)航，如果不做任何的安全驗證機制，用戶可以在瀏覽器地址欄中手動輸入不同的路由，同樣會發(fā)生跳轉(zhuǎn)。因此，我們需要設(shè)置權(quán)限驗證，只有通過驗證，才允許進行路由的跳轉(zhuǎn)，驗證不通過則無法完成跳轉(zhuǎn)。

以用戶登錄為例，對路由的安全機制進行解析。首先在前臺界面輸入用戶名和密碼，前端發(fā)起登錄請求，后端接收到數(shù)據(jù)之后驗證用戶的信息是否滿足條件，驗證完畢之后將數(shù)據(jù)傳回前端，在這期間對后端傳遞回來的數(shù)據(jù)進行處理，并且將數(shù)據(jù)持久化在瀏覽器上。假設(shè)后端傳過來的是token，那在路由跳轉(zhuǎn)之前只需要驗證token是否存在以及token的正確性，驗證成功則跳轉(zhuǎn)，驗證不成功則不跳轉(zhuǎn)。其核心代碼如下：

router.beforeEach（（to， from， next） => {

if（to.path === '/ulogin'）

return next（）;

const tokenUser = window.sessionStorage.

getItem（'user'）

if（！tokenUser） return next（'/ulogin'）

next（）

}

5 功能實現(xiàn)

5.1 項目環(huán)境

本平臺是在配置Intel Core i5-10200H 處理器（主頻為2.4GHz），16G內(nèi)存，裝有Windows 10，64位操作系統(tǒng)的紅米計算機，運用HTML、CSS、JavaScript語言在Visual Studio Code軟件進行前端開發(fā)，使用Java語言、SQL語言在IntelliJ IDEA 2020 軟件上進行后端開發(fā)，項目環(huán)境如表1所示。

5.2 跨域處理

平臺采用前后端分離的方式進行開發(fā)，則涉及跨域訪問問題。利用跨域資源（CORS）允許所有來源、標(biāo)頭列表、請求方式來實現(xiàn)靈活的跨域請求[8]。其主要核心代碼如下所示。

@Configuration

public class WebMvcConfig

extends WebMvcConfigurerAdapter {

@Override

public void addCorsMappings（

CorsRegistry registry） {

registry.addMapping（"/**"）

.allowedOrigins（"*"，"null"）

.allowedMethods（"*"）

.allowCredentials（true）;

}

}

5.3 核心功能實現(xiàn)

以用戶管理為示例，管理員登錄后臺管理系統(tǒng)之后，在用戶管理模塊下可以實現(xiàn)添加用戶操作，如圖5所示;可以實現(xiàn)查詢操作，如圖6所示;可以實現(xiàn)修改操作，如圖7所示。

6 結(jié)束語

文章主要分析了軟件開發(fā)案例教學(xué)平臺的所用的技術(shù)框架，并從功能設(shè)計、數(shù)據(jù)庫設(shè)計、系統(tǒng)安全設(shè)計等方面進行了簡單的概述，最終成功設(shè)計與實現(xiàn)了基于SpringBoot的開放式軟件開發(fā)案例教學(xué)平臺。平臺的成功搭建將會為學(xué)校和相關(guān)培訓(xùn)結(jié)構(gòu)提高培訓(xùn)教學(xué)質(zhì)量，有助于提高學(xué)生在案例中分析問題、解決問題的能力，有利于教師教學(xué)水平的提高和開展，具有開放性、共享性、靈活性的特點。

參考文獻：

[1] 李孟津，楊丹.基于SpringBoot的在線招聘網(wǎng)站的設(shè)計與實現(xiàn)[J].科學(xué)技術(shù)創(chuàng)新，2020（26）：98-99.

[2] 田海晴.基于SpringBoot和Vue框架的共享運營管理平臺的設(shè)計與實現(xiàn)[D].濟南：山東大學(xué)，2020.

[3] 石冠洲.基于Vue的Web系統(tǒng)前端性能優(yōu)化研究與應(yīng)用[D].西安：長安大學(xué)，2020.

[4] 賀紫珺.基于SpringBoot和Vue框架的第三方醫(yī)療器械供應(yīng)鏈平臺的設(shè)計與實現(xiàn)[D].上海：東華大學(xué)，2019.

[5] 張恒銘.基于SpringBoot+MyBatis框架的高校人事信息發(fā)布系統(tǒng)設(shè)計與實現(xiàn)[J].電腦知識與技術(shù)，2020，16（18）：68-70.

[6] 喻瑩瑩，李新，陳遠(yuǎn)平.前后端分離的終端自適應(yīng)動態(tài)表單設(shè)計[J].計算機系統(tǒng)應(yīng)用，2018，27（4）：70-75.

[7] 季杰，陳強仁，朱東.基于Vue.js租房網(wǎng)系統(tǒng)的設(shè)計與實現(xiàn)[J].電腦知識與技術(shù)，2020，16（16）：91-92.

[8] 肖文娟，王加勝.基于Vue和Spring Boot的校園記錄管理Web App的設(shè)計與實現(xiàn)[J].計算機應(yīng)用與軟件，2020，37（4）：25-30，88.

【通聯(lián)編輯：謝媛媛】