基于Spring Boot 2 和 Vue.js 2 的 食品科学与工程学院网站的设计与实现

摘要
互联网具有传播信息容量大、形态多样、迅速方便、自由和交互等特点，已经发展成为新的传播媒体，现在很多的大学和社会其他部门都已经建立了网站，通过计算机网络实现宣传、交流及资源的整合。建立学校网站有以下作用：
学校网站是学校的"商标"。在这个高度信息化的社会里，建立自己学校网站是最直接的宣传手段。网站的超时空特性，不仅能让地区内的人们了解学校，更可让世界了解学校。
学校网站是实现教育资源分配的桥梁网络有巨大的教育资源库，它使每一位教师和学生都能均等的得到培训和受教育的机会，极大的提高教学效率。
学校网站能提供教学互动的全新方式学校网站使得教师与教师、教师与学生、学生与学生之间的交流有了全新的方式，它不再受到传统课堂的制约。它可以使不同的学校同处一室，共同讨论，共同共享。地理上的界限在这里模糊和消失了，学校网站是真正没有围墙的学校。
学校网站能够提供个性化学习的平台，不同的学生理解世界的方式各不相同，认知世界有诸多方式。网络提供的丰富资源可以使学生寻觅不同的教育方式，各取所需。学校网站允许不同的学生沿着自己的途径，按自己的速度接受教育与学习，学生将有机会享受最佳的教育机会，充分发掘自己的内在潜力，培植独特的个性和人格。
学校网站是最佳的教学研究室，学校网站与教育类专门网站的有效链接，给学校教学研究带来了一片新天地，各种优秀教案、专家论坛、网络观摩课、各科素材、多媒体课件制作等内容为教师教研提供了极佳的平台。有效地降低教研成本、提高效率。

关键字：学校；网站；优势
目 录

1. 小组分工 4
2. 需求分析 4
   2.1功能需求分析 4
   2.2非功能性需求分析 4
   2.3功能模块示意图 5
   2.4系统用例图 6
3. 架构设计与实现 7
   3.1. 创建数据库 7
   3.2. 项目REST架构 7
4. 系统设计 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
5. 系统实现 24
6. 系统测试 24
   6.1. 测试过程中出现的问题及解决方法 35
7. 总结与展望 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）框架，它