前端:Tomcat服务器部署Web项目

文章目录

          • 1.1 C/S架构
          • 1.2 B/S架构
          • 2.1 服务器
          • 2.2 常见服务器
          • 3.1 Tomcat安装
          • 3.2 Tomcat使用
          • 3.3 Tomcat配置
          • 3.4 Tomcat项目部署
          • 4.1 Servlet技术
          • 4.2 Servlet配置
          • 4.3 配置测试
          • 4.4 Servlet部署
          • 5.1 IDEA部署

1.1 C/S架构

Client / Server客户端/服务器

客户端作为独立程序 图形效果较好 但维护困难。

1.2 B/S架构

Browser / Server 浏览器/服务器

直接在浏览器中输入网址访问

服务器端完成升级后 浏览器能够直接访问获取

但浏览器不能够承载过大的资源 故页面效果等体验不如客户端

2.1 服务器

Web服务器是运行及发布Web应用的容器,只有将开发的Web项目放置在该容器中,才能使网络中的所有用户通过浏览器进行访问。

2.2 常见服务器
  • Tomcat(主流Web服务器之一,适合初学者)
  • jetty
  • resin (速度非常快)
3.1 Tomcat安装

官网:Apache Tomcat® - Apache Tomcat 10 Software Downloads

完成下载后直接进行解压缩 注意文件路径 最好不要有中文名。

前端:Tomcat服务器部署Web项目_第1张图片

bin文件夹下有服务器的管理文件

前端:Tomcat服务器部署Web项目_第2张图片

webapps 项目部署文件 最初存放了一些示例文件

前端:Tomcat服务器部署Web项目_第3张图片

3.2 Tomcat使用

双击bat文件

前端:Tomcat服务器部署Web项目_第4张图片

出现命令行端口 且保持开启状态

若此处命令行运行后界面直接关闭 需要检查JAVA_HOME配置是否正确

检查方式:在命令行输入java 看看是否是可执行命令

前端:Tomcat服务器部署Web项目_第5张图片

此处出现乱码是因为Tomcat的编码方式需要修改

进入浏览器 访问Apache Tomcat/9.0.31

观察到如下界面 则Tomcat开启成功
前端:Tomcat服务器部署Web项目_第6张图片

双击bat文件 终止Tomcat运行

前端:Tomcat服务器部署Web项目_第7张图片

此时再对Apache Tomcat/9.0.31进行访问 将不能观察到内容

3.3 Tomcat配置

端口号是我们访问程序的唯一标识 默认为8080

能够在conf文件夹下的server.xml中修改

前端:Tomcat服务器部署Web项目_第8张图片

前端:Tomcat服务器部署Web项目_第9张图片

使用记事本打开 修改port值 完成Tomcat的重启后

就能够成功修改默认端口号。

前端:Tomcat服务器部署Web项目_第10张图片

同理 其他属性的配置也能够通过修改该文本内容来完成。

3.4 Tomcat项目部署

在webapps文件夹下创建项目文件

前端:Tomcat服务器部署Web项目_第11张图片

项目文件下需要WEB-INF文件夹与你将要访问的html文件

前端:Tomcat服务器部署Web项目_第12张图片

WEB-INF文件夹下

前端:Tomcat服务器部署Web项目_第13张图片

web.xml可以从root下复制 其他都是空文件夹

  • 访问 :http://localhost:8080/firstweb/first.html
  • 协议 :http
  • 域名或主机名:locallhost
  • 端口号:8080
  • 项目路径:firstweb/first.html

从而在toncat看见我们编写的first.html页面

前端:Tomcat服务器部署Web项目_第14张图片

若项目路径选择错误 将会出现“资源不存在”错误。

4.1 Servlet技术
  • 服务器端的程序(代码、功能实现) 可交互的处理客户端发送到服务端的请求 并完成操作响应。
  • 一种动态网页技术
  • JavaWeb程序开发的基础
4.2 Servlet配置

找到lib文件路径下的servlet-api.jar包

前端:Tomcat服务器部署Web项目_第15张图片

将其路径保存

追加在系统的环境变量 Classpath

前端:Tomcat服务器部署Web项目_第16张图片

4.3 配置测试

创建MyServlet.java文件

//简单Servlet示例
import javax.servlet.Servlet;
import javax.servlet.ServletConfig;
import javax.servlet.ServletRequest;
import javax.servlet.ServletResponse;
import javax.servlet.ServletException;
import java.io.IOException;

public class MyServlet implements Servlet{
    public void init(ServletConfig config) throws ServletException{
    }
public void service(ServletRequest request,ServletResponse response) throws ServletException,IOException{
		System.out.println("My First Servlet");
}

public void destroy(){
}

public ServletConfig getServletConfig(){
		return null;
}	

public String getServletInfo(){
		return null;
}
}

首先要确保java javac版本一致

前端:Tomcat服务器部署Web项目_第17张图片

我的版本均为1.8.0_312

若发现二者不一致 是因电脑中安装了不同版本的JDK

删除不同JDK 或者 调整path路径 将某一版本JDK的bin路径放置在前列

在命令行对上述JAVA文件进行编译

前端:Tomcat服务器部署Web项目_第18张图片

前端:Tomcat服务器部署Web项目_第19张图片

同文件夹下出现.class后缀的编译文件

则表明Servlet环境配置成功。

4.4 Servlet部署

将class文件放置在之前建立的classes文件夹下

前端:Tomcat服务器部署Web项目_第20张图片

配置web.xml文件


<web-app xmlns="http://xmlns.jcp.org/xml/ns/javaee"
  xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
  xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee
                      http://xmlns.jcp.org/xml/ns/javaee/web-app_4_0.xsd"
  version="4.0"
  metadata-complete="true">


<servlet>
    <servlet-name>MyServletservlet-name>
    <servlet-class>MyServletservlet-class>
servlet>




    
<servlet-mapping>
    <servlet-name>MyServletservlet-name>
    <url-pattern>/myservleturl-pattern>
servlet-mapping>
    
web-app>

尽管当前没有内容 但访问时未报404或500等错误

500意味着Servlet代码存在错误 包括版本不兼容等等

表明Servlet成功部署

前端:Tomcat服务器部署Web项目_第21张图片

System.out.println语句在控制台打印输出

前端:Tomcat服务器部署Web项目_第22张图片

若修改Java文件 需要重新编译与重启Tomcat服务器

5.1 IDEA部署

我们发现重新编写代码后,需进行重新编译,移动文件,重启服务等操作,时间成本较高昂。

我们将Servlet环境部署在IDEA开发工具中 从而便于我们之后的开发。

IDEA 创建新项目

前端:Tomcat服务器部署Web项目_第23张图片

选择Enterprise项目 Name可以自主修改

前端:Tomcat服务器部署Web项目_第24张图片

前端:Tomcat服务器部署Web项目_第25张图片

在Web-INF文件夹下存放如下文件

在这里插入图片描述

将lib添加为依赖 作为我们项目的库

前端:Tomcat服务器部署Web项目_第26张图片

配置Tomcat

前端:Tomcat服务器部署Web项目_第27张图片

部署项目

前端:Tomcat服务器部署Web项目_第28张图片

前端:Tomcat服务器部署Web项目_第29张图片

点击下方菜单中的执行 IDEA自主运行Tomcat服务器

前端:Tomcat服务器部署Web项目_第30张图片

自动打开的浏览器界面

前端:Tomcat服务器部署Web项目_第31张图片

你可能感兴趣的:(开发,tomcat,服务器,前端)