欢迎访问CN论文网,主要提供代写硕士论文服务,以及了解代写硕士论文多少钱。网站地图

硕博执笔写作,后期辅助答辩

与国内800多家优秀期刊社合作

论文写作发表咨询热线18930620780
您当前的位置:CN论文网 > 软件工程硕士论文软件工程硕士论文

音乐Web App移动端系统设计与开发

发布时间:2019-07-16
  摘 要
  
  随着信息技术的不断发展,移动端应用的发展也呈现出迅猛的态势,各大公司在开发移动端应用的财力投入也在不断增加,再加之近几年移动端前端高速发展,WebApp 大有代替原生移动端 App 的趋势,因为原生 App 难以同时兼容多套设备,而 WebApp 作为一款轻应用,可以内嵌入任何页面和 App 中,又可以轻松兼容各种机型的设备,所以 WebApp 有相当大的应用价值。又因为当今社会中,音乐 App 繁多,每个音乐 App 有不同的歌曲库且歌曲不全,用户需要下载多个音乐 App 来满足自己的听歌需要,所以现在需要一款轻量级的 Web App,可以获取多个音乐平台的所有音乐库,并且可以内嵌入任何一款 App 中,方便用户的操作同时,也免去了用户下载多个 App 的操作步骤。所以,此款音乐 WebApp 是具有开发意义的。

