为了账号安全，请及时绑定邮箱和手机立即绑定
首页 手记 JAVA Web项目教程：从零开始搭建你的第一个Web应用

JAVA Web项目教程：从零开始搭建你的第一个Web应用

标签：
Java WebApp Spring
概述

本文提供了详细的JAVA Web项目教程，涵盖了从环境搭建到项目部署的全过程。内容包括Java Web开发环境的搭建、常用开发工具的使用、Web应用的基本结构和数据库操作等。此外，文章还介绍了MVC架构和Spring MVC的实际应用，以及前端技术的基础知识。最后，文章详细讲解了项目部署和调试的技巧。

Java Web开发基础

Java Web开发环境搭建

Java Web开发环境包含了一系列的软件工具和库，用于创建和部署Web应用程序。以下步骤将指导你如何搭建Java Web开发环境。

1. 安装Java开发工具包（JDK）

首先，你需要安装Java开发工具包（JDK），这是编写和运行Java应用程序的基础。

# 设置环境变量
export JAVA_HOME=/path/to/jdk
export PATH=$JAVA_HOME/bin:$PATH

2. 安装Web服务器（Tomcat）

Tomcat是Java的一个开源Web服务器，常用于开发和测试Java Web应用程序。

export CATALINA_HOME=/path/to/tomcat
  • 启动Tomcat
    启动Tomcat服务器，可以通过bin/startup.sh脚本启动。
cd $CATALINA_HOME/bin
./startup.sh

常用开发工具介绍

开发Java Web应用程序通常需要使用集成开发环境（IDE）来提高开发效率。以下是几个常用的IDE工具：

1. Eclipse

Eclipse是一款免费且开源的IDE，支持多种编程语言，包括Java。

2. IntelliJ IDEA

IntelliJ IDEA是一款商业化的IDE，提供全面的开发工具和功能。

Web应用的基本结构

Java Web应用程序通常由以下几部分组成：

1. Web应用的目录结构

一个基本的Java Web应用程序通常包含以下目录结构：

WebRoot
|-- WEB-INF
    |-- classes
    |-- lib
    |-- web.xml

  • WebRoot
    应用程序的根目录，包含所有的HTML、CSS、JavaScript文件，以及静态资源文件。

  • WEB-INF
    包含Web应用程序的配置文件和类文件。lib目录用于存放第三方库，classes目录用于存放编译后的.class文件。

  • web.xml
    应用程序的部署描述符文件，用于配置Servlet、过滤器（Filter）、监听器（Listener）等。

2. 配置文件web.xml

web.xml文件是Web应用程序的配置文件，位于WEB-INF目录下。以下是web.xml文件的基本结构：

<web-app>
    <display-name>MyFirstWebApp</display-name>
    <description>My First Web Application</description>

    <servlet>
        <servlet-name>MyServlet</servlet-name>
        <servlet-class>com.example.MyServlet</servlet-class>
    </servlet>

    <servlet-mapping>
        <servlet-name>MyServlet</servlet-name>
        <url-pattern>/myServlet</url-pattern>
    </servlet-mapping>
</web-app>

  • servlet
    配置Servlet的名称和实现类。

  • servlet-mapping
    配置要映射的URL路径。
Servlet与JSP入门

Servlet的基本概念和使用

Servlet是Java平台上的一个服务器端组件，用于扩展Web服务器的功能，提供动态Web内容。

1. Servlet的生命周期

Servlet的生命周期包括三个主要阶段：初始化（Initialization）、服务（Service）、销毁（Destruction）。

  • 初始化
    当Servlet被加载到容器中时，会调用init()方法进行初始化。

  • 服务
    当客户端请求Servlet时，容器会调用service()方法处理请求。

  • 销毁
    当Servlet不再被使用时，容器会调用destroy()方法进行清理。

2. 编写Servlet

以下是一个简单的Servlet示例代码：

package com.example;

import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

