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

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

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

關(guān)鍵字：跨境電商;管理系統(tǒng);Spring Boot;Vue框架;互動(dòng)平臺(tái)

中圖分類(lèi)號(hào)：TP311 ? ? 文獻(xiàn)標(biāo)識(shí)碼：A文章編號(hào)：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 ?引 ?言

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

1 ?系統(tǒng)的需求及建設(shè)目標(biāo)

1.1 ?系統(tǒng)建設(shè)目標(biāo)

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

1.2 ?系統(tǒng)需求

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

2 ?系統(tǒng)架構(gòu)設(shè)計(jì)和功能模塊設(shè)計(jì)

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

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

2.2 ?系統(tǒng)的邏輯架構(gòu)設(shè)計(jì)

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

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

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

3 ?系統(tǒng)詳細(xì)設(shè)計(jì)

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

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

3.2 ?前端界面設(shè)計(jì)

我們?cè)谶M(jìn)行前端軟件開(kāi)發(fā)過(guò)程中，應(yīng)該追求高內(nèi)聚，低耦合，同時(shí)編寫(xiě)CSS、JavaScript、HTML的時(shí)候要注重代碼的解耦，保持更好的可維護(hù)性、可擴(kuò)展性、以及可讀性[8，9]。在開(kāi)發(fā)過(guò)程中，業(yè)務(wù)相對(duì)繁多，很容易導(dǎo)致JS代碼引用的時(shí)候業(yè)務(wù)邏輯異常，因?yàn)樵诿總€(gè)頁(yè)面對(duì)JS代碼的引用都是成堆出現(xiàn)，這時(shí)候就需要我們對(duì)代碼進(jìn)行模塊化開(kāi)[10]。寫(xiě)好一個(gè)模塊后，在之后的開(kāi)發(fā)過(guò)程中，相似模塊可直接調(diào)用該模塊的代碼，可有效減少代碼的復(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）” >添加回應(yīng)</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=”添加一些有趣的回應(yīng)吧”></Input></FormItem>

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

</Form>

</div >

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

4 ?結(jié) ?論

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

參考文獻(xiàn)：

[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)開(kāi)發(fā) [J].計(jì)算機(jī)仿真，2021，38（6）：248-250+382.

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

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

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

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

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

[9] 賴(lài)定清，林堅(jiān).大巧不工：Web前端設(shè)計(jì)修煉之道 [M].北京：機(jī)械工業(yè)出版社，2010.

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

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