苏ICP备112451047180号-6
基于HTML5的校园快递代领平台的设计与实现
1 立题依据
1.1研究意义
随着当今社会经济的发展，越来越多的人选择使用快递进行异地物品的传送，快递行业逐渐发展兴盛起来，领取快递所带来的麻烦也越来越明显。在校大学生由于在校上学的地域限制等原因，成为快递的主要使用人群。由于时间上的紧迫和冲突，在校大学生无法及时前往快递收发处领取自己的快递。由此而生的快递代领平台主要提供快递代领服务。用户在该信息平台中可以发布自己的快递信息，由其他资源闲置的用户代领，代领用户可获得雇主支付的“跑腿费”。本毕业设计旨在帮助当代大学生轻松完成对自己快递的领取，对于学生个人和快递收发处都有一定的积极作用，具有一定的实用价值和研究意义。
1.2研究现状
以我校在校学生为例，由于学生网上购物数量巨大，快递收发处工作人员不足，取快递时间过于集中等原因，经常出现取快递麻烦或者长时间未能抽空取快递的情况，往往等待时间过长，造成时间上的损失。
大学生之间的资金流动多是通过支付宝完成，类似“抢红包”、“支付宝AA聚餐费用”等等小额资金交付现象普遍存在。O2O（Online To Offline）模式越来越受到大家的欢迎，分为线上线下两部分。线上平台为消费者提供消费指南、便利服务（预订、在线支付、地图等）以及分享平台，而线下商户则专注于提供优质的服务。
据了解，现今并没有快递代领这样的互联网软件。因此开发这样一个互联网平台抓住用户的需求并且占据着空白市场。同时，这样的平台提高了闲置资源的利用率，另一方面也具有一部分社交软件的功能，用户可以借此交友，丰富自己的大学生活。
对于移动互联网行业来说，HTML5的出现带来了具有强大的跨平台兼容性的Web App[1]——一种页面可直接适配手机屏幕、在浏览器上轻量运行、具有强大的表现能力、可实时更新且体验网页应用。与原有的Native App相比，Web App具有明显的优势：使用相同的代码创建多个平台的网络应用程序[2]，应用开发成本较低；在支持HTML5的浏览器上运行，直接适配多种移动终端；方便服务提供商随时发布更新；无需下载安装，打开浏览器就能使用[3]。网络应用程序，不需要安装在用户设备上，不会导致了额外的维护工作量的开销，升级可即时提供给终端用户[4] 。
1.3技术可行性
系统采用HBuilder集成开发工具在Windows环境下实现，本系统采用MySQL作为数据库支持。
1.3.1操作系统
开发环境：Windows 7 及以上版本。
1.3.2数据库管理系统
MySQL，MySQL是一个精巧的SQL数据库管理系统，具有功能强大、灵活性强、健壮等优点，MySQL是开放源代码的自由软件，可以运行于所有的平台，受到了广大自由软件爱好者甚至是商业软件用户的青睐。
1.3.3编程工具
HBuilder，快，是HBuilder的最大优势，通过完整的语法提示和代码输入法、代码块等，大幅提升HTML、JS、CSS的开发效率。
1.3.4编程语言
PHP，用PHP做出的动态页面与其他的编程语言相比，PHP是将程序嵌入到HTML（标准通用标记语言下的一个应用）文档中去执行，执行效率比完全生成HTML标记的CGI要高许多；PHP还可以执行编译后代码，编译可以达到加密和优化代码运行，使代码运行更快[5]。
2 研究的主要内容及预期目标
2.1研究的主要内容：
学习利用Html5（超文本标记语言，它主要围绕一个核心：构建一套更加强大的Web应用开发平台[6]）和CSS3 (层叠样式表，主要用于渲染视图(dom)，单独增加了Media Queries（媒体化查询）模块，网页制作者只需要针对不同的浏览器窗口尺寸编写不同的CSS样式，然后让浏览器根据不同的窗口尺寸来选择使用不同的样式即可，使用页面接近于原生应用效果，提升移动Web在移动设备上的可用性和用户体验[7])进行界面设计，再利用Ajax（异步JavaScript和XML提供与服务器异步通信的能力，从而使用户从请求/响应的循环中解脱出来[8]）JavaScript、SQL、JQuery 等异步通信、脚本语言、数据库作为主要的后台程序、数据支撑。再利用HBuilder集成化的IDE平台作为跨平台开发的支撑平台。然后通过对校园里人们对于领快递的习惯和人们乐意接收的代练快递的方式分析设计一款界面美观大方且功能完善的APP，满足大家对于快递领取方面的需求。
2.2预期目标：
1）拥有前后台界面，前台由用户(user)使用，拥有登陆/激活页面；后台由超级管理员使用，后台可以增删改查用户(user)，发布公告，应该具备分页，批量删除的功能。
2）用户激活后，系统根据用户所在宿舍区域进行分组，并展示分组信息
3）用户(user)注册/登陆后，进入操作界面。导航栏上有用户(user)的姓名，点击有log off退出菜单。
4）操作界面这里将会有一个“发单”和“抢单”的选项，个人信息选项。
5）进入发单选项后，用户可以对自己的取快递的信息进行发布，包括时间地点快递等信息；进入“抢单”选项后，出现当前发布的要取快递的信息（按照宿舍区域分类并以发布时间排序），点击右侧的抢单，在“抢单者”个人信息中出现已抢单和发单者个人信息中出现已被抢单，可查看当前自己的状态。
6）发单用户接收到自己快递时，支付宝转账1元到接单者账户中
7）激活身份验证：从学校的学生库中直接导入用户数据，再由用户激活使用，激活时只需要添加部分信息即可，必填信息包括电话号码，密码，备用电话，以及上传学生证图片，绑定个人支付宝账户
8）UI需求，应该具备拖动，排序等特效。
2.3管理系统功能结构图：
图1管理系统功能结构图
3 研究方案
3.1性能需求
时间特征要求：统计、查询响应时间、更新处理时间迅速。
安全性要求：1）用户信息激活时，学生信息准确核对，采用上传教务处照片进行比对
2）与快递收发处建立代领合作关系
3）对于代领后物品的去向明确
3.2系统需求及相应技术支持获取
1）学校对于学生信息的给予，方便对于平台学生信息的录入。
2）快递收发处对快递代领的支持。
3） Html Web技术支持。
3.3技术路线与实施方案
技术路线：前端数据层介于UI界面和后端之间，它封装了前端所有的对数据的处理工作。前端数据层的作用主要包括两个方面：（1）前端数据层缓存了数据库中的数据，并提供接口供UI界面层 在需要的时候调用。（2）前端数据层需要根据用户的操作，将用户的操作封装成HTTP请求，调用和服务端约定好的接口，并在服务端处理后以XML形式返回处理结果，根据解析处理结果更新数据缓存。服务器主要负责接受前端的接口调用，负责对应接口的业务逻辑处理，将需要储存的处理结果使用SQL语句保存到数据库，最后将处理结果返回给前端数据层．数据库仅被动地负责数据存储，通过服务器的操作，保证数据库的数据始终是最新的。
实施方案：第一，需求分析明确研究现状及可行性，产生需求分析文档，做到开发的规范。第二，学习相关技术，熟练进行运用于项目得开发中。第三，项目前期，开发设计原型功能[9]。第四，模块化进行开发，完成对于项目中所需功能的详细开发，并形成良好的用户体验。第五，进行测试，根据测试结果对项目的效果进行评估，并总结该项目的欠缺处以及未来的期望。
难点：对于开发语言的熟练度不够，需要更广泛更仔细地学习训练。针对Android平台扩展Web View组件。在Android操作系统中，Web View对象对Web App开发接口进行了封装，但其提供给上层Web App的API能力有限，所以需要对其进行进一步的扩展。当前一些移动中间件，如PhoneGap已经对Web View组件的一些基本功能做了扩展。如需进一步扩展，通常有两种方法，一是可以参考PhoneGap的扩展插件形式进行插件式的功能扩展；二是直接在PhoneGap上进行扩展，以扩展Web View组件的功能[10]。
此外，对于平台的安全性，对于代领快递的安全性，用户身份认证安全性管理是又一大难题，需要在开发中不断探索完善。最后，HTML5还处于在完善的过程当中，而Web App产品的大部分效果需要支持HTML5的强大浏览器对HTML5标准的良好支持，在PC端，虽然大多数主流浏览器都遵循HTML标准，但最终呈现给用户的界面效果仍然会有所差异，这种情况，在移动平台会有明显的变化，不同的浏览器展现出来的效果千差万别，这导致开发者需要花费大量时间用于兼容各个平台浏览器的实现效果，增加了产品的开发成本[11]。
4 论文进度安排
2016.11.31 – 2017.04.01 进行文献资料收集，完成开题报告初稿。
2017.04.01-2017.04.10对项目所需技术整理了解，完成开题报告。
2017.04.11-2017.04.21 通过开题答辩。
2017.04.22-2017.06.10 完成所需页面的静态展示和数据库设计
2017.06.11-2017.08.01完成登录激活功能和发单抢单模块。
2017.08.02-2017.09.02 完成信息展示模块和后台管理模块。
2017.09.03-2017.10.18 权限处理。
2017.10.19-2017.11.30 完成论文撰写
论文答辩
5 主要参考文献
[1] 陈勇．WebApp现状分析与展望[J]．行业观察，2012年7月.
[2] Thompson, Shannon. Creating and Documenting Android Web Applications[D]. M.A. Mills College.bInterdisciplinary Computer Science.2012.
[3] 章斓，基于HTML5的Web App的开发与探索[J].长沙大学学报，2015年09月，29卷5期.
[4] Spyros Xanthopoulos, Stelios Xinogalos , Mobile App Development in HTML5[J]. AIP Conference Proceedings. 2015, Vol. 1648 Issue 1, p1-4. 4p. 1 Chart.
[5] PHP简介[EB]·百度文库，http://baike.baidu.com/item/php/9337
[6] W3School Web技术网站, http://www.w3school.com.cn/index.html
[7] 曾昭江，汤怀,WebAPP在校园网站移动化应用中的研究与实践[J].计算机光盘软件与应用，2015年2期.
[8] 廖伟华.图解CSS3：核心技术与案例实战[M].北京:机械工业出版社,2014.
[9] Gerbe, O.;Raynauld, J.;Dinh, T.;Kerherve, B., From Models to Webapps[C], Signal-Image Technology and Internet-Based Systems (SITIS), 2011 Seventh International Conference on.
[10] 于洋，浅析HTML5的特点及其在移动Web App中的应用[J]. 应用研发_移动互联， 2014年24期.
[11] 易昌华，HTML5发展趋势的研究和探索[J].价值工程，2012年36期.
http://www.bysj580.com/ http://www.bysj580.com/biyesheji/
1 立题依据
1.1研究意义
随着当今社会经济的发展，越来越多的人选择使用快递进行异地物品的传送，快递行业逐渐发展兴盛起来，领取快递所带来的麻烦也越来越明显。在校大学生由于在校上学的地域限制等原因，成为快递的主要使用人群。由于时间上的紧迫和冲突，在校大学生无法及时前往快递收发处领取自己的快递。由此而生的快递代领平台主要提供快递代领服务。用户在该信息平台中可以发布自己的快递信息，由其他资源闲置的用户代领，代领用户可获得雇主支付的“跑腿费”。本毕业设计旨在帮助当代大学生轻松完成对自己快递的领取，对于学生个人和快递收发处都有一定的积极作用，具有一定的实用价值和研究意义。
1.2研究现状
以我校在校学生为例，由于学生网上购物数量巨大，快递收发处工作人员不足，取快递时间过于集中等原因，经常出现取快递麻烦或者长时间未能抽空取快递的情况，往往等待时间过长，造成时间上的损失。
大学生之间的资金流动多是通过支付宝完成，类似“抢红包”、“支付宝AA聚餐费用”等等小额资金交付现象普遍存在。O2O（Online To Offline）模式越来越受到大家的欢迎，分为线上线下两部分。线上平台为消费者提供消费指南、便利服务（预订、在线支付、地图等）以及分享平台，而线下商户则专注于提供优质的服务。
据了解，现今并没有快递代领这样的互联网软件。因此开发这样一个互联网平台抓住用户的需求并且占据着空白市场。同时，这样的平台提高了闲置资源的利用率，另一方面也具有一部分社交软件的功能，用户可以借此交友，丰富自己的大学生活。
对于移动互联网行业来说，HTML5的出现带来了具有强大的跨平台兼容性的Web App[1]——一种页面可直接适配手机屏幕、在浏览器上轻量运行、具有强大的表现能力、可实时更新且体验网页应用。与原有的Native App相比，Web App具有明显的优势：使用相同的代码创建多个平台的网络应用程序[2]，应用开发成本较低；在支持HTML5的浏览器上运行，直接适配多种移动终端；方便服务提供商随时发布更新；无需下载安装，打开浏览器就能使用[3]。网络应用程序，不需要安装在用户设备上，不会导致了额外的维护工作量的开销，升级可即时提供给终端用户[4] 。
1.3技术可行性
系统采用HBuilder集成开发工具在Windows环境下实现，本系统采用MySQL作为数据库支持。
1.3.1操作系统
开发环境：Windows 7 及以上版本。
1.3.2数据库管理系统
MySQL，MySQL是一个精巧的SQL数据库管理系统，具有功能强大、灵活性强、健壮等优点，MySQL是开放源代码的自由软件，可以运行于所有的平台，受到了广大自由软件爱好者甚至是商业软件用户的青睐。
1.3.3编程工具
HBuilder，快，是HBuilder的最大优势，通过完整的语法提示和代码输入法、代码块等，大幅提升HTML、JS、CSS的开发效率。
1.3.4编程语言
PHP，用PHP做出的动态页面与其他的编程语言相比，PHP是将程序嵌入到HTML（标准通用标记语言下的一个应用）文档中去执行，执行效率比完全生成HTML标记的CGI要高许多；PHP还可以执行编译后代码，编译可以达到加密和优化代码运行，使代码运行更快[5]。
2 研究的主要内容及预期目标
2.1研究的主要内容：
学习利用Html5（超文本标记语言，它主要围绕一个核心：构建一套更加强大的Web应用开发平台[6]）和CSS3 (层叠样式表，主要用于渲染视图(dom)，单独增加了Media Queries（媒体化查询）模块，网页制作者只需要针对不同的浏览器窗口尺寸编写不同的CSS样式，然后让浏览器根据不同的窗口尺寸来选择使用不同的样式即可，使用页面接近于原生应用效果，提升移动Web在移动设备上的可用性和用户体验[7])进行界面设计，再利用Ajax（异步JavaScript和XML提供与服务器异步通信的能力，从而使用户从请求/响应的循环中解脱出来[8]）JavaScript、SQL、JQuery 等异步通信、脚本语言、数据库作为主要的后台程序、数据支撑。再利用HBuilder集成化的IDE平台作为跨平台开发的支撑平台。然后通过对校园里人们对于领快递的习惯和人们乐意接收的代练快递的方式分析设计一款界面美观大方且功能完善的APP，满足大家对于快递领取方面的需求。
2.2预期目标：
1）拥有前后台界面，前台由用户(user)使用，拥有登陆/激活页面；后台由超级管理员使用，后台可以增删改查用户(user)，发布公告，应该具备分页，批量删除的功能。
2）用户激活后，系统根据用户所在宿舍区域进行分组，并展示分组信息
3）用户(user)注册/登陆后，进入操作界面。导航栏上有用户(user)的姓名，点击有log off退出菜单。
4）操作界面这里将会有一个“发单”和“抢单”的选项，个人信息选项。
5）进入发单选项后，用户可以对自己的取快递的信息进行发布，包括时间地点快递等信息；进入“抢单”选项后，出现当前发布的要取快递的信息（按照宿舍区域分类并以发布时间排序），点击右侧的抢单，在“抢单者”个人信息中出现已抢单和发单者个人信息中出现已被抢单，可查看当前自己的状态。
6）发单用户接收到自己快递时，支付宝转账1元到接单者账户中
7）激活身份验证：从学校的学生库中直接导入用户数据，再由用户激活使用，激活时只需要添加部分信息即可，必填信息包括电话号码，密码，备用电话，以及上传学生证图片，绑定个人支付宝账户
8）UI需求，应该具备拖动，排序等特效。
2.3管理系统功能结构图：
图1管理系统功能结构图
3 研究方案
3.1性能需求
时间特征要求：统计、查询响应时间、更新处理时间迅速。
安全性要求：1）用户信息激活时，学生信息准确核对，采用上传教务处照片进行比对
2）与快递收发处建立代领合作关系
3）对于代领后物品的去向明确
3.2系统需求及相应技术支持获取
1）学校对于学生信息的给予，方便对于平台学生信息的录入。
2）快递收发处对快递代领的支持。
3） Html Web技术支持。
3.3技术路线与实施方案
技术路线：前端数据层介于UI界面和后端之间，它封装了前端所有的对数据的处理工作。前端数据层的作用主要包括两个方面：（1）前端数据层缓存了数据库中的数据，并提供接口供UI界面层 在需要的时候调用。（2）前端数据层需要根据用户的操作，将用户的操作封装成HTTP请求，调用和服务端约定好的接口，并在服务端处理后以XML形式返回处理结果，根据解析处理结果更新数据缓存。服务器主要负责接受前端的接口调用，负责对应接口的业务逻辑处理，将需要储存的处理结果使用SQL语句保存到数据库，最后将处理结果返回给前端数据层．数据库仅被动地负责数据存储，通过服务器的操作，保证数据库的数据始终是最新的。
实施方案：第一，需求分析明确研究现状及可行性，产生需求分析文档，做到开发的规范。第二，学习相关技术，熟练进行运用于项目得开发中。第三，项目前期，开发设计原型功能[9]。第四，模块化进行开发，完成对于项目中所需功能的详细开发，并形成良好的用户体验。第五，进行测试，根据测试结果对项目的效果进行评估，并总结该项目的欠缺处以及未来的期望。
难点：对于开发语言的熟练度不够，需要更广泛更仔细地学习训练。针对Android平台扩展Web View组件。在Android操作系统中，Web View对象对Web App开发接口进行了封装，但其提供给上层Web App的API能力有限，所以需要对其进行进一步的扩展。当前一些移动中间件，如PhoneGap已经对Web View组件的一些基本功能做了扩展。如需进一步扩展，通常有两种方法，一是可以参考PhoneGap的扩展插件形式进行插件式的功能扩展；二是直接在PhoneGap上进行扩展，以扩展Web View组件的功能[10]。
此外，对于平台的安全性，对于代领快递的安全性，用户身份认证安全性管理是又一大难题，需要在开发中不断探索完善。最后，HTML5还处于在完善的过程当中，而Web App产品的大部分效果需要支持HTML5的强大浏览器对HTML5标准的良好支持，在PC端，虽然大多数主流浏览器都遵循HTML标准，但最终呈现给用户的界面效果仍然会有所差异，这种情况，在移动平台会有明显的变化，不同的浏览器展现出来的效果千差万别，这导致开发者需要花费大量时间用于兼容各个平台浏览器的实现效果，增加了产品的开发成本[11]。
4 论文进度安排
2016.11.31 – 2017.04.01 进行文献资料收集，完成开题报告初稿。
2017.04.01-2017.04.10对项目所需技术整理了解，完成开题报告。
2017.04.11-2017.04.21 通过开题答辩。
2017.04.22-2017.06.10 完成所需页面的静态展示和数据库设计
2017.06.11-2017.08.01完成登录激活功能和发单抢单模块。
2017.08.02-2017.09.02 完成信息展示模块和后台管理模块。
2017.09.03-2017.10.18 权限处理。
2017.10.19-2017.11.30 完成论文撰写
论文答辩
5 主要参考文献
[1] 陈勇．WebApp现状分析与展望[J]．行业观察，2012年7月.
[2] Thompson, Shannon. Creating and Documenting Android Web Applications[D]. M.A. Mills College.bInterdisciplinary Computer Science.2012.
[3] 章斓，基于HTML5的Web App的开发与探索[J].长沙大学学报，2015年09月，29卷5期.
[4] Spyros Xanthopoulos, Stelios Xinogalos , Mobile App Development in HTML5[J]. AIP Conference Proceedings. 2015, Vol. 1648 Issue 1, p1-4. 4p. 1 Chart.
[5] PHP简介[EB]·百度文库，http://baike.baidu.com/item/php/9337
[6] W3School Web技术网站, http://www.w3school.com.cn/index.html
[7] 曾昭江，汤怀,WebAPP在校园网站移动化应用中的研究与实践[J].计算机光盘软件与应用，2015年2期.
[8] 廖伟华.图解CSS3：核心技术与案例实战[M].北京:机械工业出版社,2014.
[9] Gerbe, O.;Raynauld, J.;Dinh, T.;Kerherve, B., From Models to Webapps[C], Signal-Image Technology and Internet-Based Systems (SITIS), 2011 Seventh International Conference on.
[10] 于洋，浅析HTML5的特点及其在移动Web App中的应用[J]. 应用研发_移动互联， 2014年24期.
[11] 易昌华，HTML5发展趋势的研究和探索[J].价值工程，2012年36期.
http://www.bysj580.com/ http://www.bysj580.com/biyesheji/