許願牆 – 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