首页手记 JAVA Web项目入门教程：轻松搭建你的第一个Web应用

JAVA Web项目入门教程：轻松搭建你的第一个Web应用

标签：

Java WebApp SSM

概述

本文介绍了JAVA Web项目入门的基础知识，包括开发环境搭建、常用框架、HTTP协议、HTML和CSS的基本使用以及简单的用户管理系统设计。通过详细步骤和示例代码，帮助读者理解并实践Java Web开发的关键概念和技术。

Java Web开发简介

Java Web开发的基本概念

Java Web开发是一种用于构建动态网站和Web应用程序的技术。它允许开发人员创建可交互的网站，可以处理用户请求，存储和检索数据，以及执行各种服务器端逻辑。Java Web应用程序通常运行在服务器上，通过HTTP协议与客户端（如Web浏览器）进行通信。

Java Web开发的主要组成部分

Java Web开发涉及以下几个主要组成部分：

Java Servlet API：Java Servlet API提供了一种在Web服务器上执行Java代码的方法。Servlet是运行在Web服务器上的Java类，它们能够处理客户端请求并生成动态内容。Servlet经常用于构建Web应用程序后端，处理HTTP请求，管理会话，执行数据库操作等。
JavaServer Pages (JSP)：JSP是一种用Java代码生成动态HTML内容的技术。它允许在HTML文件中嵌入Java代码，从而利用Java的强大功能来生成动态Web页面。JSP页面可以包含Java代码片段，也可以包含标签库，这些标签库可以简化常见的Web开发任务。
JavaServer Faces (JSF)：JSF是一种Java Web应用框架，用于构建用户界面。它提供了一种声明式的、组件化的Web应用程序开发方法，它与MVC（Model-View-Controller）设计模式紧密相关。JSF支持绑定UI组件到后台模型对象，并提供事件处理和验证机制。
Java Persistence API (JPA)：JPA是Java平台的一部分，用于对象关系映射（ORM）。它允许开发者以声明的方式将Java对象映射到数据库表。JPA简化了数据库交互，使得持久化对象更容易。
Struts、Spring、Hibernate：这些是流行的Java Web开发框架，它们简化了Web应用程序的开发，提供了许多高级功能，如依赖注入、事务管理、安全性、ORM等。

常用的Java Web框架介绍

Spring Framework：
- 特点：Spring Framework是一个全面的企业级应用开发框架，提供了依赖注入、事务管理、安全性和Web开发等功能。
- 主要组件：Spring MVC是Spring Framework的一部分，它提供了一个结构化的方式来构建Web应用程序。Spring Security则提供了强大的认证和授权功能。
- 示例代码：
```
// Spring MVC 控制器
@Controller
public class HelloController {
 @RequestMapping(value = "/hello", method = RequestMethod.GET)
 public String sayHello(Model model) {
     model.addAttribute("message", "Hello Spring MVC Framework");
     return "hello";
 }
}
```

Hibernate：

特点：Hibernate是一个对象关系映射（ORM）工具，它允许我们使用Java对象来操作数据库。
主要组件：Hibernate提供了Session、Transaction、Query等核心组件，用于执行持久化操作。

示例代码：

// Hibernate 配置和使用
Configuration configuration = new Configuration();
configuration.configure();
SessionFactory sessionFactory = configuration.buildSessionFactory();
Session session = sessionFactory.openSession();
Transaction tx = session.beginTransaction();
User user = new User("John", "Doe");
session.save(user);
tx.commit();
session.close();
sessionFactory.close();

Apache Struts：

特点：Struts是一个基于MVC模式的Web应用框架，它提供了一种结构化的方式来构建Web应用程序。
主要组件：Action、ActionForm、ActionServlet、ActionMapping等。

示例代码：

// Struts Action
public class HelloWorldAction extends Action {
 public ActionForward execute(ActionMapping mapping, ActionForm form,
                             HttpServletRequest request, HttpServletResponse response)
     throws Exception {
     return mapping.findForward("success");
 }
}

开发环境搭建

下载并安装JDK

