在现代Web开发中，前后端分离的架构逐渐成为一种流行的趋势。然而，对于一些小型项目或企业级应用，前后端不分离的架构依然具有其独特的优势。本文将介绍几种常见的前后端不分离项目，包括使用Thymeleaf的Spring Boot项目、JSP项目，以及将前端页面放在资源目录下的项目，并提供相应的代码示例。
1. 前后端不分离项目概述
在前后端不分离的项目中，前端页面和后端逻辑通常是混合在一起的，这意味着服务器会直接渲染HTML页面并返回给用户。这种架构的常见场景包括传统的JSP项目和使用Thymeleaf等模板引擎的项目。
2. Thymeleaf项目示例
Thymeleaf是一种现代的Java服务器端模板引擎，它可以在Spring Boot等框架中使用。以下是一个简单的Thymeleaf项目示例。
pom.xml
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>
Controller类
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;
@Controller
public class HelloController {
@GetMapping("/hello")
public String hello(Model model) {
model.addAttribute("name", "世界");
return "hello"; // 返回的是模板名
}
}
hello.html (放在 src/main/resources/templates 目录下)
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<title>Hello</title>
</head>
<body>
<h1 th:text="'你好, ' + ${name}">你好, 世界!</h1>
</body>
</html>
在浏览器输入 http://localhost:8080/hello，会看到“你好, 世界!”。
3. JSP项目示例
JavaServer Pages (JSP) 是传统的Java Web开发技术，可以在Servlet容器中运行。以下是一个JSP项目的示例。
web.xml
<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_3_1.xsd"
version="3.1">
<servlet>
<servlet-name>MyServlet</servlet-name>
<servlet-class>com.example.MyServlet</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>MyServlet</servlet-name>
<url-pattern>/hello</url-pattern>
</servlet-mapping>
</web-app>
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;
@WebServlet("/hello")
public class MyServlet extends HttpServlet {
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
request.setAttribute("name", "世界");
request.getRequestDispatcher("/hello.jsp").forward(request, response);
}
}
hello.jsp (放在 WEB-INF 目录下)
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>Hello</title>
</head>
<body>
<h1>你好, ${name}</h1>
</body>
</html>
同样，在浏览器输入 http://localhost:8080/hello，你将看到“你好, 世界!”的页面。
4. 前端页面在资源目录下的项目示例
在一些项目中，前端页面被放置在资源目录下。通常，这些静态资源会被直接提供。
项目结构
src
└── main
└── resources
└── static
└── index.html
index.html
<!DOCTYPE html>
<html>
<head>
<title>首页</title>
</head>
<body>
<h1>欢迎来到首页！</h1>
</body>
</html>
只需启动Spring Boot应用，然后访问 http://localhost:8080/index.html，你将看到“欢迎来到首页！”的内容。
总结
在前后端不分离的项目中，后端控制着前端页面的渲染。虽然这样的架构在灵活性和维护性上不如前后端分离，但对于简单的应用而言，它仍然是一个有效的选择。通过上文的示例，我们可以看到如何使用Thymeleaf、JSP以及静态资源来构建前后端不分离的Web应用。
