Блог

Главная - Вопросы по программированию - Нужна помощь для обработки файлов в node express и MVC

Нужна помощь для обработки файлов в node express и MVC

#javascript #jquery #express #post

Вопрос:

Здесь у меня есть 5 файлов, как вы видите. Это приложение для списка задач, которое показывает задачи (сохраненные в переменной данных, расположенной в todocontroller.js)в браузере и с помощью поля ввода приложение должно добавить новый ввод в качестве задачи (элемент в массиве с именем данные). Теперь проблема в том, что он не добавляет введенное значение в список после нажатия на кнопку отправить. Я не знаю, что не так, Может ли кто-нибудь помочь мне это исправить

todocontroller.js

     var express = require('express')
    var todoController = 
    require('./controllers/todoController')
    var app = express()
    
    app.set('view engine', 'ejs')
    
    app.use(express.static('./public'))
    app.use(express.urlencoded({extended: true}))
    app.use(express.json())
    
    todoController(app)
    
    app.listen(3000)
    console.log('Listening to port 3000...')

app.js

 var data = [{item :'get milk'}, {item :'water'}, {item :'electricity'}]

module.exports = function(app){
    
    app.get('/todo', function(req, res){ 
        res.render('todo', {list : data})

    }) 
    
    app.post('/todo', function(req, res, next){
        console.log(req.body)
        data.push(req.body)
        res.send(data)
        next()
        
    }) 

    app.delete('/todo', function(res, req){
        
    }) 
}

todo.ejs

 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Todo list app</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <link rel="stylesheet" href="/assets/styles.css" type="text/css">
</head>
<body>
    <h1>Todo list</h1>
    <div id="todo-table">
        <form>
            <input type="text" name="item" placeholder="Add an item...">
            <button type="submit">Add item</button>
        </form>
        <ul>
            <% for(var i=0; i < list.length; i  ) { %>
                <li><%= list[i].item %></li>
            <% } %>            
        </ul>
    </div>
</body>
</html>

todo-list.js

 $(document).ready(function(){

  $('form').on('submit', function(){

      var item = $('form input');
      var 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(){
      var 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();
        }
      });
  });

});

пакет.json

 {
  "name": "node-js-playlist-master",
  "version": "1.0.0",
  "description": "CSS and asset files for the Net Ninja YouTube nodejs playlist",
  "main": "app.js",
  "scripts": {
    "test": "echo "Error: no test specified" amp;amp; exit 1"
  },
  "author": "me",
  "license": "ISC",
  "dependencies": {
    "body-parser": "^1.19.0",
    "ejs": "^3.1.6",
    "express": "^4.17.1"
  }
}

Комментарии:

1. Пожалуйста, опишите, что означает «это не работает для меня». Есть ли какие-либо сообщения об ошибках? Делает ли это что-то неожиданное? Что происходит?

2. Что я подразумеваю под «Это не работает для меня», так это то, что когда я добавляю некоторые данные в область ввода, они не добавляются в список задач, изменений нет.

Метки: