Создание приложения со списком Todo с использованием Node.js и Express.js в Visual Studio

Добавьте новый файл JavaScript в папку маршрутов и назовите его todos.js. Этот файл будет содержать службу API для отображения и добавления элементов задач в коллекцию в памяти. Ниже приведен код в файле: 

var _ = require('underscore');
 
var listItems =
[
    {
        "id": 1,
        "text": "Get Up"
    },
    {
        "id": 2,
        "text": "Brush teeth"
    },
    {
        "id": 3,
        "text": "Get Milk"
    },
    {
        "id": 4,
        "text": "Prepare coffee"
    },
    {
        "id": 5,
        "text": "Have a hot cup of coffee"
    }
];
 
exports.list = function(req, res){    
    res.send(listItems);
};
 
exports.addToList = function (req, res) {
    var maxId = _.max(listItems, function (item) { return item.id });
    console.log(maxId);
    var newTodoItem = { "id": maxId.id + 1, "text": req.body.text };
    listItems.push(newTodoItem);
    res.send({ success: true, item: newTodoItem });
};

Я использовал подчеркивание для вычисления следующего идентификатора элемента todo. Чтобы использовать подчеркивание, нам нужно добавить объявление require в начале файла, оно похоже на операторы using в файлах кода C #. Все участники, которые будут представлены внешнему миру, должны быть добавлены к объекту экспорта. 

Чтобы представить вышеупомянутые методы как API, нам нужно определить метод HTTP и присоединить к ним путь маршрута. В файле app.js добавьте следующий оператор вверху:

var todos = require('./routes/todos');

Это утверждение возвращает объект модуля, предоставляемый файлом todos.js. Теперь все, что нам нужно сделать, это определить маршруты, они выполняются следующим образом:

app.get('/api/todos', todos.list);
app.post('/api/todos', todos.addToList);

Это довольно легко, не так ли? С этим мы закончили работу на стороне сервера. Давайте определим компоненты на стороне клиента. Для начала давайте добавим jQuery на страницу макета. Вы можете установить пакет с помощью Bower и использовать его, или вы также можете указать CDN. Давайте использовать путь CDN Google для ссылки на jQuery. Ниже приводится тег Jade, который делает это: 

script(src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js")

Теперь давайте обновим файл index.jade, чтобы он содержал элементы списка. Ниже приведена разметка измененного файла index.jade:

extends layout
 
block content
  h1= title
  p Welcome to #{title}
  ul(id="todoList")
  br
  br
  input(type="text" id="txtNewTodo")
  button(id="btnAddTodo") Add New Todo
  script(src="/javascripts/todoOperations.js")

Как видите, в jade для определения тегов не требуются угловые скобки. Он понимает вложение через отступ. Для отступа тегов можно использовать пробелы или символы табуляции; но не оба. Нам еще предстоит определить файл todoOperations.js, упомянутый выше. Давай сделаем это сейчас. Добавьте файл JavaScript в папку javascripts в общей папке и назовите его todoOperations.js. Код в этом файле довольно прост, если вы знаете jQuery. 

var todoOperations = function () {
    var todos;
 
    function getAllTodos() {
        //var deferred=$.defer();
 
        return $.get("/api/todos", function (data) {
            todos = data;
        });
    }
 
    function addTodo(todoItem) {
        return $.post('/api/todos', todoItem);
    }
 
    return {
        getAllTodos: getAllTodos,
        addTodo: addTodo
    }
}();
 
var list;
 
function refreshTodos() {
    todoOperations.getAllTodos().then(function (data) {
        $.each(data, function () {
            list.append("<li data-id='" + this.id + "'>" + this.text + "</li>");
        });
    });
}
 
$(function () {
    list = $("#todoList");
 
    $("#btnAddTodo").click(function () {
        var textBox = $("#txtNewTodo");
        if (textBox.val() !== "") {
            todoOperations.addTodo({ "text": textBox.val() }).then(function (data) {
                if (data.success === true) {
                    list.append("<li data-id='" + data.item.id + "'>" + data.item.text + "</li>");
                    textBox.val('');
                }
            });
        }
    });
 
    refreshTodos();
});

Теперь запустите приложение. Вы сможете увидеть список элементов задач, заполненных на странице, а также сможете добавлять новые элементы задач. 

 

Чтобы обновить и удалить элементы todo, вам нужно определить методы в файле todos, js и добавить маршруты для них в файл app.js, используя методы app.put и app.delete. Я оставляю это как упражнение для вас ?

Удачного кодирования!