访问Oracle官方网站，下载最新版本的JDK。
解压安装包到指定文件夹，例如 C:\Program Files\Java\jdk-17。

配置环境变量

在系统环境变量中添加 JAVA_HOME，值为 C:\Program Files\Java\jdk-17。
更新 Path 环境变量，添加 %JAVA_HOME%\bin。

安装并配置Tomcat服务器

下载并安装Apache Tomcat，建议选择稳定版本。
设置 CATALINA_HOME 环境变量，例如 C:\Program Files\Apache Software Foundation\Tomcat 9.0。
更新 Path 环境变量，添加 %CATALINA_HOME%\bin。

创建第一个Java Web项目

项目结构介绍

一个标准的Java Web项目通常包含以下几个部分：

web.xml：部署描述符文件，用于配置Servlet、过滤器、监听器等。
src：源代码目录，存放Java类文件。
WEB-INF：存放服务器端资源，如web.xml、lib目录（存放第三方jar包）、classes目录（存放编译后的class文件）。
index.jsp：主页文件，用户访问应用时的默认页面。
lib：存放第三方库文件，如jar包。

Maven或Gradle项目构建工具的应用

Maven

在项目根目录创建 pom.xml 文件，内容如下：

<project xmlns="http://maven.apache.org/POM/4.0.0"
    xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
    xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
<modelVersion>4.0.0</modelVersion>
<groupId>com.example</groupId>
<artifactId>webapp</artifactId>
<version>1.0-SNAPSHOT</version>
<packaging>war</packaging>
<dependencies>
   <dependency>
       <groupId>javax.servlet</groupId>
       <artifactId>javax.servlet-api</artifactId>
       <version>4.0.1</version>
       <scope>provided</scope>
   </dependency>
</dependencies>
</project>

使用命令 mvn clean install 构建项目，生成target目录下的.war文件。

Gradle

在项目根目录创建 build.gradle 文件，内容如下：

plugins {
   id 'war'
}
repositories {
   mavenCentral()
}
dependencies {
   providedCompile 'javax.servlet:javax.servlet-api:4.0.1'
}

使用命令 gradle war 构建项目，生成build/libs目录下的.war文件。

创建简单的Servlet和JSP页面

Servlet示例

创建一个简单的Servlet类 HelloServlet.java：

package com.example;

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

@WebServlet("/hello")
public class HelloServlet extends HttpServlet {
   protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
       response.setContentType("text/html");
       response.getWriter().println("Hello Servlet!");
   }
}

在 web.xml 中配置该Servlet：

<servlet>
   <servlet-name>HelloServlet</servlet-name>
   <servlet-class>com.example.HelloServlet</servlet-class>
</servlet>
<servlet-mapping>
   <servlet-name>HelloServlet</servlet-name>
   <url-pattern>/hello</url-pattern>
</servlet-mapping>

JSP页面示例

创建一个简单的JSP页面 index.jsp：

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
   <title>Hello JSP</title>
</head>
<body>
<h1>Hello JSP!</h1>
</body>
</html>

在 web.xml 中配置默认欢迎页面：

<welcome-file-list>
   <welcome-file>index.jsp</welcome-file>
</welcome-file-list>

基本技术入门

HTTP协议基础

HTTP（HyperText Transfer Protocol）是应用层协议，用于客户端和服务器之间的通信。它基于TCP/IP协议，使用请求-响应模型。

请求方法：GET，POST，PUT，DELETE等。
HTTP状态码：200 OK, 404 Not Found, 500 Internal Server Error等。
请求头和响应头：Content-Type, Content-Length, User-Agent等。

示例代码

GET请求示例：

URL url = new URL("http://example.com");
HttpURLConnection connection = (HttpURLConnection) url.openConnection();
connection.setRequestMethod("GET");
int responseCode = connection.getResponseCode();
System.out.println("Response Code: " + responseCode);

POST请求示例：

