本科生毕业设计（论文）外文资料译文

（ 2020届）

论文题目	基于Vue.js的宠物救助网站系统前端的设计与实现

外文资料译文规范说明

一、译文文本要求 1．外文译文不少于3000汉字； 2．外文译文本文格式参照论文正文规范（标题、字体、字号、图表、原文信息等）； 3．外文原文资料信息列文末，对应于论文正文的参考文献部分，标题用“外文原文资料信息”，内容包括： 1）外文原文作者； 2）书名或论文题目； 3）外文原文来源： □出版社或刊物名称、出版时间或刊号、译文部分所在页码 □网页地址 二、外文原文资料（电子文本或数字化后的图片）： 1．外文原文不少于10000印刷字符（图表等除外）； 2．外文原文若是纸质的请数字化（图片）后粘贴于译文后的原文资料处，但装订时请用纸质原文复印件附于译文后。

指导教师意见： 指导教师签名： 年 月 日

一、外文资料译文：

基于Vue.js的大学教学系统的设计与实现

关键词：Vue.js框架，HTML5，教学系统，设计与实现

摘 要—互联网信息技术的普及从根本上改变了学习方式。 利用Internet信息技术来提高高校的教学效果已经成为研究热点。 从大学教学的实际需求出发，本文设计了一种基于各种互联网信息技术的大学教学系统。 具体来说，前端是在轻量级渐进式Vue.js框架下开发的，该框架依赖于模型-视图-视图模型（MVVM）； 系统的整体结构是基于浏览器-服务器（B / S）架构设置的；系统功能通过HTML5，Node.js和数据库技术实现。移动终端和台式机之间的兼容性是通过Boottrap实现的。 系统测试表明，基于Vue.js的大学教学系统运行稳定，达到了设计目标并满足了用户需求。 研究成果为大学教学的现代化和质量提供了重要的新启示。

1. 如何使用此模板
   1. 将样式应用于现有文件

当前，互联网和信息技术已经成为人们生活中必不可少的技术工具。 将互联网和信息技术整合到教育中，极大地促进了大学的教学信息化改革。 面对信息环境下传统课堂教学无法满足大学生需求的尴尬局面，高校已经建立了基于局域网或互联网的大学教学系统，以协助传统课堂教学。 这可以为师生学习交流提供一个平台，从而提高教学效果。

外国信息技术和互联网技术的发展要早于中国。因此，国外对教学系统的研究和开发相对成熟。美国拥有最广泛的网络教育，例如在麻省理工学院（MIT），到2006年底，共享的在线课程数量已达到2000 [2]。 Blackboard [3]是美国公司开发的教学平台。它也是世界上使用最广泛的系统，它为教师提供了强大的课程开发和教学环境，并为学生提供了良好的虚拟学习环境。 Sakai [4]是美国多所大学共同开发的一种开放源代码的协作学习平台，目的是整合高校现有的组件和工具模块以建立在线教学管理。 Moodle [5]是由澳大利亚教师根据建构主义理论开发的一种教学辅助系统，它由资源，论坛，课程管理等多个模块组成，并得到了许多机构的认可。尽管国内大学教学系统的起步较晚，但它一直在迅速发展。 4A网络教学平台[6]是中国最早开发的。该平台由教学资源管理，课程协调开发工具，教学管理系统和教学支持系统组成，增加了师生互动，极大地调动了学生的学习兴趣。清华大学建立的“清华在线”是各大学建立的网络平台中最成熟的网络[7]。北京师范大学开发的VClass [8]解决了传统教学中的许多问题，它还可以为远程学习提供服务，从而有可能实现教育资源的平衡。随着互联网信息技术和智能电话的普及，大学生已经习惯于通过互联网获得知识和学习相关技能。中国的大学教学体系发展迅速，但仍存在发展水平不同，更新不及时，课程结构不完整，功能单一等问题[9]。通过分析国内外高校教学系统的发展现状和研究现状，本文试图研究Vue.js框架大学教学系统的设计和实现。 为此，本文阐述了Vue.js框架，HTML5，Node.js和系统开发过程中涉及的其他相关技术。 然后从实际的教学需求出发，本文分析了系统的各种要求，确定了其总体架构，详细讨论了关键模块，并演示了具体的系统实现。 最后，系统测试结果表明，基于Vue.js的大学教学系统运行稳定，达到了设计目标，满足了用户需求。

