基于vue 、vue-router 、firebase的todolist小项目

第一次写博客，都不知道改怎么写的好。

 

本着一颗学习的心，也希望一段时间后再回来在看看自己写的代码，会不会让自己有种不忍直视的念头 *-*

 

还是先上图吧~

 

这是首页，主要是展示所有的列表页面，可以通过输入框进行模糊查询

代码如下：

<template>
  <div class="list">
    <h2><span class="title">TODO</span>列表</h2>
    <div class="search">
      <input type="text" v-model="search" placeholder="请输入搜索内容">
    </div>
    <div class="list-item" v-for="item in filterItem">
      <router-link v-bind:to="'/list/' + item.id">
        <p>{{item.name}}</p>
      </router-link>
    </div>
    <div class="addList">
      <router-link v-bind:to="'/add'">
        <button>添加计划</button>
      </router-link>
    </div>
    <!-- <div class="button">
      <button @click.prevent="upPage">上一页</button>
      <button @click.prevent="nextPage">下一页</button>
    </div> -->
  </div>
  
</template>

<script>
export default {
  name: 'index',
  data () {
    return {
      items : [],
      search : '',
      pageFlag : false
    }
  },
  created () {
    this.$http.get('https://my-first-vue.firebaseio.com/add.json')
    .then((data) => {
      console.log(data.json())
      return data.json()
    })
    .then(data => {
      let arr = []
      for(let key in data){
        //console.log(key)
        //console.log(data[key])
        data[key].id = key
        arr.push(data[key])
      }
      this.items = arr
      if(this.items.length > 10){
        this.pageFlag = true;
        this.items.slice(0, 10)
      }
    })
  },
  methods : {
    upPage : () =>{


    },
    nextPage : () => {

    }
  },
  computed : {
    //filterItem : () => this.items.filter(item => item.name.match(this.search))
    filterItem : function(){
      return this.items.filter((item) =>{
        return item.name.match(this.search);
      })
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.list{
  box-sizing: border-box;
  max-width: 800px;
  min-height: 700px;
  margin: 0 auto;
  padding-top: 10px;
  border-radius: 10px;
  background-color: rgba(83,113,134,.7);
  box-shadow: 10px 10px 5px #1F2C52;
}
input{
  width: 77%;
  height: 30px;
  padding: 0 10px;
}
.list-item{
  width: 79%;
  background-color: rgba(243,243,243,.8);
  margin: 10px auto;
  min-height: 40px;
  line-height: 40px;
  padding-left: 10px;
  border-radius: 5px;
}
.list-item > p{
 
  line-height: 40px;
  text-indent: 2em;
}
.search{
  text-align: center;
}
h2{
  color: #f9f9f9;
  font-size: 30px;
}
h2,h3{
  text-align: center;
}
.title{
  text-shadow: 3px 3px 3px #FF0000;
}
.button{
  /*margin: 0 auto;*/
  text-align: center;
}
a{
  text-decoration: none;
  color: rgba(0,102,255,.49);
}
button{
  border: 0;
  background-color: #3A97BB;
  width: 80px;
  height: 30px;
  border-radius: 4px;
  font-size: 14px;
  color: #fff;
}
button:hover{
  background-color: #D06B66;
}
.addList{
  margin-top: 10px;
  text-align: center;
}

</style>

　

 

这是添加页面，可以对列表进行新增~　

don't talk to me ,show me the code

<template>
  <div class="add">
    <h2>添加事项</h2>
    <div class="name">
      <label>名称:</label>
      <input type="text" v-model="add.name">
    </div>
    <div class="content">
      <label>描述:</label>
      <textarea v-model="add.content"></textarea>
    </div>
    <button @click="post">添加</button>
    
    <!-- <router-link v-bind:to="'/'">
        <button @click="post">添加</button>
    </router-link> -->
  </div>
  
</template>

<script>
export default {
  name: 'add',
  data () {
    return {
      add : {
        name : '',
        content : ''
      }
    }
  },
  methods : {
    post : function(){
      console.log(this.add.name)
      if(this.add.name){
        this.$http.post('https://my-first-vue.firebaseio.com/add.json',this.add)
        .then(function(data){
          console.log(data)
          console.log(this.$router.push({path:'/'}))
          this.add.name = ''
          this.add.content = ''
          this.$router.push({path:'/'})
        })
      }else{
        alert('你没有填写要输入的值')
      }
      
      
      
      
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.add *{
  box-sizing: border-box;
  
}
.add{
  max-width: 800px;
  min-height: 700px;
  margin: 0 auto;
  padding: 20px;
  background-color: #f9f9f9;
  color: #666;
}
.name{
  margin: 10px 0 20px 0;
}
h2{
  text-align: center;
}
input,textarea{
  width: 97%;
  height: 30px;
  margin-top: 10px;
  margin-bottom: 10px;
  padding-left: 10px;
}
textarea{
  height: 150px;
}
button{
  border: 0;
  background-color: #3A97BB;
  width: 60px;
  height: 30px;
  border-radius: 4px;
  font-size: 18px;
  color: #fff;
}

</style>

　　

 

最后当然是显示列表页面咯，主要是显示每个todolist的具体内容~

 

在列表页面具有删除功能~ ~

 

 

还是上代码吧~~

<template>
  <div class="item">
     <h3>{{list.name}}</h3>
    <p>{{list.content}}</p>
    <span class="delete" @click.prevent="closeList">×</span>
    <button @click.prevent="deleteList">删除</button>
  </div>
  
  
</template>

<script>
export default {
  name: 'list',
  data(){
      return{
        id:this.$route.params.id,
        list:{}
      }
    },
    methods : {
      deleteList : function(){
        this.$http.delete('https://my-first-vue.firebaseio.com/add/' + this.id + ".json")
        .then((data) => {
          console.log(data)
          this.$router.push({path:'/'})
        })
      },
      closeList : function(){
        this.$router.push({path:'/'})
      }
    },
    created(){
      this.$http.get('https://my-first-vue.firebaseio.com/add/' + this.id + ".json")
        .then(function(data){
          console.log(data);
          return data.json();
          // this.blog = data.body;
        })
        .then(function(data){
          this.list = data
          console.log(this.id)
          console.log(data.name)
        })
    }
    
  }
  
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.item{
  position: relative;
  margin: 200px auto;
  max-width: 800px;
  min-height: 300px;
  background-color: #f6f6f6;
  padding: 5px 0;
  border-radius: 10px;
}
.delete{
  position: absolute;
  display: block;
  top: 10px;
  right: 20px;
  cursor: pointer;
}
.delete:hover{
  background-color: rgba(0,0,0,.3);
}
h3{
  text-align: center;
  color: #DC1515;
}
p{
  padding: 10px;
  text-indent: 2em;
}
button{
  display: block;
  position: absolute;
  width: 60px;
  height: 30px;
  bottom: 10px;
  left: 50%;
  margin-left: -30px;
  border : 0;
  background-color: #D06B66;
  border-radius: 4px;
  font-size: 14px;
  color: #fff;
}
button:hover{
  background-color: red;
}
</style>

　　

这个小项目一共分为三个页面，数据库是基于firebase（谷歌的产品，需要FQ才能连接）。

代码在这：https://github.com/BENcorry/TODO/

注 ： 因为数据库需要FQ，所以想要拿到数据请自行准备~

由于LZ也只是一个刚毕业了两个月的小菜鸟，工作上也没用到关于Vue的知识（俺们用的是knockoutJS =。=），所以可能会存在一些问题，望指正~

 

转载于:https://www.cnblogs.com/bencorry/p/7425384.html