论文总字数：23367字

摘 要

本文介绍了校园群组活动信息平台前端的设计与实现过程。

文章首先结合基于活动的社交网络（EBSN）的兴起和校园活动现状，阐述了信息平台的实现背景与意义，之后介绍了开发过程中使用的技术，并分析同类技术对于本次项目的契合度，从中选择契合度最高的技术并应用于开发过程。然后文章按照面向人群、平台功能、操作可行性和技术可行性的顺序，详细分析项目的需求及对应功能，又对这其中的平台功能细化为用户、活动、群组、系统消息和管理员五部分，逐一进行说明。接着展开介绍项目的技术实现过程，先按照时间先后顺序介绍阐述开发过程，之后列出开发中遇到的两个难题，并说明解决方案。

最后，对整个项目的开发过程进行总结并分享了自己的收获，接着展望平台的未来，最后致谢整个过程中对我提供帮助的师长和同学。

关键词：EBSN，社交网络，前端，移动端，软件开发

Abstract

This thesis introduces the design process and the development of the Front-end of Event-Based Campus Information Platform.

At first, with the rise of EBSN and current situation of campus activities, I elaborate the background and meaning of the software’s development. Then introduces the technology which I used in the development, and apply the most suitable technology with the development. The thesis illustrates the group of users, the function of platform, operational feasibility and technical feasibility, then analyses project requirements and corresponding capabilities, then refine the platform capabilities for users, activities, groups, system information and administrator in five parts, illustrates each of these four parts in detail. After that, the thesis introduces the process of the realization of the platform, lists two of the problems happened during the development and illustrates the solutions.

At last, the thesis summarizes the development process of the whole project and share my achievement, and then look to the future of the platform, express my thanks to someone who helped me during the development in the end.

Key words: EBSN, social networks, front-end, mobile, software develop

目录

摘要 I

Abstract II

目录 III

第一章引言 1

第二章开发技术现状及实现目标 2

2.1 Web App开发技术分析 2

2.1.1Web App 2

2.1.2 样式 3

2.1.3 jQuery or AngularJS的选择 3

2.1.4 AJAX异步加载技术 3

2.1.5前端性能优化技术 3

2.2平台实现目标 5

第三章需求分析 6

3.1面向人群 6

3.2平台功能 6

3.2.1 用户功能描述 8

3.2.2活动功能描述 10

3.2.3群组功能描述 15

3.2.4系统消息描述 17

3.2.5管理员描述 19

3.3操作可行性 20

3.4技术可行性 20

第四章技术实现 21

4.1技术实现过程 21

4.1.1静态页面 21

4.1.2前后端确定接口及数据格式 22

4.1.3数据交互、兼容性测试及性能优化 23

4.2开发难点及解决方案 24

4.2.1对iscroll.js插件的使用 24

4.2.2系统消息类型的判断和区分显示 25

第五章总结与展望 26

5.1总结 26

5.2展望 26

谢辞 27

参考文献 28

第一章引言

近一段时间出现了不少基于活动的社会网络服务，例如已经积累了很多人气且正在快速发展Meetup和Plancast。有关学者从这些网络服务中总结出一种新型的社会网络--基于活动的社交网络（Event-based social networks 即EBSN）^[9]。一个EBSN不仅包括类似其它在线社交工具的线上社交活动，还包括通过线下产生的有价值的线下社交活动。

现在的大学生课余生活十分丰富，班级、社团等组织经常开展如聚餐、联谊等活动，有些学生也以个人名义在朋友圈发起小规模的活动。但由于宣传方式单一、力度不够等原因，许多学生并不能及时掌握当前开展活动的信息，以致于想参与但无从知晓活动地点、时间等重要信息，甚至不知道活动的存在。

随着当前“互联网 ”的理念驱动以及移动互联网技术的飞速发展，为了研究EBSN的特征并搜集相应数据，同时结合用户在大学校园内的特点（学号作为唯一识别符，社交关系简单，活动范围较小等），我们计划在手机移动端实现一个校园群组活动信息平台，同时平台还建立“群组”机制，方便班级、社团等常规学生组织以及因相同的兴趣爱好而集中在一起的特定用户群体管理其成员（为校园内班级和社团组织提供活动发布和群组管理功能）。

实现校园群组活动信息平台的意义在于:

为校园用户（学生和教职工）提供一个发布、管理活动的平台。通过这个平台，用户可以自己组织活动，报名参与自己感兴趣的活动，或查询当前举办的各种活动，为校园用户了解活动和帮助开展活动提供了极大便利。

在正式开始运营后，校园群组活动信息平台还能为在大学校园内的基于活动的社交网络提供真实数据资料，用于学术研究。

校园群组活动平台基于安卓操作系统，对于用户而言，具有更好的便捷性。配合手机的地理定位功能和移动端地图应用，方便用户抵达活动地点。利用手机通信，可随时联系群组或参与同一活动的同伴，为活动周期内的通讯提供便利。

基于当前H5技术的流行和全能性，我们选择用WEB开发的技术实现移动端Web App。前端方面，页面静态结构和样式我选用轻量级移动端框架JQuery Mobile^[12]，活动地点使用到的地图插件选择高德地图的API，最后利用phoneGap将适配移动设备的网站静态内容打包成安卓的APK安装包，实现Web App的开发。

剩余内容已隐藏，请支付后下载全文，论文总字数：23367字