1. 系统相关技术

2.1、Vue.js框架

Vue.js [10]是Web应用程序中基于MVVM模式的最佳轻量级前端框架。 图1显示了MVVM模式架构的示意图，其中，ViewModle作为中间件负责功能与数据之间的通信[11]。

图1. MVVM模式架构图

Vue.js核心库仅关注功能层，因此不是通用框架。 Vue.js可以通过一个简单的API实现响应性的双向数据绑定，并快速构建用户界面[12-13]。 在Vue.js中，任何类型的应用程序接口都可以抽象为组件树。 图2显示了组件系统的示意图。 如果该组件被合理地抽象，则几个小的组件可以被重用以构建一个大型系统，从而减少重复开发[14]。

图2. Vue.js组件系统示意图

2.2、HTML5

超文本标记语言（HTML）由“头”和“正文”组成。 标准标记语言是用标记符号[15]标记网页的每个部分。 HTML被广泛使用是因为它使浏览器可以通过单击URL指针（超链接）轻松访问新的Web页面。

HTML5 [16]是最新一代的HTML标准。 它基于HTML，具有更多新的有用功能，例如性能和集成，Web多媒体，本地存储，语义功能等。 这是近十年来Web开发标准的最大飞跃。

2.3、Node.js

Node.js是一个开发平台，它允许JavaScript基于JavaScript的高性能，开源运行时环境在服务器端运行[17]。 它的本质是基于事件的框架，该框架可防止通过事件驱动机制二次触发Web请求。 本文使用Node.js事件驱动的异步阻塞I / O，单线程功能进行系统后端设计[18]。

1. 基于Vue.js框架的大学教学系统的设计与实现
   1. 系统需求分析

系统的功能需求分析和非功能需求分析是软件开发的重要部分。功能需求分析是确定系统的主要功能和模块划分。非功能需求分析基于用户的需求和经验，以确保系统的安全性，稳定性，易维护性和可扩展性。本文着重于系统的功能需求分析。

大学教学系统旨在弥补传统课堂教学在时间和空间上的局限性以及师生之间缺乏互动交流的局限性，从而使学生能够根据自己的学习情况进行课前学习和课后复习。自己的时间表和实际能力。它还为教师和学生的交流建立了一个互动平台。学生和老师是系统的主要服务对象。此外，管理员还负责通过综合管理来确保系统的正常运行。因此，本文从学生的学习需求，教师的教学需求和管理员的管理需求三个方面分析了系统的功能需求。

学生：登录后，学生可以修改自己的信息，浏览课程列表，选择课程，观看老师提供的教学资源，课件和其他教学资源，在线学习或通过下载来学习，查看老师发布的课程公告，作业公告和相关消息。他们还可以针对所选课程进行在线测试，查看成绩和论文分析，并通过论坛与老师和其他学生即时交流。

教师：登录后，教师可以修改自己的用户信息，创建班级和课程，管理班级信息，发布相关教学资源和公告，安排学生作业，维护测试题，查看学生的作业和在线测试 分析以了解学生的学习环境，通过论坛与学生交流并回答他们的问题。

管理员：登录后，管理员可以分配用户角色，修改学生和教师的信息以及管理系统中每个功能模块的信息。

• 1. 系统功能模块划分

根据对系统需求的分析，系统分为四个模块：登录功能，学习功能，论坛功能和测试功能，如图3所示。

登录模块：学生，教师和系统管理员可以通过系统登录功能进行注册和登录。 登录后，他们可以修改个人信息，单击系统主页上的相应功能按钮以进入每个功能模块，并查看评论内容和自己的书签。

图3.高校教学系统功能结构图

学习模块：学习功能包括三个子模块：资源管理，资源学习和分配管理。 教师可以使用资源管理子模块维护课程信息，上传教学课件，视频和其他学习资源； 学生可以使用资源学习子模块浏览教学资源，下载资源进行学习； 作业管理子模块提供作业发布，作业提交和作业审查三个子功能。

