小程序样例3:根据日历创建待办事项

基本功能

1、待办事项查看

选择不同的日期显示不同的待办:

2、选择日期后 新增事项:

3. 点击事项,查看详情

4、删除事项:删除事项3之后,剩余事项2

5、点击日期可以选择更多的月:

实现思路:

1、数据结构:

{     level: 1, 
      _id: 1,
      title: '事项1',
      content: '内容1',
      year: 2024,
      month: 1,
      date: 23,
      addDate: '2024-01-20'
}

2、代码结构:

DataService 是服务层接口,业务JS代码与之打交道

同时Service调用Repository接口,实现数据的增加、删除、查询

例如查询当天的待办:

业务JS层代码:调用DataService.findByDate

function loadItemListData() {
  console.log('loadItemListData')
  console.log(this.data.data.selected)
  const {year, month, date} = this.data.data.selected;
  let _this = this;
  DataService.findByDate(new Date(year, month, date)).then((data) => {
    if(data) {
      _this.setData({ itemList: data });
    } else {
      console.log('findByDate get data empty')
    }
  });

}

Service层代码:调用DataRepository.findBy

static findByDate(date) {
        console.log('in findByDate year:' + date.getFullYear() + ' month:' + date.getMonth() + ' day:' + date.getDate())
        if (!date) {
          return []
        } ;
        console.log('before findBy')
        return DataRepository.findBy(item => {
            console.log('current item year:' + item['year'] + ' month:' + item['month'] + ' date:' + item['date']);
            console.log(item);
            return item && item['date'] == date.getDate() &&
                item['month'] == date.getMonth() &&
                item['year'] == date.getFullYear();
        }).then(data => data);
    }

Repository层代码:

static findBy(predicate) {
        console.log('in findBy');
        return DataRepository.findAllData().then((data) => {
          console.log('in findBy result');
          if (data) {
              data = data.filter(item => predicate(item));
              console.log('after filter');
              console.log(data)
              return data;
          } else {
            console.log('data is empty:' + data)
          }
          return data;
        });
    }

代码使用Promise风格 简化了callback的方式

踩坑记录:

1、通过选中的年月日,构造Date对象时,调用getDay()获取星期的时候,不正确。

需要将month-1

参考:js getday()获取值不对_dayjs().get('day') 时间不对-CSDN博客

2、promise运用不熟练,有些地方需要return

参考:微信小程序Promise详解_笔记大全_设计学院

 比如此处:如果没有return,调用findAllData后续then的时候拿不到data值

完整代码下载:

 https://download.csdn.net/download/u200814342A/88778500

 

个人小程序创业项目   #小程序://朋友圈子/VMEWRjrOTum4Soa  有想法的朋友可以一起交流下~

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/348344.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

开始学习Vue2(axios和Vuex)

一、Axios 1、Axios 简介 Axios 是一个基于 promise 网络请求库 ,作用于node.j s 和浏 览器中。它是 isomorphic 的(即同一套代码可以运行在浏览器 和 node.js 中)。在服务端它使用原生 node.js http 模块, 而在 客户端 (浏览端) 则使用 XMLHttpRequests。 …

通俗易懂理解SegNet语义分割模型

