相关定稿近年来随着移动互联网的持续高速发展和智能手机等终端设备日

1、中要近年来，随着移动互联网的持续的高速发展和智能等终端设备的日益普及,使用智能移动终端设备上网的用户明显大幅度增长,移动互联网的应用也日渐丰富多彩,这一现象在高校大学生中尤为普遍。大学生们除了在日常生活中正常的互动交流外，很多时候都是在移动终端上进行交流互动。针对这一现象，开发了一大学生为中心，一 GIS为原理开发了一款大学 WEB 移动端的社交应用。本应用主要服务于大学生社交的应用。主要有爱、找朋友、Hi 周末（周末去哪玩）、社团活动的功能。这是一款基于 GIS 开发的移动 web 应用，主要是以大学生为中心，通过发布一些自己自己或朋友身边有趣的一些事，这样就可以以一种愉悦、有趣的方式进行交

2、流互动，即的自己，又可以大众，扩大的交友圈，让的大学生活充满的欢快。：社交GISWEB 移动端大学生AbstractIn recent years, with the growing popularity of mobileernet of sustained high-speeddevelopment and smart phones and other devi, use the mobile phoneernet userssignificantly increased by a large margin, the application of mobileernethaseincrea

3、singly rich and colorful, this phenomenon in collegestudents isparticularlyprevalent.College students in addition to the normaleractionin the daily life of theeraction.Aiming at thisexchange, many times are mobile terminals exchange andphenomenon, a university student is developed as the center, and

4、 a GIS is developed for thesol application of a university WEB mobile terminal.The application of sol application for college students.Mainly love to share, findfriends, Hikend (kend where to play), community activities function.This is a mobileweb applications based on the GIS development, mainly t

5、o college students as the center,through the release of some of their own or friendseresting things, sot we can to apleasant anderesting ways toeract, is their own entertaent and entertahe public,expand our circle of friends, let our college life is full of more cheerful.Keyword:solercourseGISWEB mo

6、bileuniversity student目录摘要IAbstractII第一章 绪论课题背景1国内外社交的现状1地理信息系统概述2地理信息系统简介2地理信息系统的组成2地理信息系统的应用3地理信息系统在国内的发展趋势41.4 本章小结4第二章 移动社交网络的研究5研究的目的5研究的内容及基本路线5研究的对象6研究的方法6文献法6分类法6访谈法7问卷法7观察法7服务设计研究方法7社会网络分析方法72.5 本章小结8第三章 应用的总体设计9设计目标9设计基本原则9实用性与先进性结合的原则9可扩展性的原则9安全性的原则9操作可行性的原则93.3 应用的功能设计10设计数据库需遵

7、循的三大完整性规则10防止数据库设计打补丁的方法是“三少原则”11校傲江湖数据库的设计内容及描述11运行环境的部署13IIS 的安装与配置13将项目部署到 IIS 服务器183.6 实现应用的技术...6html5 技术19bootstrap19AngularJS 框架20ASP.Net MVC21Entity Framework21地图 API213.7 本章小结22第四章 应用的功能实现234.1 功能的概括及登录23功能234.2.2 登录功能254.2.3代码26用户信息的展示及修改27用户信息的展示27用户信

8、息的修改284.3.3 实现的代码294.3.4 展示用户信息的意义29爱爱爱 30动态信息的展示30动态信息的发布314.4.3 查看附近学校的动态信息324.4.4 查看与我有关的动态信息324.4.5 功能代码324.4.6 作用及意义354.5 找朋友3...54.5.6找朋友信息的展示35找朋友信息的发布36与我有关37互动交流38路径导航功能38代码39作用及意义394.6 Hi 周末40...64.6.7分类展示学校周围好玩的地方40发布邀请40发布邀请场所的热力分布图41发

9、布邀请信息的展示42路径导航功能42代码展示43作用及意义43社团活动43社团活动信息的展示4..54.7.6社团活动信息的发布45查看附近学校的社团活动信息45社团活动的路径导航功能46与我有关47作用及意义474.8 本章小结47第五章 结论及展望495.1 结论495.2 展望49致谢51参考文献52第一章 绪论1.1 课题背景随着移动互联网的持续的高速发展和智能等终端设备的日益普及,使用智能移动终端设备上网的用户明显大幅度增长,移动互联网的应用也日渐丰富多彩,这一现象在高校大学生中尤为普遍。而理工类高校与师范类院校都存在严重的男女比率失调，在这僧多粥

10、少的环境下，在理工学校中的男同胞们与师范类的妹子们，想结识附近学院或学校的异性同学，却苦于没有一个很好的。在这移动互联网高速发展和 html5 技术蓬勃发展的时代，是否能针对这一情况开发一个基于大学校园开发一款轻松、愉快的良好的移动端 web 社交，从而使的理工类的男同胞们在身心愉悦的同时，还可以和同校或附近学校的妹子进行交流互动。虽然的生活中也有许多社交工具，但是到目前为止好没有一个很好的社交可以使周围的理工类院校与师范类院校的进行互动交流。能够以一个轻松、愉快、有意思的方式因此，针对这一情况，到了开发笑傲江湖移动端 Web 应用。这是一款基于 GIS开发的移动 web 应用，主要是以大学生