论坛模块：论坛模块主要是为师生提供一个互动平台。 老师和学生可以通过论坛模块发布消息，评论和回复帖子，以及将有趣或有用的帖子添加到书签中以供将来查看。

测试模块：测试模块包含四个子模块：测试维护和管理，自动生成试卷，在线测试和测试反馈。 在此模块中，教师可以添加和修改测试数据库； 学生可以根据学习进度或自己的情况选择测试范围。 该系统根据学生的要求执行自动试卷生成。 然后，学生完成自测，并检查测试成绩和试卷分析。

• 1. 主要系统功能模块的详细设计与实现系统登录模块的设计与实现：大学教学系统包含三种类型的用户：学生，教师和管理员。 管理员具有系统的所有功能。 他们可以根据教师编号和学生编号来设置学生和老师的角色和权限，以及用户权限和初始密码。 当学生和教师的用户首次使用该系统时，他们将根据给定的用户名和密码登录，并在成功登录后查看不同的界面。但是他们可以更改其个人信息，包括密码 修改，上传个人资料照片等。 除非提交注册信息然后批准，否则其他人将无法进入系统。 图4显示了系统登录过程。 图5显示了登录界面。

图4.系统登录过程

图5.系统登录界面

测试模块的设计和实现：输入正确的用户名和密码后，学生可以访问学生的主页。他们可以从该页面查看课程的通知公告和作业状态，并使用导航栏访问相应的模块链接。

点击在线测试按钮，学生进入在线测试功能模块，根据自己的学习条件选择测试题的类型和测试题的范围。

然后，系统将根据学生的要求自动组织试卷，并向他们展示测试题，而学生将在指定时间内完成并提交测试。系统会自动对试卷进行评分，并将相关的试卷结果和试卷信息反馈给学生进行自学。图6显示了在线测试流程图，图7显示了在线测试界面。

教学资源管理子模块的设计和实现：教学资源管理是学习模块的子模块。成功登录后，教师可以通过此模块添加，修改或删除课程信息和相关资源。单击以下载教学资源的界面时（图8），教师可以通过拖放将编辑的文本或视频添加到上传界面。根据教学资源的主题和特定类型，可以选择相关资源并上传以供学生学习。对于试题库，教师可以分批上传，也可以根据实际需要逐个添加。图9显示了教师添加测试题的界面。

图6.在线考试流程图

图7.在线测试界面

图8.上传教学资源界面

图9.测试题添加界面

• 1. 系统测试

为了保证系统运行质量，及时发现系统缺陷，采用黑盒测试方法对系统的稳定性和功能可扩展性进行测试。 测试结果表明，系统登录界面，课程界面，视频播放界面，问题库界面，在线测试界面，测试反馈界面等均可以正常运行，满足用户需求。

1. 总结

在对国内外教学系统研究的基础上，研究了基于Vue.js框架的大学教学系统的设计与实现。 具体结论如下：

bull;从大学教学的实际需求出发，从学生，教师和管理人员三个方面分析了系统的功能需求。 基于此，该系统分为四个模块：登录功能，学习功能，论坛功能和测试功能。

bull;以系统登录模块，在线测试模块和教学资源管理子模块为例，详细阐述了主要系统功能模块的设计和实现。

黑盒测试方法用于测试系统稳定性和功能可扩展性。 测试结果表明，该系统可以正常运行，满足用户需求。

1. 致谢

河南省师范课程改革项目：大数据背景下的中小学教师网络培训模型（No. 2018-JSJYYB-029）

河南省师范教育课程改革项目：“互联网 教育”模式下中小学教师信息化课程改革研究（NO.2019-JSJYYB-118）。

1. 参考

[1]Wang, H. C., Hsu, C. W. (2006)

剩余内容已隐藏，支付完成后下载完整资料

---

Design and Implementation of a Vue.js-Based College Teaching System

https://doi.org/10.3991/ijet.v14i13.10709

Junhui Song (), Min Zhang

Xinyang Normal University, Xinyang, China

