JavaWeb学习-Tomcat系列-3-JavaWeb应用目录结构和Eclipse上手动发布项目到Tomcat

末蓝、 2022-02-04 23:04 211阅读 0赞

我也是第一次学习JavaWeb的内容，发现很多培训机构的视频教程都是在讲如何用MyEclipse这个商业插件来进行JavaWeb的学习。由于我个人平时工作中的开发都是采用Eclipse，所以我一直有一个习惯，不去随便安装非开源的软件。而且我在Eclipse上下载官方网站，也有针对JavaWeb开发的版本。所以，我个人打算继续使用Eclipse去学习JavaWeb。

**1.下载Eclipse for web开发版本**

浏览器打开Eclipse官方网站[https://www.eclipse.org/downloads/packages/][https_www.eclipse.org_downloads_packages]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTE1NDE5NDY_size_16_color_FFFFFF_t_70][]

如果你也是通过Eclipse来学习JavaWeb,那么你就得下载红圈这个Eclipse版本。

**2.新建一个Web项目**

打开Eclipse, 点击File-> New-> 创建一个动态Web项目

![20190503192101679.png][]

输入一个项目名称，点击New Runtime，我们来配置本地的Tomcat服务器。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTE1NDE5NDY_size_16_color_FFFFFF_t_70 1][]

这里，我选择Apache Tomcat 8.5, 因为我本地下载的Tomcat版本就是apache-tomcat-8.5.40。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTE1NDE5NDY_size_16_color_FFFFFF_t_70 2][]

剩下的就点击finish知道项目创建结束。创建好的空白动态web项目如下

![20190503192627763.png][]

**3.Eclipse上JavaWeb应用的目录结构**

![20190503192101709.png][]

这里我们详细来看看每一个文件夹的作用是什么。我介绍我们用的文件夹，不介绍的就是不是重点，例如Eclipse自动产生的配置文件等。

**第一个src文件夹。**

我们清楚，我们的java代码都写在这个文件夹下，这里我们来写一个Hello Web的java代码。在src下新建一个com.anthony.demo包，然后新建一个Hello.java

package com.anthony.demo;
    
    public class Hello {
    
       public static void main(String[] args) {
    
          System.out.println("Hello JavaWeb!");
    
       }
    
    }

**第二个build文件夹**

其实我前面写Hello.java就是为了介绍build的文件夹，这个文件夹有什么作用呢。我们src下全部源码文件编译之后产生的class文件都放这里。例如一个web项目，我们上线，我们只需要把编译之后的class文件部署就行，并不需要源码文件。为什么我们在Project Expoler窗口在build下看不到有class文件呢？我们去另外一个视图就可以看到。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTE1NDE5NDY_size_16_color_FFFFFF_t_70 3][]

点击Other，输入过滤单词Navi, 打开Navigator窗口。

![20190503192101726.png][]

在Navigator展开build可以看到一个classes文件夹，里面也有和src包结构一样的路径下有对应的class文件。

![20190503192101728.png][]

**第三个WebContent文件夹**

回到Project Explorer视图，点击展开WebContent文件夹。这个文件夹非常重要，里面主要放一些我们前端写的html, css样式文件和，javascript文件。然后WEB-INF文件夹下的lib文件夹是用来存放我们写代码过程中用到的依赖jar包。例如JDBC, 你要连接mysql数据库，你就要放一个Mysql-connect-xx.jar文件在这里，Web项目自动帮你配置build path，你在src下java文件就可以直接引用相关接口或者对象。

文件夹WebContent下的META-INF文件夹以及里面文件，其实没啥用，我们完全可以不管它。

**4.手动发布项目到tomcat**

下面来演示创建一个html文件，创建一个css文件和创建一个js文件，然后发布到tomcat服务器，浏览器打开观察访问页面效果。

**4.1 创建一个html文件**

选择WebContent文件夹，鼠标右键，选择创建一个HTML文件。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTE1NDE5NDY_size_16_color_FFFFFF_t_70 4][]

这个123.html文件是和WEB-INF处于同一级的目录下。Html内容，我们就写了一个hello在P标签里。

**4.2 创建一个css文件**

这里我们在WebContent文件夹右键，新建一个文件夹，名称叫css，然后在css文件夹下新建一个test.css文件

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTE1NDE5NDY_size_16_color_FFFFFF_t_70 5][]