URL url = new URL("http://example.com");
HttpURLConnection connection = (HttpURLConnection) url.openConnection();
connection.setRequestMethod("POST");
connection.setDoOutput(true);
DataOutputStream wr = new DataOutputStream(connection.getOutputStream());
wr.writeBytes("param1=value1&param2=value2");
wr.flush();
wr.close();
int responseCode = connection.getResponseCode();
System.out.println("Response Code: " + responseCode);

HTTP状态码示例：

public static void main(String[] args) {
   int resultCode = HttpURLConnection.HTTP_OK;
   switch (resultCode) {
       case HttpURLConnection.HTTP_OK:
           System.out.println("Request succeeded.");
           break;
       case HttpURLConnection.HTTP_NOT_FOUND:
           System.out.println("Resource not found.");
           break;
       case HttpURLConnection.HTTP_INTERNAL_ERROR:
           System.out.println("Internal server error.");
           break;
       default:
           System.out.println("Unknown status code.");
   }
}

HTML和CSS的基础知识

HTML

HTML（HyperText Markup Language）是用来构建Web页面的标准标记语言。HTML文件由标签、属性、文本等组成。

基本标签：<html>, <head>, <body>, <title>, <h1>, <p>, <div>, <span>。
表单元素：<form>, <input>, <button>, <textarea>。

示例代码：

<!DOCTYPE html>
<html>
<head>
    <title>My First Web Page</title>
</head>
<body>
    <h1>Welcome to My Web Page</h1>
    <p>This is a paragraph.</p>
    <div>
        <span>Span Text</span>
    </div>
</body>
</html>

CSS

CSS（Cascading Style Sheets）用于控制HTML文档的样式，包括颜色、字体、布局等。

基本语法：selector { property: value; }
常用选择器：类选择器（.class），ID选择器（#id），标签选择器（tag）。

示例代码：

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

h1 {
    color: darkblue;
    font-size: 36px;
}

p {
    font-size: 18px;
    color: darkgreen;
}

使用JavaScript进行前端开发

JavaScript基础

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

基本语法：
- 变量声明：var x = 10;
- 函数定义：function sayHello() { console.log("Hello"); }
- 控制结构：if, for, while
DOM操作：
- 获取元素：document.getElementById("myElement")
- 修改属性：element.setAttribute("class", "newClass")
- 事件处理：element.addEventListener("click", function() { /* 代码 */ })

示例代码：

<!DOCTYPE html>
<html>
<head>
    <title>JavaScript Example</title>
</head>
<body>
    <button id="myButton">Click Me</button>
    <script>
        var button = document.getElementById("myButton");
        button.addEventListener("click", function() {
            alert("Button clicked!");
        });
    </script>
</body>
</html>

使用JavaScript库

JavaScript库如jQuery简化了DOM操作和事件处理。以下是一个使用jQuery的示例：

引入jQuery库：

<script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="https://code.jquery.com/jquery-3.6.0.min.js"></script>

jQuery示例代码：

<button id="myButton">Click Me</button>
<script>
   $(document).ready(function() {
       $("#myButton").click(function() {
           alert("Button clicked using jQuery!");
       });
   });
</script>

使用前端框架

前端框架如React和Vue.js提供了更高级的组件化开发方式。以下是一个简单的React示例：

安装React：

npm install -g create-react-app
create-react-app my-app
cd my-app
npm start

React示例代码：

import React from 'react';
import ReactDOM from 'react-dom';

function App() {
   const handleClick = () => {
       alert('Button clicked using React!');
   };

   return (
       <div>
           <button onClick={handleClick}>Click Me</button>
       </div>
   );
}

ReactDOM.render(<App />, document.getElementById('root'));

常见开发问题解决

常见错误代码详解

常见的HTTP错误代码：

404 Not Found：请求的资源不存在。
500 Internal Server Error：服务器遇到错误而无法完成请求。
403 Forbidden：服务器理解请求但拒绝执行。

示例代码：

// 500 Internal Server Error 示例
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
    throw new ServletException("Internal Server Error");
}

静态资源文件的处理

静态资源文件（如CSS、JavaScript、图片等）需要正确配置才能被服务器找到并提供服务。

配置 web.xml：

