Tomcat 安装和简单介绍

目录

Tomcat是什么?

Tomcat下载安装

Tomcat目录介绍

 Tomcat 启动

 在 Tomcat 上部署静态页面

1.部署单个 HTML

2.部署 HTML到单独的目录 


Tomcat是什么?

        Tomcat 是一个HTTP服务器!

        我们在开发项目时,需要实现一个服务器来搭建网站的“后端部分”,这个服务器本质上就是写个 TCP socket,写起来会有很多重复的工作,比较麻烦。

        所以,业界就有一些大佬,实例了一些现成的 HTTP 服务器供我们使用,我们再进行开发网站,就不必从头去写了,只需要基于这些 http 服务器,进行二次开发即可。

        而这个服务器就是 Tomcat。

Tomcat下载安装

    Tomca下载链接: Tomcat官网   

     Tomcat 有很多版本,不同的版本适配的 JDK、Servlet、JSP的版本不同,我们可以根据下面的表来选择我们要下载 Tomcat 的版本。

一般情况都不必下载最新版本的,这里我选择的是 Tomcat 8。

 Tomcat 8 和 JDK8、Servlet3.1 这些版本都是适配的

            

        我们点击对应的版本号后,滑到页面最下,选择 Core: 下的zip 下载即可 

 

Tomcat 是传说中的绿色软件,直接解压缩就可以使用。

注意解压缩路径最好不要带中文!!

Tomcat目录介绍

       针对 Tomcat 目录解压缩之后,就可以到如下结构。下面介绍我们应该重点关注的文件夹目录

 1.bin目录  内存放一些可执行的程序,其主要是tomcat 的启动脚本

        想要启动Tomcat的话,需要点击内部 start 命名的文件(会有两个)

  • .bat 是给 windows 启动脚本
  • .sh 是给linux、mac 启动的脚本

Tomcat 是运行在 JVM 上的,是跨平台的,因此用一个程序既可以在Windows上运行,可以在linus上运行。

 2.conf目录 放的是 Tomcat 的配置文件,需要我们注意的文件是 server.xml,这里可以配置 Tomcat绑定哪个端口,以及 Tomcat 是否启用 https等

 3. logs 内放置的是 Tomcat 的日志(sout 打印的信息)

当我们写个程序出错了,我们可以去日志中查找出错原因

 

 4.webapps  存放我们想要部署的网站 (非常重要

每个文件夹都对应着一个 web 应用 , 可以在浏览器中分别访问每个 web 应用

 Tomcat 启动

点击 bin 目录下,start命名的文件即可启动

windows 点击 .bat结尾  linux、mac 点击 .sh 结尾

      如果我们看到 startuo in ??? ms 信息,就说明运行成功 

 

注意: Windows 上通过 cmd 方式启动 Tomcat 会出现乱码. 但是不影响 Tomcat 的使用.

乱码的原因是 Tomcat 默认按照 UTF-8 的编码方式处理中文 . windows cmd 默认是 GBK 编码.

此时,我们在浏览器中输入 127.0.0.1:8080 就可以看到 Tomcat 的默认欢迎页面 (注意:刚才通过cmd 或终端打开的页面不能关闭,否则就访问不了)

 启动失败常见的情况

     我们把 start.bat 拉到 cmd 窗口中,会显示报错信息

1. Tomcat 安装路径带中文,换个没中文路径的目录下即可

2. 下面这种情况,我们需要配置一个环境变量,叫 CATALINA_HOME 

 打开控制面板,搜索环境变量,然后创建环境变量

    变量名:CATALINA_HOME   变量值:安装Tomcat 的路径 例如D:\Apache Tomcat\apache-tomcat-8.5.83

 3. 端口号被占:Tomcat启动是会默认绑定 8080 和 8005 端口,如果这两个端口被占就会导致Tomcat启动失败。此时,我们在命令行使用 netstat -ano | findstr 8080 确认看8080是否被其他进行绑定,把对方进程干掉,在重新启动 Tomcat 就可以解决问题。

在 Tomcat 上部署静态页面

1.部署单个 HTML

我们可以把自己写好的 HTML部署到 Tomcat 中

     ① 创建 HelloWorld.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    body {
      display: flex;
      justify-content: center;
      align-items: center;
    }

    p {
      font-weight: 600;
      font-size: 100px;
    }
  </style>
</head>

<body>
  <p>Hello World</p>
</body>

</html>

      ② 把 HelloWorld.html 拷贝到 Tomcat webapps/ROOT 目录中

   ③ 在浏览器中通过 URL http://127.0.0.1:8080/hello.html 来访问

先启动Tomcat(点击 start命名的文件)

 2.部署 HTML到单独的目录

       实际开发中我们的 HTML 可能不止一个, 依赖的 CSS / JavaScript 文件也可能比较多。 这个时候就不适合 全都拷贝到 webapps/ROOT 目录中了 ( 这就会显的比较乱 )。我们可以创建一个单独的目录, ROOT 并列, 来存放我们要部署的内容。 
 ①  webapps 中创建目录  Tree  ROOT 目录并列
 ②  创建 index.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ChirstmasTrees</title>
    <style>
        *{
            padding: 0;
            margin: 0;
            list-style:none;
        }
        body{
            display: flex;
            height: 100vh;
            justify-content: center;
            align-items: center;
            background-color: rgb(54,66,70);
        }
        .tree{
            position: relative;
            width: 500px;
            height: 700px;
            display: flex;
            justify-content: center;
        }
        .start{
            width: 50px;
            height: 50px;
            position: absolute;
            background-color: rgb(236,234,167);
            z-index: 999;
            margin-bottom: 40px;
            clip-path: polygon(50% 0,65% 40%,100% 40%,72% 60%,
                                85% 100%,50% 75%,15% 100%,28% 60%,0 40%,35% 40%);                    
        }
        .tree li{
            position: absolute;
            top:25px;
            width: 2px;
            background: linear-gradient(rgba(46,204,113,0),rgba(46,204,113,.25));
            transform-origin: 50% 0;
            animation:swing 4s ease-in-out infinite;
            height: calc(var(--i)*4px);
            animation-delay: calc(var(--i)*-0.23s);
        }
        @keyframes swing{
            0%,
            100%{
                transform: rotate(-30deg);
            }
            5%,45%{
                opacity: 0.25;
            }
            0%,45%,100%{
                opacity: 1;
            }
            50%{
                transform: rotate(30deg);
            }
        }

        .tree li::before{
            content: '';
            position: absolute;
            left:-1px;
            bottom: 1px;
            width: 3px;
            height: 3px;
        }
        .tree li:nth-child(4n)::before{
            background-color: #d8334a;
        }
        .tree li:nth-child(4n+1)::before{
            background-color: #ffce54;
        }
        .tree li:nth-child(4n+2)::before{
            background-color: #2ecc71;
        }
        .tree li:nth-child(4n+3)::before{
            background-color: #5d9cec;
        }

    </style>
</head>
<body>
    <ul class="tree">
        <dis class="start"></dis>
    </ul>
</body>
<script>
    let tree = document.querySelector('.tree');
    for(let i = 0;i<128;i++){
        let li = document.createElement('li');
        li.style="--i:"+i;
        tree.appendChild(li);
    }
</script>
</html>
③在浏览器中通过  http://127.0.0.1:8080/Tree/index.html  访问

 

  • 4
    点赞
  • 7
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 2
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

爱躺平的威威

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值