从手动实现web开发到借助IDEA实现web开发的具体流程分析,详细介绍webapp的目录结构和web站点的欢迎页面的设置

使用Tomcat手动实现WEB开发

实现静态的web应用(没有java小程序)

第一步：找到CATALINA_HOME\webapps目录(Tomcat服务器要求所有的web应用都要放到webapps目录下, 这样它才能找到你的web应用)

第二步：在CATALINA_HOME\webapps目录下新建一个oa的子目录(oa就是你这个webapp的名字/项目名/webapp应用的根)

第三步：在oa目录下新建一个静态资源文件如index.html

第四步：执行bin目录下的startup.bat命令文件 , 启动Tomcat服务器

第五步：打开浏览器在地址栏上输入URL：http://127.0.0.1:8080/oa/index.html

• Tomcat服务器会在它管理的的所有web项目中找到oa项目中的index.html文件，并且将这个index.html文件中的内容直接输出响应到浏览器上(代码)

实现动态的web应用(有java小程序)

第一步：在CATALINA_HOME\webapps目录下新建一个crm的子目录(oa就是你这个webapp的名字/项目名/webapp应用的根)

第二步：在crm目录下新建一个WEB-INF目录(目录的名字是Servlet规范中规定的)

第三步：在WEB-INF目录下新建一个classes目录(目录名固定) , 用来存放Java程序编译之后的class文件

第四步：在WEB-INF目录下新建一个lib目录(目录名固定) , lib目录不是必须的, 但一个web应用依赖第三方的jar包的话就要放到这个目录下

第五步：在WEB-INF目录下新建一个web.xml配置文件(文件名固定), 用来描述请求路径和Servlet类之间的对照关系

不建议手写web.xml文件的模板 , 最好从其他的webapp中复制粘贴

<web-app xmlns="https://jakarta.ee/xml/ns/jakartaee"
  xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
  xsi:schemaLocation="https://jakarta.ee/xml/ns/jakartaee
                      https://jakarta.ee/xml/ns/jakartaee/web-app_5_0.xsd"
  version="5.0"
  metadata-complete="true">
    
web-app>

第六步：编写一个Java程序必须实现Servlet接口(JavaEE的规范中的一员), 需要导入Servlet的相关类所在的jar包

• 编写Java程序的源代码的位置可以任意，你只需要将java源代码编译之后的class文件放到classes目录下即可

第七步：配置环境变量CLASSPATH指定路径加载class文件让我们导入的包生效 , 保证编写的HelloServlet的可以编译通过 ,和Tomcat服务器的运行没有关系

• 配置环境变量CLASSPATH: CLASSPATH=.;C:\dev\apache-tomcat-10.0.12\lib\servlet-api.jar (从当前路径和指定路径加载class文件)

第八步：将编译成功之后的HelloServlet.class文件拷贝到WEB-INF\classes目录下

package com.bjpowernode.servlet;

