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

您将如何在单个页面应用程序上显示已解析的数据。例如，我能够console.log从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文字。

我目前的结果如下:

Index Page

我试着放

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

但是我只会得到一个错误。我应该使用POST路由替换ext吗？还是有另一种方法可以嵌入来自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!");
});

最佳答案

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

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

关于node.js - 带Node.JS和Express和.ejs的SPA，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/54977484/