重要说明:本文从网上资料整理而来,仅记录博主学习相关知识点的过程,侵删。 一、参考资料 深度学习之图像分割—— SegNet基本思想和网络结构以及论文补充 一文带你读懂 SegNet(语义分割) 二、相关介绍 1. 上采样(…

关于爬虫爬取网页时遇到的乱码问题的解决方案。

目录 前言解决措施 前言 最近,我像爬取一下三国演义这本书籍的全部内容。 网站的网址为:https://www.shicimingju.com/book/sanguoyanyi.html 但是我爬取出来的结果是这样的 会遇到乱码。 经过我多方面的调试发现,就是网页的编码和我pycha…

mysql8版本批量造4000个数据SQL

需求: 测试工作中修改单需要构造单元下4000个组合的数据,写个博客来记录,其他类似的可以举一反三。 具体sql: 实现1个产品1个单元下插入4000个组合数据 思路: 在MySQL 8中实现循环插入4000条具有不同主键的记录&a…

jquery多选框

使用hbuilder <!DOCTYPE html> <html><head><meta charset"GBK"><title></title></head><body><table id"myTable"> <tr> <td>黄1</td> </tr> <tr> <td>…

echarts 玫瑰饼图 俩个共用一个图例 可同时改变

export const getRosePie (option {}) > {return {legend: {textStyle: {color: #B0D0E9}},tooltip: {},dataset: {// source: [// [flag, 已解决, 未解决],// [设备告警, 86, 10],// [环境告警, 41, 30],// [任务告警, 24, 67]// ]source: option.source},series…

【Web前端实操15】利用Grid布局完成九宫格

相关知识点&#xff1a; 创建多列 column-count 属性指定了需要分割的列数 列与列之间的间隙 column-gap 属性指定了列与列间的间隙 列边框 column-rule-style 属性指定了列与列间的边框样式 column-rule-width 属性指定了两列的边框厚度 column-rule-color 属性指定了…

如何在 Kotlin Multiplatform 库的 API 中避免请求 Android Context

如何在 Kotlin Multiplatform 库的 API 中避免请求 Android Context 假设你正在进行 Kotlin Multiplatform 项目的开发。 你需要从通用代码中获取用户的 GPS 位置&#xff0c;并且目前没有现成的库可以实现该功能。 这时&#xff0c;你决定编写一个新的 Kotlin Multiplatform …

数据结构——静态链表

1.定义&#xff1a; &#xff08;1&#xff09;单链表&#xff1a;各个结点散落在内存中的各个角落&#xff0c;每个结点有指向下一个节点的指针(下一个结点在内存 中的地址); &#xff08;2&#xff09;静态链表&#xff1a;用数组的方式来描述线性表的链式存储结构: 分配一…

Windows中Zookeeper与kafka的安装配置

一、Zookeeper安装与使用 1.安装包下载 直接在官网下载即可Apache ZooKeeper。 下载后直接解压到本地即可。 2.环境配置 1> 在目录中下增加data和log文件夹 2> 解压目录下的 conf 目录&#xff0c;将目录中的 zoo_sample.cfg 文件&#xff0c;复制一份&#xff0c;重…

STC89C51单片机

本文为博主 日月同辉&#xff0c;与我共生&#xff0c;csdn原创首发。希望看完后能对你有所帮助&#xff0c;不足之处请指正&#xff01;一起交流学习&#xff0c;共同进步&#xff01; > 发布人&#xff1a;日月同辉,与我共生_单片机-CSDN博客 > 欢迎你为独创博主日月同…

【pytorch】pytorch学习笔记(续1)

p22&#xff1a;1.加减乘除&#xff1a; &#xff08;1&#xff09;add(a,b)&#xff1a;等同于ab。 &#xff08;2&#xff09;sub(a,b)&#xff1a;等同于a-b。 &#xff08;3&#xff09;mul(a,b)&#xff1a;等同于a*b。 &#xff08;4&#xff09;div(a,b)&#xff1a…

低成本扫码点餐:1000元全包

在数字化时代&#xff0c;扫码点餐已经成为餐饮行业的标配。然而&#xff0c;对于许多小规模或初创的餐饮企业来说&#xff0c;开发一套完整的扫码点餐系统是一项成本高昂的任务。今天&#xff0c;我们将向您介绍一个低成本、高效的方法&#xff0c;让您用1000块钱轻松搞定一套…

反光衣穿戴识别摄像机

反光衣穿戴识别摄像机是一种基于图像识别技术的智能设备&#xff0c;旨在识别和监测道路上穿戴反光衣的行人和工作者&#xff0c;以提高道路交通安全。 反光衣穿戴识别摄像机利用高清摄像头捕捉道路上的实时图像&#xff0c;并通过图像处理算法进行人体检测和识别&#xff0c;识…

Programming Abstractions in C阅读笔记:p248-p253

《Programming Abstractions in C》学习第69天&#xff0c;p248-p253总结&#xff0c;总计6页。 一、技术总结 “A generalized program for two-player games”如标题所示&#xff0c;该小节强调要学会从一个复杂的程序中抽象出通用的内容——这也是本书的主旨——“Program…

RocketMQ源码阅读-十-事务消息

RocketMQ源码阅读-十-事务消息 交互流程事务消息发送Producer发送事务消息Broker处理结束事务请求Broker 生成 ConsumeQueue 事务消息回查Broker发起回查Producer 接收回查 总结 交互流程 事务消息交互流程图如下&#xff1a;事务消息发送步骤如下&#xff1a; 生产者将半事务…

40元一碗的面,卖不动了?

一、在熙熙攘攘的商场中&#xff0c;两家门店“格格不入” 周五&#xff08;1月19日&#xff09;下午&#xff0c;人群从写字楼向购物中心转移。6点前后&#xff0c;北京合生汇商场的多个过道、上下行扶梯已经熙熙攘攘&#xff0c;B1、B2层的美食街区更是热闹。 一片喧哗中&…

GIS项目实战07:Eclipse资源分享

官网下载&#xff1a;Eclipse Downloads | The Eclipse Foundation 百度网盘分享&#xff1a; 链接&#xff1a;https://pan.baidu.com/s/1YBKw8k0a0DouSWZmDg8fYw 提取码&#xff1a;1234 &#xff08;链接失效请私信&#xff09; 无需安装&#xff0c;解压即可使用

小程序系列--12使用 npm 包

一、Vant Weapp 1. 什么是 Vant WeappVant Weapp 是有赞前端团队开源的一套小程序 UI 组件库&#xff0c;助力开发者快速搭建小程序应用。它所使用的是 MIT 开源许可协议&#xff0c;对商业使用比较友好。 官方文档地址 https://youzan.github.io/vant-weapp 2. 安装 Vant 组…

Power BI - 5分钟学习新增度量值

每天5分钟&#xff0c;今天介绍Power BI新增度量值 在 Power BI Desktop 中&#xff0c;你可以创建度量值。度量值用于计算表达式的结果。 在创建自己的度量值时&#xff0c;需要使用DAX语言。 DAX包括超过200个函数、运算符等&#xff0c;几乎可以计算任何数据分析所需的结果…