java web实例之使用web.xml及index.jsp构造首页

时间：2024-03-06 16:42:06

如有侵权请联系删除

http://www.cnblogs.com/skyblue-li/p/5902712.html

/(ㄒoㄒ)/~~由于是个博客新手，这篇博客之前写的没有保存，现在都没了。好想哭~~~~~

现在只好从新开头！！！这个故事告诉我们：写完了要保存！！写完了要保存！！写完了要保存！！（重要的事要说三遍）

最近在导师的指导下看了一点java web前端的内容。就想着为我可怜的博客数量贡献一下，因此有了这篇博客(*^__^*) 嘻嘻……

这篇博客主要是理一下各个文件应该存放的位置，即存放在哪里才能正常运行，否则不运行。

完成内容：创建一个网页首页，点击首页中的相关链接进行跳转。

1.创建java web项目

使用eclipse创建一个java web项目，不知道怎么创建的童鞋请自行百度。不在此多说。此web项目中，有两个重要的文件夹：一个是src文件夹，用于存放java的.calss文件，另一个是WebContent文件，用于存放各种jsp等文件。我的web项目的名称为FirstWebFontEnd。

1.1创建index.jsp文件

在创建了web项目后，在WebContent目录下创建index.jsp文件（同上，不知道怎么创建jsp文件的请自行百度）。在创建的文件中将“ISO-8859-1“改为“utf-8”，一共有三处。创建好了index.jsp文件后，我的web项目的目录结构如下图：

index.jsp中我根据http://www.cnblogs.com/skyblue-li/p/5902712.html做了一个相似的首页。网页展示如下图：

index.jsp的代码如下：具体的代码不在解释，我是根据上面的链接做的。不懂请参照链接。

<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>首页</title>
<style>
    *{
    padding:0;
    margin:0;
    font-family:"微软雅黑";
}
.header{
    height:72px;
    background:#458fce ;
}
.header .logo{
    color:#fff ;
    line-height:70px;
    font-size:30px;
    margin-left:20px;
    display:inline-block;
    text-align:center;

}
a {
    color: #fff ;
    text-decoration: none ;
}
.header .login{
    float:right;
    color:#fff ;
    line-height:72px;
    margin-right:2px;
    display:inline-block;
}
.banner{
    height:380px;
    overflow:hidden;
    background: #ddd;
}
</style>
</head>
<body>
    <div class="header">
        <div class="logo">web实践</div>
        <div class ="login">
            <a href ="javascript:void(0)">登录</a>
            <span>|</span> 
            <a href ="javascript:void(0)">故事</a>
        </div>
    </div>
</body>
</html>

web项目是通过web.xml配置来识别index.jsp文件的。web.xml的配置如下：

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://java.sun.com/xml/ns/javaee" xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_3_0.xsd" id="WebApp_ID" version="3.0">
  <display-name>FirstWebFontEnd</display-name>
  <welcome-file-list>
    <welcome-file>index.html</welcome-file>
    <welcome-file>index.htm</welcome-file>
    <welcome-file>index.jsp</welcome-file>
    <welcome-file>default.html</welcome-file>
    <welcome-file>default.htm</welcome-file>
    <welcome-file>default.jsp</welcome-file>
  </welcome-file-list>
</web-app>

上述xml文件的意思是系统从上往下挨个检查上述index.html->index.htm->....文件，找到了就执行相应的文件，没找到就继续往下找，直到找到为止。

另外：http://localhost:8080/FirstWebFontEnd/是web项目的首页。显示的就是WebContent目录下index.jsp文件中的内容（xml从index.html开始查找文件，直到index.jsp才找到相应的文件，从而执行相应的内容，并且不再往下查找。）如果WebContent目录下没有<welcome-file>中包含的所有文件，则会报404的错误。

下图是移除index.jsp文件后的执行效果：

每一个web项目在访问项目名的url时，如果在WebContent下没有找到相应的文件，则会出现404的错误，如果找到了，则执行相应的文件。