如何在前端使用来自 api 的 JSON 数据答案

【问题标题】：How to use JSON data from api in frontend如何在前端使用来自 api 的 JSON 数据
【发布时间】：2020-04-23 12:47:22
【问题描述】：

我关注a tutorial 用 express 和 postgres 制作了一个 api。我可以毫无问题地以 json 形式获取所有数据。但我不知道如何在网站前端使用数据。

这些是我在链接的 2 个不同文件中的内容。

index.js:

const db = require('../queries')

router.get('/classes/:id', db.getClassById)

router.get('/classes/:id/edit', db.getClassById, (req, res) => {
    res.render('dashboard/editClass')
})

queries.js：

const getClassById = (req, res) => {
    const id = parseInt(req.params.id)
    pool.query('SELECT * FROM classes WHERE state = 1 AND classId = $1', [id], (err, results) => {
        if(err){ 
            throw err
        }
        res.status(200).json(results.rows)
    })
}

module.exports = {
    getClassById
}

getClassById 查询由 express 中间件调用，并自动将 json 数据发送到页面，这将不允许 res.render('dashboard/editClass') 工作。

那么我该如何调用这个查询，以便我可以使用查询中的数据填写表单，以便用户可以查看现有数据并进行他们想要的任何更改？

【问题讨论】：

看起来您正试图在一条路线中完成两条路线的工作。通常，您要么为 ajax 调用返回 json，或将模板呈现为浏览器的 html..
为此，您应该使用 2 个单独的路由，一个用于呈现您的模板，一个作为返回 JSON 数据的 API 端点
@Marc 这意味着为了呈现模板，我应该使用 fetch 或 XMLHttpRequest 获取数据，并且我将调用类似 '/api/classes/:id' 的路由？

标签： node.js json postgresql express

【解决方案1】：

感谢 Mark 和 Marc 的评论，我意识到在渲染前端页面时我需要从自己的 api 中获取数据。我现在正在使用 axios 在节点中完成这项工作，到目前为止，它正在做的正是我想要的。

【讨论】：