<servlet>
   <servlet-name>default</servlet-name>
   <servlet-class>org.apache.catalina.servlets.DefaultServlet</servlet-class>
   <init-param>
       <param-name>debug</param-name>
       <param-value>0</param-value>
   </init-param>
   <init-param>
       <param-name>listings</param-name>
       <param-value>false</param-value>
   </init-param>
</servlet>
<servlet-mapping>
   <servlet-name>default</servlet-name>
   <url-pattern>/resources/*</url-pattern>
</servlet-mapping>

在项目中创建 resources 目录：
- 将CSS、JavaScript、图片等文件放入 resources 目录。
- 通过URL访问这些资源，例如 <link rel="stylesheet" href="/resources/css/style.css">。

数据库连接与操作

JDBC连接数据库：

// JDBC 连接数据库示例
import java.sql.Connection;
import java.sql.DriverManager;
import java.sql.ResultSet;
import java.sql.Statement;

public class DatabaseConnection {
   private static final String URL = "jdbc:mysql://localhost:3306/mydb";
   private static final String USER = "root";
   private static final String PASSWORD = "password";

   public static void main(String[] args) {
       try (Connection conn = DriverManager.getConnection(URL, USER, PASSWORD);
            Statement stmt = conn.createStatement();
            ResultSet rs = stmt.executeQuery("SELECT * FROM users")) {

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

使用JDBC Template：

// 使用 Spring JDBC Template 示例
import org.springframework.jdbc.core.JdbcTemplate;
import org.springframework.jdbc.datasource.DriverManagerDataSource;

public class JdbcTemplateExample {
   public void jdbcTemplateExample() {
       DriverManagerDataSource dataSource = new DriverManagerDataSource();
       dataSource.setDriverClassName("com.mysql.jdbc.Driver");
       dataSource.setUrl("jdbc:mysql://localhost:3306/mydb");
       dataSource.setUsername("root");
       dataSource.setPassword("password");

       JdbcTemplate jdbcTemplate = new JdbcTemplate(dataSource);
       jdbcTemplate.execute("CREATE TABLE users (id INT, name VARCHAR(255))");
       jdbcTemplate.update("INSERT INTO users (id, name) VALUES (?, ?)", 1, "John Doe");
   }
}

使用Hibernate：

// Hibernate 示例
import org.hibernate.Session;
import org.hibernate.SessionFactory;
import org.hibernate.cfg.Configuration;

public class HibernateExample {
   public static void main(String[] args) {
       SessionFactory sessionFactory = new Configuration().configure().buildSessionFactory();
       Session session = sessionFactory.openSession();
       session.beginTransaction();
       User user = new User("John", "Doe");
       session.save(user);
       session.getTransaction().commit();
       session.close();
       sessionFactory.close();
   }
}

小项目实战

设计一个简单的用户管理系统

设计一个简单的用户管理系统，包含以下几个功能：

用户注册
用户登录
查询用户信息
修改用户信息

添加用户注册和登录功能

注册功能：
- 用户填写注册表单，提交数据。
- 后端接收数据，验证数据有效性，插入数据库。
登录功能：
- 用户填写登录表单，提交数据。
- 后端接收数据，验证用户身份，返回登录成功或失败信息。

示例代码

用户注册表单：

<form action="register" method="post">
   <label for="username">Username:</label>
   <input type="text" id="username" name="username" required>
   <label for="password">Password:</label>
   <input type="password" id="password" name="password" required>
   <button type="submit">Register</button>
</form>

用户注册Servlet：

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.sql.Connection;
import java.sql.PreparedStatement;
import java.sql.SQLException;

@WebServlet("/register")
public class UserRegistrationServlet extends HttpServlet {
   private static final String INSERT_USER_SQL = "INSERT INTO users (username, password) VALUES (?, ?)";

   protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
       String username = request.getParameter("username");
       String password = request.getParameter("password");
       try (Connection connection = getDataSource().getConnection();
            PreparedStatement preparedStatement = connection.prepareStatement(INSERT_USER_SQL)) {
           preparedStatement.setString(1, username);
           preparedStatement.setString(2, password);
           preparedStatement.executeUpdate();
           response.sendRedirect("login");
       } catch (SQLException e) {
           throw new ServletException(e);
       }
   }
}

用户登录表单：

<form action="login" method="post">
   <label for="username">Username:</label>
   <input type="text" id="username" name="username" required>
   <label for="password">Password:</label>
   <input type="password" id="password" name="password" required>
   <button type="submit">Login</button>
</form>

用户登录Servlet：

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.sql.Connection;
import java.sql.PreparedStatement;
import java.sql.ResultSet;

@WebServlet("/login")
public class UserLoginServlet extends HttpServlet {
   private static final String LOGIN_SQL = "SELECT * FROM users WHERE username = ? AND password = ?";

   protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
       String username = request.getParameter("username");
       String password = request.getParameter("password");
       try (Connection connection = getDataSource().getConnection();
            PreparedStatement preparedStatement = connection.prepareStatement(LOGIN_SQL)) {
           preparedStatement.setString(1, username);
           preparedStatement.setString(2, password);
           ResultSet resultSet = preparedStatement.executeQuery();
           if (resultSet.next()) {
               // 登录成功
               response.sendRedirect("login_success.jsp");
           } else {
               // 登录失败
               response.sendRedirect("login_fail.jsp");
           }
       } catch (SQLException e) {
           throw new ServletException(e);
       }
   }
}

测试和部署应用

测试：
- 使用浏览器访问应用，测试注册和登录功能是否正常。
- 使用Postman等工具测试API接口。
部署：
- 将构建好的 .war 文件部署到Tomcat服务器。
- 访问应用，确保所有功能正常。

示例代码

部署到Tomcat：
- 将 .war 文件放入 webapps 目录。
- 启动Tomcat服务器，访问应用。
访问应用：
- 打开浏览器，访问 http://localhost:8080/yourapp。
- 测试注册和登录功能。

点击查看更多内容

为 TA 点赞

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

评论

评论

共同学习，写下你的评论

评论加载中...

展开查看更多评论

作者其他优质文章

正在加载中

慕斯王

手记
篇

粉丝

111

获赞与收藏

513

关注作者，订阅最新文章

阅读免费教程

Java并发工具

23个小节 19367 315

Java 并发原理入门教程

26个小节 39106 568

Java 入门教程

50个小节 342514 3164

推荐

评论

收藏

共同学习，写下你的评论



感谢您的支持，我会继续努力的～

扫码打赏，你说多少就多少

赞赏金额会直接到老师账户

支付方式

打开微信扫一扫，即可进行扫码打赏哦

今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与放弃机会

点击
抽奖

慕课手记新用户专享福利

恭喜你，你的运气太好了，居然抽中了 100个积分！

恭喜你，抽中了价值元的专栏！

太棒了，直接落到你账户里！

积分商城里的罗技鼠标、机械键盘、
Kindle 阅读器、小米平衡车
Apple iPad （10.2英寸）、大额优惠券
在等着你去兑换了噢

作者：

免费赠送

兑换码：1111222211 复制

优惠券可用于购买实战课、体系课
无门槛使用

先去看看，有什么好东西马上兑换我爱学习，选课去


热搜

最近搜索清空

JAVA Web项目入门教程：轻松搭建你的第一个Web应用

Java Web开发的基本概念

Java Web开发的主要组成部分

常用的Java Web框架介绍

下载并安装JDK

配置环境变量

安装并配置Tomcat服务器

项目结构介绍

Maven或Gradle项目构建工具的应用

Maven

Gradle

创建简单的Servlet和JSP页面

Servlet示例

JSP页面示例

HTTP协议基础

示例代码

HTML和CSS的基础知识

HTML

CSS

使用JavaScript进行前端开发

JavaScript基础

使用JavaScript库

使用前端框架

常见错误代码详解

静态资源文件的处理

数据库连接与操作

设计一个简单的用户管理系统

添加用户注册和登录功能

示例代码

测试和部署应用

示例代码

阅读免费教程