11、为中心，通过发布一些自己自己或朋友身边有趣的一些事，这样就可以以一种愉悦、有趣的方式进行交流互动，拿出来和大家一起交流和又可以，这样就可以以一种愉悦、有趣的方式进行交流互动，即的自己，大众，扩大的交友圈，让的大学生活充满的欢快。1.2 国内外社交的现状(1)在国外社交开始于的校园是一个联系朋友的社交工具。大家可以通过它和朋友、同事、同学以及周围的人保持互动交流，无限和，更可以增进对朋友的交流互动1。截止 2011 年年底，上传的，发布月活跃用户为 8.45 亿人，同比增长 39%；日活跃用户 4.83 亿人，同比增长 48%；移动月活跃用户超过 4.25 亿人；量为 27 亿次。有 1000

12、亿对好友关系，日均赞和评论数在国内校园社交在大学生中的覆盖率已经超过百分之九十，还在 2008 年开心网迅速成为年轻白领打发时间和休闲的新贵，并且仅经过短短的半年时间就发展为1500 万用户的规模。还有现如今的用户群包含有各行各业，每天活跃用户上亿。(2)2014 年 7 月 21 日，根据第 34 次中国互联网络发展状况统计显示，至2014 年的上半年，我国国内的社交网络的规模达到了 2.57 亿，相对与 2013 年的年底数量下滑了 2047 万，在国内的大多数网民的心中对于社交的使用率已经达到了40.7%，同比 2013 年年滑了 4.3 个百分点。这种种的迹象表明 2014 年开始，社

13、交的用户使用率和用户的规模正在下滑。第 34 次中国互联网络发展状况统计的还分析，社交的使用率和用户的规模正在处于下滑阶段2。其下滑原因主要来源于两个方面，一方面是的来自于自身的竞争对手的竞争，社交类的应用在近几年更新的非常迅速，致使部分的社交被分流了；另一个方面原因来源与自身，由于缺乏创新及运营的方向偏离，导致未能满足社交用户的需求，再加上有些社交自身用户定义的局限性，当用户角色或状态发生改变时，导致用户与原来的关系脱节，从而引起用户的流失。上述了社交创新少、用户互动少、更新慢，进而影响了交流质量，使得用户的使用意愿降低。1.3 地理信息系统概述1.3.1 地理信息系统简介地理信息系统是一种

14、特定的十分重要的空间信息系统。它是在计算机硬、系统支持下，对空间信息和属性信息的数据进行、述乃至应用的综合性计算机技术系统3。、管理、运算、分析、显示、描1.3.2 地理信息系统的组成地理信息系统由以下 5 部分组成：，是 GIS 中最重要的组成部分。开发必须定义 GIS 中被执行的各种任务，开发处理程序。操作熟练的 GIS通常都能够克服 GIS自身功能的，但是与之相反的情况却不能成立。因此，哪怕是最好的 GIS也不能够弥补操作对 GIS的一无所知所带来的影响。数据，精确的可用的数据可以影响到查询和分析的结果。硬件，硬件的性能会直接影响到 GIS否便捷和可能输出结果的方式。对数据的处理效率，进

15、而影响到其使用是，其不仅仅是包括 GIS，还会包括影像处理（如 MV）、数据库（如 SQL Server、等）、绘图工具、统计工具等等其它的辅助工具。过程，地理信息系统需要有明确的定义，通过一致的方法来生成正确的可以验证的结果。1.3.3 地理信息系统的应用在早期地理信息系统主要应用与设施的管理、自动化制图和土地地理信息系统，到了后来才逐渐拓展到了城市规划、监测和评估、资源和环境管理和军事等众多领域4。随着 GPS 技术的成熟，并与相关的学科的结合，GIS 的应用水平从原来的单一应用，发展为多元化应用，如交通、农业耕种、监测、金融决策等等方面；甚至现在 GIS已经进入到的生活中，成为生活和社交

16、不可缺少的一部分，如现在地图上定位、根据需要查看附近的场所；还比如和上的查看附近的人，和附近人进行互动交流；还有现在比较火的外卖“饿了吗”，也应用到了 GIS 的定位，路径分析功能，方便派送外卖等等。下面介绍 GIS 一些应用到的领域：(1)资源管理资源与管理包括土地、森林、草原、矿产动植物资源的、管理及保护。GIS系统将各种现有和数据信息有机汇集组织，科学的分类与管理，并通过系统的统计，叠置分析地形地质分析等功能，按照区域条件，也是状况和属性条件，提供多种条件组合形式的资源统计和状况分析，为资源的保护、合理的开发利用以及科学管理提供可靠的一句。(2)土地和管理土地信息系统（LIS）是 GIS

