【翻译】Node.js 教程 —— 实战：todo app（4）

2019-03-07 本文已影响12人 kyuan

这节课来做些假数据来填充我们的应用。

上节课最后我们已经可以看到项目能运行起来，但我们无法进行删除或者添加的动作，这节课我们来实现这些功能，包括服务端写些假数据。

服务端假数据

用一个数组变量保存假数据，数组里的每个对象即是一条即将处理的事项（todo item）
然后将这个数据放到模板页面上

'todoController.js'

// 假数据
var data = [{
    item: 'get milk',
    item: 'walk dog',
    item: 'kick ass',
}];

app.get('/todo', function(req, resp){
    resp.render('todo', {
        todos: data
    })
});

ejs 上接收数据并使用 ejs 语法进行逻辑处理

`todo.ejs`
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="/assets/style.css">
    <title>Todo List</title>
</head>
<body>
    <h1>My todo app</h1>
    <div id="todo-table">
        <form>
            <input type="text" name="item" placeholder="添加新项" required>
            <button type="submit">添加</button>
        </form>
        <ul>
            <!-- for 循环，记得加结束标签 -->
            <% for(var i = 0; i < todos.length; i++){ %>
            <!-- item 才是真正的内容 -->
            <li><%= todos[i].item %></li>
            <% } $>
        </ul>
    </div>
    <!-- 使用 jquery 的 ajax 库 -->
    <script src="https://cdn.bootcss.com/jquery/1.10.2/jquery.js"></script>
</body>
</html>

添加项功能介绍

当刷新页面后，会看到表单内容，实战的第一节课上的作者已经为我们写好了这个 submit 的功能，这里我们介绍一下：

表单提交（点添加按钮）时候会执行下面方法
获取输入框的内容并组装成类似于上方 express 的假数据
用 post 方法发起请求到服务器端
成功后刷新页面

$('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;
});

后端处理 POST 方法过来的数据

需要使用 body-parse对前端请求过来的数据进行处理
post 的处理方式即将请求过来的数据加入到假数据（数组）上

'todoController.js'

var bodyParser = require('body-parser);

// 请求体的数据将会通过 bodyParser urlencode 方法解析
var urlencodedParser = bodyParser.urlencoded({ extended: false });

// 假数据
var data = [{
    item: 'get milk',
    item: 'walk dog',
    item: 'kick ass',
}];

app.get('/todo', function(req, resp){
    resp.render('todo', {
        todos: data
    })
});

app.post('/todo', urlencodedParser, function(req, resp){
    data.push(req.body);
    res.json(data);
});

这样前端请求成功后就会刷新页面，服务器就会带着新加入的数据返回对应的 ejs 模板（这里就是 todo.ejs)

 $.ajax({
    type: 'POST',
    url: '/todo',
    data: todo,
    success: function(data){
      //do something with the data via front-end framework
      location.reload();
    }
  });

但是这种假数据是运行在服务器环境中，只要我们停了服务器重启，数据则会恢复成原来的三条，如果需要持久化，在之后的课程会用数据库的方式来实现

删除功能

获取列表项的内容（将空格替换成 - )
通过 delete 方法发送到服务器端

$('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();
      }
    });
});

后端处理 DELETE 方法过来的数据

后端通过 req.param 获取 url 参数来处理删除哪项
同样的，前端请求成功后就会刷新页面，服务器就会带着删除后的数据返回对应的 ejs 模板（就是 todo.ejs)

// 假数据
var data = [{
    item: 'get milk',
    item: 'walk dog',
    item: 'kick ass',
}];

app.delete('/todo/:item', function(req, resp){
    data = data.filter(function(todo){
        return todo.replace(/ /g, "-") !== req.param;
    });
    resp.json(data);
});

后续我们会加入数据库部分的内容。