基础todolist 实现增删改查

数据构造：json-server

[
    {
        "id": 1,
        "taskname": "吃饭",
        "time": "2020/01/01",
        "status": "1",
        "flag": "checked"
    },
    {
        "id": 2,
        "taskname": "睡觉",
        "time": "2023/10/26",
        "status": "0",
        "flag": "false"
    },
    {
        "id": 3,
        "taskname": "打豆豆",
        "time": "2023/10/25",
        "status": "0",
        "flag": "false"
    }
]

或（status为0/1或者finished/unfinished 区别）

[
    {
        "id": "1",
        "name": "吃饭",
        "date": "2023/10/26",
        "status": "finished"
    },
    {
        "id": "2",
        "name": "睡觉",
        "date": "2023/10/26",
        "status": "finished"
    }
]

底部输入的待办事项默认未完成，根据待办事项的截止日期显示不同的样式，已过期背景色为红色，未过期背景色为正常。日期项可以使用h5新增表单。

//设置style样式 
.back .con .activa {
     background-color: rgb(231, 76, 60);
}
                      
// 使用模版字符串，new Date时间戳的差大于0
<p class="back_c <% if ( new Date() - new Date(data[i].time) - 24 *60 *60 * 1000 > 0) { %> active  <% } %>"
 data-id="<%=data[i].id%>">

正确显示已完成、未完成、全部的代办事项的数目。

前端使用模版字符串
  <p>
     总待办事项数：
     <span class="total">
          <%=total%>
     </span>
</p>
<p>
     已完成待办事项数：
     <span class="finished">
           <%=num2%>
     </span>
</p>
<p>
     未完成待办事项数：
     <span class="unfinished">
           <%=num1%>
     </span>
</p>

后端发送响应
router.get('/', async (ctx, next) => {
  const data = JSON.parse(fs.readFileSync('./data/data.json', 'utf8'))
  const total = data.length
  //未完成完成
  const num1 = data.filter(item => item.status == 0).length
  //已完成
  const num2 = data.filter(item => item.status == 1).length
  const flag = data.flag
  await ctx.render('todoList', {
    data, total, num1, num2, flag
  })
})

点击待办事项左侧可以选中该待办事项，修改后台数据，刷新后选中状态不变。

·用模板字符串进行判断
 <input type="checkbox" name="" data-id="<%= data[i].id %>" 
 <% if ( data[i].status=='finished' ) { %>
           checked
 <% } %>>
 
 ·//render渲染用三元进行判断
 <tr ${new Date() - new Date(item.date) - 24 * 60 * 60 * 1000 > 0 ? "class='active'" : ""}>
 //或者
 <p class='back_c' 
 ${new Date() - new Date(data[i].time) - 24 * 60 * 60 * 1000 > 0 ? 'id="active"' : ""}  
 data-id="${data[i].id}">
 
 ·//前端：绑定点击事件    
 //修改状态
        if (e.target.nodeName == 'INPUT') {
            let id = e.target.dataset.id * 1
            axios.post('/change', {
                id
            })
                .then(function (response) {
                    console.log(response);
                    if (response.data.code == 200) {
                        render(response.data.data)
                    }
                })
                .catch(function (error) {
                    console.log(error);
                });

        }
·//后端接收数据
// 处理修改状态请求
router.post("/change", async (ctx, next) =>{
  const data = JSON.parse( fs.readFileSync("./data/data.json", "utf-8") )

  // 2.1 接收前端转值 
  const { id } = ctx.request.body 
  const index = data.findIndex((item)=>{
    return item.id == id
  })
  //修改数据库里的数据
  data[index].status = 'finished'
  fs.writeFileSync("./data/data.json", JSON.stringify(data))
  ctx.body = {
    code: 200,
    msg: "修改成功",
    data
  }
})

头部下拉菜单可以过滤数据，可以分别显示：已完成，未完成和全部事项

//css样式 注意！：option的value必须有相对应的内容
<p><input type="text" placeholder="搜索" class="search"></p>
<p class="sel">
      <span>
         过滤: <select name="" id="se">
              <option value="全部">全部</option>
              <option value="1">已完成</option>
              <option value="0">未完成</option>
              </select>
      </span>
</p>

//前端
$('#se').on('change', function (data) {
        //获取输入框内容
        let taskname = $('.search').val()
        let status = $('#se').val()
        console.log(taskname, status);
        axios.post('/selTask', {
            taskname, status
        })
            .then(function (response) {
                if (response.data.code == 200) {
                    // console.log( response.data.data )
                    render(response.data.data)
                  
                }
            })
            .catch(function (error) {
                console.log(error);
            });
    })
    
//后端
//筛选
router.post("/selTask", async (ctx, next) => {
  const data = JSON.parse(fs.readFileSync("./data/data.json", "utf-8"))
  // 2.1 接收前端转值 
  const { taskname, status } = ctx.request.body
  let res = []
  for (let i = 0; i < data.length; i++) {
    //设置一个变量flag
    var flag = true;
    // 否定式判断1
    //taskname的内容不为空，数据里的taskname查找不到 flag的值为false
    if (taskname != "" && data[i].taskname.indexOf(taskname) == -1) {
      flag = false;
    }
    // 否定式判断2
   //status的内容为全部，数据里的status和option的value不一样，flag的值为false
    if (status != "全部" && data[i].status != status) {
      flag = false
    }
    //如果status不为全部，并且value一样的话就位true
    if (flag) {
      res.push(data[i])
    }
    console.log(res);
    ctx.body = {
      code:200,
      msg:'成功',
      data:res
    }
  }
})

头部搜索栏可以按照关键字搜索相关的待办事项，呈现的搜索结果为搜索内容和过滤数据相结合后检索的待办项。

//搜索输入框
    $('.search').on('blur',()=>{
        //获取输入框内容
        let taskname = $('.search').val()
        let status = $('#se').val()
        console.log(taskname, status);
        axios.post('/selTask', {
            taskname, status
        })
            .then(function (response) {
                if (response.data.code == 200) {
                    // console.log( response.data.data )
                    render(response.data.data)
                  
                }
            })
            .catch(function (error) {
                console.log(error);
            });
    })
    //其他同上