最新消息: 电脑我帮您提供丰富的电脑知识,编程学习,软件下载,win7系统下载。

使用带快递的ejs时引用错误

IT培训 admin 2浏览 0评论

使用带快递的ejs时引用错误

我正在使用快速制作一个简单的天气应用程序,并将我从API获取的天气信息传递给html文件,我在那里使用ejs来显示它们。

这是用于创建服务器的文件:

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

const apiKey = "*******************";

app.use(express.static('public'));
app.use(bodyParser.urlencoded({ extended: true }));
app.set("view engine", "ejs");

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

app.post("/", function (req, res) {
    res.render("index");
    console.log(req.body.city);
    let city = req.body.city;
    let url = `.5/weather?q=${city}&units=imperial&appid=${apiKey}`;
    request(url, function (err, response, body) {
        if (err) {
            res.render('index', { weather: null, error: 'Error, please try again' });
        } else {
            let weather = JSON.parse(body);
            if (weather.main == undefined) {
                res.render('index', { weather: null, error: 'Error, please try again' });
            } else {
                let weatherText = `It's ${weather.main.temp} degrees in ${weather.name}!`;
                res.render('index', { weather: weatherText, error: null });
            }
        }
    });
});

app.listen(8080, function () {
    console.log("Example app listening on port 8080 !");
});

这是我的带有ejs的html文件:

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Test</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" media="screen" href="/css/style.css" />
</head>

<body>
    <h1>Know Your Weather ! </h1>
    <div class="container">
        <fieldset>
            <form action="/" method="POST">
                <input name="city" type="text" class="ghost-input" placeholder="Enter a City" required>
                <input type="submit" class="ghost-button" value="Get Weather">
            </form>
            <% if(weather !== null){ %> <p><%= weather %></p><% } %>
            <% if(error !== null){ %> <p><%= error %></p><% } %>
        </fieldset>
    </div>

</body>

</html>

但是当我在网站上输入时,我收到以下错误:

> ReferenceError: /home/anirudh/Desktop/weather-app/views/index.ejs:20
>     18|                 <input type="submit" class="ghost-button" value="Get Weather">
>     19|             </form>
>  >> 20|             <% if(weather !== null){ %> <p><%= weather %></p><% } %>
>     21|             <% if(error !== null){ %> <p><%= error %></p><% } %>
>     22|         </fieldset>
>     23|     </div>
> 
> weather is not defined
>     at eval (eval at compile (/home/anirudh/Desktop/weather-app/node_modules/ejs/lib/ejs.js:618:12),
> <anonymous>:11:8)
>     at returnedFn (/home/anirudh/Desktop/weather-app/node_modules/ejs/lib/ejs.js:653:17)
>     at tryHandleCache (/home/anirudh/Desktop/weather-app/node_modules/ejs/lib/ejs.js:251:36)
>     at View.exports.renderFile [as engine] (/home/anirudh/Desktop/weather-app/node_modules/ejs/lib/ejs.js:482:10)
>     at View.render (/home/anirudh/Desktop/weather-app/node_modules/express/lib/view.js:135:8)
>     at tryRender (/home/anirudh/Desktop/weather-app/node_modules/express/lib/application.js:640:10)
>     at Function.render (/home/anirudh/Desktop/weather-app/node_modules/express/lib/application.js:592:3)
>     at ServerResponse.render (/home/anirudh/Desktop/weather-app/node_modules/express/lib/response.js:1008:7)
>     at /home/anirudh/Desktop/weather-app/server.js:17:9
>     at Layer.handle [as handle_request] (/home/anirudh/Desktop/weather-app/node_modules/express/lib/router/layer.js:95:5)

我对ejs做错了什么?

回答如下:

问题出在你定义的post路线上:

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

res.render的这个调用不提供任何本地人,因此,没有定义weather。我没有尝试过,但这立刻引起了我的注意,我很确定这是你遇到的错误的根源 - 特别是因为你说它只在你提交数据时才会发生。

我认为这是以前版本或某些调试的意外遗留,因为您在下面正确呈现了几行。如果您只是删除对res.render的调用,我想这些事情应该按预期工作。

