SPA w/ Node.JS and Express and .ejs



您将如何在单个页面应用程序上显示解析数据。例如,我能够委托。

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>

,但我只有一个错误。我应该使用后路由替换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);
});

最新更新