基于SpringBoot+Vue框架的協(xié)同育才系統(tǒng)設計與開發(fā)

向福川 方玉 劉浪 唐振云 練瑤

摘 ?要：近年來，跨境電商已經(jīng)成為“一帶一路”背景下的國家經(jīng)濟發(fā)展戰(zhàn)略，伴隨著網(wǎng)絡技術的普及和發(fā)展，全球跨境電商貿易額正在大幅度攀升，國內眾多學校響應國家號召，大力支持發(fā)展跨境電商。為了方便學校對跨境電商人才的培養(yǎng)，文章開發(fā)了基于SpringBoot+Vue框架的協(xié)同育才管理系統(tǒng)，為學校老師管理學生、培養(yǎng)學生，以及學生鍛煉自己的電子商務銷售能力提供了良好的互動平臺。

關鍵字：跨境電商;管理系統(tǒng);Spring Boot;Vue框架;互動平臺

中圖分類號：TP311 ? ? 文獻標識碼：A文章編號：2096-4706（2021）14-0005-04

Abstract： In recent years， cross-border e-commerce has become a national economic development strategy under the “ The Belt and Road“With the popularization and development of network technology， the global cross-border e-commerce trade volume is rising significantly， and many domestic schools have responded to the call of the country， strongly support the development of cross-border e-commerce. In order to facilitate the training of cross-border e-commerce talents in schools， the paper have developed a collaborative education management system based on the SpringBoot+Vue framework to provide a good interactive platform for teachers managing and educating students and students themselves excercising their e-commerce ability.

Keywords： cross-border e-commerce; management system; Spring Boot; Vue framework; interactive platform

0 ?引 ?言

電子商務在當今的現(xiàn)代貿易中發(fā)揮著至關重要的作用，全球電子商務交易額持續(xù)增高，這種趨勢將隨著互聯(lián)網(wǎng)和信息通信技術（ICT）的普及而增長[1]?？缇畴娮由虅赵谥袊?jīng)濟發(fā)展中得到高度重視，極大地促進了我國的國際電子商務交易[2]。近幾年來，我國眾多學校也大力培養(yǎng)電子商務的人才，傳統(tǒng)的管理系統(tǒng)大都是對學生進行基本的信息管理，但是難以讓學生在網(wǎng)上及時進行電子商務模擬訓練。為了方便學校集學生基本信息管理、電子商務能力訓練于一體，我們開發(fā)了此協(xié)同育才系統(tǒng)。本系統(tǒng)采用前后端分離開發(fā)，后端采用Spring Boot框架，前端采用Vue框架。極大地方便了學生和老師及時進行信息交互和能力培養(yǎng)，讓學校更加高效的培養(yǎng)電子商務方面的人才。

1 ?系統(tǒng)的需求及建設目標

1.1 ?系統(tǒng)建設目標

該系統(tǒng)產(chǎn)品的總體目標、分階段目標和總體功能進行一款可向市場推廣、完成學生跨境電商模擬操作的教學產(chǎn)品，本產(chǎn)品的定位為輔助類軟件，采用分組對抗實訓的模式，通過該種方式能夠起到活躍課堂氣氛，增加學生興趣。其設計結構是模擬電商企業(yè)過程出發(fā)，能夠讓學生在比賽實訓過程中得到實際工作中的崗位間的互動、并行任務的處理等多方面體驗。該系統(tǒng)的用戶主要位國內普通本科、高職高專電子商務、國際貿易等專業(yè)的學生。

1.2 ?系統(tǒng)需求

為了實現(xiàn)本系統(tǒng)的各個功能，需要平臺提供一套完整的模塊：（1）系統(tǒng)模塊：包括用戶登錄認證模塊、管理員首頁模塊、賬戶設置模塊、學校管理模塊、用戶管理模塊、角色管理模塊、班級管理模塊、學生管理模塊、基本信息模塊、參考資料模塊、交流區(qū)模塊、通知公告模塊;（2）1688采購網(wǎng)模塊：包括采購網(wǎng)—首頁模塊、商品頁模塊、商品詳情頁模塊、輪播圖模塊、商品列表模塊、商品新增模塊、商品分類模塊、商城管理—相冊管理模塊;（3）亞馬遜商城模塊包括：亞馬遜商城首頁模塊、輪播圖模塊、品牌管理模塊、商品列表模塊。（4）前端界面交互模塊包括;ElementUI界面設計、數(shù)據(jù)表格設計、Echarts數(shù)據(jù)可視化展示[3]。

2 ?系統(tǒng)架構設計和功能模塊設計

2.1 ?系統(tǒng)的框架總體設計