我们回到123.html文件，添加引用test.css样式文件，让Hello红色显示。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTE1NDE5NDY_size_16_color_FFFFFF_t_70 6][]

**4.3 创建一个js文件**

在WebContent文件夹右键菜单新建一个叫js的文件夹，在js文件夹下新建一个test.js文件

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTE1NDE5NDY_size_16_color_FFFFFF_t_70 7][]

回到123.html文件，添加引用js文件的代码

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTE1NDE5NDY_size_16_color_FFFFFF_t_70 8][]

这里贴一个完整123.html内容

<!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title>Insert title here</title>
    <link href="css/test.css" type="text/css" rel="stylesheet">
    <script type="text/javascript" src="js/test.js"></script>
    </head>
    <body>
    	<p>Hello</p>
    </body>
    </html>

**5.手动发布项目到tomcat**

**5.1 拷贝Eclipse项目下WebContent文件夹下内容到Tomcat**

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTE1NDE5NDY_size_16_color_FFFFFF_t_70 9][]

切换到Tomcat下webapps文件夹，新建一个文件夹，随便一个名称，我新建名称是hello,然后把上一个步骤拷贝文件夹黏贴到hellow文件夹下。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTE1NDE5NDY_size_16_color_FFFFFF_t_70 10][]

**5.2 启动Tomcat服务**

在Tomcat安装目录下bin文件夹， cmd中输入startup.bat，等待几秒，tomcat服务器启动之后，打开浏览器，输入地址[http://localhost:8080/hello/123.html][http_localhost_8080_hello_123.html]

**5.3 打开效果**

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTE1NDE5NDY_size_16_color_FFFFFF_t_70 11][]

先看到一个alert弹窗，点击确定之后，可以看到Hello这个红色字体显示。

![20190503192101857.png][]

[https_www.eclipse.org_downloads_packages]: https://www.eclipse.org/downloads/packages/
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTE1NDE5NDY_size_16_color_FFFFFF_t_70]: /images/20220205/3179f60357fb4c1fa8a6c7dbac0c1c1f.png
[20190503192101679.png]: /images/20220205/20fe61f419e8439ab6be94130736c422.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTE1NDE5NDY_size_16_color_FFFFFF_t_70 1]: /images/20220205/c6f11bff407d4086b7db9dd49c284b7a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTE1NDE5NDY_size_16_color_FFFFFF_t_70 2]: /images/20220205/2888a9e61f1e4f2ba1685f0c6f657fe6.png
[20190503192627763.png]: /images/20220205/bb987417ccdd427abc73ff2d866d0a05.png
[20190503192101709.png]: /images/20220205/f27b2371466e48a4935459561eaf4af9.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTE1NDE5NDY_size_16_color_FFFFFF_t_70 3]: /images/20220205/c12a6c196a504678924bdb784d594b3c.png
[20190503192101726.png]: /images/20220205/585e4523a7ed491d87e2d39c5edc5241.png
[20190503192101728.png]: /images/20220205/7fa3c01b082648f299c977245ef0a4fa.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTE1NDE5NDY_size_16_color_FFFFFF_t_70 4]: /images/20220205/845099f77e824afeb19f9b35dbe23ba8.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTE1NDE5NDY_size_16_color_FFFFFF_t_70 5]: /images/20220205/3b543e344c64482dbe6f4f36f8f9961b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTE1NDE5NDY_size_16_color_FFFFFF_t_70 6]: /images/20220205/ee8d2be1377e4dfca9e2e1789aacf8e7.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTE1NDE5NDY_size_16_color_FFFFFF_t_70 7]: /images/20220205/33515d7aa89a42bfb623e2838fa31e60.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTE1NDE5NDY_size_16_color_FFFFFF_t_70 8]: /images/20220205/77cb95b7828f42d29a62027d07011c5e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTE1NDE5NDY_size_16_color_FFFFFF_t_70 9]: /images/20220205/1735657b75ca480d8f2ca22a3a2991f5.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTE1NDE5NDY_size_16_color_FFFFFF_t_70 10]: /images/20220205/9057a63fd2844e16979183a9a614033c.png
[http_localhost_8080_hello_123.html]: http://localhost:8080/hello/123.html
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTE1NDE5NDY_size_16_color_FFFFFF_t_70 11]: /images/20220205/70c11d97ac0346819fdb94276af84774.png
[20190503192101857.png]: /images/20220205/9a90cd7416ef4fe4a5949b70198e4f4d.png