许愿墙 – javaee 项目实战（一）
Technorati 标签: java,javaee项目发现自己无法完整地写出一个网页的源代码，便只能借助别人的源码来研究当中涉及的技术，希望久而久之可以提高自己的技术水平。一、概述许愿墙是指可以许愿或发送祝福的程序，通过该程序用户可以许下心中的愿望，并能得到他人的支持。在这个项目里，可以了解到的技术主要有：1、应用 div + css 样...
发现自己无法完整地写出一个网页的源代码，便只能借助别人的源码来研究当中涉及的技术，希望久而久之可以提高自己的技术水平。
一、概述
许愿墙是指可以许愿或发送祝福的程序，通过该程序用户可以许下心中的愿望，并能得到他人的支持。在这个项目里，可以了解到的技术主要有：
1、应用 div + css 样式进行页面布局
2、通过过滤器解决中文乱码
3、定义生成指定范围随机数标签的方法
4、支持字条后人气自动增加的方法
5、利用Ajax 实现滚动显示最新10条许愿
6、无刷新添加字条并预览
7、关闭添加字条窗口时初始化菜单
二、系统预览
主页效果图：
贴子条窗口运行效果图：
字条列表效果图：
三、应用 div + css 布局
div + css 布局是网站开发常用的方式之一，是一种比较新的排版观念。采用 div + css 样式进行布局时，首先应将页面在整体上进行<div> 标签分块，然后对各个块进行css定位，最后再向各个块中添加相应的内容。
页面布局的形式是多变的，可以根据网站的信息划分和排列进行布局划分。一般来说，一个页面可以包含以下几个板块：header（网站logo和图片），sidebar（边侧的工具栏），content（主要内容区域）和footer（脚注）等，当中sidebar有时会存在两个（左右工具栏）。在谈布局策略之前，了解几个在布局时常用的的名词：居中，固定和液态。“居中”顾名思义就是居中放置；“固定”指的是用 px 来指定宽度和高度（也可以指指定宽度或高度），指定后，其宽度或高度便固定为多少像素了；“液态”指的是使用百分比来指定宽度或高度，受当前字体或其内元素的长宽的影响。
div + css 布局策略大概可以分为以下几大类：
1、列固定（液态），居中
2、列固定（液态），居中，标题和脚注
3、列固定（液态），居中，左侧栏，标题和脚注
4、列固定（液态），居中，右侧栏，标题和脚注
现在给出四大布局的概览图：
下面给出列固定，居中，左侧栏，标题和脚注的布局代码，其他的类似：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
<!--
body {
font: 100%/1.4 Verdana, Arial, Helvetica, sans-serif;
background-color: #42413C;
margin: 0;
padding: 0;
color: #000;
}
.container {
960px;
background-color: #FFF;
margin: 0 auto; /* 侧边的自动值与宽度结合使用，可以将布局居中对齐 */
}
/* ~~ 标题未指定宽度。它将扩展到布局的完整宽度。标题包含一个图像占位符，该占位符应替换为您自己的链接徽标 ~~ */
.header {
background-color: #ADB96E;
}
.sidebar1 {
float: right;
180px;
background-color: #EADCAE;
padding-bottom: 10px;
}
.content {
padding: 10px 0;
780px;
float: right;
}
.footer {
padding: 10px 0;
background-color: #CCC49F;
position: relative;/* 这可以使 IE6 hasLayout 以正确方式进行清除 */
clear: both; /* 此清除属性强制 .container 了解列的结束位置以及包含列的位置 */
}
</style></head>
<body>
<div class="container">
<div class="header"><a href="#"><img src="" alt="在此处插入徽标" name="Insert_logo" ;180" height="90" id="Insert_logo" style="background-color: #C6D580; display:block;" />
<!-- end .header --></div>
<div class="sidebar1">
<ul class="nav">
<li><a href="#">链接一</a></li>
<li><a href="#">链接二</a></li>
<li><a href="#">链接三</a></li>
<li><a href="#">链接四</a></li>
</ul>
<p> 以上链接说明了一种基本导航结构，该结构使用以 CSS 设置样式的无序列表。请以此作为起点修改属性，以生成您自己的独特外观。如果需要弹出菜单，请使用 Spry 菜单、Adobe Exchange 中的菜单构件 或其它各种 javascript 或 CSS 解决方案创建您自己的菜单。</p>
<p>如果您想要在顶部进行导航，只需将 ul.nav 移到页面顶部并重新创建样式即可。</p>
<!-- end .sidebar1 --></div>
<div class="content">
<h1>说明</h1>
<p>请注意，这些布局的 CSS 带有大量注释。如果您的大部分工作都在设计视图中进行，请快速浏览一下代码，获取有关如何使用固定布局 CSS 的提示。您可以先删除这些注释，然后启动您的站点。要了解有关这些 CSS 布局中使用的方法的更多信息，请阅读 Adobe 开发人员中心上的以下文章：<a href=http://www.adobe.com/go/adc_css_layouts">http://www.adobe.com/go/adc_css_layouts</a>。您可以先删除这些注释，然后启动您的站点。若要了解有关这些 CSS 布局中使用的方法的更多信息，请阅读 Adobe 开发人员中心上的以下文章：<a href=http://www.adobe.com/go/adc_css_layouts">http://www.adobe.com/go/adc_css_layouts</a>。</p>
<h2>清除方法</h2>
<p>由于所有列都是浮动的，因此，此布局在 .footer 规则中采用 clear:both 声明。此清除方法强制使 .container 了解列的结束位置，以便显示在 .container 中放置的任何边框或背景颜色。如果您的设计要求您从 .container 中删除 .footer，则需要采用其它清除方法。最可靠的方法是在最后一个浮动列之后（但在 .container 结束之前）添加 <br class="clearfloat" /> or <div class="clearfloat"></div>。这具有相同的清除效果。</p>
<h3>徽标替换</h3>
<p>此布局的 .header 中使用了图像占位符，您可能希望在其中放置徽标。建议您删除此占位符，并将其替换为您自己的链接徽标。 </p>
<p> 请注意，如果您使用属性检查器导航到使用 SRC 字段的徽标图像（而不是删除并替换占位符），则应删除内嵌背景和显示属性。这些内嵌样式仅用于在浏览器中出于演示目的而显示徽标占位符。 </p>
<p>要删除内嵌样式，请确保将 CSS 样式面板设置为“当前”。选择图像，然后在“CSS 样式”面板的“属性”窗格中右键单击并删除显示和背景属性。（当然，您始终可以直接访问代码，并在其中删除图像或占位符的内嵌样式。）</p>
<h4>背景</h4>
<p>本质上，任何 div 中的背景颜色将仅显示与内容一样的长度。这意味着，如果要使用背景颜色或边框创建侧面列的外观，将不会一直扩展到脚注，而是在内容结束时停止。如果 .content div 将始终包含更多内容，则可以在 .content div 中放置一个边框将其与列分开。</p>
<!-- end .content --></div>
<div class="footer">
<p>此 .footer 包含声明 position:relative，以便为 .footer 指定 Internet Explorer 6 hasLayout，并使其以正确方式清除。如果您不需要支持 IE6，则可以将其删除。</p>
<!-- end .footer --></div>
<!-- end .container --></div>
</body>
</html>
更多的布局方式和代码设计可以参考 Dreamweaver cs6 的模板文件。
四、Ajax 中文乱码的解决方案
Ajax 不支持多种字符集，其默认的字符集是 utf-8，因此在应用 ajax 时 应及时进行编码转换，否则程序就会出现乱码。一般情况下，有以下两种情况会产生中文乱码问题。
1、发送路径中的参数有中文，在服务器段接收参数值时产生乱码，如：
var url="a.jsp?wishMan=小李"；
xmlHTTP.open ("post",url,true);
将数据提交到服务器有两种方法， 一种是 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-吧，如下：
String wishMan = request.getParameter(“wishMan”);
out.println(“祝福对象：" + new String(wishMan.getBytes(“ISO-8859-1”),"utf-8“));//解决中文乱码
2、返回到 responseText 或 responseXML 的值中包含中文时会产生乱码
在接收responseText 或 responseXML 的值时，如果包含中文，则需要将其转换为 gbk 或 gb2312 编码，并且将显示该值页面的编码格式设置为 gbk 或 gb2312，否则会产生乱码。
jsp页面可以如下设置：
<%@ page contenttype="text/html;charset=gb2312%>
html页面可以如下设置：
<meta http-equiv="content-type" content="text/html; charset=gb2312" />
servlet 则可以如下设置：
response.setcontenttype("text/html;charset=gb2312");
request.setcharacterencoding("gb2312");
转载于:https://blog.51cto.com/peiquan/1312907
开放原子开发者工作坊旨在鼓励更多人参与开源活动，与志同道合的开发者们相互交流开发经验、分享开发心得、获取前沿技术趋势。工作坊有多种形式的开发者活动，如meetup、训练营等，主打技术交流，干货满满，真诚地邀请各位开发者共同参与！
更多推荐
1
0- 0
已为社区贡献15条内容
所有评论(0)