使用带快递的ejs时引用错误

我正在使用快速制作一个简单的天气应用程序,并将我从API获取的天气信息传递给html文件,我在那里使用ejs来显示它们。

这是用于创建服务器的文件:

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

const apiKey = "*******************";

app.use(express.static('public'));
app.use(bodyParser.urlencoded({ extended: true }));
app.set("view engine", "ejs");

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

app.post("/", function (req, res) {
    res.render("index");
    console.log(req.body.city);
    let city = req.body.city;
    let url = `.5/weather?q=${city}&units=imperial&appid=${apiKey}`;
    request(url, function (err, response, body) {
        if (err) {
            res.render('index', { weather: null, error: 'Error, please try again' });
        } else {
            let weather = JSON.parse(body);
            if (weather.main == undefined) {
                res.render('index', { weather: null, error: 'Error, please try again' });
            } else {
                let weatherText = `It's ${weather.main.temp} degrees in ${weather.name}!`;
                res.render('index', { weather: weatherText, error: null });
            }
        }
    });
});

app.listen(8080, function () {
    console.log("Example app listening on port 8080 !");
});

这是我的带有ejs的html文件:

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Test</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" media="screen" href="/css/style.css" />
</head>

<body>
    <h1>Know Your Weather ! </h1>
    <div class="container">
        <fieldset>
            <form action="/" method="POST">
                <input name="city" type="text" class="ghost-input" placeholder="Enter a City" required>
                <input type="submit" class="ghost-button" value="Get Weather">
            </form>
            <% if(weather !== null){ %> <p><%= weather %></p><% } %>
            <% if(error !== null){ %> <p><%= error %></p><% } %>
        </fieldset>
    </div>

</body>

</html>

但是当我在网站上输入时,我收到以下错误:

> ReferenceError: /home/anirudh/Desktop/weather-app/views/index.ejs:20
>     18|                 <input type="submit" class="ghost-button" value="Get Weather">
>     19|             </form>
>  >> 20|             <% if(weather !== null){ %> <p><%= weather %></p><% } %>
>     21|             <% if(error !== null){ %> <p><%= error %></p><% } %>
>     22|         </fieldset>
>     23|     </div>
> 
> weather is not defined
>     at eval (eval at compile (/home/anirudh/Desktop/weather-app/node_modules/ejs/lib/ejs.js:618:12),
> <anonymous>:11:8)
>     at returnedFn (/home/anirudh/Desktop/weather-app/node_modules/ejs/lib/ejs.js:653:17)
>     at tryHandleCache (/home/anirudh/Desktop/weather-app/node_modules/ejs/lib/ejs.js:251:36)
>     at View.exports.renderFile [as engine] (/home/anirudh/Desktop/weather-app/node_modules/ejs/lib/ejs.js:482:10)
>     at View.render (/home/anirudh/Desktop/weather-app/node_modules/express/lib/view.js:135:8)
>     at tryRender (/home/anirudh/Desktop/weather-app/node_modules/express/lib/application.js:640:10)
>     at Function.render (/home/anirudh/Desktop/weather-app/node_modules/express/lib/application.js:592:3)
>     at ServerResponse.render (/home/anirudh/Desktop/weather-app/node_modules/express/lib/response.js:1008:7)
>     at /home/anirudh/Desktop/weather-app/server.js:17:9
>     at Layer.handle [as handle_request] (/home/anirudh/Desktop/weather-app/node_modules/express/lib/router/layer.js:95:5)

我对ejs做错了什么?

回答如下:

问题出在你定义的post路线上:

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

res.render的这个调用不提供任何本地人,因此,没有定义weather。我没有尝试过,但这立刻引起了我的注意,我很确定这是你遇到的错误的根源 - 特别是因为你说它只在你提交数据时才会发生。

我认为这是以前版本或某些调试的意外遗留,因为您在下面正确呈现了几行。如果您只是删除对res.render的调用,我想这些事情应该按预期工作。

与本文相关的文章

发布评论

评论列表 (0)

  1. 暂无评论