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

齊善魯 馬徳俊 梁雪

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

關鍵詞：SpringBoot;軟件開發;教學案例;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 背景

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

本平臺的開發使用了能夠快速開發Spring應用的SpringBoot框架，以及具有數據雙向綁定特點的Vue框架;收集了不同類型的軟件開發案例，涉及不同的應用領域，培養學生對不同方向，不同的技術架構的開發都能夠有深刻的理解，對技術體系有較全面的把握。案例教學平臺融合大數據、人工智能、云計算和物聯網等技術，使得教學案例能夠銜接前沿技術，將軟件開發教學培養和未來最具有發展潛力的行業緊密聯系在一起。

2 相關技術概述

2.1 SpringBoot框架

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

2.2 Vue框架

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

3 平臺功能設計

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

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

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

4 總體設計

4.1 系統架構

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

4.2 數據庫設計

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

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

4.3 系統安全設計

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

以用戶登錄為例，對路由的安全機制進行解析。首先在前臺界面輸入用戶名和密碼，前端發起登錄請求，后端接收到數據之后驗證用戶的信息是否滿足條件，驗證完畢之后將數據傳回前端，在這期間對后端傳遞回來的數據進行處理，并且將數據持久化在瀏覽器上。假設后端傳過來的是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 功能實現

5.1 項目環境

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

5.2 跨域處理

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

@Configuration

public class WebMvcConfig

extends WebMvcConfigurerAdapter {

@Override

public void addCorsMappings（

CorsRegistry registry） {

registry.addMapping（"/**"）

.allowedOrigins（"*"，"null"）

.allowedMethods（"*"）

.allowCredentials（true）;

}

}

5.3 核心功能實現

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

6 結束語

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

參考文獻：

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

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

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

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

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

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

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

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

【通聯編輯：謝媛媛】