Vue实现todolist

一、需求分析

1. 代办事项的添加，删除，完成
2. 计时器
3. 登录和注册

二、技术支持

1. Vue
2. js
3. 路由
4. localstorage

三、页面展示

四、代码实现

1. App.vue

<template>
  <div id="app">
    <router-view>
      
    </router-view>
  </div>
</template>


<script>
export default {
  name: "App",
};
</script>

<style scoped>

</style>

2. Login.vue

<template>
  <form>
    <div class="title">Login</div>
    <input class="username" placeholder="User name" v-model="username" />
    <div class="error">{{ uError }}</div>
    <input type="password" class="password" placeholder="Password" v-model="userpwd" />
    <div class="error">{{ pError }}</div>
    <button class="register-btn" @click="userRegister">Login</button>
    <div class="Changing">
      <button class="a b">已经注册，返回登录</button>
    <button class="a b" @click="GetRegister">还没注册，点击注册</button>
    </div>
  </form>
</template>
<script>
export default {
  name: "Login",
  data: function () {
    return {
      username: "",
      userpwd: "",
      pwdagain: "",
      uError: "",
      pError: "",
      aError: "",
    };
  },
  //methods 用于定义的函数。
  methods: {
    //这里定义了一个用户注册函数
    userRegister: function () {
      //简单进行一下验证，判断是否为空
      //正经项目肯定需要更多的验证规则，这里只是提供一个思路
      if (this.username == "") {
        this.uError = "用户名不能为空！";
      } else {
        this.uError = "";
      }
      if (this.userpwd == "") {
        this.pError = "密码不能为空！";
      } else {
        this.pError = "";
      }
      if (this.uError == "" && this.pError == "" && this.aError == "") {
        this.$router.push("/Home");
      }
    },
    GetRegister(){
      this.$router.push("/Register")
    }
  },
};
</script>
<style scoped>
* {
  margin: 0;
  padding: 0;
  color: rgb(95, 95, 95);
}
li,
ul,
ol {
  list-style: none;
}
.cointer {
  width: 600px;
  margin: 0 auto;
}
form {
  margin: auto;
  width: 498px;
  height: 340px;
  color: white;
  border: 1px solid white;
  border-radius: 10px;
  background-color: rgba(255, 255, 255, 0.5);
}

.title {
  margin-top: 20px;
  margin-bottom: 20px;
  font-size: 30px;
}

input {
  width: 100%;
  height: 40px;
  background-color: rgba(18, 121, 206, 0.321);
  padding-left: 5px;
  border-radius: 5px;
}

button {
  width: 100px;
  height: 30px;
  margin-bottom: 20px;
}

form a {
  display: block;
  margin-bottom: 10px;
  cursor: pointer;
}

.error {
  font-size: 14px;
  color: red;
  height: 20px;
}

.a {
  text-decoration: none;
  color: rgb(222, 222, 222);
  width: 250px;
  line-height: 100%;
  height: 100%;
}
.Changing {
  width: 500px;
  height: 50px;
  margin: 0 auto;
  display: flex;
  text-align: center;
  /* align-items: center; */
  justify-content: center;
  background-color: rgb(0, 119, 255);
}
.b {
  background-color: rgb(96, 164, 243);
}
</style>

3. Register.vue

<template>
  <form>
    <div class="title">Register</div>
    <input class="username" placeholder="User name" v-model="username" />
    <div class="error">{{ uError }}</div>
    <input type="password" class="password" placeholder="Password" v-model="userpwd" />
    <div class="error">{{ pError }}</div>
    <input type="password" class="pwdagain" placeholder="Confirm Password" v-model="pwdagain" />
    <div class="error">{{ aError }}</div>
    <button class="register-btn" @click="userRegister">Register</button>
    <div class="Changing">
      <button class="a b" @click="GetLogin">已经注册，返回登录</button>
    <button class="a b" >还没注册，点击注册</button>
    </div>
  </form>
