当前位置:首页>> >>


HTML5定位技术在网络名片服务中的应用.rar

收藏

资源目录
    文档预览:
    编号:20180913213332103    类型:共享资源    大小:9.91MB    格式:RAR    上传时间:2018-09-13
    尺寸:148x200像素    分辨率:72dpi   颜色:RGB    工具:   
    30
    金币
    关 键 词:
    HTML5 定位 技术 网络 名片 服务 中的 应用
    资源描述:
    辽宁工程技术大学毕业设计(论文)11 绪论1.1 研究目的与意义随着网络时代的到来,Web 技术的不断更新,GIS 行业的不断发展,基于地理位置定位的位置服务类应用越来越重要,越来越受得广大用户的喜爱。在 Web 开发应用中,HTML5 Geolocation API 用于获得用户的地理位置,并允许用户将所得到的位置信息与百度地图、谷歌地图、高德地图等开放地图平台相结合,使基于地理定位的位置服务应用开发成为了可能。网络电子名片是互联网中一种规范的文件传播格式,它主要是将传统纸质商业名片或个人信息以一种标准格式在互联网上传播,用户拥有通过名片网络查找所需名片、发布名片甚至是制作普通名片或二维码名片等功能,使名片网不仅仅是为了知名企业或人士提供对外宣传的平台,也使得一些小型企业或无名人士提供了跻身名片网络的机遇,让名片网的发展越来越面向大众化。目前不管是互联网还是桌面应用程序,其主流搜索方式都是传统的文字搜索,其缺点在于对键盘的依赖程度大,使用者需要二次查看才能得到所需信息,既浪费时间又影响搜索效益,然而百度地图等主流地图 API 的日渐成熟以及地理定位精度的提高为地图搜索奠定了基础,使地图搜索成为了可能,并且作为以位置为主要信息的名片网络而言,地图搜索功能在名片网中占据着举足轻重的作用。此次研究主要是将 HTML5 定位技术与百度地图 API 相结合,将其应用于网络电子名片行业中,提供了基于地理位置的名片地图搜索服务,使用户可以直观地在地图上查看自己所需名片信息,不仅解决了传统网络电子名片仅仅通过简单的文字搜索方式来查找信息,也加强了用户在网络电子名片网站中的体验,扩展了网络电子名片中的服务应用。1.2 国内外研究现状随着科学技术的不断发展,HTML5 的制定完成在 web 上掀起了一股热潮。谷歌、微软以及 Youtube 等大型网站公司对 HTML5 技术越来越青睐,在其官网中随处可见HTML5 的痕迹。伴随着 GIS 行业的兴起,HTML5 技术中的 Geolocation API 地理定位技术得到了具体的开发与应用,并被应用于各行各业,其所展现出来的非凡魅力早已征服了许多国内外人士。在国外,HTML5 技术的瘦浏览器原则对 Flash 技术富浏览器原则造成了巨大的冲击,洪加煌:HTML5 定位技术在网络名片服务中的应用2对于 HTML5 与 Flash 到底谁去谁留引发了无数次的争辩。如 J.Dale Prince 的《HTML5: Not Just a Substitute for Flash》以及 Wayner, Peter 的《HTML5 vs. Flash: The case for Flash》 等。在国内,越来越多的高新技术人才对 HTML5 不断地进行尝试与研究,在 HTML5 的这股热潮中,各类的期刊论文,开发应用越来越多,特别是 HTML5 Geolocation API,例如易晓飞发表的期刊 《HTML5 Geolocation API 研究与应用》 、钟丽萍 《HTML5 Geolocation API 应用探究 》和梁莉菁《基于 Geolocation API 的 Html5 地理位置追踪定位的实现》等,其开发应用有诸如艺龙网的酒店位置查询、拉勾网的公司位置查询等。1.3 论文的主要研究内容1) 在 Window 系统下搭建 WAMP 集成开发环境。2) PHP+MYSQL+Laravel 框架搭建网络电子名片网站。3) Html5 Geolocation 地理定位技术研究。4) 百度地图 API 研究。辽宁工程技术大学毕业设计(论文)32 关键技术研究电子名片网主要采用 B/S 架构在 WAMP 集成环境下搭建,在建站过程中涉及到了许许多多的互联网技术,包括前端技术 html5、css3、javascript、jquery、ajax 以及 bootstrap前端框架等;后台建站技术 php、laravel 框架;数据库技术 mysql 和 navicat 数据库管理工具。在地图搜索模块开发应用中还涉及到了百度地图 API、html5 geolocation API 地理定位技术等关键技术,完美地体现了现在网络技术的密切性以及 mashup 设计理念,即技术糅合理念。2.1 B/S 架构B/S 架构(Browser/Server) ,即浏览器/服务器模式,是伴随着 Web 兴起而诞生的一种网络结构模式,其数据交互均在浏览器中运行,用户只需要拥有浏览器便可直接访问,这在很大程度上简化了系统的开发、维护与使用。相对于传统的 C/S 模式,即客户端/服务器模式来说,B/S 模式不需要用户下载庞大的软件系统,这使得所有的事情都变得轻量化,大大降低了开销成本,是当今最为主流的开发模式,这也是我选择在 B/S 架构上开发程序的初衷。2.2 HTML5 技术HTML5 是由无数开发人员经过了接近 8 年的艰苦努力,最后于 2014 年 10 月 29 日由万维网联盟 W3C 宣布规范制定完成的 HTML 第五次重大修订,它使得所有的标签变得富有意义,而不仅仅是像以前一样使用繁琐的 div 便签来实现排版布局,使开发人员更能读懂内容意义,并且 HTML5 很好地替代了 FLASH 和 Silverlight 插件式的富浏览器形式,使开发更加的简洁便利。HTML5 的制定完成是 web 上的一次重大改革,它不仅使前端页面变得有条不紊,更提供了很多便捷实用的接口,比如 SVG 可缩放矢量图形、Canvas 画布、Vedio 视频、Audio 音频、Web 存储、应用缓存、 Web Workers、Web Socket 实时通讯技术和Geolocation 技术等。其中,Geolocation API 接口能便捷地实现地理位置的定位与跟踪,并且鉴于该特性可能侵犯用户的隐私,除非用户同意,否则用户位置信息是不可用的,体现了其技术的人性化。如今 HTML5 已支持各大主流浏览器,比如 Internet Explorer 9、Firefox、Chrome、Safari 以及 Opera 等浏览器。本论文的研究要点在于如何利用洪加煌:HTML5 定位技术在网络名片服务中的应用4HTML5 规范中的 Geolocation API 地理定位技术来获取用户的地理位置信息并与百度地图API 相结合。2.3 Sublime Text 编辑器Sublime Text 是由 Jon Skinner 在 2008 年研究开发的代码编辑器,能同时支持Windows、Linux 等多种电脑操作系统以及 js、css 、txt、doc 、php 等多种文本格式,其优良的跨平台性以及健壮的代码读写能力深受无数开发人员的喜爱。Sublime Text 还具有漂亮的用户界面,多种可选的代码编辑主题样式以及简单便捷的快捷键操作,例如 Ctrl+G 跳行、Ctrl+Shift+D 复制行、 Ctrl+Shift+/注释行等,并支持用户自定义快捷方式。此外,Sublime Text 具有强大的可扩展插件,如代码缩略图、代码格式化、拼写检查、多窗口显示切换等。2.4 WAMP 集成环境WAMP 是一款用来搭建 PHP 动态网站的集成环境包,将相对独立的软件Apache、Mysql 数据库和 PHP 在 Windows 操作系统下共同组成一个健壮的网络 应用程序服务平台,大大缩短了 PHP 开发人员的环境搭建时间。Apache 是一款 Web 服务器软件,与其相同的还有众所皆知的 IIS 服务器。Apcahe 具有优良的跨平台性和安全性,可以运行于几乎是所有的计算机平台上,是当今最流行的Web 服务器端软件之一。MySQL 数据库是由瑞典 MySQL AB 公司开发一个关系型数据库管理系统,关联数据库将数据不是将所有数据放在一个大仓库内,而是保存在不同的表中,这样就增加了速度并提高了灵活性,作为一个开源数据库系统,Mysql 具有体积小、总体成本低、运行速度快等特点,因此大部分的中小型网站开发都采用 MySQL 数据库作为其网站数据库,并且由于其性能卓越,搭配 Apache 和 PHP 可组成良好的开发环境。对于 Mysql 数据库的管理系统也有很多,比如基于 B/S 架构的 Phpmyadmin 和基于 C/S 架构的 Navicat 数据库管理系统。PHP 是一种通用开源脚本语言,全称 Hypertext Preprocessor,中文名为超文本预处理器。PHP 的语法特点吸收了 C 语言、Java 语言等当今主流语言,具有语法简单,利于学习,扩平台,应用广泛等特点,目前主要适用于 Web 开发领域。原生态 PHP 程序将代码直接嵌入到 HTML 代码中,其执行效率比常规开发技术速度要高出许多,并且这样的执行方式使得 PHP 开发人员更加深刻地了解 HTML 事务处理流程以及 css 样式表和 js 脚本语辽宁工程技术大学毕业设计(论文)5言等前端技术,而随着 PHP 的逐步发展,越来越多的 PHP 框架的诞生使得 PHP 在互联网开发中占据着一席之地。2.5 Bootstrap 前端框架Bootstrap 是一款基于 HTML5、CSS3 和 Javascript 的前端开源工具包,是目前最受欢迎的前端框架之一。其包含了丰富的 Web 样式类以及 js 开发组件,如 stickUp 页面元素”固定”插件、Responsive Nav 响应式导航插件、Unslider 幻灯片插件、bootstrap-wysiwyg可视编辑器插件以及 chart 图表绘制工具库等。开发人员只需根据所需样式添加对应类名,引用其相对应的 js 插件便可以快速的搭建一个简洁漂亮、功能齐全、页面自适应的HTML5 网站。在本次名片网站的搭建过程中,采用 Bootstrap 作为前端框架,引用了诸多的 css 设计样式和 js 功能组件,为开发免去了大量的手写代码,大大缩短了开发周期,提高了整体开发效率,使其网站更加地简洁美观,开发更加地便利。2.6 Laravel 框架随着 PHP 语法的不断成熟,在 PHP5 加入了面向对象之后,诞生了很多 PHP 框架,其中包括 Laravel,ThinkPHP,Yii,Symfony 等。其中 Laravel 框架以其简洁、优雅的独特风格脱颖而出。它可以使得每行代码都可以变得简洁、有趣、富于表达力,也可以让你从杂乱无章的代码中解脱出来,帮你构建一个完美的网络 APP。Laravel 采用 Blade 模板引擎,使前后台分工明确,彻彻底底地遵循 MVC 架构与正交性原则,不但如此,Laravel 最令人兴奋的在于其数据库模块,Laravel 封装的 Eloquent ORM 提供了漂亮、简洁的 ActiveRecord 来实现和数据库的互动,即每个数据库表会和一个对应的”模型”互动,使数据库的增删改查变得更加的简单和有趣。2.7 百度地图 API百度地图 API 是为开发者免费提供的一套基于百度地图服务的应用接口,包括JavaScript API、Web 服务 API、Android SDK、iOS SDK、定位 SDK、车联网 API、LBS云等多种开发工具与服务,提供基本地图展现、搜索、定位、逆/地理编码、路线规划、LBS 云存储与检索等功能,适用于 PC 端、移动端、服务器等多种设备,多种操作系统下的地图应用开发。洪加煌:HTML5 定位技术在网络名片服务中的应用63 电子名片网总体设计3.1 系统总体框架以 PHP+MYSQL+Laravel 为网站架构搭建一个完整的电子名片网站,系统设计严格遵循技术规范以及数据标准,系统分为表现层以及数据层。关于表示层,结合功能需求主要提供网站前台,用户后台以及管理员后台;数据层主要以 MYSQL 为数据库,涉及用户表,用户名片表以及管理员表的增删改查等操作,其系统总体框架如图 3-1 所示:数据管理数 据 层 电子名片网站表现层前台 用户后台 管理员后台技术规范数据标准PHP+MYSQL用户表 名片表 管理员表MYSQL数据库图 3-1 系统总体框架Figure 3-1 overall framework3.2 系统功能设计在系统总体框架以及需求分析的基础上,网站整体架构主要分为三大部分。①网站前台,主要显示网站信息,最新名片信息,提供用户登录注册功能等,最重要的是提供了文字搜索功能和地图搜索功能服务,这也是系统的核心功能。②用户管理后台,主要提供用户修改补充个人信息,发布名片等功能。③管理员管理后台,主要提供管理员对注册用户的查看,对用户发布名片的审核与管理等功能。其系统的功能设计如下图 3-2 所示:辽宁工程技术大学毕业设计(论文)7图 3-2 系统功能设计Figure 3-2 system function design3.3 系统开发环境本系统主要在 window 下进行开发与维护,使用 PHP+MYSQL 建站技术并结合html5, css,jquery 等前端网页技术搭建网站。系统开发的硬件和软件环境描述如下所示:1.硬件环境CPU:Intel(R) Pentium(R)内存:2G硬盘容量:300G2.软件环境操作系统:Windows7系统开发平台:WampServer系统开发工具:Sublime Text3系统开发语言:PHP数据库:Mysql数据库管理工具:navicat3.4 数据库设计3.4.1 用户表设计用户数据表设计主要存储用户的一些基本信息、联系方式以及登录密码,提供了用户登录到电子名片网站的依据,并且密码采用的哈希加密方式,避免了网站被攻击导致洪加煌:HTML5 定位技术在网络名片服务中的应用8的密码泄露问题。表结构如下表 3-3 所示:表 3-3 用户数据表结构Table 3-3 user data table structure名字 类型 备注id bigint(20) 字段编号Name varchar(255) 用户名Password varchar(255) 密码email varchar(255) 邮箱avatar varchar(255) 头像nickname varchar(255) 昵称sex enum(‘0’,’1’) 性别website varchar(255) 网站phone varchar(255) 电话mobildphone varchar(255) 手机qq varchar(255) QQ 号wechat varchar(255) 微信号weibo varchar(255) 微博address varchar(255) 地址3.4.2 名片表设计名片表存储用户所发布的名片信息,所属行业,名片正反面图片地址等等,主键 id自增,外键 user_id 绑定为所发布名片的用户 id。用户名片表结构如表 3-4 所示:表 3-4 用户名片表结构Table 3-4 user name card table structure名字 类型 备注id bigint(20) 名片编号user_id bgint(20) 用户 idpublisher varchar(255) 发布人title varchar(255) 名片标题辽宁工程技术大学毕业设计(论文)9card_front varchar(255) 名片正面card_back varchar(255) 名片反面business varchar(255) 所属行业province varchar(255) 省city varchar(255) 市address varchar(255) 详细地址phone varchar(255) 电话fax varchar(255) 传真web varchar(255) 个人网址remarks varchar(255) 名片备注hit varchar(255) 点击量ischeck enum(‘0’,’1’,’2’) 审核状态3.4.3 管理员表设计用于存储名片网管理员信息。管理员表结构如表 3-5 所示:表 3-5 管理员表结构Table 3-5 administrator table structure名字 类型 备注id bigint(20) 管理员编号name varchar(255) 姓名password varchar(255) 密码email varchar(255) 邮箱avatar varchar(255) 头像sex enum(‘0’,’1’) 性别phone varchar(255) 电话qq varchar(255) QQ洪加煌:HTML5 定位技术在网络名片服务中的应用104 系统功能实现4.1 网站前台界面展示4.1.1 名片网首页名片网网站前台采用 bootstrap 前端框架,整个首页界面采用扁平化式布局,其设计风格以简洁大方为主。在布局上,左上角为名片网 logo,右上角为注册、登录、收藏以及文本搜索框,中间则是幻灯片,下面为最新发布的名片,最后底部则是网站的版权信息,其显示结果如图 4-1 所示:图 4-1 名片网首页Figure 4-1 card network home4.1.2 名片网登陆界面用户点击右上角的”登录”按钮,在弹出来的用户登录输入框中输入用户名与密码,点击登录即可实现登录到用户后台管理界面。其登录窗口如图 4-2 所示:图 4-2 用户登录窗口界面Figure 4-2 user login window interface
    展开阅读全文
    1
      金牌文库所有资源均是用户自行上传分享,仅供网友学习交流,未经上传用户书面授权,请勿作他用。
    0条评论

    还可以输入200字符

    暂无评论,赶快抢占沙发吧。

    关于本文
    本文标题:HTML5定位技术在网络名片服务中的应用.rar
    链接地址:http://www.gold-doc.com/p-139193.html
    关于我们 - 网站声明 - 网站地图 - 资源地图 - 友情链接 - 网站客服客服 - 联系我们
    copyright@ 2014-2018 金牌文库网站版权所有
    经营许可证编号:浙ICP备15046084号-3
    收起
    展开