简介

基于Vue半全家桶的新拟态板ToDoList,一个todolist而已,用几乎Vue全家桶是不是有点小题大做,是的,必须的,因为要巩固的知识,并且功能也相应的增加了,你可以打卡想看的书或者电影,以及小小的改变了todolist的相应逻辑,当天未完成的ToDo会累计到待完成任务,看着一天一天积下来的待办,多多少少希望减少你的惰性吧(希望目的达到),从而激发你一天满满的动力

注意:所使用的是localStorage存储数据(没用服务器),所以,如果你一不小心用了什么清垃圾软件或者手动清掉浏览器数据的话,它会消失,它会消失,它会消失

采用纯less写样式,只写了PC端响应式布局,没做移动端适配(就不要尝试用手机打开了,大丑)

在线地址

功能

  1. 输入代办,按下回车键,添加到当天待办事项
  2. 点击完成按钮,完成该代办,添加至完成事项
  3. 点击删除按钮,删除该待办
  4. 动态显示已完成和未完成事项数量
  5. 当天未完成待办,第二天添加至待完成任务,可在第二天点击“今天完成”重新添加至我的一天中
  6. 阅读选项打卡想看的书
  7. 电影选项卡打卡想看的电影
  8. 点击头像就是回到我的博客啦
  9. 导航栏右侧文字根据时间改变相应问候语

image-20210403153631218

image-20210403165129933

技术架构

  • Vue
  • Vue CLI
  • Vue Router
  • Less
  • webpack

组件划分

image-20210403172406380

主要划分为三个大组件

NavBar

  • 分为左中右三个插槽
  • 中间添加待办事项
  • 左插槽展示当前路由信息
  • 右插槽按时间显示问候信息

SideBar

  • 用来控制路由的主要组件
  • 分为两个部分,一个头像模块,一个路由切换模块
  • 路由切换模块放置切换路由的小item

TaskBar

  • 放置待办的组件
  • 根据待办状态显示不同状态的item

核心代码

最重要的当然就是侦听数据的改变啦,毕竟你时时刻刻都在改变数据,vue官网watch函数介绍

1
2
3
4
5
6
7
8
9
10
11
//监听数据变化
watch: {
mydayList: {
// 该回调会在任何被侦听的对象的 mydayList 改变时被调用,不论其被嵌套多深
handler(){
saveData( this.mydayList, "myday")
getData()
},
deep: true
}
}

通过监听mydayList数据的变化,实时保存改变后的数据以及加载保存后的数据

其它就是简单的localStorage增删改查操作啦

函数封装

这里通过函数封装,得到localStorage增删查操作,并单独设置成一个js文件,后面组件需要用到即可直接导入使用

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
//获取本地数据
function getData(dataName) {
// localStorge为window内置属性,用于在浏览器存储本地信息
// 该数据除非手动删除,否则会一直存在
// let data = localStorage.getItem("todoList") //取值
let data = localStorage.getItem(dataName) //取值
if (data !== null) {
//ES6将变量作为键→[变量名]
// return JSON.parse(data).[dataName] //将数据转换为json
return JSON.parse(data)
} else {
return []
}
}

//保存本地数据
function saveData(data, dataName) {
//JSON.stringify()将json数据转换为字符串
localStorage.setItem(dataName, JSON.stringify(data)) //设值
}

//删除数据
function deleteData(index, dataName) {
//获取本地数据
let data = getData(dataName)
// let index = index //获取索引号
//改本地数据(删除数据)
data.splice(index, 1)
//保存本地数据
saveData(data)
}

后面就是简单的给各个组件注册事件,然后执行相关操作就可以啦