齐善鲁 马徳俊 梁雪

摘要：基于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.

【通联编辑：谢媛媛】