编程技术

Document

使用java开发简单的Web网站

开发一个简单的Java Web网站需要涉及到多个技术栈，例如：

  1. Java（后端开发语言）
  2. Spring Boot（简化Java Web开发）
  3. Thymeleaf（模板引擎，用于渲染HTML）
  4. Maven 或 Gradle（构建工具）
  5. Embedded Tomcat（内嵌式Web服务器）
  6. HTML、CSS、JavaScript（前端开发）

H2数据库（简单的内存数据库，可用于存储数据）

下面，我将指导你如何通过Spring Boot构建一个简单的Web应用，其中包括一个用户注册和登录的功能，数据会存储在内存数据库（H2）中。应用的功能简单：用户可以注册、登录，查看欢迎页面。

步骤 1: 创建Spring Boot项目

你可以通过Spring Initializr来快速生成项目：

  1. 访问 Spring Initializr。

  2. 选择以下配置：

    • Project: Maven Project
    • Language: Java
    • Spring Boot: 2.7.x
    • Project Metadata: 填写 Group 和 Artifact，例如：
      • Group: com.example
      • Artifact: simple-web
    • Dependencies: 添加以下依赖：
      • Spring Web
      • Spring Boot DevTools
      • Thymeleaf
      • H2 Database

  3. 点击 Generate 下载生成的项目，解压后导入IDE中（如 IntelliJ IDEA）。

步骤 2: 项目结构

导入项目后，你的目录结构大致如下：

simple-web
├── src
│   ├── main
│   │   ├── java
│   │   │   └── com
│   │   │       └── example
│   │   │           └── simpleweb
│   │   │               ├── SimpleWebApplication.java
│   │   │               ├── controller
│   │   │               │   └── UserController.java
│   │   │               └── model
│   │   │                   └── User.java
│   │   ├── resources
│   │   │   ├── application.properties
│   │   │   ├── static
│   │   │   │   └── style.css
│   │   │   └── templates
│   │   │       ├── login.html
│   │   │       ├── register.html
│   │   │       └── welcome.html

步骤 3: 配置数据库（H2）

在 src/main/resources/application.properties 中配置 H2 内存数据库以及Spring Boot数据源：

spring.datasource.url=jdbc:h2:mem:testdb
spring.datasource.driverClassName=org.h2.Driver
spring.datasource.username=sa
spring.datasource.password=password
spring.jpa.database-platform=org.hibernate.dialect.H2Dialect
spring.h2.console.enabled=true  # 启用H2控制台

步骤 4: 创建用户模型类

在 src/main/java/com/example/simpleweb/model/ 目录下创建 User.java：

package com.example.simpleweb.model;

public class User {
    private String username;
    private String password;

    // Constructors, getters, and setters
    public User() {
    }

    public User(String username, String password) {
        this.username = username;
        this.password = password;
    }

    public String getUsername() {
        return username;
    }

    public void setUsername(String username) {
        this.username = username;
    }

    public String getPassword() {
        return password;
    }

    public void setPassword(String password) {
        this.password = password;
    }
}

步骤 5: 创建控制器类

在 src/main/java/com/example/simpleweb/controller/ 目录下创建 UserController.java：

package com.example.simpleweb.controller;

import com.example.simpleweb.model.User;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PostMapping;

@Controller
public class UserController {

    private User user = new User("admin", "password");  // 临时存储用户数据

    // 显示登录页面
    @GetMapping("/login")
    public String showLoginPage() {
        return "login";
    }

    // 处理登录请求
    @PostMapping("/login")
    public String login(String username, String password, Model model) {
        if (user.getUsername().equals(username) && user.getPassword().equals(password)) {
            model.addAttribute("username", username);
            return "welcome";
        }
        model.addAttribute("error", "Invalid credentials");
        return "login";
    }

    // 显示注册页面
    @GetMapping("/register")
    public String showRegisterPage() {
        return "register";
    }

    // 处理注册请求
    @PostMapping("/register")
    public String register(User newUser, Model model) {
        user = newUser;  // 简单模拟注册过程，保存用户
        model.addAttribute("username", newUser.getUsername());
        return "welcome";
    }
}

步骤 6: 创建视图模板

在 src/main/resources/templates/ 目录下创建以下三个 HTML 文件：

login.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Login</title>
</head>
<body>
    <h1>Login</h1>
    <form action="/login" method="post">
        <label for="username">Username: </label><br>
        <input type="text" id="username" name="username"><br><br>
        <label for="password">Password: </label><br>
        <input type="password" id="password" name="password"><br><br>
        <button type="submit">Login</button>
    </form>
    <p style="color:red">${error}</p>
    <p>Don't have an account? <a href="/register">Register</a></p>
</body>
</html>
register.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Register</title>
</head>
<body>
    <h1>Register</h1>
    <form action="/register" method="post">
        <label for="username">Username: </label><br>
        <input type="text" id="username" name="username"><br><br>
        <label for="password">Password: </label><br>
        <input type="password" id="password" name="password"><br><br>
        <button type="submit">Register</button>
    </form>
    <p>Already have an account? <a href="/login">Login</a></p>
</body>
</html>
welcome.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Welcome</title>
</head>
<body>
    <h1>Welcome, ${username}!</h1>
    <p><a href="/login">Log out</a></p>
</body>
</html>

步骤 7: 启动Spring Boot应用

确保你的 SimpleWebApplication.java 启动类如下：

package com.example.simpleweb;

import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;

@SpringBootApplication
public class SimpleWebApplication {
    public static void main(String[] args) {
        SpringApplication.run(SimpleWebApplication.class, args);
    }
}

步骤 8: 运行应用

在IDE中运行 SimpleWebApplication 类。Spring Boot会自动启动一个嵌入式Tomcat服务器，访问地址为 http://localhost:8080。

你可以使用浏览器访问：

  • http://localhost:8080/login 进行登录
  • http://localhost:8080/register 进行注册

总结

这个示例是一个简单的用户注册、登录、认证、登出系统。它包含了：

  1. 使用Spring Boot创建Web应用。
  2. 配置H2数据库。
  3. 使用Thymeleaf模板渲染HTML页面。
  4. 使用Controller处理用户请求。
  5. 简单的用户认证流程。

可以在这个基础上继续扩展，添加更多的功能（例如密码加密、持久化数据库存储等）。