基于VUE的新拟态ToDoList(待办事项添加)

简介

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

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

采用纯less写样式,只写了PC端响应式布局,没做移动端适配(就不要尝试用手机打开了,大丑)
基于VUE的新拟态ToDoList(待办事项添加)

设计图

当然就是在PS中画大概的设计图啦,设计稿尺寸是1920*1080,如下图
基于VUE的新拟态ToDoList(待办事项添加)

啊这啊这,这和成果图差距怎么这么大,好吧,确实一开始是按这样搭建的,骨架基本就是这样的,后面因为突发奇想,之前在手机的主题市场看过新拟态设计,然后被深深吸引了,在完成页面的过程就想起这个,然后就干脆按这个骨架直接重构页面了,也就是上面的成果图,废话不多说,直接进入主题

功能

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

基于VUE的新拟态ToDoList(待办事项添加)
基于VUE的新拟态ToDoList(待办事项添加)

所用技术

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

划分目录

src下的目录结构

  • network (网络模块)→相关网络请求(axios)
  • components (组件)
    • common (公共模块)→可以多项目复用
    • content (业务模块)→该项目可以复用
  • views (路由页面模块)
  • common (公共js文件–常量…)
  • assets (静态资源)
  • router (路由)→页面跳转
  • store (vuex状态管理)

组件划分

基于VUE的新拟态ToDoList(待办事项添加)

主要划分为三个大组件

NavBar

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

SideBar

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

TaskBar

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

路由划分

  1. myday:当然就是我的一天啦,添加你今天要做的事情
  2. movie:电影,存放你想看的电影以及打卡的电影
  3. read:阅读,存放你想看的图书以及打卡的书
  4. todo:你一天没做完的事情都会丢到这里,第二天你可以重新拾取到新的一天里面

核心代码

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

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

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

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

函数封装

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

//获取本地数据
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)
}

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

遇到的问题

  1. 引用文件前必须加./

  2. vue.config.js修改后必须重启项目才能生效

  3. 插槽若被替换那么给slot定义的class就会失去效果

    解决:slot外部使用div包裹并设置样式

  4. img路径无法通过prop传值(至少在开发环境下是这样)

    无法显示,因为直接引用到服务器地址去

  5. vue获取样式也是驼峰命名法(background-color→backgroundColor)

  6. id会覆盖之前的id样式(之前的id不起作用)

学到的新知识点(或遗忘的知识点)

  1. text-indent::2em ——缩进

  2. 取消按钮点击效果:伪类:focus

  3. v-bind会解析变量类型,无定义则全部强制字符串

  4. user-select:none ——不允许用户选择文字

  5. img通过prop传值会出错,因为开发时会解析成服务器地址

  6. event.target.value获取控件输入值

  7. [变量名]会解析成键

  8. 取消滚动条,分别是IE、Firefox、chrome/safari

        -ms-overflow-style: none;
    	overflow: -moz-scrollbars-none;
    	&::-webkit-scrollbar { width: 0 !important }
    
  9. vue引用全局less文件,在vue.congfig.js配置

      //全局引用less文件
      css: {
        loaderOptions: {
          less: {
            globalVars: {
              hack: `true; @import '~@/assets/css/base.less';`,
            }
          }
        }
      },
    
  10. map、forEach和filter函数的区别(迭代)

最后,就这样啦,新拟态板ToDoList主要就是为了复习Vue以及LocalStorage的相关知识点。

上一篇:浏览器知识自问自答


下一篇:本地存储