17、 在土地方面的专业应用，它主要涉及土地位置、形状、边界、名称、地籍、面积、类型、等级、权属地价、地理要素使用等内容5。使用 GIS 可以对地籍数据进行管理，进行土地的科学管理和合理使用。(3)宏观和辅助决策大区域、长周期、复杂的环境现象和变化很难在短时间内看清楚他的发展、变化及效果。因此，通过建立环境数据库，并使用一系列模拟和决策模型进行分析研究，可以为国家大区域的宏观决策提供可靠的科学依据。(4)生活和社交随着互联网的高速发展和智能移动终端的普及，GIS 的应用也走进了的日常生地图上定位、活，并和生活和社交融为一体，成为不可缺少的一部分。如现在根据需要查看附近的场所，查看路线功能；和上的查看

18、附近的人，并和附近的人进行交流互动；还有现在比较火的外卖“饿了吗”，利用 GIS 定位，路径分析，得到最佳的外卖派送路径；GIS 的位置信息的管理、分析、展示等功能，大大的便捷了的生活和社交，让的生活的更加丰富多彩。1.3.4 地理信息系统在国内的发展趋势，对地理信息系统（GIS）的研究和应用开始于 80 年代前期。找发展的初期，地理信息系统主要是依赖于空中摄影、遥感技术及计算机辅助设计的应用近年来，随着互联网技术和 GPS 技术的发展，GIS 与 GPS 和互联网的结的发展。为当下 GIS发展的主流趋势，国内的 GIS 的发展将迎来了新的机遇和。GIS经过 20 多年的发展和努力，GIS 在

19、国内的各行各业都得到了广泛的应用，如通过 GIS 对自然进行灾情分析来辅助决策；GIS 辅助快递物流派送，资源合理利用；城市 GIS 对城市建设进行合理规划；GIS 社交，基于地理位置信息服务来帮助用户寻找好友的位置信息及提供一些相关性信息，这样可以不断的激励用户自身的位置信息及一些相关信息，逐渐发展成为一种可提供社交网络服务及位置信息服务的社交服务，并且可以此为基础来创建聚合用户和主的产业生态圈6。1.3.5 地理信息系统在国内社交应用中的发展现状随着国内互联网的高数发展及智能移动终端设备在人们生活中的普及，人们对于空间信息服务需求日益增强。如现在中的“附近的人”的功能就是基于用户自己的位置

20、信息，查找周围用户信息，然后进行交流互动。因此，社交网络服务、无线移动服务及基于位置信息服务的结合将成为社交网络服务发展的一个新趋势，这将会引领国内社交网络攀想另一个。1.4 本章小结本章主要介绍选题的背景意义及国内外社交的现状，然后阐述地理信息系统的定义、组成部分、地理信息系统的应用（包括在社交中的应用）、地理信息系统在国内的发展趋势以及地理信息系统在国内社交中的发展现状。彰显了地理信息系统广阔的应用前景及地理信息系统与社交网络将成为社交发展的趋势。第二章 移动社交网络的研究2.1 研究的目的通过问卷和观察访谈展开对大学生用户的研究，分析大学生移动交流网络服务和大学生社交网络现状的使用特点，

21、来获取大学生用户的需求，了解大学生对使用移动社交网络服务的行为模式。以大学生用户为中心，设计出适合大学生的移动网络服务系统原型，优化用户体验，为笑傲江湖移动端 Web 应用提供设计和参考。本次研究主要有一下四个目的：(1)分析大学生生活方式、社交行为，了解大学生用户群体特点。(2)调研大学生社交网络使用现状，分析社交网络在大大学移动社交网络需求。会交往中的作用，发掘通过针对大学群体的访谈调研，对大学生用户群体进行分类。从而，总结出大学生用户需求状况和交往模式，建立基于 GIS 的位置信息服务的大学生移动社交网络用户模型。概括未来大学生社交网络移动性的服务模式特点，建立适合大学生的基于位置信息服

22、务的移动社交网络服务系统原型，优化用户体验，使得大学生彼此间的交流互动更加流畅。2.2 研究的内容及基本路线移动社交网络服务是用户通过可移动方式或随身携带的设备上网进行信息及服务等交流行为。通过研究大学生的日常生活方式和社会的行为特点，总结出大学生用户群体对移动网络服务需求的点，并根据大学生用户的需求进行系统设计，满足大学生用户对移动社交网络服务使用的用户体验。主要设计点在移动设计啊网络服务功能性及可用性研究，移动设备的外观、界面、系统硬件及服务等不做重点研究。由于 PC 端的使用环境和移动网络终端之间存在不同，传统的互联网与移动互联网的网页架构及内容尽不相同。因此，两者之间的交流互动方式也随

