使用Node.JS和Express以及.ejs实现SPA

Question

如何在单页应用程序中展示解析数据。例如，我能够从API生成引用并将其记录在控制台上，但我不确定如何将它们发布在单个页面上。

Index.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 %> 

app.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文本替换为笑话。

我的当前结果如下：

索引页面

我尝试过了。

<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!");
});

- Corri Taylor

---

你需要先调用API，然后将结果传递给视图 res.render("index", {joke: parsedData });（假设parsedData是笑话字符串），然后在视图中访问joke。RTM: https://expressjs.com/en/guide/using-template-engines.html - Lawrence Cherone

非常感谢。我在HTML中使用了<%= body %>，将let和request放在get请求中，并在请求函数中编写了res.render("index", {body: parsedData });。老实说，我一度对自己产生了怀疑... - Corri Taylor

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);
});

- ALPHA

---

请将以下程序相关内容从英语翻译成中文。仅返回翻译后的文本: 如果您对此答案感到满意，请将其投票为正确答案。 - ALPHA

非常感谢您的帮助。 - Corri Taylor