Javascript 如何使用Jade模板从Redis数据库中删除html列表项？

我使用node.js、express和jade制作了一个非常简单的待办事项列表应用程序（见下面评论中的教程）。该应用程序可以工作，因此我可以将项目添加到列表中，并将其保存到redis数据库，id等于列表项目的名称

现在，我如何编辑我的jade模板，使列表项旁边显示一个删除按钮，当我单击它时，该项将从数据库中删除

以下是相关代码：

Routes.js文件

exports.index = function(req, res){
  res.render('index', { title: 'Welcome to JSPlayground Todo' });
};

var redis = require("redis"),
  client = redis.createClient();

exports.todo = function(req, res){ //Pulls items from database to display on page
  var todos = [];
  client.hgetall("Todo", function(err, objs) {
    for(var k in objs) {
      var newTodo = {
        text: objs[k]
      };
      todos.push(newTodo);
    }
    res.render('todo', {
      title: 'New Todo List',
      todos: todos
    });
  });
};

exports.saveTodo = function(req, res) { //Saves a list item from input box to database
  var newTodo = {};
  newTodo.name = req.body['todo-text'];
  newTodo.id = newTodo.name.replace(/ /g, '');
  //console.log(newTodo.id);
  //console.log(newTodo.name);
  client.hset("Todo", newTodo.id, newTodo.name);
  res.redirect("back");
};

exports.delTodo = function(req, res) {
  var delTodo = {};
  delTodo.id = "Test";
  client.hdel("Todo", delTodo.id);
  res.redirect("back");
};

todo.jade文件

h1 new todo list
form(action="/save", method="post")
  p
    label Enter a new todo item
    input(type='text',placeholder='new todo', name='todo-text')
  p
    input(type='submit', value='Save')
ul
  each todo in todos
    li #{todo.text} 

如果我在模板页面上创建链接

a(href="/del") del

并将/del路由到routes.js文件中的此函数

exports.index = function(req, res){
  res.render('index', { title: 'Welcome to JSPlayground Todo' });
};

var redis = require("redis"),
  client = redis.createClient();

exports.todo = function(req, res){ //Pulls items from database to display on page
  var todos = [];
  client.hgetall("Todo", function(err, objs) {
    for(var k in objs) {
      var newTodo = {
        text: objs[k]
      };
      todos.push(newTodo);
    }
    res.render('todo', {
      title: 'New Todo List',
      todos: todos
    });
  });
};

exports.saveTodo = function(req, res) { //Saves a list item from input box to database
  var newTodo = {};
  newTodo.name = req.body['todo-text'];
  newTodo.id = newTodo.name.replace(/ /g, '');
  //console.log(newTodo.id);
  //console.log(newTodo.name);
  client.hset("Todo", newTodo.id, newTodo.name);
  res.redirect("back");
};

exports.delTodo = function(req, res) {
  var delTodo = {};
  delTodo.id = "Test";
  client.hdel("Todo", delTodo.id);
  res.redirect("back");
};

它将删除id为“Test”的单个列表项。但我不知道如何让它删除被单击的特定列表项

变化

a(href="/del") del

到

确保已启用ExpressBody解析器

app.user(express.bodyParser());

然后按如下所示修改路由

app.routes('/del/:todo_id', delTodo);

然后在routes.js中，按如下所示访问它

exports.delTodo = function(req, res) {
  var delTodoId = req.params.todo_id;
  client.hdel("Todo", delTodoId);
  res.redirect("back");
};

---

p、 我正试图修改教程从添加这个新的功能这是伟大的！我只有一个问题，如何使删除链接a（href=“/del/#{todo.id}”）del在li项中不呈现为文本？如果我使用'li{todo.text}a（href=“/del/{todo.id}”）del'将jade渲染为一个（href…）东西更简洁：我如何将'a（href=“/del/{todo.id}”）del'嵌套在带有jade的li中？没关系！我只需要在li下直接添加带有2个额外空格的链接代码。你最好的，它现在工作得很好！非常感谢你的帮助，它真的帮助了我学习