基于SpringBoot+Vue框架的协同育才系统设计与开发
作者：向福川 方玉 刘浪 唐振云 练瑶
来源：《现代信息科技》2021年第14期
        摘 要：近年来，跨境电商已经成为“一带一路”背景下的国家经济发展战略，伴随着网络技术的普及和发展，全球跨境电商贸易额正在大幅度攀升，国内众多学校响应国家号召，大力支持发展跨境电商。为了方便学校对跨境电商人才的培养，文章开发了基于SpringBoot+Vue框架的协同育才管理系统，为学校老师管理学生、培养学生，以及学生锻炼自己的电子商务销售能力提供了良好的互动平台。
        关键字：跨境电商;管理系统;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 引 言
        電子商务在当今的现代贸易中发挥着至关重要的作用，全球电子商务交易额持续增高，这种趋势将随着互联网和信息通信技术（ICT）的普及而增长[1]。跨境电子商务在中国经济发展中得到高度重视，极大地促进了我国的国际电子商务交易[2]。近几年来，我国众多学校也大力培养电子商务的人才，传统的管理系统大都是对学生进行基本的信息管理，但是难以让学生在网上及时进行电子商务模拟训练。为了方便学校集学生基本信息管理、电子商务能力训练于一体，我们开发了此协同育才系统。本系统采用前后端分离开发，后端采用Spring Boot框架，前端采用Vue框架。极大地方便了学生和老师及时进行信息交互和能力培养，让学校更加高效的培养电子商务方面的人才。
        1 系统的需求及建设目标
        1.1 系统建设目标
        该系统产品的总体目标、分阶段目标和总体功能进行一款可向市场推广、完成学生跨境电商模拟操作的教学产品，本产品的定位为辅助类软件，采用分组对抗实训的模式，通过该种方式能够起到活跃课堂气氛，增加学生兴趣。其设计结构是模拟电商企业过程出发，能够让学生在比赛实训过程中得到实际工作中的岗位间的互动、并行任务的处理等多
方面体验。该系统的用户主要位国内普通本科、高职高专电子商务、国际贸易等专业的学生。
        1.2 系统需求
        为了实现本系统的各个功能，需要平台提供一套完整的模块：（1）系统模块：包括用户登录认证模块、管理员首页模块、账户设置模块、学校管理模块、用户管理模块、角管理模块、班级管理模块、学生管理模块、基本信息模块、参考资料模块、交流区模块、通知公告模块;（2）1688采购网模块：包括采购网—首页模块、商品页模块、商品详情页模块、轮播图模块、商品列表模块、商品新增模块、商品分类模块、商城管理—相册管理模块;（3）亚马逊商城模块包括：亚马逊商城首页模块、轮播图模块、品牌管理模块、商品列表模块。（4）前端界面交互模块包括;ElementUI界面设计、数据表格设计、Echarts数据可视化展示[3]。
        2 系统架构设计和功能模块设计
        2.1 系统的框架总体设计
        本系统采用前后端分离的MVVM框架，MVVM将软件的架构可以分离成View、Model、View Model三层，使数据和界面得到很好的分离效果[4]。从而便于分离开发，数据库采用MySQL数据库，后端采用当下比较流行的Spring Boot框架，通过MyBatis访问数据库，同时通过Redis做数据缓存，前端开发采用的框架是Vue，Vue是一套用于构建用户界面的渐进式JavaScript框架，体积小，在开发过程中，拥有更高的运行效率，其框架基于虚拟DOM，可以预先通过JavaScript进行各种计算，把最终的DOM操作计算出来并优化，同时开发者可以依赖于其框架的双向数据绑定特点，不用再去操作DOM对象，从而有更多精力投入到业务逻辑中去。引用一些可视化组件，如Echarts，让数据更加直观地展示给用户，在开发过程中，后端主要负责业务逻辑处理和对数据进行处理，相对而言更加抽象，前端主要负责和用户进行交互，设计页面功能，调用后台API结构，实现相应功能，做出良好的页面，让用户更加高效的使用系统。
        2.2 系统的逻辑架构设计
        系统的逻辑架构图如图1所示，系统的逻辑架构从下至上主要分为六层，分别为：物理数据层、数据访问层、系统服务层、系统调度层、系统接口层、系统通信层。物理数据
