使用vue2完成todolist

所用到的技术

路由及路由间通信
父子组件之间的通信（全局事件总线，消息订阅与发布）
本地存储（localStorage）

实现的功能

todolist的登录、注册
每个用户都有自己都有的一个
todolist增、删、改

实现思路

由于使用vue2完成的改作品，存储放在本地，没有涉及到数据库。使用vue脚手架搭建vue的框架，设计需要的组件，如下：

根据组件填充相对应的内容
注册代码实现

<template>
  <!-- // 注册组件 -->
  <!-- 外面大盒子 -->
  <div class="Register-big">
    <!-- 标题 -->
    <div>
      <h2>注册</h2>
    </div>
    <div>
      <form>
        <!-- 账号 -->
        <div>
          <label for="username">账号：</label>
          <el-input
            v-model="username"
            placeholder="请输入用户名"
            id="username"
            style="width: 400px"
          ></el-input>
        </div>
        <!-- 密码 -->
        <div>
          <label for="password">密码：</label>
          <el-input
            placeholder="请输入密码"
            v-model="password"
            show-password
            id="password"
            style="width: 400px"
          ></el-input>
        </div>
      </form>
    </div>
    <div class="fotter">
      <el-button type="primary" round @click="registerCheck">注册</el-button>
      <router-link to="login" class="a">已有账号，去登陆</router-link>
    </div>
  </div>
</template>

<script>
export default {
  name: "Register",
  data() {
    return {
      users: JSON.parse(localStorage.getItem("users")) || [],
      username: "",
      password: "",
    };
  },
  methods: {
    registerCheck() {
      if (this.username.trim() === "" || this.password.trim() === "") {
        alert("输入不能为空");
        return;
      } else {
        // 向本地添加用户
        // let users = JSON.parse(localStorage.getItem("users"));
        let exist = true;
        this.users.forEach((user) => {
          if (this.username == user.username) {
            exist = false;
          }
        });
        if (exist == true) {
          const user = {
            username: this.username,
            password: this.password,
          };
          this.users.unshift(user);
        } else {
          alert("该账号已存在,请切换账号");
        }
        (this.username = ""), (this.password = "");
      }
    },
  },
  watch: {
    users: {
      // 将数组放到本地并开启深度监视
      deep: true,
      handler(value) {
        localStorage.setItem("users", JSON.stringify(value));
        this.$router.replace("/login");
      },
    },
  },
};
</script>


<style>
.Register-big {
  width: 600px;
  margin: 0 auto;
  text-align: center;
  border: 1px solid #ccc;
  border-radius: 10px;
}
.a {
  margin-left: 20px;
}
.fotter {
  margin-top: 20px;
}
</style>

登录代码实现：

<template>
  <!-- // 登录组件 -->
  <!-- 外面大盒子 -->
  <div class="Login-big">
    <!-- 标题 -->
    <div>
      <h2>登录</h2>
    </div>
    <div>
      <form>
        <!-- 账号 -->
        <div>
          <label for="username">账号：</label>
          <el-input
            v-model="username"
            placeholder="请输入内容"
            id="username"
            style="width: 400px"
          ></el-input>
        </div>
        <!-- 密码 -->
        <div>
          <label for="password">密码：</label>
          <el-input
            placeholder="请输入密码"
            v-model="password"
            show-password
            id="password"
            style="width: 400px"
          ></el-input>
        </div>
      </form>
    </div>
    <div class="fotter">
      <router-link
        :to="`./home?username=${username}&password=${password}`"
        class="btns"
        >登录</router-link
      >
      <router-link to="register">去注册</router-link>
    </div>
  </div>
</template>

<script>
export default {
  name: "Login",
  data() {
    return {
      username: "",
      password: "",
    };
  },
  },
};
</script>


<style>
.Login-big {
  width: 600px;
  margin: 0 auto;
  text-align: center;
  border: 1px solid #ccc;
  border-radius: 10px;
}
.btns {
  margin-right: 20px;
}
.fotter {
  margin-top: 20px;
  font-size: 20px;
}
</style>

登录使用路由守卫进行验证
这里展示一部分实现的代码，获取源码可以：
百度网盘链接: https://pan.baidu.com/s/17P-nB8JjZt7mUwoT9zKK-g
提取码: ljhc