This is the 17th day of my participation in the August Challenge

This section describes the structure and construction process of a simple Java Web application.

Before we learn a simple Tomcat: Tomcat server introduction and directory structure, Tomcat server. XML configuration file details, Tomcat knowledge is the foundation of learning Java Web, we must understand about it! Now let’s get serious about Java Web applications. This time we’ll learn how to create a simple Web application.

1 Static Web application

Simple static Web application structure is very simple, is a variety of static resource methods can be accessed under the Web application directory. Let’s try to create a static Web application:

  1. Create a Hello directory under Webapps. This means that our Web application directory is Hello and the virtual access path is hello.
  2. Create index. HTML in hello directory;

The contents of index.html are as follows:

<html>
  <head>
    <title>hello</title>
  </head>
  <body>
    <h1> Hello ,This is a static web application!</h1>
  </body>
</html>
Copy the code
  1. Create a directory a under hello.
  2. Create an A.HTML in the hello\a directory.

A. HTML is as follows:

<html>
  <head>
    <title>hello</title>
  </head>
  <body>
    <h1><font color=red>a.html</font></h1>
  </body>
</html>
Copy the code

After Tomcat is started, static resources for creating static Web applications can be accessed.

Open a browser access to http://localhost:8080/hello/index.html, you can access to the index. The HTML resources.

accesshttp://localhost:8080/hello/a/a.html, you can access to a.h HTML resources.

As you can see, we only need to find the path of static resources in the Web application to access the corresponding resources. In addition, if you access a directory directly, the resource named “index” under that directory will be accessed by default, so access directlyhttp://localhost:8080/hello, also can access to the index. The HTML resources. If a directory has the index HTML resources, then directly to http://localhost:8080/hello/a.

2 Dynamic Web applications

Nowadays, Web applications are dynamic Web applications, which are generally composed of multiple static Web resources (such as HTML, CSS, JS files) and multiple dynamic Web resources (such as Jsp files, servlets).

An important feature of dynamic Web applications is the addition of a WEB-INF directory in the Web application directory (in fact, static Web applications can also be configured). This directory contains a web.xml file, which is the deployment descriptor file for the Web application and is used to configure various properties of the Web application, such as the welcome page, servlet, filter, listener, etc., although you do not need to configure the web application if the project is simple. In addition, this directory typically includes the classes directory, where SRC files are stored (Java files have been compiled as class files), and the Lib directory, where the dependent JAR packages of the project run time are stored.

Java Web application directory structure is generally as follows:

webapps

| – hello1 (project name)

| – index. HTML

| – WEB – INF the directory of resources security, foreign cannot be accessed directly. It can be accessed by jumping

| – web. XML current engineering master configuration file

| – classes to store files under the SRC, Java source files have been compiled to class files

| – lib engineering run time jar file

Of course, in order to distinguish between various files, you can also create a special directory. In addition, this directory is only the most basic and original dynamic Web application directory, when we learn maven or Spring Boot, the application directory will change a lot!

Let’s create a simple dynamic Web application:

  1. Create hello1 project directory in webapps;
  2. Create hello. JSP dynamic resource file under webapps\hello1\, which can dynamically display the client browser information;
<%@ page contentType="text/html; charset=UTF-8" %><html>
    <head>
        <title>hello1.html</title>
    </head>
    <body>
        <h1>hello1</h1>
        <! -- Dynamic display of client browser information -->
        <h3>${header['User-Agent']}</h3>
    </body>
</html>
Copy the code
  1. Create a web-INF directory under webapps\hello1\;
  2. Create web. XML under webapps\hello1\ web-INF \ and configure the default welcome page to hello.jsp

      
<web-app version="2.5"
	xmlns="http://java.sun.com/xml/ns/javaee"
	xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
	xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd">
	
	<! Welcome page -->
	 <welcome-file-list>
    	<welcome-file>hello.jsp</welcome-file>
  	</welcome-file-list>
</web-app>
Copy the code

Start tomcat, open the browser to access http://localhost:8080/hello1, at this time will be based on the configuration of the default welcome page access to our configuration hello. The JSP page, if we use a different browser to access, we will find that the page will display different information, This is a dynamic Web resource.

Work/Catalina/localhost/hello1 = work/Catalina/localhost/hello1 = work/Catalina/localhost/hello1

If we open the Java source file, we will see that the HTML text displayed by the browser is dynamically concatenated in the Java source file:

3 Configuring hosts (Virtual Hosts)

Host allows a tomcat server to access different Web applications using different domain names 1.1. (virtual Host).

Let’s create a new myhost project directory in another directory (G: work host in my case) and add an index.html file to the project:

<html>
  <head>
    <title>myhost</title>
  </head>
  <body>
    <h1> Hello ,My Host is myhost.com!</h1>
  </body>
