【问题标题】:ejs err ' data is not defined' errejs err '数据未定义' err
【发布时间】:2018-08-14 16:55:29
【问题描述】:

我是在这里编程的初学者,我正在尝试将 /admin.ejs 的 POST 数据呈现到 /home.ejs。我将数据粘贴在管理页面上,它正在工作,但是当我尝试渲染到主页时,它说数据未定义:/`提前谢谢。

paths

-model
--input.js
-routes
--adminRouter.js
--indexRouter.js
-views
--admin
---admin.ejs
--partials
---header.ejs
---footer.ejs
--home.ejs
-index.js

adminRouter.js

可能我的错误就在这里

const   express       =   require("express"),
        session       =   require('express-session'),
        bodyParser        =   require("body-parser"),
        app               =   express(),
        router        =   express.Router();


/////yancilar//////
var jsonParser = bodyParser.json();
var urlencodedParser = bodyParser.urlencoded({ extended: false });
app.set("view engine","ejs" );

///////////////
router.get('/admin', (req, res)=>{

    res.render('admin/admin');
});
router.post('/admin',urlencodedParser, (req, res)=>{
     console.log(req.body); 
     const data = req.body.input ;
     res.render('home', {data : data});
     console.log(data);


});  

home.ejs

        <% include ./partials/header %>

    <div class="container">


            <h1 class="my-4 text-center text-lg-left">Thumbnail Gallery</h1>

            <div class="row text-center text-lg-left">

              <div class="col-lg-3 col-md-4 col-xs-6">

                <a href='' class="d-block mb-4 h-100 ">

                    <% if (data) { %>
                      <h2><%- data %></h2>
                  <% } %>

                  <img class="img-fluid img-thumbnail"  src="" alt="">

                </a>

              </div>

            </div>

          </div>

    <% include ./partials/footer %>

index.js

const mongoose          =   require("mongoose"),
      express           =   require("express"),
      app               =   express(),
      input             =   require("./models/input"),
      bodyParser        =   require("body-parser"),
      passport          =   require("passport"),
      expressSession    =   require("express-session"),
      LocalStrategy     =   require("passport-local");

///pass////
app.use(passport.initialize());
app.use(passport.session());
//passport.use(new LocalStrategy(input.authenticate()));
//passport.serializeUser(input.serializeUser());
//passport.deserializeUser(input.deserializeUser());


////Routes///////////////////
const indexRouter = require("./routes/indexRouter");
const adminRouter = require("./routes/adminRouter");

///App Config////////////////
app.set("view engine","ejs" );
app.use(express.static("public"));
mongoose.connect('mongodb://localhost/game');
app.use(bodyParser.urlencoded({ extended: false }));
app.use(bodyParser.json());

/////routers use ////////////
app.use(adminRouter);
app.use(indexRouter);

admin.ejs

<% include ../partials/header %>
  <form action="admin" method="POST" >
    <label class="sr-only" for="input">Name</label>
    <input type="text" class="form-control mb-2 mr-sm-2 mb-sm-0" id="input" placeholder="Jane Doe" name="input" />
    <label class="sr-only" for="inlineFormInputGroup">Username</label>
    <div class="form-check mb-2 mr-sm-2 mb-sm-0">

    </div>
    <button type="submit" class="btn btn-primary">Submit</button>
  </form>


      <div>

      </div>
  <% include ../partials/footer %>

索引路由器

const   express       =   require("express"),
        router        =   express.Router(),
        app           =   express();

router.get('/', function(req, res) {
    res.render('home');  
});


module.exports = router;

【问题讨论】:

标签: javascript express post ejs body-parser


【解决方案1】:

仅仅因为您 POST 将数据发送到 /admin 并使用该数据呈现主页,并不意味着当您导航到 /home 时数据将持续存在。

在此处查看您的路线。没有数据传到家里。

router.get('/', function(req, res) {
    res.render('home');  
});

您可以使用数据库,mongoose 是常用的:

router.post('/admin', urlencodedParser, (req, res) => {
  const data = req.body.input ;
  // instead of calling res.render();
  // store it in a database here
});

然后您可以检索数据并将其传递给任何路由。

router.get('/', function(req, res) {
  // query the database here
  // const data = database.query();
  res.render('home', {data: data} );  
});

【讨论】:

  • 很可能就是问题所在 :) 我如何将数据导航到 /home ?
  • 嗯,有很多方法可以做到这一点。如果您需要持久化数据,最常见的方法是使用数据库并在需要使用该数据时从中查询。
  • 正是我的想法^^。感谢您的帮助。
猜你喜欢
  • 1970-01-01
  • 2020-09-13
  • 2021-07-02
  • 2015-06-09
  • 1970-01-01
  • 2021-04-13
  • 1970-01-01
  • 2013-03-01
  • 2020-10-28
相关资源
最近更新 更多