В app.post() я хочу отобразить элементы, которые я добавил, через представление todo.ejs.
В app.delete(), я также хочу удалить любой элемент, когда я щелкну по нему.
я определяю такие:
const bodyParser =require('body-parser');
const urlencodedParser = bodyParser.urlencoded({ extended: false });
const firebase= require('firebase');
const firebaseConfig = {}; // (i hid config data)
const firebaseapp=firebase.initializeApp(firebaseConfig);
const db=firebase.firestore();
todocontroller.js
app.get('/todo',(req,res)=>{
db.collection('todos').onSnapshot(snapshot=>{
const todos=snapshot.docChanges();
res.render('todo',{todos:todos});
});
});
app.post('/todo',urlencodedParser,(req,res)=>{
db.collection('todos').add(req.body).then(()=>{
res.json(req.body);
}).catch(err=>{
console.log(err);
});
});
app.delete('/todo/:item',(req,res)=>{
const id=req.params.item.id;
db.collection('todos').doc(id).delete().then(()=>console.log(id)).catch(err=>{
console.log(err);
});
});
todo-list.js:
$(document).ready(function(){
$('form').on('submit', function(){
let item = $('form input');
let todo = {item: item.val()};
$.ajax({
type: 'POST',
url: '/todo',
data: todo,
success: function(data){
//do something with the data via front-end framework
location.reload();
}
});
return false;
});
$('li').on('click', function(){
let item = $(this).text().replace(/ /g, "-");
$.ajax({
type: 'DELETE',
url: '/todo/' + item,
success: function(data){
//do something with the data via front-end framework
location.reload();
}
});
});
});
todo.ejs:
<div id="todo-table">
<form method="POST" action="/todo">
<input type="text" name="item" placeholder="add new item..." required>
<button type="submit">Add item</button>
</form>
<ul>
<% todos.forEach(change=>{ %>
<% const todo= change.doc; %>
<li data-id="<%= todo.id %>"><%= todo.data().item %></li>
<% }); %>
</ul>
</div>
Выше приведены все js-файлы, которые я написал для создания простого приложения todo.