2012 届本科毕业设计

1. 2012届本科毕业设计 基于HTML5的WebApp的设计与实现----心情分享平台 设计人员：黄超 指导老师：王光琼 专业：计算机科学与技术（软件工程方向） 班级：2008级1班

2. 项目背景 随着互联网的不断发展，人们对于互联网的依赖越来越大，同时越来越多的人也都意识到了互联网给生活带来的便利。人们每天的心情会不断的变化着，许多人都喜欢将自己的心情记录下来或是分享给别人。在网络上分享心情就成为了一种方便快捷的选择。在互联网上，分享心情的地方很多，但是以分享心情为主要功能的网站却不多，所以我课题选择了以分享心情为主要功能的一个网站。同时项目以HTML5技术作为技术基础，进行项目的开发。该课题是一个以心情为主题的分享应用，用户可以将自己的心情分享出来，分享出自己的快乐或者苦恼，而其他的用户可以对该条心情进行评论，发表自己的看法。

3. 论文结构安排 • 第1章是绪论，主要介绍制作课题的意义以及分享心情和HTML5在国内外的发展状态； • 第2章是简单的对课题中使用的技术和编写工具进行了介绍； • 第3章是项目的需求，介绍了项目的功能模块； • 第4章是对数据库方面的设计，表之间的结构进行了介绍； • 第5章是对项目的具体实现内容； • 第6章是测试和性能优化方面的内容。

4. 运行环境：Chrome10,firefox4,ie9以上版本等其他支持HTML5的浏览器。运行环境：Chrome10,firefox4,ie9以上版本等其他支持HTML5的浏览器。 • 开发工具：Adobe Dreamweaver CS5，Adobe Photoshop CS3，Adobe Illustrator CS5，MyEclipse 7.5，IntelliJ IDEA 11.1.1,Apache Tomcat 6.0

5. 心情分享平台 登录 注册 个人信息管理 心情模块 音乐盒子管理 密码更改 头像上传 分享心情 搜索心情 回复心情 项目模块结构图

6. 项目创新 • Audio制作一个简单的音乐播放器，展示HTML5对于音乐方面的性能提升； • 使用Canvas进行2D绘图，并且进行简单动画的绘制，展示HTML5对于矢量绘图的支持； • 使用CSS3中的阴影和矩阵变换，展示HTML5对于阴影和变形的支持； • 使用CSS3中的Animation，让网页更加生动； • 使用HTML5中新增的更加具有语义的标签，如section、aside、nav等； • 应用中与服务器端的交互全部通过ajax进行； • 使用CSS Sprite技术对图片进行压缩； • 将多个javascript进行压缩到一个文件中。

7. 数据库关系图

8. 工程目录图

9. 项目截图

10. 项目截图

11. 项目总结 通过本课题对基于HTML5技术的研究和实践，完成了一个纯粹使用Web技术开发的webApp。可以从中看出HTML5的强大之处，在CSS3和javascript的配合下，制作出了用户体验非常棒的应用。本课题有许多创新之处，同时也有不少的不足之处。优点在于使用了大量的HTML5技术，顺应了时代的潮流，缺点在于功能略显单一，并且安全方面的限制没有过多的关注。另外关于HTML5的高级知识资料尚且比较少，而且浏览器支持方面各个浏览器之间有差异,另外在开发中，还是感觉到了javascript的性能的不足之处，特别适用阴影效果后运用动画对于计算机的消耗会特别的大，所以在使用动画时避免适用阴影效果，最好能适用PhotoShop之类的图片处理软件对图片进行处理后再使用。如果要几个动画同时播放，并且保持同步的话，最好使用javascript编写动画，而非使用Jquery内置动画。还有个解决方案是使用css3中的Animation进行代替javascript动画，因为Animation会得到浏览器的优化。只是很遗憾，目前仅有-webkit内核的浏览器支持。

12. 致谢 在制作本项目中，我要感谢的是我的室友们，是他们给了我很多的建议和帮助，他们有高晓魏、陈刚、刘勇、刘宗盛、余志龙、陈龙等。在写论文的时候，我要感谢我的指导老师，王光琼老师，王老师非常细心的给我的论文提出了许多的建议，非常细致的修改我的论文，牺牲了许多自己的私人时间给我们讲解论文，对我们的论文结构进行了重新排列，真的非常感动。我还要感谢我工作单位的同时，当我遇到问题时，是他们帮助我解决问题，而且没有把我当做新人来对待，而是当做朋友一样的探讨问题。感谢参考文献中提到的作者，给我论文提供了参考资料。最后我要感谢我的父母，你们不辞辛劳的供我读书，解决了我的生活负担。