论文在线分享-计算机科学与技术学院本科毕业设计文档-CNKI知网查重网站

论文在线分享-计算机科学与技术学院本科毕业设计文档

2021-06-02 10:37:06
作者:杭州千明

  1.问题定义:

  随着Internet国际互联网的不断发展,开发人员百花齐放,建造出了各种各样的网站。各类网站层出不穷,网络学习是个趋势,语言学习很重要。翻译APP是通过人与电子通信方式的结合,以计算机网络为基础,实现在联网状态下的翻译。我通过查阅书籍、网络资料,结合课程所学,基于Vue2.0技术,构建了一个能实现简单功能的小型动态APP——翻译APP。

  本APP是一款翻译APP,拥有简洁美观的界面、强大的语料库,实现多种语言翻译。当前很多的企业前端开发都会用到Vue2.0这一款模块化、组件化的渐进式JavaScript框架,灵活复用性高的组件,数据双向绑定,方便,灵活、高效、易学、易用。

  制作这样一个翻译APP系统,是免费为普通大众提供丰富的语言翻译资源和一个实用、快捷、方便的语言学习环境。

  2.可行性分析:

  2.1技术可行性

  2.1.1MVVM框架

  实际上,MVVM框架就是MVC框架的改进版本,是Model-View-ViewModel的简写。是想将模型(Model)和视图(View)分离开来。

  在MVVM中,在Model层的数据模型只包含状态;而在ViewModel中,数据模型封装了视图状态和行为俩部分内容。双向绑定使View层实时展示ViewModel的内容。View层显示的是ViewModel层的数据,交互通过Model层和ViewModel层完成,这样的交互方式解耦了Model层和View层。

  测试只针对ViewModel来编写。多个View可以重复使用同一段视图逻辑(ViewModel中的)。

  MVVM框架图如图2.1所示:

  双向数据绑定

  AJAX请求

  (post/get)JSON

  图2.1 MVVM框架图

  2.1.2 Vue.js

  Vue.js是一个是基于MVVM的轻量级的前端框架,是基础的视图层框架,是模块化、组件化的响应式编程。Vue通过AJAX向服务器请求数据。Vue操作DOM是基于jQuery的,利用各种复杂的选择器。Vue.JS的响应式双向数据绑定,实现数据的变化并映射到虚拟DOM上。组件使得代码的复用性提高了,也有利于后续界面的扩展。

  Vue的模块化组件的用法如图2.2所示:

  图2.2 Vue组件复用示意图

  2.1.3项目快速开发工具

  Vue CLI是一个完整系统开发工具,能够快速开发,基于Vue.js,拥有完全图形化界面,能很好地创建项目基本结构,自动生成Vue.js+Webpack的项目模板。Vue CLI是提供交互式项目的脚手架,能够:搭建、开发、管理项目。Vue CLI服务能加载多种CLI插件的核心服务,且是建立于WebpackDev-Server和Webpack之上的。

  2.1.4前端模块打包工具--Webpack

  Webpack先逐级分析项目的结构,定位到所有js模块和分别与这些js模块关联的CSS,然后对其整合,再打包压缩。

  2.1.5路由工具

  Vue.js官方的路由管理器是Vue Router,由Vue.js深度集成,spa(单页面)应用由Vue Router构建和管理,前端路由的核心在于改变视图的同时不向后端发出请求。完整的页面只有一个,当这一个页面在更新加载视图时,整个页面内容不用再次全部请求加载,只需加载更新这个页面中的某个组件即可。

  Vue Router通过改变路径,实现组件之间的切换和跳转。各个组件间通过使用$on和$emit完成相应的数据传递。通过<router-link to=””></router-link>标签动态的挂载指定的页面组件,最终渲染页面。

  2.1.6数据请求工具

  该系统采用Axios实现数据交换。Axios是第三方插件,使用Axios并通过http请求的Vue组件时,在命令行下载Axios,使用import导入即可。Axios是建立于promise的一个HTTP库,能在node.js和浏览器中使用。Axios可以完成从浏览器中创建XMLHttpRequests、拦截请求和响应、支持Promise API、转换请求数据和响应数据、自动转换JSON数据、取消请求的一系列动作。

  2.1.7 UI框架

  Vue的UI框架一般分为:PC端和移动端。在开发时,依据实际的项目开发需求用适当的UI框架。PC端有:ELement-UI;移动端有:Mint-UI。每个支持Vue的UI框架都存在不极致的地方,但丰富了Vue的UI环境。该APP根据需求选择ELement-UI和Mint-UI俩个UI库协同合作来完成。

  2.1.8 jQuery

  jQuery是一个优秀的轻量级JavaScript框架,具有快速、简洁的特性,本质是把常用的JavaScript功能代码封装在jQuery内部,方便使用。能实现优化HTML结构文档操作、动态效果设计、Ajax数据交互和事件处理的相关操作。

  2.1.9 Swiper

  Swiper是面向平板电脑、手机等的移动终端的滑动特效插件,由纯JavaScript编写。具有开源、免费、稳定的特点,简单、功能较强大,可以很好的架构移动终端项目。经常在实现触摸滑动移动端网站的内容时用到。实现的一些常用效果,例如:触摸滑动屏幕Tab切换、触屏焦点图、触摸滑动屏幕多图切换等。

  2.1.10相关技术参考学习网址

  1)Vue.js:https://vuejs.org/

  2)Vue路由:http://router.vuejs.org/zh-cn/index.html

  3)Element-UI框架:http://element.eleme.io/

  4)Mint-UI框架:http://mint-ui.github.io/

  5)jQuery:https://jquery.com/

  6)Swiper:https://www.swiper.com.cn/

  2.2经济可行性

  该系统带来的经济效益将会远远地超过其开发成本。

  设计之初就本着简单、低成本的设计原则。面向需要语言翻译的普通用户设计。上线或者拓展开发,在一些搭建接口和服务器,可能会有一些开销。

  统一设计规范的设计资源和前端组件构成完整的Vue框架,提高了设计效率、协同效率、代码复用率、开发效率,有降本增效的效果,在开销和大小方面是轻量的。

  2.3操作可行性

  系统设计的目标是设计一款简单、实用的翻译APP,所以没有其他复杂的功能,需要语言翻译的人能在较短的时间内熟悉、掌握系统的操作。该系统是移动端的项目,移动端APP是符合大众用户的选择的。当客户在完成翻译等实际的操作时,是相当简捷的,只需要联网,这也符合现在网络时代大众的习惯。

  2.4社会可行性

  该系统有很好的社会可行性。“服务社会,服务大众”是我们各行各业的奋斗目标。APP上线后,对社会各行各业的各个阶层都会产生积极的影响。现在我国整体的国民素质在不断提高,国民的文化水平在不断提高。人们的日常生活中,很多时候都需要外语,有时是学习、有时是工作、有时又会在生活中会用到。但以汉语为母语的我们,每逢翻译,部分人的外语会显得有些匮乏,不能满足正常的翻译需求。此时,翻译APP就会大显身手,为人们解决翻译困难,帮助更多的人们,为社会服务。

  3.需求分析:

  3.1目标

  (1)简洁明了。系统的首要目标就是:让需要翻译的用户在最短的时间内熟悉、并熟练掌握系统的使用,界面和功能非常简洁、一目了然。

  (2)可维护性好。APP系统出现问题时,快速定位,做出有针对性的修补、维护,保证用户的正常使用。

  (3)扩展性好。随着发展,需要扩充系统时,在无需对之前的系统做大的改动、APP系统现有功能能正常使用的情况下,可以顺利、高效的再次生产开发。

  3.2性能及运行需求

  (1)使用Vue搭建一个项目,需提前安装Node、Npm和Webpack。

  (2)运行成功后,必须在联网状态下实现翻译。

  (3)运行大小需要:20kb min+gzip,最省心的优化、超快虚拟DOM。

  (4)在Windows系统下运行。

  (5)在Vue.js中,一个.vue文件就是一个完整的组件,在复杂的项目中也适宜。

  (6)单文件组件由Webpack构建工具打包。

  使用Webpack构建工具来打包,主要的好处是:在基本的封装工具和压缩工具的处理下,当上线时,也许只产生一个文件。当网络请求多个文件时,这样使性能和运行大大的优化了,减少了延时或文件缓存问题。

  3.3兼容性

  所有兼容ECMAScript5的浏览器Vue.js都支持。例如Opera 11.60、Internet Explorer 9*、Firefox 4、Safari 5.1**、Chrome 13等。

  Vue.js用了ECMAScript5特性,IE8不能模拟ECMAScript5特性的,因此IE8和它以下的版本Vue.js是不支持的。总的来说,基于Vue.js的这个项目的兼容性还是相当可以的。

  3.4功能需求

  该App以实现在线翻译为主,结合美观大方的设计页面,并配合其他一些辅助性功能。功能如下:

  (1)多个界面,自由切换,浏览各种信息。

  (2)在联网状态下,实现国际常用的95种语言在线翻译,免费的在线翻译包括:单词翻译和文章翻译。可选择翻译的语种部分示意图如图3.1所示:

  图3.1可选择语种部分示意图

  3.5错误处理

  系统的功能虽然不是很强大,但用户在操作某一功能时,必须生成与用户操作的功能相匹配的正确结果。

  该APP使用Vue框架,Vue.js非常强大的特性就是组件。APP应用程序被切割为独立、小巧、且具有很强复用性的组件,使大型的应用程序更好地管理。在Vue.js中,由基础的HTML元素拓展形成组件,行为和数据能方便地自定义。在维护过程中,一旦出错可以快速定位问题部位,在不影响其他组件的情况下,做出有正对性的改动,迅速解决问题。

  3.6约束

  该APP是在Windows系统下开发的,要求必须在联网的环境下运行,以便用户能正常使用。开发工具使用强大且常用的Web开发工具--Huilder,预览浏览器使用常用的Chrome浏览器。在数据的管理上,统一用json数据,该系统为小型系统。

  3.6未来的需求

  由于该系统目前只适用于需要语言翻译的人,且功能不是很完备,日后需要不断地完善、拓展项目。

  随着系统在功能和用户需求上的完善,功能和性能将会有很大的提升,所用的框架、技术也会不断更新。相应的功能越来越丰富,适用人群也将变得更广。因此,对于后期的完善、更新、扩充、以及后期维护等,在一开始的开发过程中就要想到,并融入到具体的开发中。

  再次开发不影响开发好的部分,并且有很好的补充作用。要根据用户的需求拓展,争取成为用户友好型、功能强大的翻译APP。再次开发如何进行,还需慢慢的探索、研究。

  4.系统设计:

  4.1总体框架设计

  根据实际需求,翻译APP系统的内容展示是分布在顶级组件APP.vue之下的五个板块。

  五个板块和顶级组件的层次如图4.1所示:

  图4.1翻译系统的层次模块图

  4.2概要设计

  4.2.1功能模块设计

  该系统主要包括:翻译、精品课、听力、VIP5大模块,这几个模块均是后缀名为.vue的单文件组件,复用性强、好维护、方便扩展,由路由实现5个模块的相互切换,几个模块的具体设计如下:

  (1)首页:首页是项目运行后看到的第一页,展示各个模块,可以预览到各种信息,及相应的快捷入口,该部分主要是通过AJAX在json文件中获取数据来渲染,并配合其他模块的实现。

  (2)翻译:翻译模块为该系统的核心模块。在联网状态下,即可实现翻译。通过http结合jQuery调用外部接口进行翻译,用$son和$emit实现相关组件间的数据传递,结合简单的文本输入和选择框,最后在页面上展示翻译结果。为了方便操作,并给用户带来一个很便捷,而且清新舒服的翻译界面,样式部分采用简单的天蓝色的背景色。

  (3)精品课:精品课模块展示各种课程。头部运用Swiper实现轮播,数据渲染通过AJAX获取json数据。

  (4)听力:听力模块实现听力。在该部分有每日一听等子模块,中英文内容结合英文音频。

  (5)VIP:VIP的各种服务。用单纯的C3实现动态的卡片,Swiper实现鼠标滚轮滑动等行为动作。

  对于使用这个APP的人来说,用户打开这个APP,可以浏览丰富的网页信息,在需要对一些文本数据进行翻译时,结合下面的实现步骤和翻译流程图,就可以实现翻译。

  实现翻译要依次完成以下几步:

  第一步:联网。

  第二步:在第一个文本框中键入要翻译的文本信息。

  第三步:在点击需要翻译成的语种的文本框时,会自动弹出滑块,接下来需要在滑块上选择翻译成的语种,选择后确定,滑块自动隐藏。

  第四步:在翻译界面,点击“翻译”按钮,即可获得所想要的内容。

  若需要输入翻译文本的文本框为空,用户则需要重新在文本框内输入内容,否则系统会提示“请重新输入”;若没有联网则弹出“请联网刷新重试”。操作过程明了、简洁,适用面比较广。

  该APP翻译功能的流程图如图4.2所示:

  是

  否

  否

  是

  图4.2翻译流程图

  4.2.2总体架构设计

  该APP是基于node.js,通过npm淘宝镜像生成的Vue2.0项目。该项目中各个文件的相关内容介绍如下:

  (1)node_modules:项目中各种安装的依赖模块。

  (2)assets:静态资源文件,一般存放本地的视频、音频、图片等。

  (3)components:是存放可复用组件(.vue文件)的文件夹,通过单文件组件的形成的视图,放在components文件夹中按照菜单级别统一管理。

  (4)data:json数据文件。

  (5)element-ui.js:负责element-ui组件库的各个element-ui组件的配置。

  (6)mint-ui.js:负责mint-ui组件库的各个mint-ui组件的配置。

  (7)App.vue:程序入口的顶级组件。

  (8)main.js:引入ui组件库、jQuery、axios、路由等。并挂载顶级组件,是程序的入口文件。

  (9)routerConfig.js:负责路由跳转的路由配置模块。

  (10)index.html:单界面应用中的模板Index.html。在开发环境中,由webpack生成的相关资源的url将自动插入到该模板,并渲染HTML结构。

  (11)package.json:项目文件,是一些依赖和命令,简要的描述了项目的信息。

  (12)webpack.config.js:webpack的相关配置文件。

  (13)REAMDE.md:介绍自己这个项目。

  该项目具体的工程的结构目录如图4.3所示:

  图4.3项目的目录图

  4.3详细设计及项目实现

  该项目是基于Vue2.0的项目,Vue的开发环境搭建非常重要。

  在Vue的开发环境搭建之前,要先下载node.js,因为是基于node.js的npm管理工具运行Vue项目。

  npm常用来构建大型应用。在安装好node.js后,开始下载安装Vue,并进行开发环境的搭建。使用Vue.js官方提供的工具,拥有现代化的前端开发流程,提供非常便捷的构建工具配置,重点是可以快速搭建较大型的单页应用。

  在命令行窗口键入相关命令,创建并启动一个Vue项目,该项目是带热重载和保存时静态检查的,还能够在开发时的构建配置使用,这个过程只需要5分钟。

  在开发环境搭建好之后,从顶级组件APP.vue开始,结合下载引用相关的库,进行程序编写。

  该APP是由大量的组件组合起来的,每个组件都有各自的HTML、CSS、JavaScript,各个组件互不干扰。不仅是结构、样式、行为相分离,而且整个项目都用层级分明的模块化的组件构成。

  4.3.1主体结构程序编写

  该APP的结构主体主要由两部分组成,在顶级组件APP.vue中编写这两个部分的Vue组件:上部分内容展示的Home.vue和下部分导航栏部分的Nav.vue,即APP.vue为Home.vue和Nav.vue的父组件。

  顶级组件APP.vue和俩个子组件Home.vue和Nav.vue的具体内容如下:

  (1)APP.vue:该组件在项目搭建时,系统就已经自动生成了,是这个项目的顶级组件。在这部分又由俩个部分构成:一部分是路由切换的内容Home.vue;另一部分是导航栏Nav.vue。这个组件的HTML结构部分中:最初用自定义<HomeView></HomeView>,后因配置路由,该部分为路由出口,将自定义组件<HomeView></HomeView>改为<router-view></router-view>。Js行为部分还是引用注册Home.vue和Nav.vue俩个组件。

  (2)Nav.vue:该组件为导航栏部分,这部分是一个ul列表,ul列表内是<router-link to="/vip"></router-link>标签,router-link通过to属性的属性值并结合routerConfig.js路由配置文件中的相关配置,跳转到相应的组件:首页(Home.vue)、翻译(translate.vue)、精品课(lesson.vue)、商城(store.vue)、VIP(vip.vue),按照不同的点击事件,根据路由,自动用与之相匹配的vue组件替换Home.vue组件,并渲染页面。

  (3)Home.vue:该组件是用来替换的组件,即根据组件Nav.vue中标签router-link的to属性值和routerConfig.js路由配置文件中的相关配置,切换相应的组件,渲染页面。

  APP主体组件的结构示意图如图4.4所示:

  和Home.vue相互替换的

  其他几个主要组件:

  根据导航

  的点击事件,

  跟着路由,

  用需要的

  一个组件,

  替换当前

  在首页位置

  展示的组件。

  图4.4 APP主体组件的结构示意图

  4.3.2主要功能程序编写

  翻译功能的实现,主要由3个vue组件完成,分别是:translate.vue、translateForm.vue、translateOutPut.vue。其中translate.vue为translateForm.vue和translateOutPut.vue的父组件。

  translate.vue、translateForm.vue和translateOutPut.vue三个组件的具体内容如下:

  (1)translateForm.vue:在该组件中,主体是一个大的表单,用来提交数据。表单又分成俩部分,一部分是用来获取用户输入翻译文本数据的文本框:另一部分是用来获取用户选择要翻译成的语种,由文本框和一个点击显示隐藏的滑块(该滑块是一个mint组件,在mint-ui官网复制粘贴后,引入即可)组成。

  表单获得的数据,由v-model属性进行数据的双向绑定。在这部分,首先需要用户输入文本信息,选择要翻译的语种,点击“翻译”按钮,把用户输入的数据和要翻译的语种,在该组件的methods中使用formSubmit()方法通过this.$emit("formSubmit",this.TextToTranslate,this.language),向父组件translat.vue中传递formSubmit()方法,以及输入的文本this.TextToTranslate和选择好的翻译语种this.language。

  (2)translate.vue:该组件为父组件,该组件的结构由俩个子组件组成,即一个是获取用户的输入内容的的组件:translateForm.vue;另一个是展现在线翻译结果的组件:translateOutPut.vue。translate.vue这个组件是用来实现在线翻译这一行为的主要部分。

  这里用http的get请求(http的请求方法:①GET:获取数据;②POST:传输资源;③PUT:更新资源;④DELETE:删除资源;⑤HEAD:获取报文首部。),通过https://translate.yandex.net/api/v1.5/tr.json/translate请求网络上的翻译插件,并将需要翻译的文本和语种通过API接口传输到网络上的翻译插件,网络插件在联网状态下,网络插件根据向服务器发出的请求,其内部会自动进行翻译,最终返回翻译的结果。

  translate.vue通过四部分实现,具体的内容如下:

  第一部分:在该组件的methods中通过带参方法translateText(text,get_language)实现翻译,俩个参数text和get_language分别是来自子组件translateForm.vue中的输入的文本this.TextToTranslate和选择好的翻译语种this.language。

  第二部分:在translateText(text,get_language)方法中使用this.$http.get('https://translate.yandex.net/api/v1.5/tr.json/translate?key=trnsl.1.1.20190607T090744Z.024dcc7697b4e3a5.5a10d0fc7bc675936c7e5b8411b15def3fa67c40&lang='+get_language+'&text='+text)请求接口。

  第三部分:在tech.yandex.com中Technologies catalog的translateAPI里找到decumentation中的Translate text里复制http请求,在APIkey中免费获取?key=的值(通过key值告诉服务器传什么值),接着拼接上要翻译成的语种和需要翻译的文本。

  第四部分:在.then((response)=>{this.translateDtext=response.body.text[0];})中存放反馈回来翻译好的文本。用.catch(function(err){})处理异常,包括文本输入为空和联网失败。

  (3)translateOutPut.vue:该组件存放父组件中翻译好的文本数据,并展现在页面上。在该组件中,利用props来实现:子组件获取父组件的值(props:["translateDtext"]),并通过胡须表达式{{translateDtext}}将翻译结果简洁的呈现在页面中。