Question

我正在创建一个Web应用程序，以便在集合中的数组上执行CRUD操作。收集模型如下：

var mongoose = require('mongoose');

var website = require('./website');

var plm = require('passport-local-mongoose');

var accountSchema = new mongoose.Schema({
  isPremium: Boolean,
  websites: [],
});

accountSchema.plugin(plm);

module.exports = mongoose.model('Account', accountSchema);

这是我的index.ejs文件。

<% include ./../partials/header.ejs %>
  <h1>
    <%= title %>
  </h1>

  <% if((user.isPremium==true && websites.length<5)||(user.isPremium==false && websites.length<3)) { %>
    <a class="btn btn-primary" href="/websites/add">Add new website</a>
    <% } %>
      <table class="table table-striped table-hover">
        <tr>
          <th>Url</th>
          <% if (user) { %>
            <th>Actions</th>
            <% } %>
        </tr>
        <% for(let i=0; i<websites.length; i++){ let website = websites[i] %>
          <tr>
            <td>
              <%= website %>
            </td>
            <td>
              <a href="/websites/<%= i %>" class="btn btn-info">Edit</a>
              <a href="/websites/delete/<%= i %>" class="btn btn-danger confirmation">Delete</a>
            </td>
          </tr>
          <% } %>
      </table>
      <% include ./../partials/footer.ejs %>

我想要做的是：当您点击编辑时，它会转到另一个编辑视图。我希望索引中显示的网站位于输入字段中。编辑视图看起来像这样。

<% include ../partials/header.ejs %>

<main class="container">

  <h1>Game Details</h1>

  <form method="post">
    <div class="form-group">
      <label for="title" class="col-sm-2 control-label">Url: *</label>
      <input name="title" id="title" required value="<%= websiteUrl %>"/>
    </div>
    <%= user %>
    <button class="btn btn-success col-sm-offset-2">Save</button>
  </form>

</main>

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

我目前的路线看起来像这样。

// GET: /websites/:_id - show edit form
router.get('/index', isLoggedIn, function(req, res, next) {
  var user = req.user;
  var website = user.website;
  if (
    (user.isPremium == true && websites.length < 5) ||
    (user.isPremium == false && websites.length < 3)
  ) {
    res.render('websites/edit', {
      title: 'Edit websites',
      user: req.user,
      website: website,
    });
  } else {
    res.redirect('/');
  }
});

问题是当我点击编辑按钮时会抛出错误。 Cannot GET /websites/2。 2根据我点击的变化而变化。

我做错了什么？

再一次：我想要做的是：当您点击编辑时，它会转到另一个编辑视图。我希望索引中显示的网站位于输入字段中。

Answer 1

您需要在Express应用中为/websites/edit/:id设置不同的路由处理程序。您现在正试图在/index路由处理程序中执行此操作。

我提供了一些非常基本的代码，展示了如何提供编辑页面的链接，允许您将网站的数组索引传递给编辑模板。

然而，数组索引可能不是最佳选择，因为它可能不容易映射到特定网站。您可能拥有可以包含在index视图中的数据库ID，而是通过。这是您的设计选择。将websites模板传递到index模板的... var websites = require('./routes/websites'); ... app.use('/websites', websites);参数修改为对象数组并不困难，例如包括网站名称和唯一ID。你可以完全放弃索引。

app.js

<!DOCTYPE html>
<html>
  <head>
    <title><%= title %></title>
    <link rel='stylesheet' href='/stylesheets/style.css' />
  </head>
  <body>
    <h1><%= title %></h1>
    <table>
    <% for(let i=0; i<websites.length; i++){ let website = websites[i] %>
    <tr>
      <td>
        <%= website %>
      </td>
      <td>
        <a href="/websites/edit/<%= i %>" class="btn btn-info">Edit</a>
        <a href="/websites/delete/<%= i %>" class="btn btn-danger confirmation">Delete</a>
      </td>
    </tr>
    <% } %>
    </table>
  </body>
</html>

视图/ index.ejs

var express = require('express');
var router = express.Router();

/* POST edit page. */
router.get('/edit/:id', function(req, res, next) {
  res.render('editWebsite', { title: 'THIS IS THE EDITOR' , websiteId: req.params.id});
});

module.exports = router;

路由/ websites.js

<!DOCTYPE html>
<html>
  <head>
    <title><%= title %></title>
    <link rel='stylesheet' href='/stylesheets/style.css' />
  </head>
  <body>
    <h1><%= title %> for editing website <%= websiteId %></h1>
    <p>Welcome to <%= title %></p>
    <p>Do your editing here.</p>
  </body>
</html>

视图/ editWebsite.ejs

{{1}}

节点中的特定路由表达

1 个答案:

app.js

视图/ index.ejs

路由/ websites.js

视图/ editWebsite.ejs