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

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

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

中圖分類號：TP311 ? ? 文獻(xiàn)標(biāo)識碼：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 ?引 ?言

電子商務(wù)在當(dāng)今的現(xiàn)代貿(mào)易中發(fā)揮著至關(guān)重要的作用，全球電子商務(wù)交易額持續(xù)增高，這種趨勢將隨著互聯(lián)網(wǎng)和信息通信技術(shù)（ICT）的普及而增長[1]。跨境電子商務(wù)在中國經(jīng)濟(jì)發(fā)展中得到高度重視，極大地促進(jìn)了我國的國際電子商務(wù)交易[2]。近幾年來，我國眾多學(xué)校也大力培養(yǎng)電子商務(wù)的人才，傳統(tǒng)的管理系統(tǒng)大都是對學(xué)生進(jìn)行基本的信息管理，但是難以讓學(xué)生在網(wǎng)上及時進(jìn)行電子商務(wù)模擬訓(xùn)練。為了方便學(xué)校集學(xué)生基本信息管理、電子商務(wù)能力訓(xùn)練于一體，我們開發(fā)了此協(xié)同育才系統(tǒng)。本系統(tǒng)采用前后端分離開發(fā)，后端采用Spring Boot框架，前端采用Vue框架。極大地方便了學(xué)生和老師及時進(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)行一款可向市場推廣、完成學(xué)生跨境電商模擬操作的教學(xué)產(chǎn)品，本產(chǎn)品的定位為輔助類軟件，采用分組對抗實訓(xùn)的模式，通過該種方式能夠起到活躍課堂氣氛，增加學(xué)生興趣。其設(shè)計結(jié)構(gòu)是模擬電商企業(yè)過程出發(fā)，能夠讓學(xué)生在比賽實訓(xùn)過程中得到實際工作中的崗位間的互動、并行任務(wù)的處理等多方面體驗。該系統(tǒng)的用戶主要位國內(nèi)普通本科、高職高專電子商務(wù)、國際貿(mào)易等專業(yè)的學(xué)生。

1.2 ?系統(tǒng)需求

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

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

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

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

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

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

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

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

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

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

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

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

我們在進(jìn)行前端軟件開發(fā)過程中，應(yīng)該追求高內(nèi)聚，低耦合，同時編寫CSS、JavaScript、HTML的時候要注重代碼的解耦，保持更好的可維護(hù)性、可擴(kuò)展性、以及可讀性[8，9]。在開發(fā)過程中，業(yè)務(wù)相對繁多，很容易導(dǎo)致JS代碼引用的時候業(yè)務(wù)邏輯異常，因為在每個頁面對JS代碼的引用都是成堆出現(xiàn)，這時候就需要我們對代碼進(jìn)行模塊化開[10]。寫好一個模塊后，在之后的開發(fā)過程中，相似模塊可直接調(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ū)頁面效果圖如圖3所示。

4 ?結(jié) ?論

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

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

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

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

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

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

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

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

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

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