軟件工程实训平台前端重构与移动端优化.docx

毕 业 论 文(设 计)论文（设计）题目：软件工程实训平台前端重构与移动端优化姓 名 学 号 学 院 软件学院专 业 软件工程年 级 2010级 指导教师 2014年 5月 25日山东大学本科毕业论文（设计）成绩评定表学院： 年级/专业： 姓 名论文（设计）总成绩分数等级论文（设计）题目指 导 教 师 评 语评定成绩（分数） ×40%教师签名： 年 月 日答 辩 小 组 评 语答辩成绩（分数） ×60%组长签名： 年 月 日注：论文（设计）总成绩：分数=指导教师评定成绩（40%）＋答辩成绩（60%）。 等级：优秀（90分以上），良好（80-89分），中等（70-79），及格（60-69），不及格（60分以下）。目录摘要1ABSTRACT2第1章绪论31.1系统开发背景与意义31.2解决的主要问题31.3本文的主要工作41.4本文的组织结构4第2章需求分析52.1系统概述52.1.1软件工程实训平台概述52.1.2实训平台结构分析52.1.3实训平台前台模块分析62.2目标和解决问题72.2.1原有前端页面问题72.2.2解决目标72.3需求问题描述82.3.1功能性需求82.3.2非功能性需求82.3.3浏览器兼容性需求8第3章前端设计93.1重构设计流程93.2前台设计93.2.1首页设计103.2.2列表设计113.2.3列表项设计123.3登陆界面设计133.4后台设计14第4章编码实现154.1前端框架介绍154.1.1使用前端框架开发的优势154.1.2本项目用到的前端框架164.2前台编码174.3登陆界面编码244.4后台编码284.5交互功能与实现314.5.1前台交互314.5.2后台交互32第5章代码测试375.1测试环境375.2测试流程385.3测试结果与问题解决385.3.1PC端测试385.3.2移动端测试39第6章结论406.1实训收获406.2自身不足406.3未来展望40致谢41参考文献42附录1：英文原文44附录2：中文译文52软件工程实训平台前端重构与移动端优化摘要软件工程实训平台是山东大学软件学院项目实训的网上平台，其最终需求是担负软件学院项目实训各个阶段的信息化管理工作。原有实训平台经过开发与改进，已经完成了大部分功能，并能正常使用。但是由于项目构建的时间较为久远，所以前端代码已经老旧过时。其中，原版前端页面使用的是表格嵌套布局，代码混乱且不易修改，一旦调整，布局就会错乱。前端页面对新的浏览器的兼容也不是很完善，因为使用了IE私有标签，测试中会有各种错位和引用路径问题。同时，经过这几年的开发后，系统前端部分也留下了许多JS错误和标签嵌套错误。综上问题，我决定重构实训平台的前端代码。在重构代码时考虑到手机、平板等掌上设备已经成为大多数学生上网的首选。所以，我在重构代码过程中使用了响应式布局技术，使得一套前端代码能同时兼容手机、平板、PC等不同平台上的浏览器。关键字：HTML5，响应式布局，jQuery, 跨平台ABSTRACT“Software engineering training platform” is the online information system for the Project Training program in Qilu software college, Shandong University. The birth and final purpose of platform is to manage every stage for the training program online totally. After several years’ development and amendment, this platform could satisfy most part of its initial requirement, most of which did work well in the actual practice, too. However, following the emergence of Web 2.0, the front end technology developed in an unbelievable speed these years. The original platform, which was built so long ago, has been out-of-date. Specifically, its table nested layout coding style was hard to modify and optimize. After the la