在 Express 中渲染 JSON 文件以在 PUG 中进行插值

Question

我正在制作一个网站来显示我的项目 linked 及其 github 存储库。

由于抄袭问题，我省略了 Pug 文件。（这是一个学校项目）

现在，我必须使用动态路由。基于 id（来自 JSON），我需要呈现所需版本的 Pug 项目模板，以显示 JSON 文件中数组列表项目中的单个项目。然后能够通过在 JS 文件中将它们添加为局部变量来将该数据传递给 pug 模板。

我的问题是 link 如何获得 JSON 文件？或 link 数组对象？

几个小时以来，我一直在努力解决这个问题，但没有结果。

如果这是一个非常明显的问题，我很抱歉。

project.pug

    h1 Title #{project_name}

    p
      | #{description}

    h6 Technologies

    ul
      each project in projects
        li= project.technologies

app.js

const express = require('express');
const json = require('./data.json');
const path = require('path');
const { query } = require('express');

const app = express();
const read = json();

//Not sure about this ????
const filepath = path.basename('Users/x/Downloads/sem 2/CSIS 3380 Web Programming JS/Session 4/Express Site/public');

app.set('view engine', 'pug');
app.use(express.static('public'));


// render "Home" page with locals set to data.projects
app.get('/index', (req, res) => {
    res.render('Home', {
        locals: {
            'projects': projects
        }
    });
});

app.get('/about', (req, res) => {
    res.render = ('About');
});

//Dynamic routes based on id of project adding locals to pass to pug
app.get('/projects/:id', function(req, res) {
    res.render('project', { projects: query.data });
});

app.listen(3000, () => {
    console.log("Server started on port 3000");

});

data.json

{
    "projects": [{
            "id": 0,
            "project_name": "Battleships",
            "description": "A game that allows you to guess battleships on a gamebaords and reports hits/misses.",
            "technologies": ["HTML", "JavaScript", "CSS"],
            "image_url": ["", "", ""]
        },
        {
            "id": 1,
            "project_name": "Random Quotes Flashcards",
            "description": "Flashcards of random famous qoutes from renowned personalities.",
            "technologies": ["HTML", "JavaScript", "CSS"],
            "image_url": ["", "", ""]
        },
        {
            "id": 2,
            "project_name": "BMI",
            "description": "A BMI calculator, computes BMI with weight and height inputs.",
            "technologies": ["HTML", "JavaScript", "CSS", "Node.js", "pug"],
            "image_url": ["", "", ""]
        }
    ]
}

Answer 1

您可以使用 req.params.id 获取 ID，并使用 数组过滤方法 将项目与提供的 ID 匹配。

app.js

app.get('/projects/:id', function(req, res) {
// 1) Get the ID from the url
const id = req.params.id;
// 2) Use the "filter" method to match the result with the ID
const result = data.projects.filter(el => el.id === id);
// 3) Pass only the project that match the ID
    res.render('project', { projects: result });
});

然后，您将在对象内部有一个 array 属性 projects.

示例：
如果我运行 "/projects/2"，这将是我在 result 变量中的结果：

[{
  description: "A BMI calculator, computes BMI with weight and height inputs.",
  id: 2,
  image_url: ["", "", ""],
  project_name: "BMI",
  technologies: ["HTML", "JavaScript", "CSS", "Node.js", "pug"]
}]

您应该可以使用 project.pug.

中的信息

在 Express 中渲染 JSON 文件以在 PUG 中进行插值

Render JSON file in express to be interpolated in PUG

javascript

json

routes

express

pug