23、之改变。所以，不能将使用传统的互联网经验直接的嫁接到移动网络终端上。可以多种研究方法（问卷法、行为观察法、访谈法等等）对大学生社交网络的特息进行收集，然后根据大学生用户群体的社交行为模式和生活方式，对大学生的社交类型进行分类，分析出大学生用户对使用移动端社交网络的行为模式及需求的状况。2.3 研究的对象目标的用户是高校大学生，大学生作为一个特殊的社会群体，正处于人生发展的最关键时期，除了在大学学习专业知识外，学习怎么样建立和维持良好的社交网络，从而拥有一个良好的人际关系，是大学生发展的一个重要任务。大学生的段集中在 18至 25 岁之间，对新事物都有很强的好奇心和接受能力。而且，大多数的大学生

24、都喜欢使用前卫的智能及移动设备，同时对互联网社交网络服务也十分热衷，其中很大一部分大学生经常使用移动社交网络服务，非常适合作为研究的目标用户。2.4 研究的方法在本次研究过程中，方面运用的方法有社会网络 分析方法、服务设计研究方法等，用户研究方面采用访谈法、问卷法、观察法，数据分析采用分类法，定性分析，采用用户体验设计、用户参与的进行设计评估。2.4.1 文献法文献法就是通过的信息，从而达到某种和分析及研究现存的各种有关文献资料，并且从中提取出有用研究目的。其所需要解决的是如何才能在浩瀚的文献群中选取使用与本课题的资料，对这些资料进行整理及分析，是步骤包括文献收集，摘录信息，文献分析三个环节。

25、能够很好的应用。其基本2.4.2 分类法分类就是实物的用途、功能、性质及特点等等作为区分的标准，然后将符合相同标准的事物进行聚类，反之就分开的一种对事物的认识方法。分类法是指将类或组按照相互间的关系，组成系统化的结构，并体现为许多类目按照一定的原则和关系组织起来的体系表，作为分类工作的依据和工具。分类法有交叉分类法，树状分类法等等2.4.3 访谈法访谈法（erview）又称晤谈法，是指通过访员和受访人面对面地交谈来了解受访人的心理和行为的心理学基本研究方法。本研究通过分析整理访谈提纲，编制访谈问题，采用实镜访谈和网上调研的形式深入了解校园大学生的生活方式、行为和社交需求。2.4.4 问卷法问卷

26、法是通过一系列的表来收集需要研究用户群体对于研究方向的行为和态度。问卷是按照所研究的方向编制的，对于问卷问题的回答，研究这可以不提供，也可以提供相应的备选等。研究通过对被用户群的问卷进行统计分析，从而得出谋者结论。通过问卷方法设置相应，统计及分析出大学生校园生活的行为及社交需求7，为本应用的功能设计及开发思路提供有力的依据。2.4.5 观察法观察法是指研究者根据一定的研究目的、研究提纲或观察表，用自己的感官和辅助工具去直接观察被研究对象，从而获得资料的法。根据大学生人群的使用，设定移动社交网络服务任务，要求被试采用通常的模式完成相应的任务，观察用户操作步骤，用户行为状态及操作过程。2.4.6

27、服务设计研究方法服务设计以客户的需求作为出发点，主要通过运用创造性的客户参与方法，来确定提出服务内容和方式。产品设计活动主要表现在一个产品的开发过程中，二对于服务设计，则包括从概念发掘直到整个服务实施的设计过程中的探索性、评价性和创造性的个项活动。服务设计注重以人文本的研究，利用各种研究方法，通过原型和服务设定等技术展现出服务的表现形式及其特征。从这个角度上来看，服务设计就是要设计出具有有用性、可用性、满意性、高效性和有效性的服务。2.4.7 社会网络分析方法社会网络分析方法是研究社会学的法，社会学的理论普遍认为社会是由网络组成的，网络之间又包含了节点和节点的关系。社会网络分析方法网络关系分析

28、和探讨网络的结构及属性特征。通过该方法可以探究社交的环境下，大学生所的社交网络特点，以及在此基础上对大交网络的改进策略。2.5 本章小结本章阐述移动社交的研究目的、研究内容及基本路线、研究对象和研究的方法，彰显大学校园类的社交应用需很有发展潜质。可以结合地理信息系统的位置信息的管理及分析功能，开发出一款可以丰富大学生校园生活扩大交友圈的web 移动端社交应用。第三章 应用的总体设计3.1 设计目标基于 GIS 开发的校傲江湖移动端 web 应用，主要是以大学为主体，通过自己身边有趣的事、查找附近学校学生发布的交友信息进行交流、查找附近好玩的地方然后要求同学一起去、发布社团活动邀请跟多的同学参与

