剧场模式
首页后端NodejsNodejs + Express + MongoDB 基础篇

Node.js + Express + MongoDB 基础篇 #14 项目实践 part 4 实现功能

海外散仙厉飞雨 · 真仙发布于
2

https://github.com/expressjs/body-parser

controllers/todoController.js

var bodyParser = require('body-parser');

var urlencodedParser = bodyParser.urlencoded({ extended: false });

var data = [ {item: 'get milk'}, {item: "walk dog"}, {item: 'kick some coding ass'} ];

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

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

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

views/todo.ejs

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Todo list</title>
  <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
  <link rel="stylesheet" href="/assets/styles.css" type="text/css">
  <script src="/assets/todo-list.js"></script>
</head>
<body>
  <div id="todo-table">
    <form>
      <input type="text" name='item' placeholder="Add new item..." required />
      <button type="submit">Add Item</button>
    </form>
    <ul>
      <% todos.forEach(function(todo) { %>
        <li><%= todo.item %></li>
      <% }) %>
    </ul>
  </div>
</body>
</html>
5 条回复
  • Panda · 真仙
    Panda · 真仙 #1

    九分钟的时候,比较这里不是很明白

  • 17721229100 · 金仙后期

    过滤器有一个问题,比如如果我输入了两个数字1,那么删除任意一个1都会删除两个1。

  • 海外散仙厉飞雨 · 真仙

    因为有 g 参数,正则里的,这个你自己慢慢优化啦

  • RayAnti · 真仙
    RayAnti · 真仙 #4

    最后比较那一部分的意思是你点击的item和现有的item进行比较,如果不相等的话(return XXX!==XXX 是true)就return回来,继续在列表中显示;
    如果这个是false就说明点击的和现有的是相等的,就代表则是你要删除的item,就不return了,就是删除掉了

  • 海外散仙厉飞雨 · 真仙

    是的

学员
dechuangchang · 金仙后期lzcdev · 真仙zcuizhichen · 真仙董博文 · 太乙玉仙ttswh2009 · 太乙巅峰liar · 真仙slinloving · 真仙薄情人 · 道祖RA9 · 真仙mtt3366 · 金仙后期itlaowang520 · 太乙巅峰iosLongFeng · 太乙巅峰andyliangshan · 真仙wjm0913 · 太乙玉仙sai2333 · 真仙qianduan · 真仙leo · 太乙玉仙496087321 · 真仙koiomi · 真仙zbx7858 · 道祖Shen6s · 真仙q888204573 · 金仙中期eilinge · 真仙
最新动态
dechuangchang · 金仙后期学习到了1:39
lzcdev · 真仙学习到了10:11
zcuizhichen · 真仙学习到了9:42
董博文 · 太乙玉仙学习到了10:26
ttswh2009 · 太乙巅峰学习到了10:26

© 汕尾市求知科技有限公司 | 粤ICP备19038915号 | 在线学员:30

Top