响应式设计书信交流网站
摘要：互联网技术正迅速发展，移动终端作为载体，发展层出不穷。一个互联网产品为了在各种终端设备上都能拥有良好的用户体验都会创建多个版本。响应式网页设计就是一个网站能够兼容多种终端——而不是为每种终端做一个特定的版本。响应式设计的理念是指页面的设计与开发应当根据用户行为及设备环境进行相应的响应和调整。随着目前大屏幕移动设备的普及，响应式设计受到越来越多的人追捧。自从手机成为桌面浏览的替代品，响应网页设计已经获得了巨大的普及。有些人认为有一个响应的网页设计是最好的方式让越来越多的人获得访问。国内书信交流网站较少，响应式设计书信交流网站可使得用户在任意一个终端上浏览访问本网站。通过本网站，用户可以收集从各地寄来的书信来了解世界。通过互相寄发书信认识更多的人，找到自己笔友。谷歌已经建议响应的网页设计的配置，势必使它更受欢迎。
目录
摘要1
关键词1
Abstract1
Key words1
引言1
1响应式设计1
1.1响应式设计概念 1
1.1.1 响应式设计现状1
1.1.2 响应式设计主要技术原理1
1.1.3 响应式设计框架1
2实现原理2
2.1 MVC编程模式2
2.2 数据库设计3
2.2.1 数据库表设计3
2.2.2 连接数据库4
2.3 前后台处理 6
2.3.1 JSP动态网页6
2.3.2 前端响应式设计7
2.3.3 ajax异步处理数据8
2.3.4 运行环境10
3 需求分析 11
3.1 界面要求 11
3.2 功能要求 11
3.2.1 个人中心模块11
3.2.2 送信模块11
3.2.3 求信模块11
4 结果分析 11
4.1 成果展示 12
4.2 成果分析 14
致谢14
参考文献14
响应式设计书信交流网站
引言
1 响应式设计
1．1
*好棒文|www.hbsrm.com +Q: ￥3^5`1^9`1^6^0`7^2$
响应式设计概念
伊桑马科特(Ethan Marcotte)在2010年首先提出了响应式网站设计(RWD,Response Web Design)这个术语。
1．1．1 响应式设计现状
新的设备不断增加，旧的设备依然存在，这种快速增长且日趋加剧的可联网设备的多样化，使得网页设计已不再有标准的屏幕尺寸。基于一个固定尺寸对网站页面进行设计的模式，已无法满足用户设备多样化的通用需求。理想的情况是分别为每种设备单独创建一个版本，然而这对于大多数网站来说是不切实际的，于是越来越多的网站选择成为响应式，响应式设计已成为网页设计的一大主流模式。从2012到2014年，响应式设计一直出现在Web设计的趋势预测中，在2015年网页设计趋势预测中，广大设计师仍推崇响应式网页设计，响应式设计经过去的几年快速巩固了自己的地位，一直保持热度。
1．1．2 响应式设计主要技术原理
流动布局：原来是特指以百分比为单位的布局方式。在响应式设计的布局中，像素将不再是唯一单位，而是采用百分比或者百分比与像素混合做为单位的布局设计方式。
媒介查询：通过查询媒介，获取到设备的特性，根据设备的分辨率，屏幕尺寸大小，手持方向等各个因素而采用最适当的方案，解决了之前在单纯的布局设计中遗留的问题。实现自适应不同终端的效果。
弹性图片：响应式布局伴随终端的不同，布局也会做出相应的改变。图片作于布局中的重要元素，也需要跟着布局的改变做出相应的变化。弹性图片是Ethan Marcotte提出设计产品时提出的概念。除了图片，还应该包括图标、图表、视频等信息内容也需要实现响应式。
1．1．3 响应式设计框架
现响应式设计框架有很多，本系统采用开源免费的框架Bootstrap框架。Bootstrap 是来自 Twitter 设计师Mark Otto和Jacob Thornton 在2011 年发布的新型开源网站架构。Bootstrap的核心是基于 LESS 框架构建的CSS 。Bootstrap内置了一套响应式、移动设备优先的流式栅格系统，随着屏幕设备或视口（viewport）尺寸的增加，系统会自动分为最多12列。它包含了易于使用的预定义classe，还有强大的mixin用于生成更具语义的布局。但是由于 Bootstrap 的目标是在最新的桌面和移动浏览器上有最佳的表现, 在较老旧的浏览器上可能会导致某些组件表现出的样式有些不同。
2 实现原理
2．1 MVC编程模式
MVC全名是Model View Controller，是模型(model)－视图(view)－控制器(controller)的缩写，一种软件设计典范。MVC 模式同时提供了对 HTML、CSS 和 JavaScript 的完全控制。MVC不是一个框架，而是一种编程模式，这种模式要求将应用程序的输入、处理和输出分开。使用MVC，应用程序被分成了三个主要部件，即模型、视图和控制器。它们各自处理自己的任务。最典型的MVC就是JSP +?servlet?+?javabean的模式。而本网站使用JSP+action+javabean的模式。
图1项目层次
本网站在dao层统一对数据库中数据进行处理，在action中集中处理前后台数据交换，将得到的前端数据通过bo层传给dao,再将结果传回前端。在bo中处理dao层到action中数据的转换。util中主要为javabean。
2．2 数据库设计
本网站使用Oracle11g数据库，对数据库中的数据进行处理。Oracle以分布式数据库为核心，被广泛使用。
2．2．1 数据库表设计
本网站数据库的设计必须是基于管理信息系统的基本方法和原理构建的。数据库以基本满足第三范式为基本的要求，数据库表存储了各个模块的相应数据，网站的操作基本是对这些数据进行了增删改查操作。本网站包括了以下主要数据库表：
1.用户表：
ELUSER
字段
类型
约束
描述
是否为空
USERNAME
VARCHAR2(20 BYTE)
主键
用户名
NO
USERPASSWORD
VARCHAR2(20 BYTE)
用户密码
NO
当用户注册成功后，该用户的用户名和密码将会被保存在该用户表中。用户登录时将用户输入的信息与该用户表中的内容进行验证。验证通过方可登录。用户名为主键，不可重复。
2.求信信息表：
GET_LETTER
字段
目录
摘要1
关键词1
Abstract1
Key words1
引言1
1响应式设计1
1.1响应式设计概念 1
1.1.1 响应式设计现状1
1.1.2 响应式设计主要技术原理1
1.1.3 响应式设计框架1
2实现原理2
2.1 MVC编程模式2
2.2 数据库设计3
2.2.1 数据库表设计3
2.2.2 连接数据库4
2.3 前后台处理 6
2.3.1 JSP动态网页6
2.3.2 前端响应式设计7
2.3.3 ajax异步处理数据8
2.3.4 运行环境10
3 需求分析 11
3.1 界面要求 11
3.2 功能要求 11
3.2.1 个人中心模块11
3.2.2 送信模块11
3.2.3 求信模块11
4 结果分析 11
4.1 成果展示 12
4.2 成果分析 14
致谢14
参考文献14
响应式设计书信交流网站
引言
1 响应式设计
1．1
*好棒文|www.hbsrm.com +Q: ￥3^5`1^9`1^6^0`7^2$
响应式设计概念
伊桑马科特(Ethan Marcotte)在2010年首先提出了响应式网站设计(RWD,Response Web Design)这个术语。
1．1．1 响应式设计现状
新的设备不断增加，旧的设备依然存在，这种快速增长且日趋加剧的可联网设备的多样化，使得网页设计已不再有标准的屏幕尺寸。基于一个固定尺寸对网站页面进行设计的模式，已无法满足用户设备多样化的通用需求。理想的情况是分别为每种设备单独创建一个版本，然而这对于大多数网站来说是不切实际的，于是越来越多的网站选择成为响应式，响应式设计已成为网页设计的一大主流模式。从2012到2014年，响应式设计一直出现在Web设计的趋势预测中，在2015年网页设计趋势预测中，广大设计师仍推崇响应式网页设计，响应式设计经过去的几年快速巩固了自己的地位，一直保持热度。
1．1．2 响应式设计主要技术原理
流动布局：原来是特指以百分比为单位的布局方式。在响应式设计的布局中，像素将不再是唯一单位，而是采用百分比或者百分比与像素混合做为单位的布局设计方式。
媒介查询：通过查询媒介，获取到设备的特性，根据设备的分辨率，屏幕尺寸大小，手持方向等各个因素而采用最适当的方案，解决了之前在单纯的布局设计中遗留的问题。实现自适应不同终端的效果。
弹性图片：响应式布局伴随终端的不同，布局也会做出相应的改变。图片作于布局中的重要元素，也需要跟着布局的改变做出相应的变化。弹性图片是Ethan Marcotte提出设计产品时提出的概念。除了图片，还应该包括图标、图表、视频等信息内容也需要实现响应式。
1．1．3 响应式设计框架
现响应式设计框架有很多，本系统采用开源免费的框架Bootstrap框架。Bootstrap 是来自 Twitter 设计师Mark Otto和Jacob Thornton 在2011 年发布的新型开源网站架构。Bootstrap的核心是基于 LESS 框架构建的CSS 。Bootstrap内置了一套响应式、移动设备优先的流式栅格系统，随着屏幕设备或视口（viewport）尺寸的增加，系统会自动分为最多12列。它包含了易于使用的预定义classe，还有强大的mixin用于生成更具语义的布局。但是由于 Bootstrap 的目标是在最新的桌面和移动浏览器上有最佳的表现, 在较老旧的浏览器上可能会导致某些组件表现出的样式有些不同。
2 实现原理
2．1 MVC编程模式
MVC全名是Model View Controller，是模型(model)－视图(view)－控制器(controller)的缩写，一种软件设计典范。MVC 模式同时提供了对 HTML、CSS 和 JavaScript 的完全控制。MVC不是一个框架，而是一种编程模式，这种模式要求将应用程序的输入、处理和输出分开。使用MVC，应用程序被分成了三个主要部件，即模型、视图和控制器。它们各自处理自己的任务。最典型的MVC就是JSP +?servlet?+?javabean的模式。而本网站使用JSP+action+javabean的模式。
图1项目层次
本网站在dao层统一对数据库中数据进行处理，在action中集中处理前后台数据交换，将得到的前端数据通过bo层传给dao,再将结果传回前端。在bo中处理dao层到action中数据的转换。util中主要为javabean。
2．2 数据库设计
本网站使用Oracle11g数据库，对数据库中的数据进行处理。Oracle以分布式数据库为核心，被广泛使用。
2．2．1 数据库表设计
本网站数据库的设计必须是基于管理信息系统的基本方法和原理构建的。数据库以基本满足第三范式为基本的要求，数据库表存储了各个模块的相应数据，网站的操作基本是对这些数据进行了增删改查操作。本网站包括了以下主要数据库表：
1.用户表：
ELUSER
字段
类型
约束
描述
是否为空
USERNAME
VARCHAR2(20 BYTE)
主键
用户名
NO
USERPASSWORD
VARCHAR2(20 BYTE)
用户密码
NO
当用户注册成功后，该用户的用户名和密码将会被保存在该用户表中。用户登录时将用户输入的信息与该用户表中的内容进行验证。验证通过方可登录。用户名为主键，不可重复。
2.求信信息表：
GET_LETTER
字段
版权保护: 本文由 hbsrm.com编辑，转载请保留链接: www.hbsrm.com/jsj/xxaq/974.html
