Spring Boot 将数据从HTML输入发送到REST控制器并返回(Java Sping Boot )

64jmpszr  于 2023-03-02  发布在  Spring
关注(0)|答案(1)|浏览(179)

我正在模拟计算流行病的过程。为此，我已经有了自己的网站，可以在“输入”标签中输入值，然后将其发送到控制器。在控制器中，接收到的数字应计算为结果，该结果将发送回HTML，所以它可以显示在HTML底部的图表上。问题是在HTML和控制器之间发送数字，尤其是那种方式，因此它可以显示在图表上（给定的x和y值是占位符）。
有人有解决方案，可以帮助我解决我的问题吗？
使用REST控制器模拟Javascript代码：

package com.example.epidemietest;

import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.*;

import java.util.ArrayList;
import java.util.List;
import java.util.Random;

@SpringBootApplication
@Controller
public class EpidemicSimulation {
    // Define the simulation parameters
    private int population;
    private double infectionRate;
    private double recoveryRate;
    private int days;

    // Define the home endpoint
    @GetMapping("/home")
    public String home() {
        return "index";
    }

    // Define the simulation endpoint
    @PostMapping("/simulation")
    public List<String> runSimulation(

            @RequestParam int population,
            @RequestParam double infectionRate,
            @RequestParam double recoveryRate,
            @RequestParam int days) {

        // Initialize the simulation
        int numInfected = (int) (population * infectionRate);
        int numRecovered = 0;
        int numSusceptible = population - numInfected;

        // Create an empty list to store the results for each day
        List<String> result = new ArrayList<>();

        // Run the simulation for the specified number of days
        for (int day = 1; day <= days; day++) {

            // Calculate the number of people who recover today
            int numRecoveredToday = (int) (numInfected * recoveryRate);

            // Only count people as recovered if they have been infected for more than 7 days
            if (day > 7) {
                numRecovered += numRecoveredToday;
                numInfected -= numRecoveredToday;
            }

            // Calculate the number of people who get infected today
            int numSusceptibleToday = numSusceptible - numInfected - numRecovered;
            Random random = new Random();
            int numInfectedToday = 0;

            // Iterate through each susceptible person and check if they get infected
            for (int i = 0; i < numSusceptibleToday; i++) {
                if (random.nextDouble() < infectionRate) {
                    numInfectedToday++;
                }
            }

            // Update the number of infected and susceptible people
            numInfected += numInfectedToday;
            numSusceptible -= numInfectedToday;

            // Build the result for the current day
            String dayResult = String.format("%d,%d,%d,%d",
                    day, numSusceptible, numInfected, numRecovered);

            // Add the result to the list of results
            result.add(dayResult);
        }

        // Return the list of results
        return result;
    }

    // Define the main method for the application
    public static void main(String[] args) {
        SpringApplication.run(EpidemicSimulation.class, args);
    }
}

网址：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Simulation-Epidemie</title>

    <!-- Referierte Libaries für individuellen Font -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,300;1,400;1,500;1,600;1,700;1,800&display=swap" rel="stylesheet">

    <!-- Link zur CDN für Graphen -->
    <script
            src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.js">
    </script>

    <!-- CSS für Style der Webseite -->
    <style>

        body {
            font-family: 'Open Sans', sans-serif;
            background-color: gainsboro;
            padding-left: 100px;
            padding-right: 100px;
            text-align: center;
        }
        .header-image {
            width: 100%;
        }
        .headline {
            color: blue;
            text-align: center;
            font-weight: bold;
        }
        .image-container{
            background-color: grey;
            padding: 5px;
        }
        .body-text{
            background-color: lightslategrey;
            width: 1200px;
            margin: auto;
            text-align: center;

        }
        .simulation{
            background-color: lightslategrey;
            width: 1200px;
            margin: auto;
            margin-bottom: 50px;
            text-align: center;

        }
        footer {
            font-family: 'Open Sans', sans-serif;
            text-align: center;
            padding: 3px;
            background-color: lightblue;
            color: black;
            width:100%;
        }
    </style>

</head>
<!-- Body seperiert in verschiedene Container zur besseren Übersicht und Funktionalität -->
<body>
<!-- Banner an der oberen Seite der Webseite -->
<div class="image-container">
    <img class="header-image" src="Banner.png" alt="">
</div>

<!-- Überschrift für den Body -->
<h1 class="headline">
    <br>Simulation einer Epidemie
</h1>

