Vue实现TodoList

一、项目介绍

该作品利用vue2以及localstorage实现了一个TodoList清单，主要功能有注册、登录、进行相关内容的增删改等。

二、文件介绍

该TodoList主要的代码实现在如下图所示的几个文件中：

1. components文件夹存放静态的组件
2. pages存放路由组件
3. router中只有一个js文件，用于配置相应的路由内容
4. App组件为其实是页面，即注册登录页面

三、具体内容

     1.注册登录功能

 运行项目，首先需要进行相应的注册，注册之后登录才可以进入todo页面，注册的代码如下所示（未展示相关的css代码），相应的检测在路由中实现，注册成功的用户将会保存在本地存储中。

<template>
  <div>
    <input type="text" placeholder="请输入你的账号" v-model="username" />
    <input
      v-model="userpassword"
      type="password"
      placeholder="请输入你的密码"
    />
    <router-link to="loadon">
      <button id="loa" @click="register">提交</button>
    </router-link>
  </div>
</template>

<script>
export default {
  name: "register",
  data() {
    return {
      users: JSON.parse(localStorage.getItem("users")) || [],
      username: "",
      userpassword: "",
    };
  },
  methods: {
    register() {
      if (this.username === "" || this.userpassword === "") {
        alert("账号或密码不能为空");
        return;
      } else {
        let equal = false;
        this.users.forEach((user) => {
          if (user.username == this.username) {
            alert("该账号以及存在，请重新注册");
            equal = true;
          }
        });
        if (equal == false) {
          let user = {
            username: this.username,
            userpassword: this.userpassword,
          };
          console.log("注册OK了一个");
          this.users.unshift(user);
        }
      }
    },
  },
  watch: {
    users: {
      deep: true,
      handler(value) {
        localStorage.setItem("users", JSON.stringify(value));
        this.$router.replace("/loadon");
      },
    },
  },
};
</script>

<template>
  <div id="all">
    <input type="text" placeholder="请输入你的账号" v-model="username" />
    <input
      type="password"
      placeholder="请输入你的密码"
      v-model="userpassword"
    />
    <router-link
      :to="`/todos?username=${username}&userpassword=${userpassword}`"
    >
      <button id="loa">登录</button>
    </router-link>
    <router-link to="/register" id="www"> 去注册 </router-link>
  </div>
</template>
  
<script>
export default {
  data() {
    return {
      username: "",
      userpassword: "",
    };
  },
};
</script>

     2.任务点的增加与修改

登录成功之后，可进行相关todo的增加、修改与删除

 主要逻辑写在todos组件中，该组件包含了MyHeader、MyList、MyFooter、register、loadon组件，并与相应的组件进行相关的数据传递。

<template>
  <div id="root">
    <div class="todo-container">
      <div class="todo-wrap">
        <MyHeader :addtodo="addtodo" />
        <MyList
          :username="todos"
          :checktodo="checktodo"
          :deletetodo="deletetodo"
        />
        <MyFooter
          :todos="todos"
          :checkalltodo="checkalltodo"
          :clearalltodo="clearalltodo"
        />
        <MyTime />
      </div>
    </div>
  </div>
</template>
  

<script>
import MyHeader from "../components/MyHeader";
import MyList from "../components/MyList";
import MyFooter from "../components/MyFooter";
import MyTime from "../components/MyTime";
import register from "../pages/register";
import loadon from "../pages/loadon";

export default {
  name: "todos",
  components: { MyHeader, MyList, MyFooter, MyTime, register, loadon },
  data() {
    return {
      // username:this.$route.query.username,
      // username: JSON.parse(localStorage.getItem(this.username)) || [],
      todos:JSON.parse(localStorage.getItem(this.$route.query.username)) || [],
    };
  },
  methods: {
    addtodo(todoobj) {
      this.todos.unshift(todoobj);
    },
    checktodo(id) {
      this.todos.forEach((todo) => {
        if (todo.id === id) todo.done = !todo.done;
      });
    },
    deletetodo(id) {
      this.todos = this.todos.filter((todo) => {
        return todo.id !== id;
      });
    },
    updatatodo(id, title) {
      this.todos.forEach((todo) => {
        if (todo.id === id) todo.title = title;
      });
    },
    checkalltodo(done) {
      this.todos.forEach((todo) => {
        todo.done = done;
      });
    },
    clearalltodo() {
      this.todos = this.todos.filter((todo) => {
        return !todo.done;
      });
    },
  },
  watch: {
    todos: {
      deep: true,
      handler(value) {
        localStorage.setItem(this.$route.query.username, JSON.stringify(value));
      },
    },
  },
  mounted() {
    this.$bus.$on("updatatodo", this.updatatodo);
  },
  beforeDestroy() {
    this.$bus.$off("updatatodo");
  },
};
</script>

      3.路由器展示

在传递数据时，路由器起着极为重要的作用，会对登录数据进行相应的检测，通过后才可进行下一步。

import VueRouter from "vue-router";

import register from '../pages/register'
import loadon from '../pages/loadon'
import todos from '../pages/todos'

// 创建并暴露一个路由器
const router = new VueRouter({
    routes: [
        {
            path: '*',
            redirect: '/'
        },
        {
            path: '/',
            component: loadon
        },
        {
            path: '/loadon',
            component: loadon,
            meta: {
                // test: true,
                title: '登录'
            }
        },
        {
            path: '/register',
            component: register,
            meta: {
                title: '注册'
            }
        },
        {
            path: '/todos',
            component: todos,
            meta: {
                test: true,
                title: 'todo清单'
            }
        }
    ]
})


router.beforeEach((to, from, next) => {
    if (to.meta.test) {
        let name = to.query.username
        let password = to.query.userpassword
        let users = JSON.parse(localStorage.getItem('users'))
        let isPass = false
        users.forEach((user) => {
            if (user.username === name && user.userpassword === password || from.path === '/loadon') {
                isPass = true
                next();
            }
        });
        if (isPass == false) {
            alert("登录失败，请检查账号或密码是否错误")
        }
    } else {
        next();
    }
})

router.afterEach((to, from) => {
    document.title = to.meta.title || 'welcome'
})

export default router;