摘 要

由于传统的宣传方式已经无法满足当代大学生日益增长的约玩交友的需求，并且现在利用网络技术来解决日常生活中出现的各种问题已经成为了一种趋势。所以本项目完成了Web前端开发方面的工作，联合后台、安卓和IOS建立一个校园约玩平台。

通过需求分析、模块设计、网页布局设计、系统实现和测试这些步骤系统实现了功能上的5大模块：管理模块、推荐模块、用户模块、活动模块以及登陆注销模块；并运用10个页面展示了这些功能。这些模块支持用户登陆、管理员系统操作，活动以及用户相关信息的查看等等功能，并且通过测试解决了出现的问题，使系统在满足基本的需求前提上交互性良好，且性能稳定。

本文介绍了本项目的目的与意义、相关技术原理以及系统开发的整个流程，并对项目进行了总结和提出不足，以待改进。

关键词：活动交友；关注互动；Web前端；BootStrap

Abstract

As the traditional way of propaganda has been unable to meet the growing needs of contemporary college students to dating, and now there have become a trend that use the network technology to solve the daily life of the various problems. So the project completed the work of the Web front-end development,which is part of building a platfrom of dating and playing.

The system implements functions of five modules: the management module, the recommendation module, the user module, the activity module and the login or logout module through steps of analyzing requirements, designing modules, designing layouts of web page, implementing and testing the system. And useing 10 pages to display functions of these five modules. These modules support user login, administrator system operation, displaying activities and user-related information and so on.Through tests to solving the problem, the system not only meets the basic needs but also has good interaction and stable performance.

This paper introduces the purpose and significance of this project, the related technical principle and the whole process of system development, to summarize and to put forward the shortcomings to be improved.

Key Words:activity dating；focus on interaction；web front-end；bootstrap

目 录

1 绪论 1

1.1 课题来源 1

1.2 研究目的与意义 1

1.3 国内外研究现状 2

1.4 论文内容安排 2

2 相关技术与原理 3

2.1 前端三大语言 3

2.1.1 HTML 3

2.1.2 CSS 3

2.1.3 JavaScript 4

2.2 BootStrap 框架 4

2.3 Restful架构 4

2.4 Ajax和json 5

2.5 JavaScript 技术难点 6

2.5.1 正则表达式 6

2.5.2 回调函数与promise 6

2.5.3作用域 [[scope]] 7

2.5.4 文档对象模型的进化 8

3 系统设计与实现 9

3.1 需求概述与分析 9

3.1.1 需求概述 9

3.1.2 需求分析 9

3.2 系统设计 10

3.2.1 总体设计 10

3.2.2 功能模块设计 12

3.2.2 网页布局设计 13

3.2.3 代码架构设计 19

3.3 系统功能实现 19

3.3.1 登陆注销功能 19

3.3.2 模块切换实现 21

3.3.3 组件模板的实现 23

3.3.4 举报管理功能实现 24

3.3.5 拖拽元素功能实现 25

3.3.6 相册时间藤的实现 26

3.4 系统测试与分析 27

3.4.1 测试方法 27

3.4.2 测试内容 27

3.4.3 测试结果 30

4 总结与展望 31

参考文献 32

致 谢 33

1 绪论

1.1 课题来源

随着社会的发展，广大大学生成为了社会消费和发展的中坚力量，与此同时精神需求也越来越高。但是目前市场上，并没有一个专门倾向于活动交友的平台。本课题即通过校园约玩系统的前端实现，侧重管理员的功能，和后台、移动端共同搭建一个约玩交友平台。

1.2 研究目的与意义

当代大学生渴望通过交友、组队玩耍、联谊的方式来结交更多不同领域的朋友，从而扩展自己的见识、丰富自己的阅历、了解不同领域的行业前景，进一步明确自己的人生方向。或是通过聚会的方式将志同道合的朋友汇集在一起，交流某个方向的所思所得，共同解决学术、文学、艺术、技术等等领域的困难，获取灵感和新的思路。所以大学生们对交友、互动需求的提高和这些活动的意义不容忽视。

传统的交友方式目前已远远不能满足大学生们的需求。一是汇集人数难，举办的活动苦于无法被更多人看到从而难以开展下去，而传统的海报传单方式费时费力费心，大大削弱了大学生们的热情；二是获取途径被动，当学生想参与活动的时候只能默默被动等待身边有无类似的活动信息，降低了学生们的主观能动性；三是活动种类少，由于个体的差异，每个人想参与符合自己性格和需求的活动，譬如读书、踏青的活动，但是活动种类的缺乏使得一部分人结交不到朋友，从而更倾向于独处；四是举办的活动难以招到不同领域不同地点的学生，使学生们被限制在一个圈子里，难以接触外面广袤的世界，这与他们的目的和需求是相悖的。综上所述，找到一种新的方式满足大学生日益增长的交友、组队玩耍、联谊的需求越来越重要。

21世纪是信息化的时代，随着计算机技术的开发，计算机对数据处理的准确和快捷，趋于广泛。国家倡导大学生做“互联网 ”项目，将互联网应用在人们生活的方方面面，提高整个社会的核心生产力^[1]。因此将计算机技术引进大学生们的交友约玩需求中就成了一个很合理的想法。