@WebServlet("/myServlet")
public class MyServlet extends HttpServlet {
    private static final long serialVersionUID = 1L;

    public MyServlet() {
        super();
    }

    @Override
    protected void doGet(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
        response.setContentType("text/html");
        response.getWriter().println("<h1>Hello, World!</h1>");
    }
}

  • @WebServlet("/myServlet")
    使用@WebServlet注解定义Servlet的URL路径。

  • doGet()
    处理HTTP GET请求。

JSP的基础语法和标签

JSP（JavaServer Pages）是Java平台上的动态Web内容技术，允许在HTML页面中嵌入Java代码。

1. JSP标签

JSP标签是一种特殊的标记，用于插入动态内容或执行特定的操作。

  • 脚本元素
    <% %>：Java代码段
    <%! %>：声明变量或方法
    <%= %>：输出表达式的值

  • 指令元素
    <%@ page %>：定义页面属性
    <%@ include %>：包含文件
    <%@ taglib %>：引入标签库

2. 编写JSP页面

以下是一个简单的JSP页面示例代码：

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>My First JSP Page</title>
</head>
<body>
    <h1>Welcome to My First JSP Page!</h1>
    <p>The current date is <%= new java.util.Date() %></p>
</body>
</html>

  • <%@ page %>`
    定义页面的属性，如语言和内容类型。

  • <%= new java.util.Date() %>
    输出当前日期。

Servlet与JSP的集成使用

在Java Web开发中，Servlet经常用于处理请求，而JSP页面则用于生成响应内容。

1. Servlet和JSP的协同工作

Servlet处理业务逻辑，而JSP页面负责生成动态的HTML页面。

  • Servlet处理请求
    Servlet处理客户端的请求，并调用相应的服务方法。

  • JSP生成响应
    Servlet将数据传递给JSP页面，JSP页面生成动态的HTML内容返回给客户端。

2. 示例代码

以下是一个简单的Servlet和JSP集成的示例：

Servlet代码：

package com.example;

import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

@WebServlet("/myServlet")
public class MyServlet extends HttpServlet {
    private static final long serialVersionUID = 1L;

    @Override
    protected void doGet(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
        request.setAttribute("message", "Hello, World!");
        request.getRequestDispatcher("/jspPage.jsp").forward(request, response);
    }
}

JSP页面代码：

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>JSP Page</title>
</head>
<body>
    <h1>${message}</h1>
</body>
</html>

  • request.getAttribute()
    Servlet将数据传递给JSP页面。

  • request.getRequestDispatcher()
    Servlet转发请求到JSP页面。
数据库连接与操作

JDBC连接数据库的基本方法

JDBC（Java Database Connectivity）提供了一组API用于在Java应用程序中连接和操作数据库。

1. JDBC连接数据库的基本步骤

  • 加载驱动
    加载数据库驱动类，建立与数据库的连接。

  • 建立连接
    建立到数据库的连接，使用DriverManager.getConnection()方法。

  • 执行SQL语句
    创建Statement对象或PreparedStatement对象执行SQL语句。

  • 处理结果集
    处理从数据库返回的结果集。

2. 示例代码

以下是一个简单的JDBC连接数据库的示例：

import java.sql.Connection;
import java.sql.DriverManager;
import java.sql.ResultSet;
import java.sql.Statement;

public class JdbcExample {
    public static void main(String[] args) {
        String url = "jdbc:mysql://localhost:3306/mydatabase";
        String user = "root";
        String password = "password";

        try {
            // 1. 加载驱动
            Class.forName("com.mysql.jdbc.Driver");

            // 2. 建立连接
            Connection conn = DriverManager.getConnection(url, user, password);

            // 3. 执行SQL语句
            Statement stmt = conn.createStatement();
            ResultSet rs = stmt.executeQuery("SELECT * FROM users");

            // 4. 处理结果集
            while (rs.next()) {
                System.out.println(rs.getString("name"));
                System.out.println(rs.getInt("age"));
            }

            // 关闭资源
            rs.close();
            stmt.close();
            conn.close();
        } catch (Exception e) {
            e.printStackTrace();
        }
    }
}

  • Class.forName("com.mysql.jdbc.Driver")
    加载MySQL数据库驱动。

  • DriverManager.getConnection(url, user, password)
    建立到数据库的连接。

3. 数据库操作的示例

以下是一个数据库操作的完整示例，包括插入、查询和删除操作：

import java.sql.Connection;
import java.sql.DriverManager;
import java.sql.PreparedStatement;
import java.sql.ResultSet;

public class DatabaseExample {
    public static void main(String[] args) {
        String url = "jdbc:mysql://localhost:3306/mydatabase";
        String user = "root";
        String password = "password";

        try (Connection conn = DriverManager.getConnection(url, user, password)) {

            // 插入操作
            insertData(conn, "John Doe", 30);

            // 查询操作
            queryData(conn);

            // 删除操作
            deleteData(conn, 123);
        } catch (Exception e) {
            e.printStackTrace();
        }
    }

    private static void insertData(Connection conn, String name, int age) throws Exception {
        String sql = "INSERT INTO users (name, age) VALUES (?, ?)";
        try (PreparedStatement stmt = conn.prepareStatement(sql)) {
            stmt.setString(1, name);
            stmt.setInt(2, age);
            stmt.executeUpdate();
        }
    }

    private static void queryData(Connection conn) throws Exception {
        String sql = "SELECT * FROM users";
        try (PreparedStatement stmt = conn.prepareStatement(sql);
             ResultSet rs = stmt.executeQuery()) {

            while (rs.next()) {
                System.out.println(rs.getString("name"));
                System.out.println(rs.getInt("age"));
            }
        }
    }

    private static void deleteData(Connection conn, int id) throws Exception {
        String sql = "DELETE FROM users WHERE id = ?";
        try (PreparedStatement stmt = conn.prepareStatement(sql)) {
            stmt.setInt(1, id);
            stmt.executeUpdate();
        }
    }
}

数据库连接池的概念与使用

数据库连接池是一种资源管理和优化技术，用于提高数据库操作的性能和效率。

1. 数据库连接池的优势

  • 减少连接创建和释放的时间
    数据库连接的创建和释放需要一定的时间，而连接池可以重用已有的连接，减少连接的创建和释放时间。

  • 提高资源利用率
    连接池可以管理多个数据库连接，确保数据库连接的高效利用。

  • 避免资源耗尽
    数据库连接池可以限制连接的数量，防止过多的连接导致资源耗尽。

2. 示例代码

以下是一个简单的数据库连接池的示例，使用HikariCP连接池：

import com.zaxxer.hikari.HikariConfig;
import com.zaxxer.hikari.HikariDataSource;

import java.sql.Connection;
import java.sql.ResultSet;
import java.sql.Statement;

public class HikariCPExample {
    public static void main(String[] args) {
        HikariConfig config = new HikariConfig();
        config.setJdbcUrl("jdbc:mysql://localhost:3306/mydatabase");
        config.setUsername("root");
        config.setPassword("password");
        config.setMaximumPoolSize(10);

        HikariDataSource dataSource = new HikariDataSource(config);

        try (Connection conn = dataSource.getConnection();
             Statement stmt = conn.createStatement();
             ResultSet rs = stmt.executeQuery("SELECT * FROM users")) {

            while (rs.next()) {
                System.out.println(rs.getString("name"));
                System.out.println(rs.getInt("age"));
            }
        } catch (Exception e) {
            e.printStackTrace();
        }
    }
}

  • HikariConfig
    配置连接池参数，如最大连接数和数据库URL。

  • HikariDataSource
    创建一个连接池数据源。
MVC架构的理解与应用

MVC架构的基本概念

MVC（Model-View-Controller）是一种软件架构模式，用于分离应用程序的不同组件。

1. MVC架构的组成

  • Model
    数据模型，负责应用程序的数据处理和业务逻辑。

  • View
    视图层，负责用户界面的展示，与用户交互。

  • Controller
    控制器，负责接收用户的请求，调用Model处理数据，并将结果传递给View展示。

2. MVC架构的优点

  • 分离关注点
    分离应用程序的不同组件，使代码更清晰、更易于维护。

  • 可重用性
    MVC架构使得组件可以重用，提高了开发效率。

  • 灵活性
    MVC架构使得不同组件之间解耦，便于进行扩展和修改。

Struts与Spring MVC简介

1. Struts简介

Struts是一个开源的MVC框架，用于开发Java Web应用程序。

  • Struts架构
    Struts使用ActionServlet作为控制器，ActionForm作为表单控制器，Action作为业务逻辑控制器。

  • Struts配置
    Struts配置文件struts-config.xml用于配置Action、Form Bean、Forward等。以下是一个简单的struts-config.xml配置示例：
<struts-config>
    <action-mapping>
        <action path="/hello" class="com.example.HelloAction">
            <forward name="success" path="/jspPage.jsp"/>
        </action>
    </action-mapping>
</struts-config>
  • Action类
    定义业务逻辑的Action类示例：
package com.example;

import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import org.apache.struts.action.Action;
import org.apache.struts.action.ActionForm;
import org.apache.struts.action.ActionForward;
import org.apache.struts.action.ActionMapping;

public class HelloAction extends Action {
    public ActionForward execute(ActionMapping mapping, ActionForm form, HttpServletRequest request, HttpServletResponse response) throws Exception {
        request.setAttribute("message", "Hello, World!");
        return mapping.findForward("success");
    }
}

2. Spring MVC简介

Spring MVC是一个基于Spring框架的MVC实现，用于开发Java Web应用程序。

  • Spring MVC架构
    Spring MVC使用DispatcherServlet作为控制器，HandlerMapping和HandlerAdapter用于处理请求，ViewResolver用于解析视图。

  • Spring MVC配置
    Spring MVC配置文件dispatcher-servlet.xml用于配置视图解析器、控制器等。以下是一个简单的dispatcher-servlet.xml配置示例：
<bean class="org.springframework.web.servlet.view.InternalResourceViewResolver">
    <property name="prefix" value="/WEB-INF/views/"/>
    <property name="suffix" value=".jsp"/>
</bean>

3. 实战：使用Spring MVC构建简单的Web应用

1. 创建Spring MVC项目

  • 新建Spring MVC项目
    使用IDE创建一个Spring MVC项目，配置DispatcherServlet。

  • 配置web.xml
    在web.xml文件中配置DispatcherServlet。
<web-app>
    <display-name>My First Spring MVC App</display-name>
    <description>My First Spring MVC Application</description>

    <servlet>
        <servlet-name>dispatcher</servlet-name>
        <servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class>
        <load-on-startup>1</load-on-startup>
    </servlet>

    <servlet-mapping>
        <servlet-name>dispatcher</servlet-name>
        <url-pattern>/</url-pattern>
    </servlet-mapping>
</web-app>

2. 配置Spring MVC配置文件

  • 配置视图解析器
    在Spring MVC配置文件中配置视图解析器，解析视图模板。
<bean class="org.springframework.web.servlet.view.InternalResourceViewResolver">
    <property name="prefix" value="/WEB-INF/views/"/>
    <property name="suffix" value=".jsp"/>
</bean>

3. 创建Controller

  • 创建Controller
    创建一个控制器类，使用@Controller注解标记为控制器。
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;

@Controller
@RequestMapping("/hello")
public class HelloController {
    @GetMapping("/world")
    @ResponseBody
    public String helloWorld() {
        return "Hello, World!";
    }
}

4. 创建视图

  • 创建JSP视图
    创建一个JSP页面，用于展示数据。
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Hello World JSP</title>
</head>
<body>
    <h1>${message}</h1>
</body>
</html>
  • 传递数据到视图
    在控制器方法中传递数据到视图。
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.servlet.ModelAndView;

@Controller
@RequestMapping("/hello")
public class HelloController {
    @GetMapping("/world")
    public ModelAndView helloWorld() {
        ModelAndView modelAndView = new ModelAndView("helloWorld");
        modelAndView.addObject("message", "Hello, World!");
        return modelAndView;
    }
}
  • 视图解析
    视图解析器将视图解析为实际的JSP文件路径。
前端技术基础

HTML和CSS的基本使用

HTML（HyperText Markup Language）是Web页面的结构语言，CSS（Cascading Style Sheets）是Web页面的样式语言。

1. HTML基础

  • 标签
    HTML使用标签定义内容，如<html>、<head>、<body>、<div>、<p>等。

  • 属性
    在标签中使用属性来定义一些行为，如id、class、src等。

2. 示例代码

以下是一个简单的HTML页面示例：

<!DOCTYPE html>
<html>
<head>
    <title>My First HTML Page</title>
</head>
<body>
    <h1>Welcome to My First HTML Page!</h1>
    <p>This is a paragraph.</p>
</body>
</html>

3. CSS基础

  • 选择器
    使用选择器定义样式，如element、#id、.class等。

  • 属性
    使用属性定义样式，如color、background-color、font-size等。

4. 示例代码

以下是一个简单的CSS样式示例：

body {
    background-color: #f0f0f0;
    font-family: Arial, sans-serif;
}

h1 {
    color: #333;
    font-size: 2em;
}

p {
    color: #666;
    font-size: 1.2em;
}

JavaScript基础与DOM操作

JavaScript是一种脚本语言，用于在Web页面上添加交互性。

1. JavaScript基础

  • 变量
    使用var、let或const声明变量。

  • 函数
    使用function定义函数。

  • DOM操作
    使用DOM（Document Object Model）操作Web页面的元素。

2. 示例代码

以下是一个简单的JavaScript示例，实现一个按钮点击事件：

<!DOCTYPE html>
<html>
<head>
    <title>My First JavaScript Page</title>
</head>
<body>
    <h1>Welcome to My First JavaScript Page!</h1>
    <button id="myButton">Click me!</button>

    <script>
        document.getElementById("myButton").addEventListener("click", function() {
            alert("Button clicked!");
        });
    </script>
</body>
</html>

使用前端框架（如Bootstrap）美化页面

Bootstrap是一个流行的前端框架，用于快速开发响应式Web页面。

1. 引入Bootstrap

  • 引入Bootstrap CSS
    在HTML页面中引入Bootstrap的CSS文件。
<!DOCTYPE html>
<html>
<head>
    <title>My First Bootstrap Page</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
</head>
<body>
    <h1>Welcome to My First Bootstrap Page!</h1>
    <button class="btn btn-primary">Click me!</button>
</body>
</html>
  • 引入Bootstrap JS
    在HTML页面中引入Bootstrap的JS文件。
<!DOCTYPE html>
<html>
<head>
    <title>My First Bootstrap Page</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
</head>
<body>
    <h1>Welcome to My First Bootstrap Page!</h1>
    <button class="btn btn-primary">Click me!</button>

    <script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
    <script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="https://cdn.jsdelivr.net/npm/bootstrap@4.5.2/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

2. 使用Bootstrap组件

  • 按钮组件
    使用Bootstrap按钮样式。
<button class="btn btn-primary">Primary Button</button>
<button class="btn btn-secondary">Secondary Button</button>
  • 导航栏组件
    使用Bootstrap导航栏样式。
<nav class="navbar navbar-expand-lg navbar-light bg-light">
    <a class="navbar-brand" href="#">Brand</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarNav">
        <ul class="navbar-nav">
            <li class="nav-item active">
                <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">About</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Contact</a>
            </li>
        </ul>
    </div>
</nav>
  • 表单组件
    使用Bootstrap表单样式。
<form>
    <div class="form-group">
        <label for="exampleInputEmail1">Email address</label>
        <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email">
        <small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
    </div>
    <div class="form-group">
        <label for="exampleInputPassword1">Password</label>
        <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
    </div>
    <button type="submit" class="btn btn-primary">Submit</button>
</form>
项目部署与调试

Web应用的打包与部署

1. 打包Web应用

  • 打包WAR文件
    使用IDE或命令行工具将Web应用程序打包为WAR（Web Application ARchive）文件。
mvn package
  • 部署WAR文件
    将打包好的WAR文件部署到Web服务器（如Tomcat）。
cp myapp.war /path/to/tomcat/webapps/
  • 启动Tomcat
    启动Tomcat服务器，访问部署的应用程序。
cd /path/to/tomcat/bin
./startup.sh

常见问题排查与解决

1. 404错误

  • 原因
    服务器无法找到请求的资源。

  • 解决方法
    检查web.xml文件中的URL配置，确保URL路径正确。

2. 500错误

  • 原因
    服务器发生内部错误，通常是由于代码中的异常未被捕获。

  • 解决方法
    查看服务器日志，找到异常信息并修复代码。

代码调试与性能优化技巧

1. 调试技巧

  • IDE调试
    使用IDE的调试工具进行代码调试，设置断点、单步执行等。
// 示例代码调试
public static void main(String[] args) {
    int a = 10;
    int b = 20;
    int result = a + b;
    System.out.println(result);
}
  • 日志输出
    在代码中添加日志输出，帮助定位问题。
import java.util.logging.Logger;

public class Example {
    private static final Logger logger = Logger.getLogger(Example.class.getName());

    public static void main(String[] args) {
        logger.info("Starting example...");
        // 业务代码
        logger.info("Example finished.");
    }
}

2. 性能优化技巧

  • 减少资源加载
    减少HTTP请求次数，合并CSS和JavaScript文件。
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="https://cdn.jsdelivr.net/npm/bootstrap@4.5.2/dist/js/bootstrap.bundle.min.js"></script>
  • 压缩资源
    对CSS和JavaScript文件进行压缩，减小文件大小。
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8eX9n05n9/jo2j85q/eRkL4rtIr9oBh21ZYtqWzaUzYhW1+3X0TzvW8u" crossorigin="anonymous">
<script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSkWLWsYAkjR+822M" crossorigin="anonymous"></script>
<script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="https://cdn.jsdelivr.net/npm/bootstrap@4.5.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-KyZXEAgDFuqNz08g" crossorigin="anonymous"></script>
  • 缓存策略
    使用浏览器缓存或CDN缓存静态资源，减少服务器请求。
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8eX9n05n9/jo2j85q/eRkL4rtIr9oBh21ZYtqWzaUzYhW1+3X0TzvW8u" crossorigin="anonymous">
<script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSkWLWsYAkjR+822M" crossorigin="anonymous"></script>
<script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="https://cdn.jsdelivr.net/npm/bootstrap@4.5.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-KyZXEAgDFuqNz08g" crossorigin="anonymous"></script>

通过以上步骤，你可以从零开始搭建一个完整的Java Web应用，并掌握从基本概念到实战应用的全过程。希望这篇文章对你有所帮助，祝你学习愉快！

点击查看更多内容
发表于 2024.10.29 10:52， 共 291 人浏览

本文原创发布于慕课网 ，转载请注明出处，谢谢合作

举报
为 TA 点赞

若觉得本文不错，就分享一下吧！

评论

作者其他优质文章

正在加载中

翻过高山走不出你

手记
篇
粉丝
31
获赞与收藏
67

关注作者，订阅最新文章

阅读免费教程

  • 推荐
  • 评论
  • 收藏
  • 共同学习，写下你的评论
感谢您的支持，我会继续努力的～
扫码打赏，你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫，即可进行扫码打赏哦
今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与 放弃机会
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消