85141727@qq.com

Hua Xie

Xinyang Vocational and Technical College, Xinyang, China

Abstract—The proliferation of Internet information technology has funda- mentally changed the way of learning. It is now a research hotspot to improve teaching effect in colleges with Internet information technology. Starting from the actual needs of college teaching, this paper designs a college teaching sys- tem based on various Internet information technologies. Specifically, the front end was developed under the lightweight progressive Vue.js framework, which relies on the model–view–view model (MVVM); the overall structure of the system was set up based on the browser-server (B/S) architecture; the system functions were realized through HTML5, Node.js and database technology; the compatibility between mobile terminal and desktop was realized under Boot- strap. The system test shows that the Vue.js-based college teaching system op- erated stably, achieved the design goals and satisfied user demand. The research findings shed important new light on modernization and quality of college teaching.

Keywords—Vue.js framework, HTML5, teaching system, design and imple- mentation

How to Work with This Template

Applying the styles to an existing paper

At present, the Internet and information technology have become indispensable technical tools in peoples lives. Integrating the Internet and information technology into education has greatly promoted the teaching information reform in colleges and universities. In the face of the embarrassing situation that the traditional classroom teaching cannot meet the needs of college students under the information environ- ment, colleges and universities have established a college teaching system based on LAN or Internet to assist traditional classroom teaching, which could provide a plat- form for teacher-student learning exchange and thus improve teaching effect [1].

Foreign information technology and Internet technology have developed earlier than in China. Therefore, foreign research and development on teaching systems is relatively mature. The United States has the most extensive network education, e.g., in Massachusetts Institute of Technology (MIT), the number of shared on-line courses had reached 2000 by the end of 2006 [2]. Blackboard [3] is a teaching platform devel- oped by American companies; it is also the most widely used in the world, providing teachers with a strong curriculum development and teaching environment, and sudents with a good virtual learning environment. Sakai [4] is an open source plat- form of collaborative learning jointly developed by multiple universities in the United States, with the purpose of integrating the existing components and tool modules of colleges and universities to build an online teaching management. Moodle [5] is a teaching aid system developed by Australian teachers based on constructivist theory consisting of multiple modules such as resources, forums, curriculum management etc, and has been recognized by many institutions. Despite the later start of the do- mestic college teaching system, it has been developing rapidly. The 4A network teaching platform [6] was developed the earliest in China. This platform is composed of teaching resource management, curriculum coordination development tools, the teaching management system, and the teaching support system, which increases the teacher-students interaction and greatly mobilizes students interest in learning. Qing- hua Online established by Tsinghua University is the most mature one among the network platforms established by various universities [7]. The VClass [8] developed by Beijing Normal University has solved many prolmens in tradition teaching, and it can also provide services for distance learning, making it possible to achieve educa- tional resource balance. With the popularity of Internet information technology and smart phones, college students have become accustomed to acquiring knowledge and learning related skills through the Internet. The collge teaching system in China has developed rapidly, but there still exist the problems such as different development levels, untimely updates, incomplete curriculum structure, and single function etc. [9]. By analysing the development status and research situation of colleges teaching systems at home and abroad, this paper attempts to study the design and implementa- tion of college teaching system using the Vue.js framework. To this end, it expounds the Vue.js framework, HTML5, Node.js and other related technologies involved in the system development process. Then, starting from the actual teaching needs, it analyses the various requirements of the system, determines its overall architecture, discusses about the key modules in detail, and demonstrates the specific system im- plementation. Finally, the system test results show that the Vue.js-based college teaching system operated stably, achieved the design goals and satisfied user demand.

System Related Technology

Vue.js framework

Vue.js [10] is the best lightweight front-end framework based on MVVM mode in Web applications. Figure 1 shows the schematic diagram of MVVM mode architec-

ture, in which ViewModle, as a middleware, is responsible for communication be- tween functions and data [11].

Modle

ViewModle

View

DOM Observer JavaScript objectlt;

剩余内容已隐藏，支付完成后下载完整资料

---

资料编号：[273461]，资料为PDF文档或Word文档，PDF文档可免费转换为Word