Java map 后台是map js前台怎么传

原创

mob649e815ddfb8 2024-08-22 04:58:32 ©著作权

文章标签 Java spring User 文章分类 Java 后端开发

©著作权归作者所有：来自51CTO博客作者mob649e815ddfb8的原创作品，请联系作者获取转载授权，否则将追究法律责任

Java后端与JavaScript前端传输Map数据的项目方案

在现代Web开发中，Java后端与JavaScript前端的交互愈发常见。在许多场景下，我们需要将后端的Map数据通过接口传输给前端进行展示。本文将详细介绍如何实现Java Map数据在后端的处理，以及如何通过JavaScript在前端进行调用和展示。

一、项目背景

在开发一个旅游网站时，我们需要存储并展示用户的旅行目的地、费用及时间等信息。这些信息可以使用Map结构来保存，方便快速检索和操作。

二、项目需求

创建一个Java后端接口，能够生成并返回一个Map对象。
前端使用JavaScript来调用该接口并处理返回的数据。
前后端数据互动良好，展示用户友好的信息。

三、技术栈

后端：Java 11 + Spring Boot
前端：JavaScript + Fetch API
数据交换格式：JSON

四、后端实现

我们使用Spring Boot来创建后端RESTful API。下面是实现一个简单的接口的步骤：

1. 创建Java后端

首先创建一个控制器类，提供一个接口供前端调用：

import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RestController;

import java.util.HashMap;
import java.util.Map;

@RestController
public class TravelController {

    @GetMapping("/api/travel")
    public Map<String, Object> getTravelData() {
        Map<String, Object> travelInfo = new HashMap<>();
        travelInfo.put("destination", "Paris");
        travelInfo.put("cost", 1500);
        travelInfo.put("duration", "5 days");
        travelInfo.put("description", "A lovely trip to the city of lights!");

        return travelInfo; // 返回Map信息
    }
}

2. 配置Spring Boot

确保application.properties中配置了必要的服务器端口和跨域请求（CORS）相关设置：

server.port=8080

为了允许前端跨域请求，可以加入以下配置类：

import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.CorsRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;

@Configuration
public class WebConfig implements WebMvcConfigurer {
    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**").allowedOrigins("http://localhost:3000");
    }
}

五、前端实现

在前端，我们使用JavaScript中的fetch API来请求后端数据并处理。

1. 调用后端API

首先创建一个名为index.html的文件，其内容如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Travel Information</title>
</head>
<body>
    Travel Information
    <div id="travelData"></div>

    <script>
        async function fetchTravelData() {
            try {
                const response = await fetch('http://localhost:8080/api/travel');
                const data = await response.json();

                document.getElementById('travelData').innerHTML = `
                    <p>Destination: ${data.destination}</p>
                    <p>Cost: $${data.cost}</p>
                    <p>Duration: ${data.duration}</p>
                    <p>Description: ${data.description}</p>
                `;
            } catch (error) {
                console.error('Error fetching data:', error);
            }
        }

        fetchTravelData();
    </script>
</body>
</html>

六、数据流程图

为了更直观地理解我们的数据流动，下面是一个简单的旅行图使用Mermaid语法描述。

journey
    title Travel Data Fetching Journey
    section User visits the website
      User opens the website: 5: User
      Webpage requests travel data: 4: User
    section Fetching Data
      Backend receives request: 5: Backend
      Backend prepares data: 5: Backend
      Backend sends response: 5: Backend
    section Displaying Data
      Frontend receives data: 5: User
      Frontend displays travel information: 5: User