<!-- Text zur Erklärung der Simulation -->
<div class="body-text">
    <br> Die Webseite dient zur Simulation und Einschätzung von Epidemien, bezogen auf einer infektionellen Krankheit wie z.B. Viren.
    <br>
    <br> Bitte geben Sie in den folgenden Feldern die entsprechenden Daten für die Simulation ein.

    <br><br><br>
    <!-- Inputs für die Übergabe der eingegebenen als Post an den Controller -->
    <form id="eingabe" method="post">
        <label for="eingabe">Größe der Population: </label>
        <input type="number" name="population"/> <br/>

        <label for="eingabe">Infektionsrate durch Virus: </label>
        <input type="number" name="infectionRate" step="0.01" min="0" max="1"/> <br/>

        <label for="eingabe">Genesenenschutzrate der Menschen: </label>
        <input type="number" name="recoveryRate" step="0.01" min="0" max="1"/> <br/>

        <label for="eingabe">Zeitraum in Tagen: </label>
        <input type="number" name="days"/> <br/>

        <!-- Submit-Button zur Bestätigung der Eingaben -->
        <button type="submit">Submit</button>
        <br><br><br>


    </form>

</div>

<div style="width:800px; margin:0 auto;" class="Simulation">
    <br><br><br>
    <!-- Canvas-tag zur Initialisierung einer Grafik, in dem Fall des Graphen -->
    <canvas id="graph" style="width:100%;max-width:600px"></canvas>
    <script>
        //Übergebene Daten für die X- und Y-Achse
        var xValues = [50,60,70,80,90,100,110,120,130,140,150];
        var yValues = [7,8,8,9,9,9,10,11,14,14,15];

        //Erstellung eines neuen Graphen
        new Chart("graph", {
            type: "line",
            data: {
                labels: xValues,
                datasets: [{
                    fill: false,
                    lineTension: 0,
                    backgroundColor: "rgba(0,0,255,1.0)",
                    borderColor: "rgba(0,0,255,0.1)",
                    data: yValues
                }]
            },
            //Einstellungen für den Graphen für Titel, Achsen-Titel, Tickrate und Farben
            options: {
                title: {
                    display: true,
                    text: 'Ergebniss Epidemie-Simulation:'
                },
                legend: {display: false, },
                scales: {
                    yAxes: [{ticks: {min: 6, max:16},
                        scaleLabel: {
                            display: true,
                            labelString: 'Infizierte'
                        }}],
                    xAxes: [{
                        scaleLabel: {
                            display: true,
                            labelString: 'Tage'
                        }}]
                }

            }
        });
    </script>
    <br><br><br>

</div>

<footer>
    <p>Entwickler: <br>
        Projekt: Web-Anwendung</p>
</footer>

</body>

</html>

spring-boot

1条答案

按热度按时间
guicsvcw

guicsvcw1#

调用控制器的机制是javascript fetch()。
您需要将Submit按钮类型更改为not submit，并添加onClick处理程序，如下所示：

<button onclick="callController()">Submit</button>

为表单字段中的每个字段指定一个ID（除名称外）：

<input id="population" type="number" name="population"/>

然后，您需要为通过单击Submit触发的callController()函数编写js：

<script>

    function callController() {

fetch("/simulation?population=" + document.getElementById('population') + "&infectionRate" + document.getElementById('infectionRate') +"&recoveryRate" + document.getElementById('recoveryRate') +"&days" + document.getElementById('days'), {
      method: "POST",
      headers: {
      "Content-Type": "application/json"
               }
      })
  .then((response) => response.json())
  .then((data) => {
                     // data contains your list
                     for(var i = 0; i < data.length; i++) {
                         var splitData = data[i].split(",");
                         // splitData[0] is day, 
                         // splitData[1] is numSusceptible, 
                         // splitData[2] is numInfected, 
                         // splitData[3] is numRecovered

                         // update xValues & yValues
                         // call the Chart render
                         renderChart();
                     }
                 });

    }
</script>

图表呈现js需要做如下修改：

<script>
    //Übergebene Daten für die X- und Y-Achse
    var xValues = [50,60,70,80,90,100,110,120,130,140,150];
    var yValues = [7,8,8,9,9,9,10,11,14,14,15];

function renderChart() {
    //Erstellung eines neuen Graphen
    new Chart("graph", {

并且a }在之前关闭renderChart()

赞(0）分享  回复(0）举报  2023-03-02
我来回答

相关问题

    查看更多

    热门标签

    更多
    JavaquerypythonNode开发语言requestUtil数据库Table后端算法LoggerMessageElementParser

    最新问答

    更多
    • 蜀ICP备2022004421号-2 NULL123 https://www.null123.com © All rights reserved
    • 本站内容来源互联网,如果侵犯您的权益请联系我们删除, 联系方式：448109455@qq.com