基于H5javascriptionicAngularjs的web应用毕业论文.docx
《基于H5javascriptionicAngularjs的web应用毕业论文.docx》由会员分享，可在线阅读，更多相关《基于H5javascriptionicAngularjs的web应用毕业论文.docx（29页珍藏版）》请在冰点文库上搜索。
基于H5javascriptionicAngularjs的web应用毕业论文
学号：
1303609060
河南大学民生学院
毕业论文
（2017届）
年级
2013
专业班级
通信工程
学生姓名
陈朋超
指导教师姓名
王青林
指导教师职称
论文完成时间
目录
摘要：
1
0前言2
1web基础理论2
1.1web概述2
1.2web发展史与其发展趋势2
2web应用开发技术介绍3
2.1HTML53
2.2css（层叠样式表）3
2.3Javascript4
2.4ionic4
2.5AngularJs4
3web应用的主题内容和架构设计5
3.1应用的结构设计5
3.2应用的主题内容5
4web应用的实现步骤6
4.1ionic配置路由6
4.2各子路由页面的编写7
5完成首页内容7
5.1mock.js简介7
5.2Canvas简介8
5.3完成首页内容8
6ionic结合Angularjs实现上拉加载和下拉刷新功能9
6.1上拉加载功能的实现9
6.2实现下拉刷新9
7注册登录模块功能的实现10
7.1实现注册登录功能10
7.2实现本地存储11
8完成产品页面以及详情页11
8.1产品页面的主题内容11
8.2产品详情页完成12
9完成风险评估13
10结论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应用开发
BasedontheH5,CSS3,js,ionicandAngularJswebapplications
ChenPeng-chao
（Schoolofminshengcollege,HenanKaifeng475004,China）
Abstract:
Today'sHTML5comparedtothepreviousHTML,itiseasiertomaintainandmanage,butalsotocrossplatformdevelopment,notonlytodevelopthePCsideandthedevelopmentofmobilewebpagesandwebApp.ThisthesismainlyfocusesonthedevelopmentofwebappWandafinanceasthetheme,usethethreeessentialskillselementsareHTMLwilldefinetheelements,pageusingCSS,finallyachievethecorrespondingeffectandinteractionbyusingJavaScriptorjQuery.Inaddition,ionicisafocusonthedevelopmentofwebtechnology,basedonHTML5tocreateaplatformsimilartothenativeapplicationdevelopmentplatform.AngularjsisajavascriptbasedMVCframework,veryflexibletouse,convenient.Thispapermainlydiscusseshowtodevelopcrossplatformwebapplicationbasedonionicandangularjsandbootstrapframework
Keywords:
HTML5,css3,javascript,ionic,Aangularjs,Bootstrap,Webapplicationdevelopment
0前言
在2015年时，随着HTML5在国内的兴起，也在不断的推进着信息时代的发展，网站也逐渐脱离了传统的枯燥页面风格，如今的HTML5比起以前的HTML来说，更容易维护和管理，而且还能实现跨平台开发，减少开发成本。
同时现在社会上很多用h5来写手机页面再用原生的来封装，出现了现在的webApp。
WebApp是指基于Web的系统和应用，其作用是向广大的最终用户发布一组复杂的内容和功能。
他相比于原生APP有以下优点：
第一、使用W3C标准的HTML（标准通用标记语言下的一个应用）语言开发，能够轻松实现跨平台，移动应用开发者不再需要考虑复杂的底层适配和跨平台开发语言的问题。
与此同时，使用HTML来开发的WebApp在投入上会大大的低于传统的NativeApp。
第二、基于当下开始普及流行的HTML5，WebApp可以实现很多原本NativeApp才可以实现的功能，比如LBS的功能、本地数据存储、音视频播放的功能，甚至还有调用照相机和结合GPU的硬件加速功能。
第三、移动应用的迭代周期平均不到1个月，用户需要频繁的重新下载与升级。
而WebApp则无需用户下载，并且和传统网站一样可以动态升级。
1.
1web基础理论
1.1Web概述
web（WorldWideWeb）即全球广域网，也称为万维网，它是一种基于超文本和HTTP的、全球性的、动态交互的、跨平台的分布式图形信息系统。
是建立在Internet上的一种网络服务，为浏览者在Internet上查找和浏览信息提供了图形化的、易于访问的直观界面，其中的文档及超级链接将Internet上的信息节点组织成一个互为关联的网状结构。
1.2Web发展史与其发展趋势
发展史【不要】
∙Web定义从技术层面上看，Web架构的精华有三处：
用超文本技术（HTML）实现信息与信息的连接，用统一资源定位技术（URL）实现全球信息的精确定位；用应用层协议（HTTP）实现分布式的信息共享，其本身是一种典型的分布式应用架构。
∙基本发展史
∙Web1.0（信息共享）Web技术发展的第一个阶段就是静态技术阶段，在这个阶段，HTML语言就是Web向用户展示信息的最有效载体。
在这个阶段，是以编辑为特征，网站提供给用户的内容是网站编辑处理后的，用户阅读网站提供的内容，这个过程是网站向用户的意向行为，其代表的站点主要有新浪，搜狐，雅虎，谷歌，网易等。
∙Web2.0（信息共建）web技术发展的第二个阶段是动态技术阶段，在Web1.0时代，Web服务器会返回整个页面或者文档，但随着能AJAX（2005）的出现，使得动态网页逐渐发展，AJAX允许客户端的JavaScript脚本为局部页面提供请求服务，然后可以在无需回到服务器情况下动态刷新部分页面，也就是更新浏览器中的document对象，通常称为DOM。
在这个阶段加强了网站与用户之间的互动，网站内容基于用户提供，网站的诸多功能也由用户参与建设，实现了网站与用户的双向互动交流，Web2.0不同于Web1.0的最大之处在于它的互动性，用户拥有自己的数据，并完全基于WEB,所有功能都能通过浏览器完成。
这个时期典型的代表有：
社交网络，博客中国等。
趋势
∙Web3.0（知识传承）强调的是任何人，在任何地点都可以创新，代码编写，协作，高度，测试，部署，运行都在云计算上完成。
Web3.0里，我们不仅要消灭陷阱病毒，踢出垃圾信息，更要有序化系统化整个Web世界，以全Web资源为基础建设出一座“Web图书馆”来，实现人类自身的“知识传承”。
∙Web4.0（知识分配）Web3.0时网络就具备了即时特性,人们可以随心所欲地获取各种知识，但是人们并不知道应该获取怎样的知识，妈自己适合于学习哪些知识，也就是知识分配的问题，这个问题将在Web4.0中解决。
∙Web5.0（语用网）在这个时代，Web5.0将仿真人类社会，在数字空间里建立“虚拟社会”，以兴趣、语言、主题、职业、专业进行聚焦和管理。
2web应用开发技术介绍
Web开发主要用到的技术：
（1）前端开发技术：
其中包括CSS，HTML，DOM，Ajax等，在掌握这些技术的同时，还要清楚的了解他们在不同浏览器的兼容情况，渲染原理和存在的Bug。
（2）优化技术：
在一名合格的web开发工程师的知识结构中，网站性能优化、SEO和服务器端的基础知识也是必须掌握的。
（3）开发工具：
必须学会使用各种工具进行辅助开发。
2.1HTML5
2013年5月6日，HTML5.1正式草案公布。
该规范定义了第五次重大版本，第一次要修订万维网的核心语言：
超文本标记语言（HTML）。
在这个版本中，新功能不断推出，以帮助Web应用程序的作者，努力提高新元素互操作性。
本次草案的发布，从2012年12月27日至今，进行了多达近百项的修改，包括HTML和XHTML的标签，相关API、Canvas等，同时HTML5的图像img标签及svg也进行了改进，性能得到进一步提升。
2.2CSS（层叠样式表）
层叠样式表是一种将表示样式应用到标记的系统。
CSS以其对HTMLweb页面的样式化而知名，但是他同样使用于在web和其他媒介上表示XML文档。
有效使用CSS对于分离内容及其表示非常关键。
2.3JavaScript
JavaScript是一种基于对象（Object）和事件驱动（Event Driven）并具有安全性能的脚本语言。
使用它的目的是与HTML超文本标记语言、Java 脚本语言（Java小程序）一起实现在一个Web页面中链接多个对象，与Web客户交互作用。
从而可以开发客户端的应用程序等。
它是通过嵌入或调入在标准的HTML语言中实现的。
它的出现弥补了HTML语言的缺陷，它是Java与HTML折衷的选择，具有以下几个基本特点:
1 是一种脚本编写语言
2 基于对象的语言。
3 简单性
4 安全性
5 动态性
6 跨平台性
2.4ionic
Ionic既是一个CSS框架也是一个JavascriptUI库。
许多组件需要Javascript才能产生神奇的效果，尽管通常组件不需要编码，通过框架扩展可以很容易地使用，比如我们的AngularIonic扩展。
Ionic是目前最有潜力的一款HTML5手机应用开发框架。
通过SASS构建应用程序，它提供了很多UI组件来帮助开发者开发强大的应用。
它使用JavaScriptMVVM框架和AngularJS来增强应用。
提供数据的双向绑定，使用它成为Web和移动开发者的共同选择。
2.5Angularjs
AngularJS是一个 JavaScript框架。
它可通过