摘 要

自从进入21世纪以来，随着社会经济以及科技发展，人们上网用到的主要工具从电脑变成了移动终端，这也使得许多网站不得不使用两套网页，在2010年，自适应网页设计这个概念被提出，使得前端开发人员对于网页开发有了全新的认识。

自适应网页设计是指不同屏幕大小，不同终端设备能够自适应显示的新网页设计方式及技术。伴随着社会的发展和科学的进步，社会上出现了屏幕大小各不相同的终端设备，如果网页设计不发生变革那么就要分别对不同终端进行单独的网页设计来满足不同终端用户的需求。自适应有以下好处：更少维护、积累分享、用户友好

建立自己的课题组主页，能够更加方便的发布本课题组的各种信息，例如日常事务进行管理，包括信息发布、例会管理、账号管理等功能。能够使该课题组的内部人员在看主页的时候及时收到各种有效信息。对于学生来说，有了自己的课题组主页，能够更直接的了解本课题组的信息，减少了他们浪费不必要的时间。建立课题组主页可以为学生提供一个直观清晰的平台。

关键词：自适应；课题组

Abstract

Since the beginning of the 21st century, with the development of social economy and science and technology, the main tools people use on the Internet have changed from computers to mobile terminals. This has also made many websites have to use two sets of webpages. In 2010, adaptive web design was The concept was proposed to make front-end developers have a new understanding of web page development.

Responsive webpage design refers to new webpage design methods and technologies with different screen sizes and different terminal devices can display adaptively. With social development and scientific progress, there are terminal devices with different screen sizes in the society. If the web page design does not change, separate web pages must be designed for different terminals to meet the needs of different end users. Adaptive has the following benefits: less maintenance, cumulative sharing, user-friendliness

The establishment of its own research group home page makes it easier to publish various information of this group, such as daily affairs management, including information release, regular meeting management, account management and other functions. It will enable the internal staff of the group to receive all kinds of effective information in a timely manner while watching the homepage. For students, having their own research group homepage can more directly understand the information of this research group and reduce their wasted unnecessary time. Creating a homepage of the research group can provide students with an intuitive and clear platform.

Keywords: adaptive,；research group

目录

摘要 I

Abstract II

第1章 绪论 1

1.1 目的及意义 1

1.2 国内外研究现状 2

1.2.1 自适应网页现状 2

1.2.2 MVC模式 3

1.2.3 课题组现状 3

1.3本章小结 3

第2章 自适应网站及相关技术 4

2.1 自适应网站 4

2.2 自适应所用到的技术 4

2.2.1 宽度自适应 5

2.2.2 完全自适应 5

2.2 MVC模式 5

2.3 其他技术 6

2.4 本章小结 6

第3章 自适应课题组网站的分析与设计 7

3.1 自适应课题组网站分析 7

3.2 自适应课题组网站设计 7

3.2.1 网站系统架构设计 7

3.2.2 功能模块设计 7

3.2.3 数据库设计 8

3.3 本章小结 11

第4章 自适应课题组网站实现 12

4.1 开发环境与工具 12

4.1.1 总体开发环境 12

4.1.2 开发工具 12

4.2 网站页面的实现 12

4.2.1 主页面的实现 12

4.2.2 登录流程 14

4.2.3 学生界面实现 15

4.2.4 教师界面实现 17

4.2.5 管理员界面实现 18

4.3 用户界面测试 19

4.3.1 用户登录界面测试 19

4.3.2 发布记录测试 20

4.3.3 资源上传与下载测试 20

4.4 本章小结 22

第5章 总结与展望 23

5.1 总结 23

5.2 展望 23

参考文献 24

致谢 25

第1章 绪论

1.1 目的及意义

伴随着社会经济的发展和科技的进步，网络逐渐成为人们消遣时间的主要选择。随着互联网的飞速发展，互联网的技术也层出不穷。如今互联网上的课题组主页如雨后春笋般蓬勃发展，绚丽多彩的主页比比皆是。

互联网作为一种能够24小时都存在的信息传播的媒介，它发挥的影响力是一般媒体不能企及的^[1]。作为课题组，需要建立自己的网站，最显而易见的就是可以向学生展示自己的课题组的风采让更多人了解课题组的研究方向，发布的论文，以及课题组发布的各种信息。使课题组能够将更多的研究信息透明化，让更多的人了解研究的进度以及成果。随着互联网发展越来越好的推进，课题组越来越多地要和外界进行信息沟通，在时机成熟时，这种信息沟通就会成为潜在的交易，能够让课题组能接到更多的项目。而在互联网上，信息的沟通非常方便，非常廉价，甚至比起传统方式（如电话，传真）来还要更加丰富。可以将研究成果，做成的项目陈列在互联网上供学生浏览选择。总而言之，建立了自己课题组的网站就成为了课题组必不可少的组成部分之一。

建立自己的课题组主页，能够更加方便的发布本课题组的各种信息，例如日常事务进行管理，包括信息发布、例会管理、账号管理等功能。能够使该课题组的内部人员在看主页的时候及时收到各种有效信息。对于学生来说，有了自己的课题组主页，能够更直接的了解本课题组的信息，减少了他们浪费不必要的时间。建立课题组主页可以为学生提供一个直观清晰的平台。建立课题组主页可以为学生提供一个直观清晰。

在国外，绝大部分英美国家的课题组都有自己的主页，课题组做自己的页面最主要的目的就是为了吸引潜在的学生，主要是面向研究生，但也面向本科生以及博士生，课题组的页面通常是感兴趣的学生了解课题组情况的第一渠道。随着科技经济的发展，国内的课题组跟国外的合作越来越多，做一个属于自己的课题组主页越来越迫在眉睫。