//这些类都不是JDK中的jar包 , 需要通过classpath环境变量告诉虚拟机从哪加载这些类 
import jakarta.servlet.Servlet;
import jakarta.servlet.ServletException;
import jakarta.servlet.ServletRequest;
import jakarta.servlet.ServletResponse;
import jakarta.servlet.ServletConfig;
import java.io.IOException;
import java.io.PrintWriter;
//实现Servlet接口中的五个方法
public class HelloServlet implements Servlet{
    // 5个方法
    public void init(ServletConfig config) throws ServletException{

    }
    public void service(ServletRequest request,ServletResponse response)
        throws ServletException , IOException{
        // 向控制台打印输出
        System.out.println("My First Servlet, Hello Servlet");
        
         // 设置响应的内容类型是普通文本或html代码
        // 需要在获取流对象之前设置，有效。
        response.setContentType("text/html");

        // 怎么将一个信息直接输出到浏览器上？
        // 需要使用ServletResponse接口：response
        // response表示响应：从服务器向浏览器发送数据叫做响应。
        PrintWriter out = response.getWriter();

        // 设置响应的内容类型时不要在获取流之后设置。
        //response.setContentType("text/html");

        out.print("Hello Servlet, You are my first servlet!");

        // 浏览器是能够识别html代码的，那我们是不是应该输出一段HTML代码呢？
        out.print("
hello servlet，你好Servlet
");

        // 这是一个输出流，负责输出字符串到浏览器
        // 这个输出流不需要我们刷新，也不需要我们关闭，这些都由Tomcat来维护。
        /*
		out.flush();
		out.close();
		*/
    }

    public void destroy(){

    }

    public String getServletInfo(){
        return "";
    }

    public ServletConfig getServletConfig(){
        return null;
    }
}

第九步：在web.xml文件中编写配置信息，指定“请求路径”和“Servlet类名”的对照关系

标签名	功能
servlet父标签	描述Servlet程序的信息
servlet-name子标签	指定Servlet程序的名字(Servler的名字是唯一的)
servlet-class子标签	指定Servlet程序的全类名 (用于Tomcet服务器利用反射机制创建对象)
servlet-mapping父标签	描述Servlet的请求映射路径(servlet和请求路径之间是一一对应的)
url-pattern子标签	指定这个Servlet程序对应的请求路径 (这个请求路径必须以 “/” 开始 , 且不带项目名)

在web.xml文件中注册Servlet类

<web-app xmlns="https://jakarta.ee/xml/ns/jakartaee"
  xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
  xsi:schemaLocation="https://jakarta.ee/xml/ns/jakartaee
                      https://jakarta.ee/xml/ns/jakartaee/web-app_5_0.xsd"
  version="5.0"
  metadata-complete="true">

	
	<servlet>
		<servlet-name>fdsafdsagfdsafdsaservlet-name>
		
		<servlet-class>com.bjpowernode.servlet.HelloServletservlet-class>
	servlet>

	
	<servlet-mapping>
		
		<servlet-name>fdsafdsagfdsafdsaservlet-name>
		
		<url-pattern>/fdsaurl-pattern>
	servlet-mapping>
web-app>

第十步：启动Tomcat服务器 , 然后打开浏览器在地址栏上输入一个URL: http://127.0.0.1:8080/crm/fdsa

• 浏览器上的请求路径不能随便写，这个请求路径必须和web.xml文件中的url-pattern一致 , 并且浏览器上的请求路径带项目名/crm

当浏览器地址栏上编写的路径太复杂时，可以访问HTML页面通过超链接发起请求 (html页面只能放到WEB-INF目录外面)

• 前端的请求路径都以“/”开始的并且带有项目名(等价于在地址栏上发起请求)

DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>index pagetitle>
    head>
    <body>
        
