小程序样例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…

微服务理解篇

一 :架构演变 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

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

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)主…

前端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…

性能优化-HVX 指令介绍

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

库函数的模拟实现

目录 模拟实现strlen 模拟实现strcpy 模拟实现strcmp 模拟实现strcat 模拟实现strstr 模拟实现memcpy 模拟实现memmove 模拟实现strlen #define _CRT_SECURE_NO_WARNINGS 1#include <stdio.h>int MyStrlen(char* str) {int len 0;while (str[len] ! \0)len;retu…

GitLab升级版本(任意用户密码重置漏洞CVE-2023-7028)

目录 前言漏洞分析影响范围查看自己的GitLab版本升级路程 升级过程13.1.1113.8.8 - 14.0.1214.3.614.9.5 - 16.1.6 前言 最近GitLab发了个紧急漏洞需要修复&#xff0c;ok接到命令立刻着手开始修复&#xff0c;在修复之前先大概了解一下这个漏洞是什么东西 漏洞分析 1、组件…

单点登陆(SSO)基于CAS实现前后端分离的SSO系统开发「IDP发起」

关于其他前端常见登录实现单点登录方案&#xff0c;请见「前端常见登录实现方案 单点登录方案 」 前沿 单点登录&#xff08;SSO&#xff09;&#xff0c;英文全称为 Single Sign On。 SSO 是指在多个应用系统中&#xff0c;用户只需要登录一次&#xff0c;就可以访问所有相互…

redis-持久化-1

Redis 提供了2个不同形式的持久化方式。 RDB&#xff08;Redis DataBase&#xff09; AOF&#xff08;Append Of File&#xff09; 一、Redis持久化之RDB 1.什么是RDB 在指定的时间间隔内将内存中的数据集快照写入磁盘&#xff0c; 也就是行话讲的Snapshot快照&#xff0c…

搭建通讯猫类似的TCP服务端

最近需要一个公网的TCP服务端平台来做4G模组的发包测验&#xff0c;通讯猫(http://www.tongxinmao.com/App/Detail/id/1)貌似使用不了&#xff0c;就干脆在自己的腾讯云上搭建了简单的TCP服务端。 我们搭建可以在服务器上使用Python、Java、C#等语言自行编写服务器程序。 目前是…

KADB使用PXF连接KES验证

验证环境 KADB版本&#xff1a;Greenplum Database 6.0.0 build dev.V003R002C001B0181.d354cc9215 KES版本&#xff1a;KingbaseES V008R006C007B0012 Java版本&#xff1a;openjdk version "1.8.0_262" PXF部署 以下操作假设KADB和KES已经部署完成并且启动正常…

nomachine下载安装使用教程(远程桌面)

文章目录 参考链接 nomachine 参考链接 [1]【远程桌面】nomachine下载安装使用教程、zerotier下载安装使用教程超详细&#xff1a;https://blog.csdn.net/weixin_44029896/article/details/128555481 [2] 树莓派开发之旅&#xff08;一&#xff09;——使用Nomachine进行远…

selenium执行出现异常,SessionNotCreatedException ChromeDriver only supports

问题现状&#xff1a; 运行程序报错&#xff1a; selenium.common.exceptions.SessionNotCreatedException: Message: session not created: This version of ChromeDriver only supports Chrome version 114 Current browser version is 121.0.6167.85 with binary path /App…

重构改善既有代码的设计-学习(四):简化条件逻辑

1、分解条件表达式&#xff08;Decompose Conditional&#xff09; 可以将大块代码分解为多个独立的函数&#xff0c;根据每个小块代码的用途&#xff0c;为分解而得的新函数命名。对于条件逻辑&#xff0c;将每个分支条件分解成新函数还可以带来更多好处&#xff1a;可以突出条…