基于H5、javascript、ionic、Angularjs的web应用毕业论文.docx

学号：1303609060河南大学民生学院毕 业 论 文（ 2017 届）年 级 2013 专 业 班 级 通信工程 学 生 姓 名 陈朋超 指导教师姓名 王青林 指导教师职称 论文完成时间 目 录摘 要：10 前言21 web基础理论21.1 web概述21.2 web发展史与其发展趋势22 web应用开发技术介绍32.1 HTML532.2 css(层叠样式表)32.3 Javascript42.4 ionic42.5 AngularJs43 web应用的主题内容和架构设计53.1应用的结构设计53.2应用的主题内容54 web应用的实现步骤64.1ionic配置路由64.2 各子路由页面的编写75 完成首页内容75.1mock.js简介75.2 Canvas简介85.3 完成首页内容86 ionic结合Angularjs实现上拉加载和下拉刷新功能96.1上拉加载功能的实现96.2 实现下拉刷新97 注册登录模块功能的实现107.1实现注册登录功能107.2 实现本地存储118 完成产品页面以及详情页118.1产品页面的主题内容118.2 产品详情页完成129 完成风险评估1310 结论14参考文献15基于H5、javascript、ionic、Angularjs的web应用陈朋超（河南大学民生学院，河南 开封，475004）摘 要：如今的HTML5比起以前的HTML来说，更加容易维护和管理，而且能够跨平台开发，不但能开发pc端而且能开发手机端网页和webApp。本论文主要围绕万达金融的webapp开发为主题，用到了三个必备的技能元素，分别是用HTML将元素进行定义，利用css进行页面的表现，最后利用JavaScript实现相应的效果和交互。除此之外，ionic是一个专注于web开发技术，基于HTML5创建类似于手机平台原生应用的开发框架。Angularjs是一个基于javascript的MVC框架，使用起来非常的灵活，便捷。该文主要讨论了如何基于ionic和angularjs以及bootstrap框架开发跨平台web应用关键词：基于安卓的投资管理系统HTML5,css3,javascript,ionic,Aangularjs,Bootstrap,web应用开发Based on the H5, CSS 3, js, ionic and AngularJs web applicationsChen Peng-chao(School of minsheng college, Henan Kaifeng 475004, China)Abstract: Todays HTML5 compared to the previous HTML, it is easier to maintain and manage, but also to cross platform development, not only to develop the PC side and the development of mobile web pages and webApp. This thesis mainly focuses on the development of webapp Wanda finance as the theme, use the three essential skills elements are HTML will define the elements, page using CSS, finally achieve the corresponding effect and interaction by using JavaScript or jQuery. In addition, ionic is a focus on the development of web technology, based on HTML5 to create a platform similar to the native application development platform. Angularjs is a javascript based MVC framework, very flexible to use, convenient. This paper mainly discusses how to develop cross platform web application based on ionic and angularjs and bootstrap frameworkKey words: HTML5,css3,javascript,ionic,Aangularjs,Bootstrap, Web application development0 前言在2015年时，随着HTML5在国内的兴起，也在不断的推进着信息时代的发展，网站也逐渐脱离了传统的枯燥页面风格，如今的HTML5比起以前的HTML来说，更容易维护和管理，而且还能实现跨平台开发，减少开发成本。同时现在社会上很多用h5来写手机页面再用原生的来封装，出现了现在的webApp。WebApp是指基于Web的系统和应用，其作用是向广大的最终用户发布一组复杂的内容和功能。他相比于原生APP有以下优点：第一、使用W3C标准的HTML(标准通用标记语言下的一个应用）语言开发，能够轻松实现跨平台，移动应用开发者不再需要考虑复杂的底层适配和跨平台开发语言的问题。与此同时，使用HTML来开发的Web App在投入上会大大的低于传统的Native App。第二、基于当下开始普及流行的HTML5，Web App可以实现很多原本Native App才可以实现的功能，比如LBS的功能、本地数据存储、音视频播放的功能，甚至还有调用照相机和结合GPU的硬件加速功能。第三、移动应用的迭代周期平均不到1个月，用户需要频繁的重新下载与升级。而Web App则无需用户下载，并且和传统网站一样可以动态升级。1.1 web基础理论1.1Web概述web（World Wide Web）即全球广域网，也称为万维网，它是一种基于超文本和HTTP的、全球性的、动态交互的、跨平台的分布式图形信息系统。是建立在Internet上的一种网络服务，为浏览者在Internet上查找和浏览信息提供了图形化的、易于访问的直观界面，其中的文档及超级链接将Internet上的信息节点组织成一个互为关联的网状结构。1.2 Web 发展史与其发展趋势发展史【不要】 Web定义 从技术层面上看，Web架构的精华有三处：用超文本技术（HTML)实现信息与信息的连接，用统一资源定位技术（URL)实现全球信息的精确定位；用应用层协议（HTTP）实现分布式的信息共享，其本身是一种典型的分布式应用架构。 基本发展史 Web 1.0（信息共享） Web技术发展的第一个阶段就是静态技术阶段，在这个阶段，HTML语言就是Web向用户展示信息的最有效载体。在这个阶段，是以编辑为特征，网站提供给用户的内容是网站编辑处理后的，用户阅读网站提供的内容，这个过程是网站向用户的意向行为，其代表的站点主要有新浪，搜狐，雅虎，谷歌，网易等。 Web 2.0（信息共建） web技术发展的第二个阶段是动态技术阶段，在Web 1.0时代，Web服务器会返回整个页面或者文档，但随着能AJAX(2005)的出现，使得动态网页逐渐发展，AJAX允许客户端的JavaScript脚本为局部页面提供请求服务，然后可以在无需回到服务器情况下动态刷新部分页面，也就是更新浏览器中的document对象，通常称为DOM。在这个阶段加强了网站与用户之间的互动，网站内容基于用户提供，网站的诸多功能也由用户参与建设，实现了网站与用户的双向互动交流，Web2.0不同于Web1.0的最大之处在于它的互动性，用户拥有自己的数据，并完全基于WEB,所有功能都能通过浏览器完成。这个时期典型的代表有：社交网络，博客中国等。趋势 Web 3.0（知识传承） 强调的是任何人，在任何地点都可以创新，代码编写，协作，高度，测试，部署，运行都在云计算上完成。Web3.0里，我们不仅要消灭陷阱病毒，踢出垃圾信息，更要有序化系统化整个Web世界，以全Web资源为基础建设出一座“Web图书馆”来，实现人类自身的“知识传承”。 Web 4.0（知识分配） Web 3.0时网络就具备了即时特性,人们可以随心所欲地获取各种知识，但是人们并不知道应该获取怎样的知识，妈自己适合于学习哪些知识，也就是知识分配的问题，这个问题将在Web4.0中解决。 Web 5.0(语用网) 在这个时代，Web5.0将仿真人类社会，在数字空间里建立“虚拟社会”，以兴趣、语言、主题、职业、专业进行聚焦和管理。2 web应用开发技术介绍Web开发主要用到的技术：（1）前端开发技术：其中包括CSS，HTML，DOM，Ajax等，在掌握这些技术的同时，还要清楚的了解他们在不同浏览器的兼容情况，渲染原理和存在的Bug。（2）优化技术：在一名合格的web开发工程师的知识结构中，网站性能优化、SEO和服务器端的基础知识也是必须掌握的。（3）开发工具：必须学会使用各种工具进行辅助开发。2.1 HTML52013年5月6日， HTML 5.1正式草案公布。该规范定义了第五次重大版本，第一次要修订万维网的核心语言：超文本标记语言（HTML）。在这个版本中，新功能不断推出，以帮助Web应用程序的作者，努力提高新元素互操作性。本次草案的发布，从2012年12月27日至今，进行了多达近百项的修改，包括HTML和XHTML的标签，相关API、Canvas等，同时HTML5的图像img标签及svg也进行了改进，性能得到进一步提升。2.2 CSS（层叠样式表）层叠样式表是一种将表示样式应用到标记的系统。CSS以其对HTML web页面的样式化而知名，但是他同样使用于在web和其他媒介上表示XML文档。有效使用CSS对于分离内容及其表示非常关键。2.3 JavaScriptJavaScript是一种基于对象(Object)和事件驱动(EventDriven)并具有安全性能的脚本语言。使用它的目的是与HTML超文本标记语言、Java脚本语言（Java小程序）一起实现在一个Web页面中链接多个对象，与Web客户交互作用。从而可以开发客户端的应用程序等。它是通过嵌入或调入在标准的HTML语言中实现的。它的出现弥补了HTML语言的缺陷，它是Java与HTML折衷的选择，具有以下几个基本特点:1是一种脚本编写语言2基于对象的语言。3简单性4安全性5动态性6跨平台性2.4 ionicIonic既是一个CSS框架也是一个Javascript UI库。许多组件需要Javascript才能产生神奇的效果，尽管通常组件不需要编码，通过框架扩展可以很容易地使用，比如我们的AngularIonic扩展。Ionic 是目前最有潜力的一款 HTML5 手机应用开发框架。通过 SASS 构建应用程序，它 提供了很多 UI 组件来帮助开发者开发强大的应用。 它使用 JavaScript MVVM 框架和 AngularJS 来增强应用。提供数据的双向绑定，使用它成为 Web 和移动开发者的共同选择。2.5Angularjs AngularJS 是一个JavaScript 框架。它可通过 标签添加到 HTML 页面。AngularJS 通过指令扩展了 HTML，且通过表达式绑定数据到 HTML。AngularJS 通过ng-directives扩展了 HTML。ng-app指令定义一个 AngularJS 应用程序。ng-model指令把元素值（比如输入域的值）绑定到应用程序。ng-bind指令把应用程序数据绑定到 HTML 视图。关于angularjs的特点1.数据的双向绑定：这可能是其最激动人心的特性吧，view层的数据和model层的数据双向绑定的，其中之一发生更改，另一方会随之变化，这不用你写任何代码！2.代码模块化，每个模块的代码独立拥有自己的作用域，model，controller等。3.强大的directive可以将很多功能封装成HTML的tag,属性或者注释等，这大大美化了HTML的结构，增强了可阅读性；4.依赖注入，将这种后端语言的设计模式赋予前端代码，这意味着前端的代码可以提高重用性和灵活性，未来的模式可能将大量操作放在客户端，服务端只提供数据来源和其他客户端无法完成的操作；5.测试驱动开发，angularjs一开始就以此为目标，使用angular开发的应用可以很容易地进行单元测试和端对端测试，这解决了传统的js代码难以测试和维护的缺陷。3 web应用的主题内容和架构设计3.1应用的结构设计1.需求下面开始制作webAPP的框架了，我要制作的web应用是一个金融APP，根据web应用所需的组成元素，本应用主要有首页、理财、个人中心等web页面组成。个人中心首页主页理财3.2 应用的主题内容应用的主题内容主要首页内容，理财内容，个人中心内容。首页内容包括登录注册功能，banner轮播功能，理财列表内容。理财页面内容主要包括理财的分类，主要有“定期”，“私募”，“保险”，“房地产”，点击每个列表显示内容切换功能。4 web应用的实现步骤4.1 ionic配置理由准备工作：使用Hbuilder编辑器编辑程序，新创建一个web项目wd，具体的CSS、js、和各个子页面存放位置以及命名如下图所示：Script目录内新建一个app.js的js文件，用来存放主要的js文件。Service目录内用来存放mock.js文件，用来当做后端数据使用。Template目录内再创建一个pages目录，再pages目录内创建四个HTML文档，分别表示首页，产品页面，个人中心页面，和用来切换的tabs。步骤一：创建index.html页面,引用ionic.bundle.js和ionic.css。步骤二：在html标签内引入ng-app=”wdApp”,ng-controller=”wdCtrl”。步骤三:配置路由，.config内的程序表示配置路由的过程。程序如下：当点击底部的三个tabs切换按钮时，页面会根据路由的配置准确的切换到内容页面。4.2各子路由页面的编写首先在index.html页面写入在各子路由页面produce.html、home.html、user.html写入标签，标签内容使用html完成页面的编写。例如首页的简单事例：5完成首页内容5.1mock.js简介Mock.js 是一款模拟数据生成器，旨在帮助前端攻城师独立于后端进行开发，帮助编写单元测试。提供了以下模拟功能： 根据数据模板生成模拟数据 模拟 Ajax 请求，生成并返回模拟数据 基于 HTML 模板生成模拟数据使用方法：步骤一：安装mock.js（可去mock.js官网下载安装）步骤二：配置模拟数据步骤三：发送Ajax请求（JQuery版）5.2Canvas简介canvas是HTML5中的新元素，你可以使用javascript用它来绘制图形、图标、以及其它任何视觉性图像。它也可用于创建图片特效和动画。如果你掌握了完整的命令，你可以用canvas创建丰富的web应用程序。如下定义canvas标签： 浏览器不支持html5我们也可以给canvas添加style属性，添加canvas的宽和高，canvas就好像一快画布，我们可以用css向操作div一样来操作这块画布的起始状态，只有先确定canvas画布的状态，才可以用js在这块画布上创作画作。 这样我们就准备好了一张长宽都为400的画布。接下来用js 操作canvasvar canvas=document.getElementById(canvas);/获取Canvasvar context=canvas.getContext(2d);/设置画布为2d画布接下来就可以根据实际需求来画图形了。5.3完成首页内容由于本web应用要实现动态加载数据，所以要有一门后端语言，而且需要搭建服务，本web应用没有用到后台语言，而是用到上文提到的mock.js来提供假数据，实现动态加载。当加载数据的时候需要加载service.js文件，里面是用mock.Js写的假数据，并使用数组的Math,random()方法产生随机数据，保证数据的动态加载。其中首页内容的加载用到了angularjs的遍历方法ng-repeat=”item in data”,Data是一组json数据，用来填充页面内容。当加载canvas动画的时候用到了Angularjs的自定义指令.directive.用法如下：6 ionic结合Angularjs实现上拉加载和下拉刷新功能6.1 上拉加载更多功能实现在home.html页面引用ionic组件 其中loadmore()为上拉加载更多函数，在app.js文件中定义这个函数。当LoadProduceList函数传入的参数是2时，实现上拉加载更多。当LoadProduceList()传入的参数是1时，实现下拉刷新的功能。6.2 实现下拉刷新功能在home.html页面引用ionic组件实现下拉刷新功能。在组件内写上，doRefresh()是ionic组件自带的刷新函数。具体实现代码如下：7 注册登录模块的实现7.1实现注册登录功能首先，进来首页先检测是否登录。如果没有登录，点击登录按钮，进入登录界面，登录成功跳转到首页，并存取用户名。登录失败，显示错误提示信息。代码如下：7.2实现本地存储当登录成功后，用户名信息会存储在本地，除非删除本地存储或者退出登录，否则用户名信息会一直存储在本地。具体实现用到了HTML5的新特性localstorage。具体实现的代码如下：登录界面如下：8完成产品页面以及详情页8.1 产