        <a href="/crm/fdsa">Hello Servleta>
    body>
html>

使用集成开发环境实现WEB开发

集成开发工具很多，其中目前使用比较多的是IntelliJ IDEA和Eclipse

• IntelliJ IDEA(居多): JetBrain公司开发的收费软件, IDEA在提示功能方面要强于Eclipse使用起来更加智能更好用
• Eclipse(较少):Eclipse是IBM团队开发的, Eclipse寓意是“日食”(日是SUN公司), 但是2009年的时候SUN公司被Oracle公司并购了

使用IDEA实现WEB开发

第一步: New Project(如创建一个Empty Project空工程) —> New Module(如在该空工程下新建一个普通的JavaSE模块/基于Maven的Java Enterprise模块)

• 这个Empty Project起名为javaweb(一般情况下新建的Project的名字最好和目录的名字一致）
• 这个Module起名servlet01, 然后自动会被放在javaweb的project下面

第二步: 如果新建的是普通的JavaSE模块需要变成符合webapp规范的JavaEE模块(这样IDEA才会自动给你生成一个符合Servlet规范的webapp的目录结构)

• 在Module上右键Add Framework Support(添加框架支持), 在弹出的窗口中选择Web Application默认是4.0版本
• IDEA根据Web Application模板生成一个web目录/webapp的根(例如代表webapps目录中的一个oa项目)
• Web Application生成的资源中有index.jsp文件可以选择删除这个index.jsp文件

第三步：编写HelloServlet实现Servlet接口, 实现jakarta.servlet.Servlet接口中的5个方法(需要导入Servlet.class文件所在的jar包)

• 将CATALINA_HOME/lib/servlet-api.jar 和jsp-api.jar添加到IDEA的classpath当中
• File–>Project Structrue(设置工程结构)–>Modules–>Dependencies --> 点击 " + "添加依赖 --> Add JARS(添加单独的jar包)/ Add Libraries (添加整个库的jar包)
• Modules SDK 换成对应的jdk版本 , 在File -> settings -> Java compile设置jdk版本

//这些类都不是JDK中的jar包,需要通过classpath环境变量告诉虚拟机从哪加载这些类 
import jakarta.servlet.Servlet;
import jakarta.servlet.ServletException;
import jakarta.servlet.ServletRequest;
import jakarta.servlet.ServletResponse;
import jakarta.servlet.ServletConfig;
import java.io.IOException;
import java.io.PrintWriter;

public class HelloServlet implements Servlet{
    //实现jakarta.servlet.Servlet接口中的5个方法
}

第四步：在Servlet当中的service方法中编写业务代码(我们这里实现连接数据库的功能)

• 由于连接数据库需要第三方的jar包 , 此时需要在WEB-INF目录下新建一个lib子目录用来存放连接数据库的驱动所在的jar包

public class HelloServlet implements Servlet{
	public void init(ServletConfig config) throws ServletException{
	}
	public void service(ServletRequest request,ServletResponse response) throws ServletException , IOException{
        // 设置响应的内容类型
		response.setContentType("text/html");
		PrintWriter out = response.getWriter();

		// 编写JDBC代码，连接数据库，查询所有学生信息。
		Connection conn = null;
		PreparedStatement ps = null;
		ResultSet rs = null;
		try{
			// 注册驱动 
			Class.forName("com.mysql.cj.jdbc.Driver");
			// 获取连接
			String url = "jdbc:mysql://localhost:3306/bjpowernode";
			String user = "root";
			String password = "root";
			conn = DriverManager.getConnection(url,user,password);
			// 获取预编译的数据库操作对象
			String sql = "select no,name from t_student";
			ps = conn.prepareStatement(sql);
			// 执行SQL
			rs = ps.executeQuery();
			// 处理查询结果集
			while(rs.next()){
				String no = rs.getString("no");
				String name = rs.getString("name");
				//将查询到的信息输出到浏览器
				out.print(no + "," + name + "
");
			}
		}catch(Exception e){
			e.printStackTrace();
		}finally{
			// 释放资源
			if(rs != null){
				try{
					rs.close();
				}catch(Exception e){
					e.printStackTrace();
				}
			}
			if(ps != null){
				try{
					ps.close();
				}catch(Exception e){
					e.printStackTrace();
				}
			}
			if(conn != null){
				try{
					conn.close();
				}catch(Exception e){
					e.printStackTrace();
				}
			}
		}
	}
	public void destroy(){
	
	}
	public String getServletInfo(){
		return "";
	}
	public ServletConfig getServletConfig(){
		return null;
	}
}

第五步：在WEB-INF目录下的web.xml文件中完成StudentServlet类的注册(指定请求路径和Servlet之间对应关系)

<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">
    <servlet>
        <servlet-name>studentServletservlet-name>
        <servlet-class>com.bjpowernode.javaweb.servlet.StudentServletservlet-class>
    servlet>
    <servlet-mapping>
        <servlet-name>studentServletservlet-name>
        <url-pattern>/servlet/studenturl-pattern>
    servlet-mapping>
web-app>

第六步：在HTML页面中编写一个超链接，用户点击超链接时发送请求，Tomcat服务器接受请求执行后台的HelloServlet程序

• 这个html文件只能放到WEB-INF目录外面不能放到WEB-INF目录里面

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>student pagetitle>
head>
<body>
    
    <a href="/xmm/servlet/student">student lista>
body>
html>

第七步：让IDEA工具关联Tomcat服务器 , 关联的过程当中IDEA会将开发web项目部署到Tomcat服务器的webapps目录下

• 点击IDEA工具右上角绿色小锤子的右边有一个Add Configuration选项 , 在弹出的窗口中点击左上角 " + " 然后添加Tomcat Server到local(本地)
• 配置Server服务器的相关参数: URL, JRE的版本(与jdk版本对应) ,服务器的名字/安装包/启动时的行为/代码改动时的行为
• IDEA中改完Servelt的源代码后默认需重启服务器 , 如果不想重启服务器需要配置更新字节码文件时自动重启Tomcat服务器
• 配置服务器的Deployment部署的相关参数: 点击 " + " 然后添加 Artifact指定要部署的web项目 , Application context指定web应用的根/项目名

第八步：使用右上角有绿色的箭头或者绿色的小虫子(debug模式)的方式启动Tomcat服务器

第九步：打开浏览器在地址栏上输入http://localhost:8080/xmm/student.html访问Tomcat服务器上的xmm项目下的资源

WEB开发的细节

webapp的目录结构

Tomcat中WEB-INF目录下的资源是受保护的 , 在浏览器上不能够通过路径直接访问否则会出现404错误

• HTML、CSS、JS、image等静态资源一定要放到WEB-INF目录之外

webapproot(oa/crm)
       |--WEB-INF
       		  |------classes(存放字节码)
       		  |------lib(第三方jar包)
       		  |------web.xml(注册Servlet)
       |--html
       |--css
       |--javascript
       |--image
       ....

设置web站点的欢迎页面

其实对于一个webapp来说是可以设置它的欢迎页面的, 当访问这个web站点是如果没有指定具体的资源路径此时默认会访问你设置的欢迎页面

• http://localhost:8080/servlet06/login.html这种访问方式是指定了要访问的就是login.html资源
• http://localhost:8080/servlet06这种访问方式没有指定具体的资源路径 , 默认访问你设置的欢迎页面
• 设置欢迎页面的时候，路径不需要以“/”开始, 默认就是从webapp的根下开始查找

手动设置欢迎页面, 一个webapp可以设置多个欢迎页面的(配置时越靠上的优先级越高 , 找不到的继续向下找)

• 第一步：我在IDEA工具的web目录下新建了一个login.html文件
• 第二步：在web.xml配置文件中的welcome-file标签中配置默认访问的资源(在这个地方配置的属于局部配置）
• 第三步：启动服务器，打开浏览器在地址栏上输入地址http://localhost:8080/servlet06

<welcome-file-list>
    <welcome-file>login.htmlwelcome-file>
welcome-file-list>


<welcome-file-list>
    <welcome-file>page1/page.htmlwelcome-file>
welcome-file-list>


<welcome-file-list>
    <welcome-file>page1/page2/page.htmlwelcome-file>
    <welcome-file>login.htmlwelcome-file>
welcome-file-list>

Tomcat服务器默认配置的全局欢迎页面index.html, index.htm, index.jsp,若文件名设置为这些的时候, 不需要在手动进行配置默认就会访问这些资源

• 第一步：我在IDEA工具的web目录下新建了一个index.html文件
• 第二步: 在CATALINA_HOME/conf/web.xml文件中进行配置(这个文件中的配置属于全局配置),配置文件的生效原则是局部配置优先原则(就近原则)
• 第三步：启动服务器，打开浏览器在地址栏上输入地址http://localhost:8080/servlet06

<welcome-file-list>
    <welcome-file>index.htmlwelcome-file>
    <welcome-file>index.htmwelcome-file>
    <welcome-file>index.jspwelcome-file>
welcome-file-list>

欢迎页就是一个资源，可以是静态资源index.html welcome.html，也可以是动态资源如Servlet程序

• 第一步：写一个Servlet
• 第二步：在web.xml配置文件中配置Servlet的请求路径和欢迎页对应的Servlet的路径
• 第三步：启动服务器，打开浏览器在地址栏上输入地址http://localhost:8080/servlet06

public class WelcomeServlet extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        response.setContentType("text/html");
        PrintWriter out = response.getWriter();
        out.print("
welcome to bjpowernode!
");
    }
}

<servlet>
    <servlet-name>welcomeServletservlet-name>
    <servlet-class>com.bjpowernode.javaweb.servlet.WelcomeServletservlet-class>
servlet>

<servlet-mapping>
    <servlet-name>welcomeServletservlet-name>
    <url-pattern>/fdsaurl-pattern>
servlet-mapping>

<welcome-file-list>
    <welcome-file>fdsawelcome-file>
welcome-file-list>