本系統(tǒng)采用前后端分離的MVVM框架，MVVM將軟件的架構可以分離成View、Model、View Model三層，使數(shù)據(jù)和界面得到很好的分離效果[4]。從而便于分離開發(fā)，數(shù)據(jù)庫采用MySQL數(shù)據(jù)庫，后端采用當下比較流行的Spring Boot框架，通過MyBatis訪問數(shù)據(jù)庫，同時通過Redis做數(shù)據(jù)緩存，前端開發(fā)采用的框架是Vue，Vue是一套用于構建用戶界面的漸進式JavaScript框架，體積小，在開發(fā)過程中，擁有更高的運行效率，其框架基于虛擬DOM，可以預先通過JavaScript進行各種計算，把最終的DOM操作計算出來并優(yōu)化，同時開發(fā)者可以依賴于其框架的雙向數(shù)據(jù)綁定特點，不用再去操作DOM對象，從而有更多精力投入到業(yè)務邏輯中去。引用一些可視化組件，如Echarts，讓數(shù)據(jù)更加直觀地展示給用戶，在開發(fā)過程中，后端主要負責業(yè)務邏輯處理和對數(shù)據(jù)進行處理，相對而言更加抽象，前端主要負責和用戶進行交互，設計頁面功能，調用后臺API結構，實現(xiàn)相應功能，做出良好的頁面，讓用戶更加高效的使用系統(tǒng)。

2.2 ?系統(tǒng)的邏輯架構設計

系統(tǒng)的邏輯架構圖如圖1所示，系統(tǒng)的邏輯架構從下至上主要分為六層，分別為：物理數(shù)據(jù)層、數(shù)據(jù)訪問層、系統(tǒng)服務層、系統(tǒng)調度層、系統(tǒng)接口層、系統(tǒng)通信層。物理數(shù)據(jù)層負責對數(shù)據(jù)進行實時比對更新操作，可實現(xiàn)增刪改查的持久化操作[5];數(shù)據(jù)訪問層主要提供支持訪問數(shù)據(jù)操作的API接口，供系統(tǒng)調用;系統(tǒng)服務層是系統(tǒng)主要業(yè)務功能的實現(xiàn)區(qū)域，本系統(tǒng)中后端用Java實現(xiàn)系統(tǒng)相關的各種業(yè)務功能，并封裝好相關業(yè)務的接口，供系統(tǒng)調用系統(tǒng)調度層可過濾外部數(shù)據(jù)請求并選擇路由等操作;系統(tǒng)接口層將業(yè)務接口和數(shù)據(jù)結構封裝好供系統(tǒng)外部使用，前端開發(fā)人員可通過相關接口的調用，實現(xiàn)各個模塊的功能;系統(tǒng)通信層主要發(fā)送相關通信協(xié)議，本系統(tǒng)中主要是HTTP協(xié)議，實現(xiàn)用戶之間的通信[6]。

2.3 ?系統(tǒng)的功能模塊設計

在設計本系統(tǒng)時，主要分為五大模塊開發(fā)，系統(tǒng)模塊圖如圖2所示。系統(tǒng)管理模塊包括權限管理、用戶管理、角色管理等模塊，不同權限的用戶登錄系統(tǒng)將擁有不同的權限，同時用戶管理模塊中，管理員可以對學校、班級、學生進行管理;交流區(qū)管理模塊主要分為內部交流區(qū)和外部交流區(qū)，該模塊為學生和老師共同使用，該板塊分為內部交流區(qū)和外部交流區(qū)，學生可在不同交流區(qū)發(fā)表自己的意見，內部交流區(qū)即本班交流區(qū)，外部交流區(qū)即所有班級成員均可見，可實現(xiàn)學生之間相互探討疑問的功能;1688采購網(wǎng)模塊主要分為首頁管理、商品管列表管理、輪播圖管理等模塊，該模塊是模擬一個商品供應商的后臺頁面，學生可以在該模塊下進買商品;亞馬遜商城模塊即學生自己的店鋪模塊，學生可以在該模塊中銷售自己的商品，自定義商品屬性價格等，讓學生們大膽發(fā)揮自己的銷售才能，起到訓練學生實際銷售能力的作用;數(shù)據(jù)可視化模塊分為班級數(shù)據(jù)可視化、學生銷售營業(yè)額可視化等模塊，該模塊可以讓學生、老師、管理員直觀的看見不同學生、不同班級的總銷售額以及總利潤等情況，以便采取合理的培養(yǎng)方案。

3 ?系統(tǒng)詳細設計

3.1 ?數(shù)據(jù)庫設計

數(shù)據(jù)庫的設計質量對計算機軟件的運行具有十分重要的影響，因此技術人員應該遵循數(shù)據(jù)庫的相關設計原則，合理對計算機軟件進行設計，使其能發(fā)揮更好的作用[7]。本系統(tǒng)數(shù)據(jù)庫設計時從多維度出發(fā)，綜合考慮如何快速響應各個關鍵字的檢索速度，并且在設定各表時滿足范式要求，并加強對學生學號，班級，學校等關鍵字進行有效檢測。在數(shù)據(jù)庫請求方面，我們采用HTTP協(xié)議，前端通過對后臺API接口的調用，從而對數(shù)據(jù)庫進行訪問并操作。以用戶角色表為例，如表1所示。