</template>
<script>
export default {
  //这里是组件的名字，无影响
  name: "Register",
  data: function () {
    return {
      //这里主要是初始化用户输入的信息，以及错误提示
      username: "",
      userpwd: "",
      pwdagain: "",
      uError: "",
      pError: "",
      aError: "",
    };
  },
  //methods 用于定义的函数。
  methods: {
    //这里定义了一个用户注册函数
    userRegister: function () {
      if (this.username == "") {
        this.uError = "用户名不能为空！";
      } else {
        this.uError = "";
      }
      if (this.userpwd == "") {
        this.pError = "密码不能为空！";
      } else {
        this.pError = "";
      }
      if (this.userpwd != this.pwdagain) {
        this.aError = "两次密码不一致！";
      } else {
        this.aError = "";
      }
      if (this.uError == "" && this.pError == "" && this.aError == "") {
        this.$router.push("/Login");
      }
    },
    GetLogin(){
      this.$router.push("/Login")
    }
  },
};
</script>
<style scoped>
* {
  margin: 0;
  padding: 0;
  color: rgb(95, 95, 95);
}
li,
ul,
ol {
  list-style: none;
}
.cointer {
  width: 600px;
  margin: 0 auto;
}
form {
  margin: auto;
  width: 498px;
  height: 340px;
  color: white;
  border: 1px solid white;
  border-radius: 10px;
  background-color: rgba(255, 255, 255, 0.5);
}

.title {
  margin-top: 20px;
  margin-bottom: 20px;
  font-size: 30px;
}

input {
  width: 100%;
  height: 40px;
  background-color: rgba(18, 121, 206, 0.321);
  padding-left: 5px;
  border-radius: 5px;
}

button {
  width: 100px;
  height: 30px;
  margin-bottom: 20px;
}

form a {
  display: block;
  margin-bottom: 10px;
  cursor: pointer;
}

.error {
  font-size: 14px;
  color: red;
  height: 20px;
}

.a {
  text-decoration: none;
  color: rgb(222, 222, 222);
  width: 250px;
  line-height: 100%;
  height: 100%;
}
.Changing {
  width: 500px;
  height: 50px;
  margin: 0 auto;
  display: flex;
  text-align: center;
  /* align-items: center; */
  justify-content: center;
  background-color: rgb(0, 119, 255);
}
.b {
  background-color: rgb(96, 164, 243);
}
</style>

4. Home.vue

<template>
  <div class="Home">
    <div class="cointer">
      <UserHeader />
      <UserList ref="L" :GetTodo="GetTodo" />
      <UserFooter ref="F" :todos = "todos" :afterClear = "afterClear"></UserFooter>
    </div>
  </div>
</template>

<script>
//引入组件
import UserHeader from "./UserHeader.vue";
import UserFooter from "./UserFooter.vue";
import UserList from "./UserList.vue";
export default {
  name: "Home",
  components: {
    UserHeader,
    UserFooter,
    UserList
  },
  data() {
    return {
      todos:[]
    }
  },
  methods: {
    //获取List中的TODO数据
    GetTodo(value) {
      this.todos = value
      console.log(this.todos);
    },
    afterClear(){
      this.$refs.L.clearAllTodo()
    },
    back(){
      this.$router.push("/Login")
    }
  },
};
</script>

<style scoped>
* {
  margin: 0;
  padding: 0;
  color: rgb(95, 95, 95);
}
li,
ul,
ol {
  list-style: none;
}
.cointer {
  width: 600px;
  margin: 0 auto;
}

</style>

Home组件可以自由创新，Home下面还有其他组件，这个可以自由创新
5. 路由

//该文件用于创建整个应用的路由器
import VueRouter from 'vue-router'

//引入组件
import Home from '../components/Home';
import Login from '../pages/Login';
import Register from '../pages/Register'
import Timing from '../components/Timing'

//创建一个路由器
const router = new VueRouter({
    mode:'history',
    routes: [
        {
            path:'',
             redirect:'/Login'
        },
        {
            path: '/Register',
            name:"zhuce",
            component: Register
        },
        {
            path: '/Login',
            name:"denglu",
            component: Login
        },
        {
            path: '/Home',
            name:"zhuye",
            component: Home
        },
        {
            path:'/Timing',
            component:Timing
        }
        
    ]
})

export default router