层负责对数据进行实时比对更新操作，可实现增删改查的持久化操作[5];数据访问层主要提供支持访问数据操作的API接口，供系统调用;系统服务层是系统主要业务功能的实现区域，本系统中后端用Java实现系统相关的各种业务功能，并封装好相关业务的接口，供系统调用系统调度层可过滤外部数据请求并选择路由等操作;系统接口层将业务接口和数据结构封装好供系统外部使用，前端开发人员可通过相关接口的调用，实现各个模块的功能;系统通信层主要发送相关通信协议，本系统中主要是HTTP协议，实现用户之间的通信[6]。
        2.3 系统的功能模块设计
        在设计本系统时，主要分为五大模块开发，系统模块图如图2所示。系统管理模块包括权限管理、用户管理、角管理等模块，不同权限的用户登录系统将拥有不同的权限，同时用户管理模块中，管理员可以对学校、班级、学生进行管理;交流区管理模块主要分为内部交流区和外部交流区，该模块为学生和老师共同使用，该板块分为内部交流区和外部交流区，学生可在不同交流区发表自己的意见，内部交流区即本班交流区，外部交流区即所有班级成员均可见，可实现学生之间相互探讨疑问的功能;1688采购网模块主要分为首页管理、商品管列表管理、轮播图管理等模块，该模块是模拟一个商品供应商的后台页面，
学生可以在该模块下进买商品;亚马逊商城模块即学生自己的店铺模块，学生可以在该模块中销售自己的商品，自定義商品属性价格等，让学生们大胆发挥自己的销售才能，起到训练学生实际销售能力的作用;数据可视化模块分为班级数据可视化、学生销售营业额可视化等模块，该模块可以让学生、老师、管理员直观的看见不同学生、不同班级的总销售额以及总利润等情况，以便采取合理的培养方案。
        3 系统详细设计
        3.1 数据库设计
        数据库的设计质量对计算机软件的运行具有十分重要的影响，因此技术人员应该遵循数据库的相关设计原则，合理对计算机软件进行设计，使其能发挥更好的作用[7]。本系统数据库设计时从多维度出发，综合考虑如何快速响应各个关键字的检索速度，并且在设定各表时满足范式要求，并加强对学生学号，班级，学校等关键字进行有效检测。在数据库请求方面，我们采用HTTP协议，前端通过对后台API接口的调用，从而对数据库进行访问并操作。以用户角表为例，如表1所示。
        3.2 前端界面设计
        我们在进行前端软件开发过程中，应该追求高内聚，低耦合，同时编写CSS、JavaScript、HTML的时候要注重代码的解耦，保持更好的可维护性、可扩展性、以及可读性[8，9]。在开发过程中，业务相对繁多，很容易导致JS代码引用的时候业务逻辑异常，因为在每个页面对JS代码的引用都是成堆出现，这时候就需要我们对代码进行模块化开[10]。写好一个模块后，在之后的开发过程中，相似模块可直接调用该模块的代码，可有效减少代码的复杂度。下文列出交流区部分代码：
        <div class=”button”>
        <Icon type=”ios-play-outline” />
        <Icon class=”sk-d” type=”ios-add-circle-outline” />
        <span class=”sk-f” @click.stop=”showItem（picId）” >添加回应</span>
        </div>
        <div class=”sk-g” v-if=”activeId === picId”>
springboot框架的作用
        <Form ：model=”addForm” ：rules=”rules” ref=”addResponseForm” label-position=”top” >
        <FormItem prop=”con”>
        <Input class=”sk-h” v-model=”t” type=”textarea” placeholder=”添加一些有趣的回应吧”></Input></FormItem>
        <Button class=”sk” type=”pri” @click=”addMeans（picId ）” >添加</Button>
        </Form>
        </div >
        交流区页面效果图如图3所示。
        4 结 论
        本文所提出的MVVM开发模式和SpingBoot+Vue开发框架在设计和实现本协同育人系
统中是切实可行的，为系统提供了一套切实可行的方案，在开发中采用模块化开发的思想，为后期代码的维护和系统的扩展带来了极大的便利。后期系统可以拓展到各大学校作为教务管理系统使用，也可以作为电子商务类院校或者相关专业作为课堂辅助教学软件，充分发挥互联网的优势。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。