基于SpringBoot的開放式軟件開發(fā)案例教學平臺設計

齊善魯 馬徳俊 梁雪

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

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

中圖分類號：TP311? ? ? 文獻標識碼：A

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

開放科學（資源服務）標識碼（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 背景

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

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

2 相關技術概述

2.1 SpringBoot框架

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

2.2 Vue框架

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

3 平臺功能設計

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

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

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

4 總體設計

4.1 系統(tǒng)架構

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

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

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

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

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

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

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

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內存，裝有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）允許所有來源、標頭列表、請求方式來實現(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 結束語

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

參考文獻：

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

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

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

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

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

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

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

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

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