表达如何通过不同端点重定向json数据

Question

我对使用 express 还很陌生，StackOverflow 上的回复非常令人困惑。 我拥有的是我使用 app.get() 检索的 JSON 数据。 我想要的是修改这些数据并将其发送到我的 index.html 文件。 我知道我可以简单地使用 fetch 函数从 get 端点获取索引文件中的数据，但我需要同时使用 app.post() 和 app.put() 函数。

Answer 1

我无法理解你的问题。

这是一个示例代码，它使用 axios 和普通的 vanilla javascript 从后端获取一些数据，然后在前端，您可以修改数据。 您可以将 axios 替换为 fetch，它仍然可以工作。

应用程序.js

const express = require("express");
const bodyParser = require("body-parser");
const port = 8000;

const app = express();

/* Simulating data, a better approach would be to use some storage like MySQL... */
let data = {
    name: "Elon Musk",
    age: "48",
    height: "1.88m"
};

app.use(express.static("public"));
/* body-parser is required so the server can parse the data sent. */
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: true }));

/* get the data... */
app.get("/api/mydata", function(req, res) {
    return res.json(data);
});

/* this is where the client will post the data */
app.post("/api/newdata", function(req, res) {
    data.name = req.body.name;
    data.age = req.body.age;
    return res.json("OK!");
});

app.listen(port, function() {
    console.log("Listening on 8000");
});

公共/index.html

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

    <input type="text" id="name" placeholder="Name..." value="">
    <input type="text" id="age" placeholder="Age..." value="">

    <button type="button" id="setValues">Change values!</button>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.19.0/axios.js"></script>
    <script>
        window.addEventListener("load", function() {
            axios.get("/api/mydata").then(function(res) {
                document.getElementById("name").value = res.data.name;
                document.getElementById("age").value = res.data.age;
            })
        });

        document.getElementById("setValues").addEventListener("click", function() {
            axios.post("/api/newdata", { 
                name: document.getElementById("name").value,
                age: document.getElementById("age").value
            }).then(function(res) {
                console.log("Sent!");
            })
        })
    </script>
</body>
</html>

如果您有任何问题，请告诉我！

表达如何通过不同端点重定向json数据

问题描述

1 个解决方案

解决方案1
0 2019-12-10 02:18:20

表达如何通过不同端点重定向json数据

问题描述

1 个解决方案

解决方案1 0 2019-12-10 02:18:20

解决方案1
0 2019-12-10 02:18:20