这节课来做些假数据来填充我们的应用。
上节课最后我们已经可以看到项目能运行起来，但我们无法进行删除或者添加的动作，这节课我们来实现这些功能，包括服务端写些假数据。
服务端假数据
- 用一个数组变量保存假数据，数组里的每个对象即是一条即将处理的事项（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);
});
后续我们会加入数据库部分的内容。
网友评论