自适应有以下好处^[2]：

1、更少维护

开发一个独立的移动网站，会增加你的工作负担。实际上你就拥有了两个独立网站。如果你有一个响应式网站，维护的成本将会很小，因为它只有一个布局，且可工作在所有类型的设备上，而这可以明显地减少你的工作量。

2、积累分享

响应式网站设计可以让你(作为网站的拥有者)通过单一的URL地址收集所有的社交分享链接。你可以为创建更好、更友好的网站而做出积极贡献。

3、用户友好

响应式的网站设计能够对用户产生友好度，并且对于不同的分辨率能够灵活的进行操作应用。同时还可以进行收集分享，我们可以通过网站中这些单一的网站URL地址把那些社交分享链接收集起来。

1.2 国内外研究现状

1.2.1 自适应网页现状

自适应网页设计能够根据设备的尺寸自适应显示在不同终端上的新的网页设计技术。目前，对自适应网页设计的研究方案包括：第一种，跳转适配——两套界面设计，相互独立，顾名思义即识别出当前访问该网站的设备，然后跳转到相应的网站。当设备为手机时网站跳转到手机版网站，当设备为笔记本或台式机时，网站跳转到桌面版网站^[3]。第三方设备识别API：早在2012年，百度开发者中心面向开发者开放了他的终端识别服务，通过开发的API，可以将设备的信息提供给你，并推荐相应的适配方案。第三方处理过大量的设备数据，所以对于识别设备还是有一定的准确度的。前端js识别：根据设备对网站的请求信息，可以利用javascript的自带对象进行获取。可以简单获取访问设备的信息，比如iphone,android设备等获取当前设备屏幕的宽度，比如iphone 6的屏幕宽度是375（注意，iphone 6的分辨率为750×1334）。第二种，代码适配——两套界面设计，互为统一，代码适配其实也分两种，一种是前端代码适配，另一种是服务器适配^[4]。第三种，自适应适配——统一化设计，大小通吃，顾名思义，做到自适应适配的网站对访问的设备采用统一的设计，这也是最原生且最考验网页界面设计工程师和前端开发工程师能力的时候^[5]。举些简单的例子：①在强制不允许设备放大缩小后，网页元素根据百分比%来进行布局；②因设备的分辨率等问题，字体大小改用em或rem等；③图片都是等比例缩放；④采用大量float属性元素等。虽然有了许多的方案来进行自适应的网页设计，但是现在成熟的自适应网站设计并不多，自适应网站设计虽然是一个未来的发展趋势，由于它对网站设计要求比一般的网站要高，所以现在的普及度并不是很高。

1.2.2 MVC模式

MVC（Model-View-Controller）模式是一种软件设计模式^[6]，用一种业务逻辑、数据、界面显示分离的方法组织代码，将业务逻辑聚集到一个部件里，明确定义三个模块的分工和协作，在保持系统流程清晰的同时，使得模块间的耦合性降低，系统的扩展性大大增强。把MVC模式的理念引入自适应网站研究，可以设计出一种新的自适应网站模型。

1.2.3 课题组现状

现在国内外的大学导师，都开始建立属于自己的课题组主页，建立自己的课题组主页有很多好处能够更加方便的发布本课题组的各种信息，例如日常事务进行管理，包括信息发布、例会管理、账号管理等功能。能够使该课题组的内部人员在看主页的时候及时收到各种有效信息。对于潜在的学生来说，能够开展更加直接的网络交流，使用自己构筑的友善平台，减少了他们浪费不必要的时间。建立课题组主页可以为学生提供一个直观清晰。

在国外，绝大部分英美国家的课题组都有自己的主页，课题组做自己的页面最主要的目的就是为了吸引潜在的学生，主要是面向研究生，但也面向本科生以及博士生，课题组的页面通常是感兴趣的学生了解课题组情况的第一渠道。随着科技经济的发展，国内的课题组跟国外的合作越来越多，做一个属于自己的课题组主页越来越迫在眉睫。

1.3本章小结

本章主要介绍了本毕业设计的目的及意义，对自适应网页设计的实现有了初步的介绍，并对于自适应在国内外的研究现状做了分析，以及对自适应的实现方案的介绍。大概介绍了MVC模式以及课题组主页在国内外的使用情况。

第2章 自适应网站及相关技术

2.1 自适应网站

进入21世纪以来，互联网进入了人们的视野，随着世界各国经济的发展以及经济的进步，互联网的发展越来越迅猛，使得互联网成为了人们生活中必不可少的必需品，人们通过网络了解世界各地发生的新闻，通过网络的聊天拉近了人们之间心与心的距离，人们失去了网络就感觉被世界隔离，到目前为止，网络基本上已经普及到了每家每户，互联网的迅猛发展使得各种各样的网站层出不穷。网站(Website)是指在因特网上根据一定的规则^[7]，用于向大众展示特定内容相关网页的集合。在早期，域名、空间服务器与程序是网站的基本组成部分，因特网在最早是时候原型是美国国防部建立的阿帕网，随着科技的持续进步，网站的组成也越来越复杂，网站展示的功能也越来越多。目前大部分网站由域名、空间服务器、DNS域名解析、网站程序、数据库等组成^[8]。简单地说，网站是一个展示信息的平台，人们可以通过网站来发布自己想要公开的信息。随着手机的普及以及智能手机霸占整个手机市场，人们上网的方式也从坐在家中用电脑上网，变成了人们出门拿着手机随时随地的浏览着各种各样的网站，网站的开发者为了用户使用手机上网时获得更好的体验，探讨出了各种方案，多种网站优化方法应运而生，但是自适应网站这种解决方案渐渐地脱颖而出。