Question

我是HTML和Node js的初学者，所以我决定从法国网站openclassroom开始训练自己做一个todolist。

我已经拿出解决方案代码来添加，删除和显示todolist的待办事项，并尝试自己重命名任务，徒劳无功......

我喜欢一步一步： - 单击todo旁边的unicode笔符号后打开文本输入 - 一旦通过单击提交按钮发送文本，然后修改所选项目

我现在得到的是，当我点击笔符号时，始终只修改第一个元素。我认为这是由于在我打印列表时调用的表单，因为此表单没有唯一的ID。

这是我的代码：

＆＃13;

var express = require('express');
var session = require('cookie-session'); // Charge le middleware de sessions
var bodyParser = require('body-parser'); // Charge le middleware de gestion des paramètres
var urlencodedParser = bodyParser.urlencoded({ extended: false });

var app = express();


/* On utilise les sessions */
app.use(session({secret: 'sess1'}))


/* S'il n'y a pas de todolist dans la session,
on en crée une vide sous forme d'array avant la suite */
.use(function(req, res, next){
    if (typeof(req.session.todolist) == 'undefined') {
        req.session.todolist = [];
    }
    next();
})

/* On affiche la todolist et le formulaire */
.get('/todo', function(req, res) { 
    res.render('todo.ejs', {todolist: req.session.todolist});
})

/* On ajoute un élément à la todolist */
.post('/todo/ajouter/', urlencodedParser, function(req, res) {
    if (req.body.newtodo != '') {
        req.session.todolist.push(req.body.newtodo);
    }
    res.redirect('/todo');
})

/*On modifie un élément de la todolist */
.post('/todo/modifier/:id', urlencodedParser,function(req, res){
	
	let i0 = parseInt(req.params.id);
	if(req.params.id != '' && Number.isInteger(i0))
	{
		console.log(i0);
		req.session.todolist[i0]=req.body.itemupdate;
	}
	res.redirect('/todo');
})

/* Supprime un élément de la todolist */
.get('/todo/supprimer/:id', function(req, res) {
    if (req.params.id != '') {
        req.session.todolist.splice(req.params.id, 1);
    }
    res.redirect('/todo');
})

/* On redirige vers la todolist si la page demandée n'est pas trouvée */
.use(function(req, res, next){
    res.redirect('/todo');
})

.listen(8080);

＆＃13;

<!DOCTYPE html>

<html>
    <head>
        <title>Ma todolist</title>
        <style>
            a {text-decoration: none; color: black;}
        </style>
    </head>

    <body>
        <h1>Ma todolist</h1>
		<script
		  src="http://code.jquery.com/jquery-3.2.1.js"
		  integrity="sha256-DZAnKJ/6XZ9si04Hgrsxu/8s717jcIzLy3oi35EouyE="
		  crossorigin="anonymous"></script>
			  
		<script type="text/javascript">
			//showhide the modifying text
		   function showHideForm(formid) {
			  var _form = document.getElementById(formid);
			  _form.style.display = (_form.style.display != "block") ? "block" : "none";
			  return false;
		   }
		</script>
		
		

        <ul>
        <% todolist.forEach(function(todo, index) { %>
            <li>
				<%= todo %> 
				<button <a href="/todo/supprimer/<%= index %>"> ✘</a>
				<script>
					var uniqueIDform= "hf"+<%=index%>;
					var uniqueIDitem= "itm"+<%=index%>;
				</script>
				
				<button onclick="return showHideForm('uniqueIDform');">✎</button>
				
				<form action="/todo/modifier/<%= index %>" id="uniqueIDform" style="display: none;" method="post">
						<label for="uniqueIDitem"></label>
						<input type="text" name="itemUpdate" id="uniqueIDitem" autofocus/>
						<input type="submit" value="OK" />
					</form>	
			</li>
        <% }); %>
        </ul>

        <form action="/todo/ajouter/" method="post">
            <p>
                <label for="newtodo">Que dois-je faire ?</label>
                <input type="text" name="newtodo" id="newtodo" autofocus />
                <input type="submit" />
            </p>
        </form>
    </body>
</html>

＆＃13;

感谢您的帮助！

Answer 1

这实际上并不是问题的答案，但它对于评论来说太大了！

我可以告诉你的第一件事是你应该使用PUT请求类型来修改TODO。虽然POST 可以用于更新数据，但通常不做这样做并保持API一致 - 了解有关REST API的更多信息here ：

GET是获取数据
POST是创建数据
PUT将更新数据
PATCH将更新特定的数据字段
DELETE将删除数据

现在已经清除了，我并没有完全理解你的代码，但这是问题的概念性答案：

要更新某些内容，您需要提供所述项目的ID或其标识符。您需要确保在请求中传递此ID，否则您的后端将不知道需要更新哪些数据。在概念上，您可以通过多种方式获取此ID，例如将最后单击的笔符号ID存储在某处以使其成为请求的一部分。

看来，如果您始终更新第一个，那么您总是将此ID作为零发送，并且可能会将数据放在[0]位置。我首先看一下chrome中的请求 - 打开开发人员工具，进入网络，刷新页面，修改内容并保存，然后你可以看到发送的新请求，然后点击它查看它的信息，应该包括ID。

如果该ID与您编辑的ID不匹配，则表示您的问题出在前端。像这样缩小你的问题，并尝试解决它。

编辑：如果我不得不猜测，您的<form action=...<% = index %>就是问题所在。

Todolist节点js - 修改待办事项。

1 个答案: