许愿墙 – javaee 项目实战（一）

    发现自己无法完整地写出一个网页的源代码，便只能借助别人的源码来研究当中涉及的技术，希望久而久之可以提高自己的技术水平。

一、概述

   许愿墙是指可以许愿或发送祝福的程序，通过该程序用户可以许下心中的愿望，并能得到他人的支持。在这个项目里，可以了解到的技术主要有：

1、应用 div + css 样式进行页面布局 2、通过过滤器解决中文乱码 3、定义生成指定范围随机数标签的方法 4、支持字条后人气自动增加的方法 5、利用Ajax 实现滚动显示最新10条许愿 6、无刷新添加字条并预览 7、关闭添加字条窗口时初始化菜单

二、系统预览

    主页效果图：

<a href="http://peiquan.blog.51cto.com/attachment/201310/21/7518552_1382373786ljlw.png"></a>

    贴子条窗口运行效果图：

<a href="http://peiquan.blog.51cto.com/attachment/201310/21/7518552_1382373808Sy1b.png"></a>

    字条列表效果图：

<a href="http://peiquan.blog.51cto.com/attachment/201310/21/7518552_1382373816Ccip.png"></a>

三、应用 div + css 布局

    div + css 布局是网站开发常用的方式之一，是一种比较新的排版观念。采用 div + css 样式进行布局时，首先应将页面在整体上进行&lt;div&gt; 标签分块，然后对各个块进行css定位，最后再向各个块中添加相应的内容。

    页面布局的形式是多变的，可以根据网站的信息划分和排列进行布局划分。一般来说，一个页面可以包含以下几个板块：header（网站logo和图片），sidebar（边侧的工具栏），content（主要内容区域）和footer（脚注）等，当中sidebar有时会存在两个（左右工具栏）。在谈布局策略之前，了解几个在布局时常用的的名词：居中，固定和液态。“居中”顾名思义就是居中放置；“固定”指的是用 px 来指定宽度和高度（也可以指指定宽度或高度），指定后，其宽度或高度便固定为多少像素了；“液态”指的是使用百分比来指定宽度或高度，受当前字体或其内元素的长宽的影响。

    div + css 布局策略大概可以分为以下几大类：

1、列固定（液态），居中 2、列固定（液态），居中，标题和脚注 3、列固定（液态），居中，左侧栏，标题和脚注 4、列固定（液态），居中，右侧栏，标题和脚注

    现在给出四大布局的概览图：

     下面给出列固定，居中，左侧栏，标题和脚注的布局代码，其他的类似：

    更多的布局方式和代码设计可以参考 Dreamweaver cs6 的模板文件。

四、Ajax 中文乱码的解决方案

    Ajax 不支持多种字符集，其默认的字符集是 utf-8，因此在应用 ajax 时 应及时进行编码转换，否则程序就会出现乱码。一般情况下，有以下两种情况会产生中文乱码问题。

    1、发送路径中的参数有中文，在服务器段接收参数值时产生乱码，如：

var url="a.jsp?wishMan=小李"；

    将数据提交到服务器有两种方法， 一种是 get 方法， 另外一种是 post 方法。使用不同的方法提交数据，在服务器端接收参数时解决中文乱码的方法是不同的。具体如下;

    (1）当接收 get 方法提交的数据时，要将编码转换为 gbk，代码设计如下：

    String wishMan = request.getParameter(“wishMan”);

    out.println(“祝福对象：" + new String(wishMan.getBytes(“ISO-8859-1”),"gbk“));//解决中文乱码

   （2）由于应用 post 方法提交数据时，默认的字符编码是 utf-8，因此当接收使用 post 方法提交的数据时，要将编码转换为 utf-吧，如下：

    out.println(“祝福对象：" + new String(wishMan.getBytes(“ISO-8859-1”),"utf-8“));//解决中文乱码

    2、返回到 responseText 或 responseXML 的值中包含中文时会产生乱码

    在接收responseText 或 responseXML 的值时，如果包含中文，则需要将其转换为 gbk 或 gb2312 编码，并且将显示该值页面的编码格式设置为 gbk 或 gb2312，否则会产生乱码。

    jsp页面可以如下设置：

&lt;%@ page contenttype="text/html;charset=gb2312%&gt;

    html页面可以如下设置：

&lt;meta http-equiv="content-type" content="text/html; charset=gb2312" /&gt;

    servlet 则可以如下设置：

response.setcontenttype("text/html;charset=gb2312"); 

request.setcharacterencoding("gb2312");

本文转自peiquan 51CTO博客，原文链接:http://blog.51cto.com/peiquan/1312907