音乐Web App移动端系统设计与开发
  
  本论文就移动端音乐 Web App 的开发做了完整的论述。首先通过市场调研,论证了本项目的必要性,并且确定了项目的功能分为推荐模块,歌手模块,搜索模块,排行模块以及播放模块,实现方面将用到 Vue.js 框架来进行整个项目前端框架的搭建,涉及到的技术有图片懒加载,利用 Axios 和 JsonP 进行跨域请求数据,利用浏览器本地存储来进行数据存储,最后会利用 rem 适配方案来解决移动端常见适配问题,以及利用 Fastclick 来解决移动端 300ms 延迟问题。
  
  论文研究的是移动端音乐 Web APP,通过对系统的分析及实现,课题达到了预期目标。
  
  关键词:  移动端 前端框架 数据库。
  
  Abstract
  
  With the constantly development of information technology, the development of mobile applications has also shown a rapid trend.The financial investment of major companies in developing mobile applications is also increasing, coupled with the rapid development of mobile front-ends in recent years.Web App has a tendency to replace the native mobile app, because the native app is difficult to be compatible with multiple devices at the same time, and the Web App as a light application can be embedded in any page and app, which is easy to be compatible with various models. The Web App has considerable application value.In today's society, there are many music apps. Each music app has different song libraries and the songs are incomplete. Users need to download multiple music apps to meet their own song needs.So now we need a lightweight Web App that can access all the music libraries of multiple music platforms, and can be embedded in any App, which is convenient for users to operate, and also eliminates the operation of users to download multipleApp,Therefore, this music web app is development-oriented.
  
  This thesis makes a complete discussion on the development of mobile music web app. First, according to the market research, the necessity of this project was demonstrated.Furthermore,the project are divided into a recommendation module, a singer module, a search module, a ranking module, and a playback module.Second,the project will use theVue.js framework to build the entire project front-end framework. The technology involved is lazy loading of images, using Axios and JsonP for cross-domain request data,and using browser local storage for data storage.Finally, the rem adaptation scheme will be used to solve the common adaptation problem of the mobile terminal,and use Fastclick to solve the 300ms delay problem on the mobile side.On the basis of the implementation, the detailed test is carried out. Before the test, the test cases are designed, and the detailed test and verification are carried out strictly according to the test cases and test methods. Finally, the test achieves the objectives.
  
  The thesis is about mobile terminal music Web APP.Through the analysis and realization of the system, the project achieves the expected goal.
  
  Key words:  Mobile End Front-end Framework Database。
  
  1 绪论。
  
  1.1 研究背景。
  

  21 世纪以后,移动端产品的数量呈现爆炸性增长,随之产生的移动应用数量也飞速增长,任何行业都在尝试将业务转移到移动端上,以 App 的形式进行展现,方便用户的操作,最近几年以来更是呈现出大量开发、快速发布、全民使用移动应用的态势。然而,原生的 NativeApp 有明显的缺陷和不足,比如原生 App 每适配一部设备都要进行适配,随着移动端设备多样性的增加,原生 App 兼容性会变得越来越差,甚至同款 App 需要多套代码来兼容不同设备,这将大大增加开发量和工作量,且原生 App 体积大,所以需要一款轻量级且可以轻松实现兼容的 App 来代替原有NativeApp。目前为止,除了 NativeApp,比较流行的还有 Web App 和 Hybrid App,下面就这三个 App 进行概述。
  
  移动的应用种类可以从多个角度进行分类,单就技术角度上来说,当今应用的种类主要可以分为三种,如图 1.1 所示。
  
 
  
  如图所示,原生 App 又称作 Native App,它是一个系统性的应用程序,也是目前为止比较流行且常用的 App 种类,它一般会采用比较成熟原生的语言进行开发,比如 Ios 以及安卓,它可以直接被安装到设备里,可以任意调用移动端设备终端的一些硬件设备,比如摄像头,重力感应等等,用户需要进行下载的操作。而移动端 WebAPP 是指运行工在移动端设备浏览器或可以内嵌入其他原生 App 中,采用前端常见的技术和框架,如 HTML,CSS,JavaScript 以及 MVVM 框架来进行搭建,一般服务器端会用到 Node.js 进行封装,并与后端进行交互,它不需要用户进行下载和安装的一系列操作,并且设备的兼容性较好,可以一套代码适配不同设备,作为轻量级的框架,对于开发人员而言,使开发人员使用一套代码进行跨平台的开发,同时,对于用户而言,其用户交互体验与原生 Native App 差别不大。Hybrid App 是介于两者之间的一款 App,它从本质上来说是一个 UI 界面的 Web View,内核访问的还是 WebApp。随着 W3C 加大发展 HTML5 技术的力度,Web App 得到了大力发展,并且大有代替原生 NativeApp 的趋势[1]。
  
  随着移动端智能手机的普及以及前端开发技术的完善,用户可以尽可能多的利用碎片时间来获取信息,而移动端手机应用逐渐发展成我们生活中不可或缺的部分,随着手机应用不断扩展,许多基于桌面 Web 的应用系统转化为手机应用成为大势所趋,对于移动互联网行业来说,Web App 出现的根本原因是 HTML5 的兴起和推广,而 WebApp 可以内嵌入任何一款原生 App 或者网页中,作为一种单页应用,也可轻松适配所有移动端机型,具有功能强大且用户友好、轻量等特点。
  
  WebApp 和原生的 App 相比,有较大的优势,比如用户不用下载 App,而且可以内嵌入浏览器和其他原生 App 中,对移动端设备兼容性友好等等。但是 WebApp作为一款刚刚推出且流行的移动端单页应用,其也有一些不足,其最明显的一个特点就是不能在没有网络(即离线)的状态下工作。针对其不能在离线状态工作,目前也有相应的解决方案,例如离线存储技术,离线存储可以将站点的一些文件存储在本地,在离线状态下用户依然可以访问之前存储在本地的文件,这些可能是 Web端开发所常用的文件,也可以能是一些图片等外部资源文件。
  
  WebAPP 的技术架构会采用目前比较流行的前后端分离的开发模式,所谓前后端分离的模式,是指将视图 UI 和业务逻辑相分开,起到封装业务逻辑的处理以及所有对数据模型处理的逻辑的是前端的业务逻辑层[3]。并且会进行数据的存储和处理,将用户的操作打包并通过 HTTP 请求进行前后端的交互,这一系列操作之后,前端会获取服务器处理并且解析过的数据,再通过网页布局绘制过程,最终展现给用户,并在界面对数据进行实时更新[4]。
  
  除了上述层之外,还有一个前端层面是来构建视图,并且实现在前端界面和用户进行互动的 UI 界面层,展示用户真正看到的界面。它主要用到了一些 Web 前端相关的技术以及前端构建,打包等技术,目的是为了搭建一些前端可视化页面,实现最为界面层的基础功能。这个层面将会用到前端 HTML 技术来进行页面骨架的搭建,再用 CSS 来完成对页面样式的绘制和布局,最后会利用 JavaScript 以及由它衍生而来的前端框架来实现一些整个页面与逻辑层相交互的逻功能。一些前端的打包工具,构建工具来对前端文件进行压缩,打包和上线,辅助前端开发者进行前端项目的开发,也提高了前端性能[5]。这其中,JavaScript 及其所衍生出的框架是核心,它可以使页面进行动态的改变,这也是移动端 Web App 开发和实现的重点部分。与此同时,当用户可见的界面层与后端服务器进行交互的时候,将用到异步 JavaScript和 XML 技术,也就是常说的 Ajax,异步地与后端进行交互,并将返回值给前端,实现局部的刷新,由前端接收数据并进行展现,这样可以实现在页面不刷新的情况下,异步的进行部分刷新,大大加强了前端性能[6]。综上,整体流程是通过前端数据层的封装,再用 Ajax 取得服务器端 XML 格式的数据,前端再通过 JavaScript 来动态地生成页面逻辑,CSS 和 HTML 来辅助完成前端界面构建。
  
  可以预测,随着未来移动端设备的越来越完善的情况下,人们对轻量级应用的需求量将大大提高,同时,随着云端技术的逐步完善, WebApp 将会更容易地获得所需要的数据,服务[7]。用户只需要打开 Web App,就可以获取他们所需要的音乐,图片等,可以使用户进行社交,游戏,娱乐等等,同时大大简化了用户操作复杂性。
  
  对开发者而言,开发者不再需要同时开发多套代码,只需开发出一套 Web App 即可适配所有设备机型,可以实现跨平台的同步更新。
  
  根据上面的描述,虽然当今社会,移动端 Web App 的应用范围还没有原生 NativeApp 那么广泛,而且在无网络存储的能力上原生 App 要稍微高于 WebApp 一些,但是 Web App 以它强大的兼容性,更加轻量以及较好的可维护性等特点,将会逐步替代原生 App。所以,随着移动端技术的不断成熟以及 HTML5 的不断规范和完善,加之移动端硬件设备的不断完善,Web App 将具有巨大潜力,研究 Web App,不断优化其特点,提高性能,必将带来现实意义的价值[8]。
  
  1.2 国内外研究现状。
  
  近年来,随着前端技术的迅速发展,前端的技术方向也呈现出雨后春笋般的发展形势,下面我们将从几个方面来讨论国内外在前端技术上的研究现状。
  
  就 CSS 而言,传统 CSS 不能作为一门开发语言,并且为了兼容浏览器等原因,往往需要写很多冗余的代码,近年来,国内外技术专家提出了 Css 预处理器的相关概念并进行实现,CSS 预处理器就是为了解决 CSS 的这些问题,简化 CSS 代码的编写,并且可以使 CSS 进行函数式编程。常见的 CSS 预处理器有 Sass,Less 和 Stylus。
  
  本项目将采用 Stylus 来进行 CSS 预处理。就 JavaScript 来说,其基本作用是实现页面逻辑架构的编写。现在开发者在JavaScript 的基础上(这里主要是指 Es6),开发出很多具有 MVVM 思想的前端开发框架,目的是让开发者更加便捷且高效地进行有关前端的开发。目前较为流行的是 Vue.js,React.js,Angular.js,这三者的共同点是,都是数据驱动,并且都是通过操作虚拟 Dom 来进行视图的更改,可以跨浏览器进行兼容的同时,也可保证进行模块化开发。上述的所有框架都是很完善的基于 MVVM 思想的框架实现,有很完整的生态体系,各自提供完备的 API 如路由 API,数据双向绑定 API,以及过滤器等等供开发人员可以方便地进行模块化的前端开发。
  
  针对移动端前端的发展状况,比较重要的方面是移动端前端适配方案,目前比较流行的移动端适配方案有 media query,CSS 的 Flex 布局,以及淘宝首推的rem+viewport 适配方案,本项目将用到 rem+viewport 的适配方案。在未来的移动端前端发展中,框架方面也许会向着 MNV 的原生 Native View 开发,目的是为了降低移动端原生 App 和前端 WebApp 的交互成本,也可加速开发的快速迭代。
  
  1.3 主要工作。
  
  首先将会讲述当今社会下本项目的研发现实意义,以及系统介绍了国内外相关的研究现状,然后介绍了项目中用到的前端基础技术,现状流行的前端框架如 Vue、React 、Angular,包括 MVC ,MVP,MVVM 模式,Web APP 的基本概念,以及本项目中的所用到的典型技术和技术难点分析。
  
  在论文分析阶段,将会从系统需求分析、系统功能分析、性能分析以及系统数据分析这几个部分来对它们进行详尽的描绘和讲述。
  
  根据论文首先描述的需求分析,将进行移动端音乐 WebApp 的系统设计的部分,最后将根据设计部分,初步构造出整体功能及页面。
  
  根据以上所述的所有,最终本项目将会实现一个强大,兼容性好且轻量的移动端音乐 WebAPP,又由于移动端 WebApp 的兼容性强以及本款 WebApp 歌曲库全等特点,可以给用户以最完美的用户体验。本论文是基于 Vue 全家桶 (2.x) 的项目,最终将实现一个与原生的移动端音乐 APP 功能相同且歌曲库更全的移动端音乐 WebApp。
  
  【由于本篇文章为硕士论文,如需全文请点击底部下载全文链接】
  
  1.4 组织结构
  
  2 关键技术分析
  
  2.1 前端技术介绍
  2.2 前端框架介绍
  2.3 数据跨域请求技术介绍
  2.4 本章小结
  
  3 系统需求分析
  
  3.1 系统可行性分析
  3.2 系统功能需求分析
  3.3 系统非功能需求分析
  3.4 系统数据需求分析
  3.5 系统安全性分析
  3.6 本章小结
  
  4 系统设计
  
  4.1 系统设计目标与原则
  4.2 系统体系架构设计
  4.3 系统功能设计
  4.4 系统数据库设计
  4.5 本章小结
  
  5 系统实现与测试
  
  5.1 系统开发环境
  5.2 系统功能模块实现
  5.3 系统测试
  5.4 本章小结

  6 总结

  随着移动端开发技术的越来越完善,各个移动端产品开始激烈竞争,加之移动端设备的完善,移动端 WebAPP 成为取代原生 NativeAPP 的最强势代替品,本论文针对移动端 WebAPP 的用户需求等,分析、设计和实现了一套符合用户习惯并且具有竞争力的移动端音乐 Web APP,本项目功能强大、界面友好、用户友好性强、操作性强,对提高移动端 WebAPP 竞争力,完善 WebAPP 现有功能有重要意义,本课题以移动端音乐 WebAPP 为背景[46],经过深入的竞品调查研究,及对用户年龄层次,兴趣爱好,行为习惯等的深究,对本项目进行了分析,设计,实现以及测试,在开发环境上选用了比较流行且轻量的 WebStorm 作为前端开发工具,同时,本项目选用的是开源的数据库 MySQL 来作为数据库支撑,在第三章的分析阶段,涵盖了包括可行性、系统功能分析以及非功能性分析等几个方面进行了详细的分析。

  最后,根据前面章节的需求分析与设计(包括架构设计及数据库设计),并通过不断地测试与修改漏洞,最终实现了一套功能完善,用户友好,界面美观的移动端音乐 WebAPP。

  参考文献

点击下载全文

下一篇:LNG加气站收银管理系统研制
上一篇:没有了