基于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 =。=),所以可能会存在一些问题,望指正~