Question

如何在单页面应用程序上显示已解析的数据。例如，我能够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!");
});

我想用笑话代替洛雷姆·伊普苏姆的文字。

我当前的结果如下：

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

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

带Node.JS和Express和.ejs的SPA

1 个答案: