本人联系QQ 67666938
Email perfectxiong@gmail.com
这2个星期主要就在做网页，也了解到了许多新知识，比如VML：专门用来在浏览器上画矢量图，javascript 不说了，客户端程序，和Jsp相对的。
Css层叠样式表：用来美化网页的咯，没有计算和逻辑关系。
设计网站之前，我们要注意，前面我们用的cgi文件是在apache服务器里面配置了，但是我们现在要把cgi放到tomcat里面，怎么配置呢? 2个地方
1 E:"Program Files"Tomcat 6.0"conf"web.xml
加上这一段
<servlet>
<servlet-name>cgi</servlet-name>
<servlet-class>org.apache.catalina.servlets.CGIServlet</servlet-class>
<init-param>
<param-name>debug</param-name>
<param-value>0</param-value>
</init-param>
<init-param>
<param-name>passShellEnvironment</param-name>
<param-value>true</param-value>
</init-param>
<init-param>
<param-name>cgiPathPrefix</param-name>
<param-value>WEB-INF/cgi-bin</param-value>
//E:"ProgramFiles"Tomcat 6.0"webapps"ROOT"WEB-INF
</init-param>
<init-param>
<param-name>executable</param-name>
<param-value>cmd /c</param-value> //表示是C语言的CGI，如果是linux里面不能用因为linux不支持 cmd命令
</init-param>
<load-on-startup>5</load-on-startup>
</servlet>
//这段注释也去掉
<servlet-mapping>
<servlet-name>cgi</servlet-name>
<url-pattern>/cgi-bin/*</url-pattern>
</servlet-mapping>
还要修改E:"Program Files"Tomcat 6.0"conf"context.xml
<Context privileged="true">
<WatchedResource>WEB-INF/web.xml</WatchedResource>
</Context>
这样就可以再tomcat中WEB-INF/cgi-bin目录下使用cgi了
如果是linux系统有几个地方不一样
1 reg.jsp中的 in.readLine(); 的个数不一样，根据我的实际经验要少2个readLine才能匹配
2 web.xml中 <param-value>cmd /c</param-value> 要换乘 /bin/sh –c 表示Linux下c的编译
3 cgi 的源文件要重新编译，换成 hello.cpp文件 然后在linux下编译 g++ hello.cpp –o hello.cgi 就可以了。
注意（本项所有数据库操作都封装在probean里面 具体看前面的 不再累赘）
网页界面如下（见下面一点）：
用户登录，管理员登陆，用户注册 3个index!
管理员登陆后显示（见下面一点）：
注意整个窗口分为上，下，中 3个Frame 组成，这个网页对应的html叫做main.html 分成上中下3个框架。
<frameset >
<frame src="mainpage/top.html" name="topFrame" />
<frame src="mainpage/center.html" name="mainFrame" />
<frame src="mainpage/down.html" name="bottomFrame" />
</frameset>
center.html 里面又用< iframe >标签把这个网页分成了左右2个子页。
<body>
<table width="100%" height="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<iframe name="left" src="left.html"></iframe></td>
<iframe name="right" src="right.html"></iframe></td> //注意这个name下面要用
</tr>
</table>
</body>
左边left.html就是上图中灰色的管理员控制台。点击它上面的按钮右边的网页right.html就会显示相应的数据。
下面来看看如何控制的，代码在left.html里面
<body>
<h1>管理控制台</h1>
<ul id="globalNav"> //这个标签表示树形结构
<li><a href="#">用户管理</a>
<ul><li><a href="/web/jsp/admin.jsp" target="right" />管理员用户管理</li>
</ul>
</li>
</ul>
这样当你点击管理员用户管理的时候，就会跳转到/web/jsp/admin.jsp，显示在target="right" 看到了吗。就是上面标注的右边的名字，然后就是jsp的事了，不说啦，无非就是读取数据库，验证权限，修改数据等等，唯一要注意的就是session属性，
session.setAttribute("type",type);
这样在response.sendRedirect("/web/main.html");
之后就可以调用type = (String)session.getAttribute("type");取出数据了。
注意转的网址不能为带IP的网址，response.sendRedirect("http://172.16.2.14:8080/web/main.html");，这样session失效。(相当于关闭网页又重新打开能不是失效吗)
具体自己看源码。
网页制作教程.chm 这本书很好，推荐一下，里面包括了CSS JavaScript html 3个的入门 非常简单易懂！
要在子框架（例如top.html）里实现main的刷新用
<a href="../jsp/logout.jsp" target="_parent">注销</a> _parent表示父窗口就是main.jsp
接下来说这个网站的设计知识点。先来看看最新的功能情况
1: 首先是登陆啦！
处理用户登录的是cheak.jsp
其中有代码
<jsp:useBean id="onlineuser" class="packet.onLineUser" scope="application"/>
session.setAttribute("id",adminid); //保存adminid的内容到session的id字段中，供注销使用
session.setMaxInactiveInterval(50); // 设置超时时间为50喵
session.setAttribute(id,onlineuser); //执行这个会自动调用下面java类中的valueBound（）方法， id就等于下面的e.getName()，onlineuser为类名，这样我们就为下面类里的users添加了一个新元素
用户登陆网站时，系统为他生成独一无二的Session对象，用以记录该用户个人信息。一旦该用户退出网站，那么该session对象将会被自动注销。每个用户服务器端都为他保留了一个session
这个jsp要用到一个新的javabean，叫onLineUser.java，内容如下
可参看http://topic.csdn.net/t/20041111/19/3544851.html
package packet; //包名，位于 "Tomcat 6.0"webapps"ROOT"WEB-INF"classes"packet"onLineUser.java
import javax.servlet.http.*;
import javax.servlet.*;
import java.util.*;
public class onLineUser implements HttpSessionBindingListener { //要实现这个接口HttpSessionBindingListener，监听session
public onLineUser(){ }
private Vector users=new Vector(); //保存在线的用户ID信息，这个类在第一次运行的是很被加载，这个变量就是全局变量
public int getCount(){ //返回在线用户总数
users.trimToSize();
return users.capacity(); }
public boolean existUser(String userName){ //判断用户是否存在了
users.trimToSize();
boolean existUser=false;
for (int i=0;i<users.capacity();i++ )
{ if (userName.equals((String)users.get(i))) { existUser=true; break; } }
return existUser; }
public boolean deleteUser(String userName) { //删除用户 注销时候调用
users.trimToSize();
if(existUser(userName)){
int currUserIndex=-1;
for(int i=0;i<users.capacity();i++){
if(userName.equals((String)users.get(i))){
currUserIndex=i;
break;
} }
if (currUserIndex!=-1){
users.remove(currUserIndex);
users.trimToSize();
return true;
} }
return false; }
public Vector getOnLineUser(){ return users; } //获得在线用户
public void valueBound(HttpSessionBindingEvent e) {//创建session（session.setAttribute(id,onlineuser)）则执行valuebound方法
users.trimToSize();
if(!existUser(e.getName())){
users.add(e.getName());
System.out.print(e.getName()+""t 登入到系统"t"+(new Date()));
System.out.println(" 在线用户数为："+getCount());
}else
System.out.println(e.getName()+"已经存在");
}
public void valueUnbound(HttpSessionBindingEvent e) { //超时的时候自动调用
users.trimToSize();
String userName=e.getName();
deleteUser(userName);
System.out.print(userName+""t 退出系统"t"+(new Date()));
System.out.println(" 在线用户数为："+getCount());
}
}
有登陆就有注销把，为logout.jsp
String username=(String)session.getAttribute("id"); //获得以前保存的id值
onlineuser.deleteUser(username); //删除用户
统计在线人数
<%Vector vt=onlineuser.getOnLineUser();
Enumeration d = vt.elements();
while(d.hasMoreElements()){
out.print( (String)d.nextElement());
} %>
2：管理员用户管理
我在所有要显示的jsp脚本里都加上了这段代码
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title></title> //无标题
<style type="text/css"> //接下来是段CSS代码
<!--
body { //这里定义了html body 的样式，这样我们在接下来用<body>的时候就会自动调用这里的参数了
margin-left: 3px;
margin-top: 0px;
margin-right: 3px;
margin-bottom: 0px;
background-image: url(images/bg_background.jpg);
}
.STYLE1 { //html里可以这样调用 <th class="STYLE1">这样th中的颜色字体就定了
color: #e1e2e3; // p,h1 {color: red} 这样以后调用<p>或者<h1>标签就是红色
font-size: 12px; //p em{color: red} 自定义<P>中可以使用<em>标签代表红色
}
--></style>
<script> //javascript 代码段 放在<head>中则不执行等待调用，放在body中则执行
var highlightcolor='#d5f4fe';
var clickcolor='#51b2f6';
function changeto(){ //2个改变颜色的函数 我还没看懂
source=event.srcElement; //事件源
if (source.tagName=="TR"||source.tagName=="TABLE") //如果事件源是 <tr>或者<table>标签则返回，意思就是在html中有<tr onclick=” changeto()”> 则点击这个tr上就会调用change()函数。
return;
while(source.tagName!="TD")
source=source.parentElement;
source=source.parentElement; //事件源为包在他上面一层标签。
cs = source.children;
//alert(cs.length);
if (cs[1].style.backgroundColor!=highlightcolor&&source.id!="nc"&&cs[1].style.backgroundColor!=clickcolor)
for(i=0;i<cs.length;i++){
cs[i].style.backgroundColor=highlightcolor;
}
}
function changeback(){
if (event.fromElement.contains(event.toElement)||source.contains(event.toElement)||source.id=="nc")
return
if (event.toElement!=source&&cs[1].style.backgroundColor!=clickcolor)
//source.style.backgroundColor=originalcolor
for(i=0;i<cs.length;i++){
cs[i].style.backgroundColor="";
}
}
</script>
Html中这样调用
<table onmouseover="changeto()" onmouseout="changeback()">
其他的我看了看还真没什么好说的了。还有mysql的支持那是必不可少的了。
其他知识点：
<IMG alt="还未显示" src=" 1.gif" style="filter:Alpha (opacity=90)">
Alt表示图片没有显示的时候显示的文字，style="filter:Alpha (opacity=90)"这句表示使用滤镜Alpha透明度为90% 如果设为0则完全透明。Alpha还可以为其他的分别可以使图片模糊翻转，阴影，边缘产生类似发光等效果
非常有用！因为用这些滤镜可以使文字图片变得好看炫目。
6.28更新几个知识点：
(1) <script language="javascript">
function go(){document.location.href = "group_info.jsp"; }
</script> //go函数定义
<script>setTimeout(go,1000); </script> //1秒后自动跳转到group_info.jsp
(2)
<script>
function sbmt(name){
document.f1.action="applygroup.jsp?action="+name; //将传入的参数一起传给下个Jsp
f1.submit(); //等同与form的提交（submit）按钮
}
</script> //定义函数
<input type="button" name="1" onclick="sbmt('1');" value="申请加入该群"> //点击之后调用函数，并传入参数1
(3)
var send_id = document.getElementById('send_id').value; //获得id=send_id 的值
var a = "?value="+temp+"&send_id="+send_id+"&recv_id="+recverid;
document.location.href = "ptop_sendmsg.jsp"+a; //重定位，立刻跳转到ptop_sendmsg.jsp参数为a
（4） 下面都是Js的
window.setTimeout(“fun()”,3000); 每3秒运行fun()函数
window.setTimeout(“alert(警告！);”,3000); 每3秒弹出一次警告框
document.getElementById(“id”); 通过Id获得文本值！
使用history对象的back和forward方法可以实现和浏览器提供的后退和前进
history.back()
history.forward()
刷新 location.reload(loadType) ;