29、进来。通过这些方式，让可以以一种愉悦、有趣的方式进行交流与互动。这样在自己的同时又的欢乐。了大众，还可以扩大的交友圈，让的大学校园生活充满3.2 设计基本原则3.2.1 实用性与先进性结合的原则本应用是通过一系列的与分析和反复的推敲设计而得出的方案，其不仅融合了地理信息系统的功能，还应用了当下进的 html5 的技术，并结合开发使用比较火的 angularJS 和 bootstrap 技术。本应用本着使用新技术，开发出简单、实用、能够解决实际问的应用原则。3.2.2 可扩展性的原则本应用结构方式开发，随着应用本身的范围和使用的深度的不断扩大，在应用的功能上都会有很好的可扩展性。比如本应用中的爱

30、功能，随着使用的用户增多和历史的增多数据，后面可以添加几个统计分析功能，分析出大学生主要的活动区域（可以分为男的分布活动区域），这样可以增大和妹子或帅哥偶遇的机会。3.2.3 安全性的原则应用应该保证数据在处理的过程中保证准确无误，所以需要建立一套保护机制来防止用户的操作和破坏。比如用户时需要用户输入机号码。号码，所以添加了一组号码验证机制，防止输入3.2.4 操作可行性的原则应用的开发最终是为了用户服务的，所以开发的应用操作应该要力求操作的简单、大方和用户交互友好。如本应菜单展示功能，采用侧滑菜单展示，其操作原则就是本着简单、交互友好的原则。3.3 应用的功能设计本应功能主要有用户管理功能，

31、包含有登录与；爱功能，包含发布、附近学校、与我有关，发布时可定位显示当前位置，附近学校可以查看附近学校学生发布的状态；找朋友，可以发布交友信息，然后在地图上显示当天发布的信息，可以进行互动交流；Hi 周末，通过在地图上分类显示好玩的地方，然后可以根据显示的地方，发布邀请小伙伴们一起去玩；社团活动，通过本应用让本校和附近学校的同学们都能参与进来。以下为“校傲江湖”移动端 web 应用的总体设计结构图：图 3-1 校傲江湖结构图3.4 数据库设计3.4.1 设计数据库需遵循的三大完整性规则关系型数据库必须遵循的三个完整性规则:域完整性规则、参照完整性规则、用户自定义完整性规则8。以下分别为三大完整

32、性规则的介绍：(1)域的完整性规则：用 Check 来实现约束，在数据库设计工具中，对字段的取值范围进行定义时，有一个 Check 按钮，通过它定义字段的值城。|(2)参照完整性规则：用 PK、FK、表级触发器来实现。(3)用户定义完整性规则：它是一些业务规则，用过程和触发器来实现。3.4.2 防止数据库设计打补丁的方法是“三少原则”一个系统的数据库中，其数据表的个数应该越少越好。只要数据表的个数少了，才能保证系统的 E-R 图少而精。这样不仅去除重复多余的实体，形成了对客观世界的高度抽象，还对系统的数据库进行集成，从而防止打补丁式的设计，大大提高了系统开发的稳定性。一个表的主键的组合字段尽量

33、越少越好。由于主键即是该表数据的索引，又是子表的外键，所以组合主键的字段数越少，就越节省运行的时间和索引的(3)一个表中的字段个数应该越少越好。这样就防止了将子表中的字中去，在主表中留下许多空余的字段。空间。入到主表3.4.3 校傲江湖数据库的设计内容及描述表 3-1 用户表 x_User字段名称字段类型描述id userID userName password sexhead schoolID xueyuanID shetuan rigisterData birthData ruxueData citylng lat gexingxingqu主键自增用户 ID用户名nvarchar(13)

