node.js - 带 Node.JS 和 Express 以及 .ejs 的 SPA

Question

您将如何在单页应用程序上显示已解析的数据。例如，我能够 console.log 从 API 生成的引用，但我不确定如何将它们发布到单个页面上。

索引.ejs:

<% include ./partials/header %> 
<div class=container>
    <h1>Free2BGeek</h1>
    <h3>This is your joke for the day!</h3>
    <hr>
    <p>
        "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse sit amet turpis ex. Vivamus aliquet ipsum tortor, at rhoncus ligula efficitur condimentum. Sed pretium arcu quis ex fringilla, et consectetur odio sodales."
    </p>
</div>
<% include ./partials/footer %> 

应用程序.js

const express        = require("express"),
      app            = express(),
      request        = require("request"),
      bodyParser     = require("body-parser"),
      mongoose       = require("mongoose");

mongoose.connect("mongodb://localhost:27017/geek-jokes", { useNewUrlParser: true });
mongoose.set('useFindAndModify', false);
app.set("view engine", "ejs");
app.use(express.static("public"));
app.use(bodyParser.urlencoded({extended: true}));

app.get("/", function(req, res){
    res.render("index");
});

let options = {
    url: 'https://geek-jokes.sameerkumar.website/api',
    method: 'GET'
};
request(options, (err, response, body) => {
    if(!err && response.statusCode == 200)
        var parsedData = JSON.parse(body);
        console.log(parsedData);
});

app.get("*", function(req, res){
    res.send("Error - I'm sorry, the page you tried to get to either does not exist or has been removed.");
});
app.listen(process.env.PORT, process.env.IP, function(){
    console.log("Geeks are ready!");
});

我希望能够用笑话替换 Lorem Ipsum 文本。

我目前的结果如下:

Index Page

我试着把

<p>
   <%= options %>
</p>

但我只得到一个错误。我应该使用 POST 路由来替换分机吗？或者是否有另一种方法来嵌入来自 api 的引用？

============================================= ============================

感谢 THEWOLF 和 Lawrence Cherone。 app.js 文件中的代码更新如下:

const express        = require("express"),
      app            = express(),
      request        = require("request"),
      bodyParser     = require("body-parser"),
      mongoose       = require("mongoose");

var url = process.env.DATABASEURL || "mongodb://localhost:27017/geek-jokes";
mongoose.connect(url);

mongoose.set('useFindAndModify', false);

app.set("view engine", "ejs");

app.use(express.static("public"));

app.use(bodyParser.urlencoded({extended: true}));

app.get("/", function(req, res){
        let options = {
            url: 'https://geek-jokes.sameerkumar.website/api',
            method: 'GET'
    };

    request(options, (err, response, body) => {
        if(!err && response.statusCode == 200)
            var parsedData = JSON.parse(body);
            console.log(parsedData);
            res.render("index", {body: parsedData });
    });
});

app.get("*", function(req, res){
    res.send("Error - I'm sorry, the page you tried to get to either does not exist or has been removed.");
});

app.listen(process.env.PORT, process.env.IP, function(){
    console.log("Geeks are ready!");
});

Answer 1

你必须像这样将要发送的数据对象传递给前端

app.get("/", function(req, res){
    res.render("index",{data:'your data like this in here'}); // change like this and acess it in front end the way you have done it 
});

let options = {
    url: 'https://geek-jokes.sameerkumar.website/api',
    method: 'GET'
};
request(options, (err, response, body) => {
    if(!err && response.statusCode == 200)
        var parsedData = JSON.parse(body);
        console.log(parsedData);
});