</html>
Copy the code

Then configure server.xml and add a Host tag to Engine:

<! -- Host name myhost.com -->
<Host name="myhost.com" appBase="G:\work\host"
     unpackWARS="true" autoDeploy="true">
</Host>
Copy the code

In C:\Windows\System32\drivers\etc, add the domain name mapping to the hosts file:

# temporary domain name mapping 127.0.0.1 myhost.comCopy the code

Start Tomcat and access the Web application myhost.com:8080/myhost/

4 Idea Creating a Web application

Here we use Idea + JAR package to create a basic Java Web application, Idea is the most popular enterprise project development tool. In fact, jar packages are not required, and are managed directly using Maven. For beginners, there is a primitive way to manually introduce JAR packages in the enterprise. In the latest version of Idea2020, the Web Application + JAR package under Java Enterprise for creating Web projects has been removed and only Maven can be used. To do this, we had to start with a plain Java project, which works for almost all versions.

Select File-new-Project to create a new project, select Java on the left, and click Next:

Click next:

Configure the project name and project address, and click Finish:

We have now created a normal Java project:

To start the transformation, go to File-Project Structure

Select Modules, click the + above, and select Web:

Click on the Create an Artifact

Click Apply, click OK:

Here comes the familiar directory for Web applications:

Select Web, right click, and select New-jsp /JSPX:

Set name to index:

A JSP file is automatically created to write something:

Click Add Configuration, click +, and select Tomcat Server

Click Local, and the local Tomcat configuration interface appears:

Click Configure, click the folder to the right of Tomcat Home, select a local decompressed Tomcat directory, and click OK:

Local tomcat is now configured:

Then configure the default browser:

Select the location of the local browser in Path and click OK

Click Fix to automatically select the deployed Web application. Click Apply and click Ok:

Application Context as the virtual context path of the Web Application, access to the Application’s resources must be added, you can modify!

You can also manually add by clicking On Deployment, +, or Artifact:

At this point, a very simple Web application and Tomcat are configured. Select Web Application, right click, and select Run

After tomcat is started, Idea will jump to the configured browser welcome page:

5 Create a Maven Web application

Next, create a Maven-based Java Web application. Select file-new-project as follows:

Enter the project name and address and click Next:

To configure the Maven address, click Finish:

Idea already helped us create the basic project structure:

Next create the source path and the resource path:

In the main Directory, right click new-directory:

High version of Idea has intelligent prompts, we can directly choose, no other operations!

If not, create your own Java and Resources directories:

Make Directory as-sources Root:

Make Directory as – resources Root:

The final structure is as follows:

Java directory as source directory, resources as resources directory, then configure the same Tomcat server to access!

6 Configure the Tomcat plug-in

In fact, we can import tomcat plug-ins directly through Maven, eliminating the need to configure a local Tomcat server. We added tomcat7 plugins to pom.xml:

<build>
    <finalName>mavenWeb</finalName>
    <pluginManagement>
        <plugins>
            <plugin>
                <groupId>org.apache.tomcat.maven</groupId>
                <artifactId>tomcat7-maven-plugin</artifactId>
                <version>2.2</version>
            </plugin>
            <plugin>
                <artifactId>maven-compiler-plugin</artifactId>
                <version>3.8.0</version>
            </plugin>
        </plugins>
    </pluginManagement>
    <plugins>
        <! -- Tomcat plugin control -->
        <plugin>
            <groupId>org.apache.tomcat.maven</groupId>
            <artifactId>tomcat7-maven-plugin</artifactId>
            <configuration>
                <! -- Port control -->
                <port>8080</port>
                <! - project path control means http://localhost:8080/mavenWeb-- >
                <path>/mavenWeb</path>
                <! - - - >
                <uriEncoding>UTF-8</uriEncoding>
            </configuration>
        </plugin>
        <! Maven plugin control -->
        <plugin>
            <groupId>org.apache.maven.plugins</groupId>
            <artifactId>maven-compiler-plugin</artifactId>
            <configuration>
                <source>1.8</source>
                <target>1.8</target>
                <encoding>utf-8</encoding>
            </configuration>
        </plugin>
    </plugins>
</build>
Copy the code

Then select the project, Maven-Reload Project, and Reload the project

Then go to maven-plugins-tomcat7 on the right side of the project and double-click tomcat7: Run:

At this point, you can start the project by configuring the Tomcat plug-in without having to configure the local Tomcat server!

Visit http://localhost:8080/mavenWeb, you can see the welcome page! In enterprise development, this is also how we typically start traditional Java Web projects, rather than configuring a local Tomcat server!

The following learning we also through the Tomcat plug-in way to learn!

If you need to communicate, or the article is wrong, please leave a message directly. In addition, I hope to like, collect, pay attention to, I will continue to update a variety of Java learning blog!