Question

我对为什么无法正确检索我在下面的pug代码中输入字段中输入的值感到困惑。我在此文件中有相似的部分，它们的写法几乎完全相同，并且它们可以正常工作，但是出于任何原因，当我从title代码引用它时，我都无法从输入字段中提取express值。 / p>

index.pug html代码：

section(class="get")
h3 Get Data By Title
form(action="/get-data",method="get")
  div(class="input")
    label(for="title") Title
    input(type="text", id="title", name="title")
  button(type="submit") LOAD
div
  if posts
    each val in items
      article(class="item")
        div Title: #{val.title}
        div Content: #{val.content}
        div Author: #{val.author}
        div ID: #{val._id}

在我的express文件中的index.js代码中，我尝试使用input从id="title"检索值，并使用它来查询数据库：

router.get('/get-data', function(req, res, next) {
  console.log("get-data")
  var item = {
    title: req.body.title
  };
  console.log(item);
  // Use mongoose to find data from database
  UserData.find(item)
      .then(function(doc) {
        console.log(doc)
        res.render('index', {title:"Movie Database",items: doc});
      }).catch(err => console.log(err));
});

当我查看控制台输出时，尽管我输入的值出现在get查询URL中，我仍然看不到任何值。

0|myapp_node  | get-data
0|myapp_node  | { title: undefined }
0|myapp_node  | []
0|myapp_node  | GET /get-data?title=findme 304 54.497 ms - -
0|myapp_node  | GET /stylesheets/style.css 304 0.382 ms - -

下面是从哈巴狗为我的文件渲染的整个HTML。它包含可能不相关的额外信息：

<!DOCTYPE html>
<html>
    <head>
        <title>Movie Database</title>
        <link rel="stylesheet" href="/stylesheets/style.css">
    </head>
    <body>
        <h1>Movie Database</h1>
        <p>Welcome to Movie Database</p>
        <section class="insert">
            <h3>Insert Data</h3>
            <form action="/insert" method="post">
                <div class="input">
                    <label for="title">Title</label>
                    <input type="text" id="title" name="title">
                </div>
                <div class="input">
                    <label for="content">Content</label>
                    <input type="text" id="content" name="content">
                </div>
                <div class="input">
                    <label for="author">Author</label>
                    <input type="text" id="author" name="author">
                </div>
                <button type="submit">INSERT</button>
            </form>
        </section>
        <section class="get">
            <h3>Get Data By Title</h3>
            <form action="/get-data" method="get">
                <div class="input">
                    <label for="title">Title</label>
                    <input type="text" id="title" name="title">
                </div>
                <button type="submit">LOAD</button>
            </form>
            <div></div>
        </section>
        <section class="update">
            <h3>Update Data</h3>
            <form action="/update" method="post">
                <div class="input">
                    <label for="title">Title</label>
                    <input type="text" id="title" name="title">
                </div>
                <div class="input">
                    <label for="id">ID</label>
                    <input type="text" id="id" name="id">
                </div>
                <div class="input">
                    <label for="content">Content</label>
                    <input type="text" id="content" name="content">
                </div>
                <div class="input">
                    <label for="author">Author</label>
                    <input type="text" id="author" name="author">
                </div>
                <button type="submit">UPDATE</button>
            </form>
        </section>
    </body>
</html>

这是我的app.js文件：

var createError = require('http-errors');
var express = require('express');
var path = require('path');
var cookieParser = require('cookie-parser');
var bodyParser = require('body-parser');
var logger = require('morgan');

var indexRouter = require('./routes/index');
// var usersRouter = require('./routes/users');

var app = express();

// view engine setup
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'pug');

app.use(logger('dev'));
app.use(express.json());
app.use(express.urlencoded({ extended: false }));
app.use(bodyParser.urlencoded({ extended: false }));
app.use(bodyParser.json());
app.use(cookieParser());
app.use(express.static(path.join(__dirname, 'public')));

app.use('/', indexRouter);
// app.use('/users', usersRouter);

// catch 404 and forward to error handler
app.use(function(req, res, next) {
  next(createError(404));
});

// error handler
app.use(function(err, req, res, next) {
  // set locals, only providing error in development
  res.locals.message = err.message;
  res.locals.error = req.app.get('env') === 'development' ? err : {};

  // render the error page
  res.status(err.status || 500);
  res.render('error');
});

module.exports = app;

Answer 1

因此，您要查找的数据位于请求对象的query属性上。您知道的方式是，在服务器日志中看到：

GET /get-data?title=findme

当您看到？沿着路径前进，在请求对象上进行查询。要访问这些属性，只需点击req.query.title或req.query.you_prop_name_here。

这是快递文档的摘录，向您展示了它的工作原理。

// GET /search?q=tobi+ferret
req.query.q
// => "tobi ferret"

// GET /shoes?order=desc&shoe[color]=blue&shoe[type]=converse
req.query.order
// => "desc"

req.query.shoe.color
// => "blue"

req.query.shoe.type
// => "converse"

无法从输入字段Express Pug中检索值

1 个答案: