当前位置：首页 > article >正文

JavaWeb开发：HTML 页面与接口对接

article 2024/11/25 20:50:41

在现代 Web 开发中，前后端分离的架构越来越普遍，通常需要通过 API 接口从后端获取数据，然后在前端页面展示这些数据。这篇博客将会向你展示，在 JavaWeb 开发中，如何通过 AJAX 请求接口来获取图书信息，并将这些信息动态展示在 HTML 页面中，以实现接口与页面对接的功能。

一、项目背景

假设我们有一个图书管理系统，其中后端提供了一个 API 接口，返回当前系统中所有图书的信息，数据格式如下：

[
  {"id": 1, "title": "Java 编程思想", "author": "Bruce Eckel", "publishDate": "2015-05-01", "genre": "计算机"},
  {"id": 2, "title": "Python 核心编程", "author": "Wesley Chun", "publishDate": "2018-08-10", "genre": "计算机"},
  {"id": 3, "title": "数据结构与算法", "author": "Robert Lafore", "publishDate": "2013-06-15", "genre": "教育"}
]

我们需要将这些图书的信息展示在前端页面中，每本书的详情都包括书名、作者、出版日期和类型。我们会利用前端 JavaScript 来实现这一点，结合 AJAX 技术从后端接口获取数据，并在页面上动态展示。

二、后端接口实现

我们首先实现一个简单的 Controller 类来模拟后端接口，这里使用的是 Spring MVC 框架：

package cn.controller;

import cn.entity.Book;
import cn.service.BookService;
import com.alibaba.fastjson.JSONArray;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;

import javax.annotation.Resource;
import java.util.List;

@Controller
public class BookController {

    @Resource
    private BookService bookService;

    @ResponseBody
    @RequestMapping(value = "/books.do", produces = "application/json;charset=UTF-8")
    public String getAllBooks() {
        List<Book> books = bookService.queryAllBooks();
        String jsonString = JSONArray.toJSONString(books);
        return jsonString;
    }
}

三、HTML 页面实现

接下来，我们在前端创建一个 HTML 页面，通过 AJAX 请求接口，并将返回的图书信息展示在页面中。以下是实现的代码：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>图书列表</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <style>
        .book-card {
            border: 1px solid #ccc;
            padding: 10px;
            margin: 10px 0;
            border-radius: 5px;
            box-shadow: 0px 0px 5px #aaa;
        }
        .book-card h3 {
            margin: 0;
            padding-bottom: 5px;
            border-bottom: 1px solid #ccc;
        }
        .book-card p {
            margin: 5px 0;
        }
    </style>
</head>
<body>
    <h1>图书列表</h1>
    <div id="book-list">
        <template id="book-template">
            <div class="book-card">
                <h3>书名: </h3>
                <p>作者: </p>
                <p>出版日期: </p>
                <p>类型: </p>
            </div>
        </template>
    </div>

    <script type="text/javascript">
        $(document).ready(function () {
            // 使用 AJAX 请求后端接口
            $.ajax({
                url: "http://localhost:8080/SpringMvCWeb/books.do",
                type: "GET",
                dataType: "json",
                success: function (data) {
                    let bookTemplate = document.querySelector("#book-template").content;
                    let bookList = document.querySelector("#book-list");
                    
                    data.forEach(function (book) {
                        let clone = document.importNode(bookTemplate, true);
                        clone.querySelector("h3").textContent = `书名: ${book.title}`;
                        clone.querySelectorAll("p")[0].textContent = `作者: ${book.author}`;
                        clone.querySelectorAll("p")[1].textContent = `出版日期: ${book.publishDate}`;
                        clone.querySelectorAll("p")[2].textContent = `类型: ${book.genre}`;
                        
                        bookList.appendChild(clone);
                    });
                },
                error: function (error) {
                    console.log("获取图书列表失败", error);
                }
            });
        });
    </script>
</body>
</html>

在这里插入图片描述

四、实现原理分析

后端接口：
- 使用 Spring MVC 框架来创建一个 RESTful API，返回图书的 JSON 数据。
- 数据通过 JSONArray.toJSONString(books) 进行序列化，确保返回的数据格式符合 JSON 标准。
前端页面：
- 页面中使用 <template> 标签来定义图书信息的模板，使 HTML 结构更加直观，且便于动态克隆。
- 使用 JQuery 来发起 AJAX 请求，从后端获取数据后，将每一本书的信息填充到页面上。
样式设计：
- 为每一本图书使用一个卡片式的展示样式，使得信息展示更加美观整洁。
- 利用 CSS 控制卡片的边框、阴影等，增强用户体验。