34、nvarchar(50) nvarchar(50) char(1) nvarchar(50) varchar(15) varchar(15 nvarchar(50) varchar(15) varchar(15) varchar(15) nvarchar(20) varchar(15) varchar(15) texttext保存头像学校 ID学院 ID路径学生参加的社团的时间用户的生日学生的入学时间所在的城市用户坐标的经度用户坐标的纬度用户的个性签名用户的表 3-2 学校表 x_univs字段名称字段类型描述idname主键自增 学校的名称城市 ID学校位置的经度学校位置的纬度varchar

35、(255)lnglatvarchar(15)varchar(15)表 3-3学院表 x_schools字段名称字段类型描述id maneuid主键自增院系名称学校 IDvarchar(255)表 3-4存放发布内容的表 x_content字段名称字段类型描述id contentID userID title infoactivityDate date commentCount zanlng latlocationDesc typeinfoUrlstarDate endDate主键自增发布内容的 ID所发布的用户 ID发布内容的标题，如社团活动的标题发布的内容发布活动的活动时间发布的时间统计评论

36、的数量统计点赞的数量发布内容的经度发布内容的纬度发布内容的地址发布内容的类型地址查看详情的 URL活动的开始时间活动的结束时间varchar(30) varchar(30) texttext varchar(30)varchar(30)varchar(50) varchar(50) text nchar(1)nvarchar(200) datedate表 3-5存放发布内容表 x_imges字段名称字段类型描述id typecontentIDphotoUrl主键自增发布内容的类型发布内容的 ID，关联 x_content 表char(2) varchar(30)varchar(30)存放的路径

37、表 3-6 存放发布内容评论表ment字段名称字段类型描述id contentID message userID dateuserType主键自增发布内容的 ID，关联 x_content 表评论的内容评论的用户 ID评论的时间评论的用户类型（本用户/非本用户）varchar(30) text varchar(30) varchar(30)char(1)表 3-7存放发布内容点赞表 x_zan字段名称字段类型描述id contentIDuserID主键自增发布内容的 ID，关联 x_content 表评论的用户 IDvarchar(30)varchar(30)3.5 运行环境的部署3.5.1

38、IIS 的安装与配置(1)安装 IIS。先打开控制面板，找到“程序与功能”，然后单击进入图 3-2 控制面板界面(2)点击左侧的“打开和关闭 Windows 功能”图 3-3 程序和功能(3)找到“ernet 信息服务”，按照下图打钩即可图 3-4 windows 功能设置等待安装完成，然后重启一下计算机重启计算机后，打开控制面板，找到“管理工具”，点击进入图 3-5 控制面板(6)点击ernet 信息服务（IIS）管理器图 3-6 管理工具(7)点击查看应用程序池，查看是否添加执行（8），否则就跳过了.netframework4.5，如果没有就图 3-7 IIS 应用程序池(8) 打 开电脑

39、 ， 进 入 系 统 安 装 盘 （ 般 是C ： ） ， 进 入C:WINDOWS.NETFramework，并可以看到系统中安装的.net framework 版本列表，然后进入 v4.0.30319 文件夹，同时并打开命令行 cmd，在命令行模式下输入：图 3-8 .net framework 4.5(9)在 IIS 管理器的根目录中找到“ISAPI 和 CGI 限制”，点击进入图 3-9 ISAPI 和 CGI 限制(10)将的 ASP.NET v4.0.30319 限制设置为允许图 3-10 开启 ASP.NET v4.0.303193.5.2 将项目部署到 IIS 服务器(1)打开

40、 IIS 管理器，右击，然后选择添加(2)输入名称，选择 ASP.NETv4.0 应用程序池，绑定 IP 和端口，然后点击确定就可以将项目部署到 IIS 上面了图 3-11 项目部署3.6 实现应用的技术3.6.1 html5 技术Html5 是由 Web 超文本应用技术工作组（ Web Hypertext Application TechnologyWorking Group），简称 WHATWG；与网（World Wide Web Consortium），也就是常说的 W3C。在 2006 年，双方决定进行合作，来共同创造出新的 HTML，这就是所说的 HTML5。HTML5 的设计目的是

41、为了在移动设备上支持多。新的语法特征被引进以支持这一点，如、audio 和 canvas 标记。HTML5 还引进了新的功能，可以真正改变用户与文档的交互方式，包括：（1）新的规则增强了灵活性（2）新添的属性及。如：添加了强大的控件类型 url、date、等；约束属性 required 必填属性；添加语义化article 装载独立文章、section定义文档节点、header 文档头部、nav 导航栏、footer 文档底部等等，使得 web 页面更加语义化，便利搜索引擎的搜索。（3）淘汰过时的或冗余的属性。如：archive、chla、codee、codetype、pace 等等。一个 HT

42、ML5 文档到另一个文档间的拖放功能。多用途互联网邮件扩展（MIME）和协议处理程序。在移动开发中应用 HTML5 有两种方法，要么是全使用 HTML5 的语法，要么是仅使用JavaScript 引擎。要不就是全使用 HTML5 的语法，要不就是仅使用 JavaScript 引擎。综上所述，HTML5应用的最大优势就是可以在网页上直接调试和修改。原先应用的开发可能需要花费非常大的力气才能达到 HTML5 的效果，不断地重复编码、调试和运行，这是首先得解决的一个问题。因此也有许多杂志客户端是基于 HTML5 标准，开发可以轻松调试修改。3.6.2 bootstrapBootstrap 来自于一个

43、叫的社交，它是目前最受欢迎的 web 前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的，具有简洁灵活性的 web 前端开发框架，使得 web 前端开发变得更加简单、快捷。Bootstrap 推出后，由于其强大的功能，受到了很大业内的欢迎，成为上面热门的开源项目。下面通过 Bootstarp 的特点、组件、js 插件及框架代码的简单介绍，来进一步了解 Bootstrap。Bootstrap 的特点：Bootstrap 是基于 HTML5 和 CSS3 开发的，它在 jQuery 的基础上进行了更为个性化和人性化的完善，形成一套自己独有的jQuery 插件。风格，并

44、兼容大部分Bootstrap 的组件：包含大量的 WEB 组件，如：下拉菜单按钮、导航条、分页、排版、框、进度条等等功能。通过这些组件，让的开发能够迅速的搭建出一个美观、功能完善的。Bootstrap 的 Javascript 插件：其包含有 13 个 jquery 插件，为 Bootstrap 组件提供了良好的支持。其中包括：模式框、页、滚动条、弹出框等。Bootstrap 框架代码：根据该框架可以快速的搭建漂亮的界面，而且还可以根据自己的需求进行修改。3.6.3 AngularJS 框架AngularJS 是为了克服 HTML 在构建应用上的而设计的框架。HTML 是一门很好的为静态文本展

45、示设计的式语言，但要构建 WEB 应用的话它就显得乏力了。因此，在通常情况下，可以通过下列技术解决静态网页在构建页应用上面的：类库 - 类库是一些函数的集合，它能帮助你写 WEB 应用。起主导作用的是你的代码，由你来决定何时使用类库。类库有：jQuery 等。框架 - 框架是一种特殊的、已经实现了的 WEB 应用，你只需要对它填充具体的业务逻辑。这里框架是起主导作用的，由它来根据具体的应用逻辑来调用你的代码。框架有：knockout、sproore 等。AngularJS 尝试不同的方法去弥补 HTML 在构建应用方面的。其通过使用directives 的标识结构来使得浏览器能够识别新的语法。

46、比如：进行数据绑定时，使用语法；进行数据迭代时，使用 DOM 结构来控制。AngularJS 将成为整个 web 应用中端对端的解决方案。通过构建 CURD（即增加、更新、查询、删除）的方式，使得应用能够灵活的变动。下面让过人之处：来了解 AngularJS 的（1）构建一个 CRUD 应用可能用到的全部内容包括：数据绑定、基本模板标识符、表单验证、路由、深度、组件重用、依赖注入。（2）测试方面包括：单元测试、端对端测试、模拟和自动化测试框架。（3）具有目录布局和测试的应用作为起点。3.6.4 ASP.Net MVCASP.Net MVC 是微软提供的以 MVC 模式为基础的 ASP.Net

47、Web 应用程序框架，它的作用是将应用程序分成 View（视图）、M（模型）、Contrller（控制器）部分9。这样使得的应用程序前端、数据分离，大大的方便了应用程序的开发及管理。M（模型）通常负责数据库中数据的存取，是应用程序的数据逻辑部分。View（视图）主要是用于显示经过逻辑处理后的数据，即界面的展示部分。 Controller（控制器）主要是用于处理应用程序中用户的交互，是整个应用程序的控制中心。3.6.5 Entity FrameworkADO.NET Entity Framework 是微软以 ADO.NET 为基础所发展出来的对象关系对应（O/R Map）解决方案。这大大的方便

48、了对数据库的操作。Entity Framework 采用抽象数据结构的方式，将数据库中的表都转化为应用程序对象（entity），数据表中的字段转化成属性（property），表之间的关系则转化为结合属性(assotion)，让数据库的 E/R 模型完全的转成对象模型。这样就可以让开发者以熟悉的面相对象编程语言来调用和开发效率。数据库，大大的简化了对数据库的操作，提高3.6.6地图 API地图 API 是专门为广大开发者免费提供的基于地图服务的应用接口。其中包括地图 Web 服务 API 接口、地图定位的 SDK、JavaScript API 等服务接口，提供了地图的展示、定位、路径分析、检索的

49、功能，大大的方便了基于位置信息服务的开发。下列介绍本应所使用的接口类：地图 API 的类，用来实例化一个地图，然后展示到页面上13。(1)Map 类，是可以通过其所具有的配置方法，对所要加载的地图进行配置。如：enableDragging 可设图开 启拖拽功 能； enableDoubleClickZoom 设图双 击放大功 能； disableKeyboard 设图键盘操作功能等等。(2)Marker 类，此类可以用来表示地图上面的一个图形标注，通过它可以在地图上添加需要显示的标注13。同时 方法，显示和关闭标注的信息窗口。(3)LocalSearch 类，此类主要用于位置的检索、周边检索及

50、范围的检索13。通过可以通过 openInfoWindow 和 closeInfoWindowLocalSearch(location:Map|Po|String, opts:LocalSearchOptions) 创建一个搜索类实例，其中 location 表示检索区域，其类型可为地图实例、坐标点或城市名称的字符串。本应用通过使用 LocalSearch 的 searchNearby 方法（根据中心点、半径与检索词发起周边检索）。索引出学校附近好玩的地方，为本应用 HI 周末的实现提供了技术的支持。Geolocation 类，利用浏览器的 geolocation 接口获取用户当前位置，从而实

51、现实时定位功能13 。该类提供 getCurrentition(callback:function, options:itionOptions) 方法来返回用户的位置， 当定位成功时，回调函数的参数为GeolocationResult 对象，否则为 null。(6)TransitRoute 类，通过 TransitRoute 构造函数创建一个导航实例。 然后通过 TransitRoute 的 search 方法发起索引，从而实现导航的查询。3.7 本章小结本章通过阐述设计的目标、应用的功能设计、设计的基本原则、数据库设计、运行环境的部署web 应用学生社交应用所使用到的技术，反应出怎么样才能开

52、发出简单、合理的移动端。设计的目的，明确出本应用的要开发出一款基于 GIS 位置信息服务的大；功能设计，反映出该需要实现的功能；设计点的原则，使了解到，要想开发出也优秀合理的作品，需要遵循设计的基本原则；数据库的设计会影响到，项目后期的开发难度、进度及整个应用的稳定性；运行环境的部署直接影响项目的运行情况；使用相应的技术，能使开发起来更加得心应手。第四章 应用的功能实现4.1 功能的概括这是一款基于 GIS 开发的大学生社交移动端 web 应用，主要是以大学生社交为，而拓展出的社交应用功能。其目的是为了促进大学生之间的互动交流，将附近的大学的所有大学生包含进来，为周边的大学生们能够有很好的社交

53、环境。4.2及登录4.2.1功能本应用的功能主要分成 3 个步骤，第一步输入真实；机号码为账号，密码长度不得少于 6 位，选择出生日期，选择图 4-1界面步骤 1图 4-2界面步骤 1然后右上角点击下一步点击进入第二步操作，输入大学名称（根据输入的信息下拉列表显示查询出的学校信息，然后选择自己的大学），输入学院（根据大学关联和输入的信息下拉列表显示查询的学院信息，然后选择学院），输入自己所学的专业，输入入学时间，如果该学校已经有定位过境不需要定位，点击下方进行定位一下；图 4-3界面步骤 2图 4-4界面步骤 2都完成上述的操作后，点击右上角的下一步，进入第三步操作，概步操作为最后阶段，主要是

54、添加用户的头像和用户的名称。的图 4-5界面步骤 3图 4-6界面步骤 34.2.2 登录功能输入用户名（正确合法机号码），输入，点击记住（可以记住当前用户登录信息，方便下次登录），然后单击登录，如果用户名和正确就会提示登录成功，然后在 3 秒后进入用户界面，默认为主要为爱的主页信息。图 4-7 用户登录4.2.3代码(1)功能的逻辑代码：通过 ajax 将页面输入的信息传递给$(#registerTwoWancheng).click(function () $.ajax(url: /Login/RegisterOver,type: cache: false,contentType: fals

55、e, pro data: formdata,suc s: function (d) T,async: false,sData: false,if (d = 成功！) var linkHtml = 将在3秒后跳转到登录页面. var linkUrl = /Login/Login;$.MsgBox.Msg(温馨提示, d, linkHtml, linkUrl);else $.MsgBox.Alert(温馨提示, d);, error: function (d) alert(d);););然后进行验证添加，代码如下：public ActionResult RegisterOver(出过来的数据)va

