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

时间 2019-11-17

标签 java web 实例使用 web.xml xml index.jsp index jsp 构造首页栏目 Java 繁體版

原文原文链接

若有侵权请联系删除

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

/(ㄒoㄒ)/~~因为是个博客新手，这篇博客以前写的没有保存，如今都没了。好想哭~~~~~html

如今只好重新开头！！！这个故事告诉咱们：写完了要保存！！写完了要保存！！写完了要保存！！（重要的事要说三遍）前端

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

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

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

1.建立java web项目

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

1.1建立index.jsp文件

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

index.jsp中我根据http://www.cnblogs.com/skyblue-li/p/5902712.html作了一个类似的首页。网页展现以下图：ui

index.jsp的代码以下：具体的代码不在解释，我是根据上面的连接作的。不懂请参照连接。url

<%@ 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的错误，若是找到了，则执行相应的文件。