小程序样例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  有想法的朋友可以一起交流下~

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【并发】什么是 AQS

🍎个人博客:个人主页 🏆个人专栏:JAVA ⛳️ 功不唐捐,玉汝于成 目录 前言 正文 AQS的主要特征和方法包括: 状态管理: 等待队列: 独占模式: 共享模式&#xff1…

12.compose vs swarm

Docker compose vs. Docker Swarn 回顾一下docker compose,同样可以一次性启动多个docker容器。但是二者的使用场景不同。docker compose更适合与本地测试与开发,而不适合生产环境。 使用docker compose 搭建一个网站 Drupal PostgreSQL https://hub…

微服务理解篇

一 :架构演变 1 单体架构: 简单理解为一个服务涵盖所有需求功能2 垂直架构: 按照业务功能将单体架构拆分成小模块服务, 如:订单系统,用户系统,商品系统 ##缺点 引入分布式事务,分布式锁等,优点:模块解耦## 垂直拆分:根据业务层级拆分,比如商城的订单系统,用户系统,商品系统…

Leetcode—2696. 删除子串后的字符串最小长度【简单】

2023每日刷题(八十八) Leetcode—2696. 删除子串后的字符串最小长度 实现代码 class Solution { public:int minLength(string s) {string sub " ";for(auto c: s) {if((c B && sub.back() A) || (c D && sub.back() C…

BACnet转OPC UA网关BA112

随着通讯技术和控制技术的发展,为了实现楼宇的高效、智能化管理,集中监控管理已成为楼宇智能管理发展的必然趋势。在此背景下,高性能的楼宇暖通数据传输解决方案——协议转换网关应运而生,广泛应用于楼宇自控和暖通空调系统应用中…

Flutter Image库详细介绍与使用指南

1. 介绍 在Flutter中,图片是应用程序中不可或缺的一部分,而 image 库是一个强大而灵活的图片加载和处理库。通过使用 image^ 4.1.4,您可以轻松地实现图片的加载、缓存、调整大小和裁剪等功能,同时还支持各种图片格式。 2. 安装 …

JDBC数据库连接

JDBC(Java DataBase Connectivity)就是用Java语言操作关系型数据库的一套API JDBC的步骤固定,大体分为8个步骤,以MySQL数据库为例 1.创建工程并导入驱动jar包 2.注册驱动 注册驱动的目的是告诉代码要执行哪一个jar包 Class.forName(com.mysql.jdbc.D…

【并发编程】活锁

📝个人主页:五敷有你 🔥系列专栏:并发编程 ⛺️稳重求进,晒太阳 活锁 定义:活锁出现在两个线程互相改变对象的结束条件,最后谁也无法结束 代码示例 public class TestLiveLock {stati…

LabVIEW准分子激光器控制系统

LabVIEW准分子激光器控制系统是为了实现准分子激光光源在工业、医疗和科研领域的应用集成及其功能的扩展。系统由PC端和激光器端两部分构成,通过光隔离的RS232通讯连接,以实现稳定可靠的控制与通信。 系统主要由微控制单元(MCU)主…

SpringBoot实现自定义异常+全局异常统一处理

目录 前言 一、使用教程 1.自定义异常类。 2.全局统一处理类 3.ResultVO类 4.StatusCodeEnum 枚举类 二、 结束语 前言 在SpringBoot中,实现自定义异常和全局异常统一处理是确保应用程序稳定性和用户体验的关键。通过定义自定义异常类,我们可以为应…

数据库(MySQL的备份和恢复)

目录 1.1 MySQL 日志管理 1.1.1 MySQL日志类型 1.1.2 错误日志 错误日志中主要记录的几种日志 错误日志的定义 1.1.3 通用查询日志 1.1.4 慢查询日志 和慢查询相关的变量设置 1.1.5 二进制日志 二进制日志是记录执行的语句还是执行后的数据 日志滚动 1.2 MySQL备份…

前端echarts图形报表常见的样式配置

文章目录 🐒个人主页🏅Vue项目常用组件模板仓库📖前言:🐕1.深色主题🐕2.改变柱状图颜色🐕突然发现去问ai,更容易理解,那就不总结了 🐒个人主页 🏅…

scratch——运动积木

一、运动积木概念 在Scratch编程中,运动积木是至关重要的一类积木,它能使我们的角色动起来!运动积木是创造动感项目的关键。 二、运动积木的位置 点击左上角的“代码”按钮,然后在界面最左边找到“运动”按钮,这个按…

uniapp复选框 实现排他选项

选择了排他选项之后 复选框其他选项不可以选择 <view class"reportData" v-for"(val, index) in obj" :key"index"> <view v-if"val.type 3" ><u-checkbox-group v-model"optionValue" placement"colu…

数据结构顺序表力扣例题AC——代码以及思路记录

顺序表力扣例题 27.移除元素 给你一个数组 nums 和一个值 val&#xff0c;你需要 原地 移除所有数值等于 val 的元素&#xff0c;并返回移除后数组的新长度。 不要使用额外的数组空间&#xff0c;你必须仅使用 O(1) 额外空间并 原地 修改输入数组。 元素的顺序可以改变。你不…

arm 汇编调用C

arm64 汇编调用C函数 main.s .section .text .globl main main:stp x29, x30, [sp, -16]! //store fp x29 lr x30mov x0, #0mov x1, #1bl addmov x1, x0 // x0 return ldp x29, x30, [sp], 16 //restore fp lrretadd.c #include <stdio.h> int add(int a, int…

go使用docker sdk停止和删除docker

go使用docker sdk停止和删除docker 代码参考 代码 package mainimport ("context""fmt""github.com/docker/cli/cli/connhelper""github.com/docker/docker/api/types/container""github.com/docker/docker/client""n…

性能优化-HVX 指令介绍

「发表于知乎专栏《移动端算法优化》」 本文主要介绍了 HVX 指令相关的知识&#xff0c;包括 HVX 寄存器相关内容&#xff0c;指令的背景依赖&#xff0c;部分常用 intrinsic HVX 指令。具体指令的详细内容及使用还需阅读 HVX 的指令文档&#xff0c;以及细致的实践操作。 &…

【node】关于npm、yarn、npx的区别与使用

文章目录 npm (Node Package Manager):安装依赖运行脚本 npx:执行项目依赖中的命令 yarn:安装依赖eg.使用npx yarn install 的作用 npm (Node Package Manager): 用途&#xff1a; npm 是 Node.js 官方提供的包管理工具&#xff0c;用于安装、管理和分享 JavaScript 代码包。安…

C语言—fopen和ab+

在C语言中&#xff0c;fopen(“data”,“ab”) 是使用 fopen 函数以追加和读写模式打开一个名为 “data” 的文件的方法。 下面是对这个函数调用的各个部分的解释&#xff1a; fopen 函数 fopen 是一个标准库函数&#xff0c;用于打开文件。它的原型定义在 <stdio.h> 头…