56、r res = new JsonResult(); xajhEntities db = new xajhEntities();/创建用户信息表对象x_User u = new x_User();u.=x;/进行赋值db.x_User.add(u);/添加用户信息addCount=db.SaveChanges();/保存if (addCount = 1) res.Data = else res.Data = 失败！;return res;成功！;(2)登录功能逻辑代码：通过 ajax 将登录信息传递到，如果验证通过则显示登录成功，然后然后验证代码：进入系统界面，否则提示失败，停留在该页。publ

57、ic ActionResult Login(string userId,string password) var res = new JsonResult();bool blSucc = CheckLogin(userId, password);if (blSucc)res.Data = true; else res.Data =false;return res;private bool CheckLogin(string userId, string password)xajhEntities db = new xajhEntities(); var user = db.x_User.Whe

58、re(u = u.userID = userId & u.password = password).ToList(); rCount = user.Count();if (rCount = 1)var arr = user.Take(1).ToArray()0;var schoolID = Convert.To32(arr.schoolID);var schoolData = db.x_univs.Where(u = u.id = schoolID).ToList();Response.Response.suserID.Value = arr.userID.ToString();suserNa

59、me.Value =HttpUtility.UrlEncode(arr.userName.ToString();Response. Response. Response. Response.Response.suserHead.Value = arr.head.ToString(); sschoolID.Value = arr.schoolID.ToString(); sschoolLng.Value = schoolData0.lng.ToString(); sschoolLat.Value = schoolData0.lat.ToString();sloginDate.Value = Da

60、teTime.Now.ToString(yyyy-MM-dd HH:mm:ss);return true;elsereturn false; 4.3 用户信息的展示及修改4.3.1 用户信息的展示用户通过点击头像查看用户详情，主要是展示用户的基本信息，供其他同学查看，展示的内容有用户的个人相册。、学校、出生日期、学院、专业、个性签名、社团、图 4-8 用户信息展示图4.3.2 用户信息的修改如果是查看自己的信息内容，可以进行修改，否则不可以修改。图 4-9 用户信息修改图4.3.3 实现的代码(1)用户信息的展示，先通过 ajax 将要查看的用户 ID 传递给，根据 ID 查出该用户信息，然后