3.2 ?前端界面設計

我們在進行前端軟件開發(fā)過程中，應該追求高內聚，低耦合，同時編寫CSS、JavaScript、HTML的時候要注重代碼的解耦，保持更好的可維護性、可擴展性、以及可讀性[8，9]。在開發(fā)過程中，業(yè)務相對繁多，很容易導致JS代碼引用的時候業(yè)務邏輯異常，因為在每個頁面對JS代碼的引用都是成堆出現(xiàn)，這時候就需要我們對代碼進行模塊化開[10]。寫好一個模塊后，在之后的開發(fā)過程中，相似模塊可直接調用該模塊的代碼，可有效減少代碼的復雜度。下文列出交流區(qū)部分代碼：

<div class=”button”>

<Icon type=”ios-play-outline” />

<Icon class=”sk-d” type=”ios-add-circle-outline” />

<span class=”sk-f” @click.stop=”showItem（item.topicId）” >添加回應</span>

</div>

<div class=”sk-g” v-if=”activeId === item.topicId”>

<Form ：model=”addForm” ：rules=”rules” ref=”addResponseForm” label-position=”top” >

<FormItem prop=”con”>

<Input class=”sk-h” v-model=”addResponseForm.content” type=”textarea” placeholder=”添加一些有趣的回應吧”></Input></FormItem>

<Button class=”sk” type=”pri” @click=”addMeans（item.topicId ）” >添加</Button>

</Form>

</div >

交流區(qū)頁面效果圖如圖3所示。

4 ?結 ?論

本文所提出的MVVM開發(fā)模式和SpingBoot+Vue開發(fā)框架在設計和實現(xiàn)本協(xié)同育人系統(tǒng)中是切實可行的，為系統(tǒng)提供了一套切實可行的方案，在開發(fā)中采用模塊化開發(fā)的思想，為后期代碼的維護和系統(tǒng)的擴展帶來了極大的便利。后期系統(tǒng)可以拓展到各大學校作為教務管理系統(tǒng)使用，也可以作為電子商務類院?；蛘呦嚓P專業(yè)作為課堂輔助教學軟件，充分發(fā)揮互聯(lián)網(wǎng)的優(yōu)勢。

參考文獻：

[1] HAJI K. E-commerce development in rural and remote areas of BRICS countries [J].Journal of Integrative Agriculture，2021，20（4）：979-997.

[2] FAN J，CAI Y L，JI X J，et al. An Observation on China Comprehensive Pilot Areas for Cross-border E-commerce in Henan Province [J].Procedia Manufacturing，2019，30：77-82.

[3] 徐小輝，劉江濤，高涵，等.基于SpringBoot+Vue框架的采氣方案系統(tǒng)開發(fā) [J].計算機仿真，2021，38（6）：248-250+382.

[4] 鄭新超，王清永.“一帶一路”沿線國家網(wǎng)絡互動平臺構建探索 [J].現(xiàn)代信息科技，2021，5（1）：21-24.

[5] 劉立.MVVM模式分析與應用 [J].微型電腦應用，2012，28（12）：57-60.

[6] 吳功宜.計算機網(wǎng)絡：第3 版 [J].計算機教育，2012（5）：37.

[7] 侯曉凌，馮麗露，曲霄紅.計算機軟件數(shù)據(jù)庫設計的重要作用及原則 [J].電子技術與軟件工程，2020（2）：186-187.

[8] 呂迪.途牛網(wǎng)WAP前端系統(tǒng)設計與實現(xiàn) [D].武漢：華中科技大學，2015.

[9] 賴定清，林堅.大巧不工：Web前端設計修煉之道 [M].北京：機械工業(yè)出版社，2010.

[10] 陳勁，桂彬旺，陳鈺芬.基于模塊化開發(fā)的復雜產(chǎn)品系統(tǒng)創(chuàng)新案例研究 [J].科研管理，2006（6）：1-8.

作者簡介：向福川（2001—），男，漢族，四川達州人，本科在讀，研究方向：軟件智能;方玉（2002—），女，漢族，四川達州人，本科在讀，研究方向：數(shù)據(jù)分析與數(shù)據(jù)挖掘;劉浪（2000—），男，漢族，四川達州人，本科在讀;研究方向：軟件智能、數(shù)據(jù)分析;唐振云（2001—），男，漢族，江蘇常州人，本科在讀，研究方向：軟件智能;練瑤（2001—），女，漢族，江蘇揚州人，本科在讀，研究方向：數(shù)學與應用數(shù)學。