基于Spring Boot 2 和 Vue.js 2 的 食品科学与工程学院网站的设计与实现
摘要
互联网具有传播信息容量大、形态多样、迅速方便、自由和交互等特点，已经发展成为新的传播媒体，现在很多的大学和社会其他部门都已经建立了网站，通过计算机网络实现宣传、交流及资源的整合。建立学校网站有以下作用：
学校网站是学校的"商标"。在这个高度信息化的社会里，建立自己学校网站是最直接的宣传手段。网站的超时空特性，不仅能让地区内的人们了解学校，更可让世界了解学校。
学校网站是实现教育资源分配的桥梁网络有巨大的教育资源库，它使每一位教师和学生都能均等的得到培训和受教育的机会，极大的提高教学效率。
学校网站能提供教学互动的全新方式学校网站使得教师与教师、教师与学生、学生与学生之间的交流有了全新的方式，它不再受到传统课堂的制约。它可以使不同的学校同处一室，共同讨论，共同共享。地理上的界限在这里模糊和消失了，学校网站是真正没有围墙的学校。
学校网站能够提供个性化学习的平台，不同的学生理解世界的方式各不相同，认知世界有诸多方式。网络提供的丰富资源可以使学生寻觅不同的教育方式，各取所需。学校网站允许不同的学生沿着自己的途径，按自己的速度接受教育与学习，学生将有机会享受最佳的教育机会，充分发掘自己的内在潜力，培植独特的个性和人格。
学校网站是最佳的教学研究室，学校网站与教育类专门网站的有效链接，给学校教学研究带来了一片新天地，各种优秀教案、专家论坛、网络观摩课、各科素材、多媒体课件制作等内容为教师教研提供了极佳的平台。有效地降低教研成本、提高效率。
关键字：学校；网站；优势
目 录
- 小组分工 4
- 需求分析 4
2.1功能需求分析 4
2.2非功能性需求分析 4
2.3功能模块示意图 5
2.4系统用例图 6 - 架构设计与实现 7
3.1. 创建数据库 7
3.2. 项目REST架构 7 - 系统设计 8
4.1. 技术选型 8
4.1.1. 前端技术 8
4.1.2. 后端技术 10
4.1.3. 数据库系统 14
4.1.4. 开发工具 15
4.2. 开发环境搭建 15
4.3. 界面设计 16
4.4. 数据库设计 18
4.5. 类设计 22 - 系统实现 24
- 系统测试 24
6.1. 测试过程中出现的问题及解决方法 35 - 总结与展望 36
致谢 37
参考文献 38
评语及成绩 39
1.小组分工
学号 成员 成员分工
2.需求分析
2.1功能需求分析
本次课程设计的网站对外展示的功能应至少具备用户注册、用户登录等基本功能，同时不管作为已注册或者未注册的用户，均应具备基本的浏览网站和搜索网站的功能。利用构建完毕的门户网站,学生用户可以通过教务管理系统,直接查询自己的个人信息及课表，并在论坛上与老师同学进行交流和沟通，学习中的知识并可以同时参与的建设和完善，非学生用户可以通过校友平台在网络平台上进行校友交流、以及了解参加校友组织的活动。教学管理人员可以通过该系统收集信息，增强对学生的了解管理，指导教学方向，方便教学管理。
系统管理人员，作为后台管理人员，对系统的管理具有最高权限，对所有界面上
体现出来的功能都具有操作的权限，比如直接对用户账号具有修改和注销的权限，同时可以对一些违反网络规范的发言等信息进行屏蔽和删除的权限等，以及对系统的平台交流、论坛等监控信息进行管理。
2.2非功能性需求分析
与学校业务相关的系统虽多以功能性为主，但性能和安全性同样重要，网站正常运行、稳定的运行，必须对它的运行环境、运行条件以及运行情况做系统的分析，提出具体要求，运包括软件内环境和硬件环境。在系统设计实现之前，需要充分考虑门户网站的可扩展性、经济成本，尽量降低对服务器、数据库等软硬件环境配置的要求。
学校门户网站系统的性能要达到以下几个方面:
（1）界面需求：以蓝色基调为主，给人以平静、理智、美观大方的感觉，体现学院博学笃行、术道精诚的办学特色。
（2）安全性需求：严格权限访问控制，用户在经过身份认证后，只能访问其权限范围内的数据，只能进行其权限范围内的操作。不同的用户具有不同的身份和权限，需要在用户身份真实可信的前提下，提供可信的授权管理服务，保护数据不被非法/越权访问和篡改，要确保数据的机密性和完整性。（在后端设置用户权限、数据库字段加密），即只有具有管理员权限的可以登陆后台管理网站相关内容。
（3）易用性：界面人性化，简单易懂，操作方便。
（4）数据保密性：系统种包含用户私人信息，保证用户密码的安全性和私密性。
（5）操作安全性：因用户的操作不慎可能导致数据被删，在每次删除的时候提醒用户，以防误操作。
（6）可兼容性：考虑兼容市面上主流浏览器，系统应支持windows操作系统;
（7）可扩展性：主题样式、内容，功能方便扩展，方便后期维护。
2.3功能模块示意图
从功能描述的内容可以看到，本网站可以实现如下几个功能，根据这些功能，设计出系统的功能模块，如下图2-1所示。
图2-1功能模块示意图
2.4系统用例图
管理员登录后台系统后，可以对门户网站信息管理维护，具体包括菜单管理、用户管理、学院概况、学术科研、党建动态、研究生教育、本科教育、学生工作、招生就业、校友工作、学院新闻、通知通告、硕博导师、实验中心、学工动态、教研动态、专题专栏、图片新闻。
其中，学院概况包括学院简介、学院领导、机构设置、专业设置 ；学术科研包括科研平台、科研团队、科研成果；党建动态包括党建新闻、制度下载、食品学院分党校 ；研究生教育包括导师信息、培养工作、学位管理、专业学位、表单下载 ；本科教育包括本科教育，学生工作包括规章制度、学生活动、心理健康、学子风采，招生就业包括研究生招生、本科招生、就业专栏，校友工作包括校友工作。系统管理员可以对上述信息进行登录、添加、删除、注册、修改头像、修改密码、修改EMAIL。
系统管理员功能模块关系图如下图2-2所示。
图2-2系统管理员功能模块关系图
普通用户登录后台系统，与管理员的区别是它不能进行菜单管理与用户管理，其他信息的管理和维护都可以。
游客就只能浏览网站内容和注册。管理员、普通用户、游客用例图如图2-3所示。
图2-3系统用例图
3.架构设计与实现
3.1.创建数据库
首先创建一个MySQL数据库来保存本系统的所有数据。
3.2.项目REST架构
本项目采用REST架构（前后端分离），前端使用Vue.js 2技术实现，后端使用Spring Boot 2技术实现。
REST（REpresentational State Transfer）是一种用于构建分布式系统的架构风格，可提供异构系统之间的互操作性。Spring MVC为构建RESTful Web服务提供了一流的支持。由于Spring的REST支持是基于Spring MVC构建的，因此您可以利用Spring MVC的知识来构建REST API。
Vue.js 是一个渐进式框架，为您提供了一种编写 Web应用程序的直观方式，从小规模开始，逐步增长到大型应用程序。Vue是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。
Spring Boot是一个开源的框架，可以帮助开发人员快速轻松地构建基于 Spring 的应用程序。Spring Boot的主要功能包括：Spring Boot启动器、Spring Boot自动配置、优雅的配置管理、Spring Boot 执行器、易于使用的嵌入式 servlet 容器支持。
Java Persistence API（JPA）是一个对象关系映射（ORM）框架，它是Java EE 平台的一部分。JPA 通过让开发人员使用面向对象的API而不是手动编写SQL查询来简化数据访问层的实现。
4.系统设计
4.1.技术选型
4.1.1.前端技术
使用的属性的 getter 函数。对于每个 Vue 组件实例，Vue.js 创建一个 Render Watcher 来 收集这些属性作为 render 函数的依赖项。每当需要更改属性的值时，Vu网站前端使用vue.js 2技术实现，创建 Vue 实例是每个 Vue.js 应用程序的开始。 通常 Vue 应用程序由两种类型的 】Vue 实例组成 - 根 Vue 实例和组件实例。
SPA 具有以下功能：
添加消息；查看消息列表；删除消息；在特定条件下自动禁用添加功能
1.Vue.js 中的过滤器与 Java EE 中的过滤器不同。 在 Vue 应用程序中，使用过滤器来 格式化 Mustache 插值或 v-bind 表达式中的文本。过滤器是一种 JavaScript 函数，它将表达 式的值作为其第一个参数。 Vue.js 提供两种类型的过滤器注册 - 全局使用 Vue.filter（），并 在本地使用组件选项的 filters 属性。
2.除了使用组件之外，mixins 是另一种重用代码的方法。mixin 只是一个普通的 JavaScript 对象，可以包含任何组件选项。正如名称 mixin 所建议的那样，Vue.js 将 mixin 混合到 Vue 组件的 options 对象中。当 mixin 和一个组件都包含相同的选项时，Vue.js 将根据选项的值将它们与不同的策略合并。
本质上，为了在内部存档这种无处不在的响应性，Vue.js 实现了观察者设计模式的变体，以收集数据的依赖关系，并在数据发生变化时通知观察者。在 Vue 实例的初始化期间，Vue.js 通过使用 Object.defineProperty（）方法创建 getter 和 setter 函数来访问该属性并分别更新其值，从而使 data 对象的每个属性都处于响应状态。当 render 函数更新 DOM 时，它会调用模 板中e.js 将通知 Render Watcher，Render Watcher 将触发渲染函数来更新 DOM。
3.用过 Vue 技术栈开发项目过的开发者对这样一个组合肯定不会陌生，这种组件通信的方式是我们运用的非常多的一种。props 以单向数据流的形式可以很好的完成父子组件的通信。
所谓单向数据流：就是数据只能通过 props 由父组件流向子组件，而子组件并不能通过修改 props 传过来的数据修改父组件的相应状态。所有的 prop 都使得其父子 prop 之间形成了一个单向下行绑定：父级 prop 的更新会向下流动到子组件中，但是反过来则不行。这样会防止从子组件意外改变父级组件的状态，从而导致你的应用的数据流向难以理解。
额外的，每次父级组件发生更新时，子组件中所有的 prop 都将会刷新为最新的值。这意味着你不应该在一个子组件内部改变 prop。如果你这样做了，Vue 会在浏览器的控制台中发出警告。
4.Vuetify前端组件：Vuetify核心是为了提供各种可重复使用的，即插即用并且适合各种项目规格的组件。
5.vue-router：vue-router是Vue.js官方的路由插件，它和vue.js是深度集成的，适合用于构建单页面应用。vue的单页面应用是基于路由和组件的，路由用于设定访问路径，并将路径和组件映射起来。在vue-router单页面应用中，则是路径之间的切换，也就是组件的切换。
4.1.2.后端技术
1.RESTful Web 服务
REST 代表代表性状态转移，是用于设计分布式超媒体系统的架构风格。基于 REST 的系统的基本概念是资源，可以通过统一资源标识符（URI）来识别。对于基于 Web 的系统，HTTP 是与外部系统通信的最常用协议。您可以使用 URI 标识唯一资源。
可以通过URI识别网站的信息。资源可以是资源的集合，表示一组分组的资源 。可以在资源上执行的各种操作，可以使用其URI以及适当的HTTP方法（GET，POST，PUT，DELETE 等）来表示。
例如，假设您正在为食品科学与工程学院应用程序构建 REST API。我们已经识别出了3 个资源，分别是用户、权限和通知通告。
遵循 REST 原则，您可以使用以下 HTTP 谓词：
GET-获取集合或单个资源； POST-创建新资源
PUT-更新现有资源；DELETE-删除集合或单个资源
2.使用Spring MVC构建REST API
Spring MVC 为构建RESTful Web 服务提供支持，Spring Boot 通过其自动配置机制使其更加轻松。
清单 1 SpringMVC REST 控制器
@RestController
@AllArgsConstructor
public class NewsController {
private NewsService newsService;
private MenuService menuService;
@GetMapping("/public/news")
public ResponseEntity list(
@RequestParam(value = “pageIndex”, required = false, defaultValue = “0”) int pageIndex,
@RequestParam(value = “pageSize”, required = false, defaultValue = “10”) int pageSize,
@RequestParam(value = “title”, required = false, defaultValue = “”) String title
) {
Pageable pageable = PageRequest.of(pageIndex, pageSize);
Page page = newsService.listNewsByTitleLike(title,pageable);
Map model=new HashMap<>();
model.put(“page”, page);
model.put(“name”, menuService.getMenus().get(“news”));
return ResponseEntity.ok().body(model);
}
在类定义的前面添加 @RestController 注解而不是 @Controller 注 解 ，@RestController 注解相当于@ResponseBody ＋ @Controller 组合在一起的作用。@ResponseBody 注解表示该类中方法的返回值自动绑定到响应主体，默认返回的是 JSON 格式的数据。在 list 方法中，通过@RequestParam 注解的 value 属性指定要接收的请求参数的名称，通过 required 的属性指定参数是否是必须的，如果 required 属性的值设定为 false，可以通过 defaultValue 属性指定参数的默认值。名称为 pageIndex 的参数用来指定要返回查到的全部信息分页以后的第几页，也就是页号，注意，页号是从 0 开始的，页号为 0 的页面就是第 1 页信息。pageSize 参数表示每页信息包含的信息数量，也就是页面的大小。由于两个参数都有默认值，所以，当我们通过下面的 URL 发送请求时，返回的是第 1 页用户信息，该页最多包含 10 条用户信息：
http://localhost:8000/public/new，运行结果会在浏览器中显示类似图4-1-2 所示的查询结果：
图4-1-2条用户信息查询结果图
public interface NewsDao extends JpaRepository
Page findByTitleLikeOrderByUpdateTimeDesc(String title, Pageable pageable);
}
在 News多了一个名为 tiltle 的请求参数，该参数携带的数据作为关键字，用来通过findByTitleLikeOrderByUpdateTimeDesc("%" + title + “%”, pageable)方法查询学院新闻的标题中包含该关键字的所有信息。由于要实现模糊查询，所以在传实参时需要在 title 的前后都连接上代表任意字符的%。
JPA实体 News.java
@Entity
@Data
@EqualsAndHashCode(callSuper = false)
@AllArgsConstructor
@NoArgsConstructor
public class News extends BaseEntity {
@Id
@GeneratedValue(strategy= GenerationType.IDENTITY)
private Long id;
@Lob
private String content;
}
BaseEntity.java
@Setter
@Getter
@AllArgsConstructor
@NoArgsConstructor
public abstract class BaseEntity implements Serializable {
private static final long serialVersionUID = 1L;
private Integer hit=0;
@Basic(optional = false)
private String title;
@UpdateTimestamp
@Column(name = “update_time”)
@Temporal(TemporalType.TIMESTAMP)
private Date updateTime;
@JoinColumn(name = “update_user”, referencedColumnName = “id”)
@OneToOne(cascade = CascadeType.DETACH)
@JsonIgnore
private User updateUser;
}
JPA 的实体是和数据库的表对应的类，需要在类定义的前面添加@Entity 注解。
我们的News 类前添加了lombok 的 @Data 注解，该注解是 @ToString、@EqualsAndHashCode、@Getter 、@Setter 和 @RequiredArgsConstructor 注解的组合注解。@Id 注解用于声明把一个实体类的属性映射为数据库的主键列。该属性通常置于属性声明语句之前。
实体之间具有的联系的类型是一对一、一对多、多对一和多对多，JPA 分别用@OneToOne、@OneToMany、@ManyToOne 和@ManyToMany 表示。当实体之间有联系时，可以在一个实体中定义另一个实体类型（或实体的集合类型）的属性并添加相应的注解来表示。这样，当操作一个实体对象时，就会对相关联的实体对象产生影响，我们称之为级联操作。
2.保护 Web 应用程序
Spring Security 是一个框架，用于在各个层保护基于 Java 的应用程序，具有极大的灵活性和可定制性。 Spring Security 提供针对数据库身份验证，LDAP，表单身份验证，JA-SIG中央身份验证服务，Java 认证和授权服务（JAAS）等的身份验证和授权支持。 Spring Security 使用较少的配置为处理常见攻击（如 CSRF，XSS 和会话固定保护）提供支持。
4.1.3.数据库系统
MySQL是一种开放源代码的关系型数据库管理系统（RDBMS），MySQL数据库系统使用最常用的数据库管理语言–结构化查询语言（SQL）进行数据库管理。由于MySQL是开放源代码的，因此任何人都可以在General Public License的许可下下载并根据个性化的需要对其进行修改。MySQL因为其速度、可靠性和适应性而备受关注。大多数人都认为在不需要事务化处理的情况下，MySQL是管理内容最好的选择。MYSQL是一种关系数据库管理系统，关系数据库将数据保存在不同的表中，而不是将所有数据放在一个大仓库内，这样就增加了速度并提高了灵活性。
本次课程设计我们使用的是MySQL 8.0版本，相比MySQL5.0版本有许多好处。
性能：MySQL 8.0 的速度要比 MySQL 5.7 快 2 倍。MySQL 8.0 在以下方面带来了更好的性能：读/写工作负载、IO 密集型工作负载、以及高竞争（”hot spot”热点竞争问题）工作负载。
隐藏索引：在 MySQL 8.0 中，索引可以被“隐藏”和“显示”。当对索引进行隐藏时，它不会被查询优化器所使用。我们可以使用这个特性用于性能调试，例如我们先隐藏一个索引，然后观察其对数据库的影响。如果数据库性能有所下降，说明这个索引是有用的，然后将其“恢复显示”即可；如果数据库性能看不出变化，说明这个索引是多余的，可以考虑删掉。
JSON：MySQL 8 大幅改进了对 JSON 的支持，添加了基于路径查询参数从 JSON 字段中抽取数据的 JSON_EXTRACT() 函数，以及用于将数据分别组合到 JSON 数组和对象中的 JSON_ARRAYAGG() 和 JSON_OBJECTAGG() 聚合函数。
可靠性：InnoDB 现在支持表 DDL 的原子性，也就是 InnoDB 表上的 DDL 也可以实现事务完整性，要么失败回滚，要么成功提交，不至于出现 DDL 时部分成功的问题，此外还支持 crash-safe 特性，元数据存储在单个事务数据字典中。
本系统的数据库架构图如图4-1所示。
图4-1数据库架构图
4.1.4.开发工具
开发工具使用了Visual Studio Code、在VS Code中安装Java Extension Pack、Spring Boot Extension Pack、lomok、vue等插件，使用了MySQL、使用谷歌浏览器，在谷歌浏览器中安上JSON-handle、Restlet Client等插件。
4.2.开发环境搭建
Node.js 是 JavaScript 运行时环境，借助于 Node.js，可以使用 JavaScript 开发服务器端 （后端）Web 应用程序。我们开发基于 Vue.js 的前端应用时仍然需要 Node.js 的包管理工具 npm 来安装我们需要的前端依赖库。git是目前世界上最先进的分布式版本控制系统，我们可以使用git 来克隆github上我们感兴趣的开源项目。
1.首先安装Node.js，安装时，安装选项按照默认设置就可以了。安装成功以后，打开命令行窗口，输入：npm -v 如果能够显示npm 的版本号，说明 Node.js 安装成功。
2.安装git在命令行窗口中使用以下命令全局安装 vue/cli： npm install -g @vue/cli，安装成功以后，在命令行窗口中输入： vue –version
3.安装了vue/cli 以后，创建项目完成项目的创建，切换到命令行窗口，按下 Ctrl+c 终止项目创建，输入： cd house-client（项目名） 进入到新建的项目目录，输入： code .该命令会启动 VS Code 并在 VS Code 中打开当前文件夹中的项目
4.让我们切换到命令行窗口并进入 house-client(项目名) 目录，运行 npm run serve --open 命令来启动 Vue 应用程序。这个命令调用 vue-cliservice 来启动一个基于 webpack-dev-server 的开发服务器，为我们的 Vue 应用程序提供开箱 即用的热模块替换（HMR）服务。
4.3.界面设计
首页界面是网站建设的灵魂，将主要呈现整个网站最新资源链接，同时也反映出整个网站的整体风格本次网站建设首页要做到简洁大方，内容充实，能够吸引访客浏览。 根据用户的需要，初步规划网站为一种风格为蓝色调，其着重体现简约的风格，整体页面选用白色为背景颜色，页面结构分为头部、正文、尾部三部分头部为导航栏。网站增加了三种特效，分别是首页轮播图、鼠标特效（鼠标移入菜单栏效果），首页界面效果图如图4-3-1所示。
图4-3-1首页界面效果图
正文划分六个栏目，分别为通知公告、学工动态、教研动态、学院新闻、硕博导师、实验中心。子页面（导航栏链接）学院概况：学院简介、学院领导、机构设置、专业设置，界面如图4-3-2所示。
图4-3-2 菜单栏目界面图
底部为专题专栏、网站标题，其效果图如图4-3-3所示。
图4-3-3专题专栏模块图
登陆界面，在对系统进行过管理之前，需要通过系统的身份认证。本网站进行身份验证时，只有正确填写用户名和密码才能回到该界面，否则登录错误。登陆界面如图4-3-4所示。
图4-3-4登陆界面
管理界面，此界面在通过验证后才能进入，它分为学院概况、学术科研、党建动态、研究生教育、本科教育、学生工作、招生就业、校友工作、硕博导师、实验中心模块。它是由框架组成的，从而可以减少重复的部分并可以使系统维护更方便。管理界面如图4-3-5所示。
图4-3-5管理界面图
4.4.数据库设计
数据库设计(Database Design)是指对于一个给定的应用环境，构造最优的数据库模式，建立数据库及其应用系统，使之能够有效地存储数据，满足各种用户的应用需求（信息要求和处理要求）。在数据库领域内，常常把使用数据库的各类系统统称为数据库应用系统。数据库设计的设计内容包括：需求分析、概念结构设计、逻辑结构设计、物理结构设计、数据库的实施和数据库的运行和维护。本网站定义的数据库中包含以下表，下面分别是这些表的信息：
（1）表4-4-1首页home表结构
（2）表4-4-2学院概况overview表结构
（3）表4-4-3学术科研academic表结构
（4）表4-4-4党建动态party_building表结构
（5）表4-4-5研究生教育postgraduate表结构
（6）表4-4-6本科教育Undergraduate表结构
（7）表4-4-7学生工作Student表结构
（8）表4-4-8招生就业employment表结构
（9）表4-4-9校友工作Schoolfellow表结构
（10）表4-4-10学院新闻news表结构
（11）表4-4-11通知通告notice表结构
（12）表4-4-12硕博导师tutor表结构
（13）表4-4-13实验中心experiment表结构
（14）表4-4-14学工动态dynamics表结构
（15）表4-4-15教研动态Teaching_research表结构
（16）表4-4-16专题专栏Special_column表结构
（17）表4-4-17User_authority表结构
（18）表4-4-18图片新闻carousel表结构
（19）表4-4-19用户信息Users表结构
（20）表4-4-20权限信息authority表结构
4.5.类设计
本网站每种类型的信息对应一个实体，共有 9种菜单信息，8种板块信息， 再加上用户信息和权限信息， 共有 19 个实体。实体的名称分别为 Home、Overview、Academic、PartyBuilding、Postgraduate、Undergraduate、Student、Employment、Schoolfellow、News、Notice、Tutor、Experiment、Dynamic、TeachingResearch、SpecialColumn、Carousel、User 和 Authority， 分别对应首页、 学院概况、学术科研、党建动态、研究生教育、本科教育、学生工作、招生就业、校友工作、学院新闻、通知通告、硕博导师、实验中心、学工动态、教研动态、专题专栏、图片新闻、用户信息、权限信息 19 种信息， 每一种实体对应 MySQL 数据库中的一张表。类设计模块图如图4-5-1所示。
图4-5-1类设计模块图
1、DAO层： 持久化层 该层主要与数据库进行交互
DAO层主要是做数据持久层的工作，主要与数据库进行交互。DAO层首先会创建DAO接口，接着就可以在模块中就可以调用DAO 的接口进行数据业务的而处理，并且不用关注此接口的具体实现类是哪一个类。DAO 层的数据源和数据库连接的参数都是在配置文件中进行配置的。
2、Entity层：实体层 数据库在项目中的类，项目运行时，会生成对应的表
3、Service层：业务层 控制业务，Service层主要负责业务模块的逻辑应用设计。和DAO层一样都是先设计放接口的类，再创建实现的类，然后在配置文件中进行配置其实现的关联。接下来就可以在service层调用接口进行业务逻辑应用的处理。同时在Service层中需要用到与数据库交互的部分，全部封装成一个个方法，作为与数据库交互的统一入口，其他方法中将不再与数据库直接交互。封装Service层的业务逻辑有利于业务逻辑的独立性和重复利用性。
4、Controller层：控制层控制业务逻辑，Controller层负责具体的业务模块流程的控制，其实就是与前台互交，把前台传进来的参数进行处理，controller层主要调用Service层里面的接口控制具体的业务流程，由Controller层做各种判断，而判断中做需要用到的各种数据由Service层提供，Service层不再返回状态码，而是直接返回各种数据。
Conroller层和Service层的区别是：Controlle层负责具体的业务模块流程的控制;Service层负责业务模块的逻辑应用设计;Controller层调用Service层的方法，Service层调用Dao层中的方法，其中调用的参数是使用Entity层进行传递的。
5、Exception类：用于处理异常情况
6、Security类：实现安全机制
5.系统实现
基于Spring Boot 2 和 Vue.js 2 的食品科学与工程学院网站的设计与实现的需求分析，主要用前后端分离的架构实现了从后端可以传输数据到前端页面，在前端也设置了管理数据页面，具有管理员权限的可以登陆后台管理网站相关内容，即可用管理员身份和普通用户登录，管理员身份可以对所有的信息进行添加、删除、搜索、进行修改头像、修改密码、修改邮箱；而普通用户不能进行菜单管理和用户管理。
6.系统测试
后端测试（其他类类似）
图6-1 overview_add测试效果图
图6-2 overview_update测试效果图
图6-3 Overview_delete测试效果图
图6-4 Overview_getbyid测试效果图
图6-5 Overview_list测试效果图
前端测试：
点击菜单项出现子菜单，其效果图如图6-6所示。
图6-6菜单项效果图
进入子菜单，进入子菜单界面，出现数据项其效果图如图6-7所示。
图6-7子菜单效果图
点击下面板块内容，进入数据内容，其效果图如图6-8所示。
图6-8数据内容效果图
以管理员身份进入后台，点击菜单管理，进入菜单管理界面，其效果图如图6-9所示。
图6-9界面管理效果图
点击添加，进入添加界面，输入添加信息，其效果图如图6-10所示。
图6-10添加信息效果图
添加成功，其效果图如图6-11所示。
图6-11添加信息成功图
点击用户管理，进入用户管理界面，其效果图如图6-12所示。
图6-12用户管理界面图
点击添加，进入添加界面，输入添加信息，其效果图如图6-13所示。
图6-13添加用户图
添加成功，其效果图如图6-14所示。
图6-14添加用户成功图
点击菜单栏编，进入菜单项编辑界面，其效果图如图6-14所示。
图6-14菜单项编辑界面图
点击添加，输入添加内容，其效果图如图6-15所示。
图6-15添加内容图
添加成功，其效果图如图6-16所示。
图6-16添加内容成功图
点击搜索，输入搜索内容，其效果图如图6-17所示。
图6-16搜索内容图
搜索成功，其效果图如图6-17所示。
图6-17搜索内容成功图
进入个人空间，其效果图如图6-18所示。
图6-18个人空间图
修改头像，其效果图如图6-19所示。
图6-19修改头像图
修改密码，其效果图如图6-20所示。
图6-20修改密码图
以普通用户身份登录后台，其效果图如图6-21所示。
图6-21普通用户身份登录图
点击菜单项，进入编辑界面，其效果图如图6-22所示。
图6-22编辑界面图
点击添加按钮，进入添加界面，输入添加内容，其效果图如图6-23所示。
图6-23添加界面图
添加成功，其效果图如图6-24所示。
图6-24添加界面成功图
点击搜索，输入搜索内容，其效果图如图6-25所示。
图6-25搜索内容图
搜索成功，其效果图如图6-26所示。
图6-26搜索内容成功图
点击内容删除，其效果图如图6-27所示。
图6-27内容删除图
删除成功，其效果图如图6-28所示。
图6-28内容删除成功图
6.1.测试过程中出现的问题及解决方法
前后端连接部分，
问题1：前后端无法连接。
分析：连接部分前后端端口号不同，没有相应url连接解决方法：在.env.development中添加语句VUE_APP_BASE_URL=http://localhost:8000
问题2：板块栏上方只有下划线，没有标题
分析：有下划线和“more”，说明前端没有问题，板块名字数据未导入，后端菜单项import.sql中menu板块数据名字name值与主体控制类中MainController中添加菜单项中url中值不一样，在传数据当中控制类找不到url地址传送数据，导致模块栏上没有标题
解决方法：将两个值改成相同的名字，控制类能找到传送数据的部分，从而传送menu中title值，使得板块标题出现
问题3：点击菜单项中的子菜单项出现“页面飞走”提示，没有相应界面出现，出现404状态码
分析：子菜单项可以点击，没有界面，连接没有问题，只是没有界面，说明没有设置相应的路由或路由设置的界面不存在；404状态码出现，HTTP 404或Not Found错误信息是HTTP的其中一种“标准回应信息”（HTTP状态码），此信息代表客户端在浏览网页时，服务器无法正常提供信息，或是服务器无法回应且不知原因。此时连接没有问题，也能说明是路由问题。
解决方法：查看前端路由信息，发现没有设置相应路由，添加相应路由，使界面点击时找到相应跳转界面。
问题4：在使用MySQL命令行工具向表中插入数据时，出现Unknown column ‘imgUrl’ in ‘field list’的错误
分析：是书写格式与数据库书写格式不同造成的
解决方法：应该在data.sql文件中将imgUrl改为img_Url
问题5：在测试过程中，出现400（Bad Request/错误请求）
分析：指出客户端请求中的语法错误
解决方法：在浏览器中输入的地址http://localhost:8000/news与 代码中命名不同，改为http://localhost:8000/public/newss
7.总结与展望
通过这次课设学会了如何创建JPA的实体类，在 Web 应用程序中使用 Spring Boot 的 JPA 实现数据库访问的仓储层。学会了创建了每个仓储类对应的控制器类，在每个控制类中通过REST API处理客户端提交的对数据进行了增删改查的请求。实现食品科学与工程学院Web项目的控制层。学会了如何从后端传输数据到前端实现网站。通过信息化的门户网站，结合了本院校门户网站的实际情况及存在问题，经过了仔细的网站建设需求分析，做了详细的研究，最终完成了本门户网站的建设。
针对该门户网站，项目选用了现今流行并且稳定的设计思想和开发框架：前端使用Vue框架＋组件库的方式开发，后端采用Spring Boot框架。Vue.js框架来搭建项目，选用了MySQL数据库。Vue框架为前端提供工程化的开发方式，在前端抽离出高复用、低耦合的组件进行页面搭建的工作，并解耦前端和后端的业务逻辑，将项目层次分得更加清晰。spring框架作为JavaWeb开发的主流框架，为后端开发提供了规范的开发流程，简化了开发过程。Spring Boot框架更进一步减轻项目初期配置，同时通过声明式注解的方式使代码更清晰可读，Spring Data JPA框架对数据库操作的进一步封装让开发者能更高效地进行数据持久层的操作。
随着信息社会的发展,网络系统的规模越来越大。Web(World Wide Web)具有传播信息容量极大、形态多样、迅速方便、全球覆盖、自由和交互的特点,已经发展成为新的传播媒体。随着Web网站的不断发展和日益普及,Web拥有越来越多的用户,致使Web网站性能优化的重要性更加突出。对Web网站系统的优化设计,可以提高其易用性,优化其性能,大大提高数量庞大的Web用户的满意度。Web网站性能优化技术目前已成为研究的一个热点。随着信息量的不断扩大，信息技术的不断提高，网络有巨大的潜力等待我们开发。目前网站的制作技术与要求，随着各种网站的发展而提高，无不要求网站从设计风格，策划，网页设计到后台程序的全面提高。不论是校园网站还是企业网站都必须要求从用户角度出发，最大限度满足用户的需求，这也是今后网站发展的真正本质所在。
本次校园网站的设计由于时间紧张，且相关模块比较多，加之经验有限，在网站的整体设计和各模块功能可能设计的不完全，有待于进一步完善和改进。
致谢
通过本次校园网站设计和开发，让我学习了许多知识，特别是课本之外的东西，比如处理图片，网页设计的技巧，本网站还有许多不足之处，我们以后努力改进。这次网站设计和开发使我熟悉了网站的开发流程，了解开发的侧重点，熟悉了各种开发语言，同时也熟练使用开发软件。在网站设计过程中曾遇到许多问题，都是热心的老师还有同学及时帮我们解决难题，才得以完成，在此，我要感谢我的老师还有室友们，感谢你们教我学会了网站的设计知识。
同时，本次校园网站设计和开发还帮助我认清自我，改变一些处理事情时懒散的习惯。从最开始时的搜集资料，整理资料，到方案比选，确定方案，每一步都是环环相扣，衔接紧密，其中任何一个步骤产生遗漏或者疏忽，就会对以后的设计带来很多的不便。我的动手能力和资料搜集能力在设计中也得到提升。
最后，本次课程设计能够顺利完成，得力于刘金羽老师、室友和朋友的无私帮助，在这里请允许我诚挚地表达谢意!
参考文献
[1] [美] 凯 S. 霍斯特曼. Java核心技术卷II：高级特性（原书第10版）. 机械工业出版社，2017.7
[2]高翀. 北京某高职院校门户网站的设计与开发[D].北京工业大学,2018.
[3]刘樱,杨明,王锐,魏爽,陈晴.基于Spring Boot框架的气象风参数查询服务平台设计与实现[J].软件导刊,2019,18(05):110-113.
[4]杨妍.基于Spring Boot与Vue的系统管理模块开发探究[J].电声技术,2019,43(02):32-34.