基于vue 、vue-router 、firebase的todolist小项目
2024-08-27 14:04:12
第一次写博客，都不知道改怎么写的好。
本着一颗学习的心，也希望一段时间后再回来在看看自己写的代码，会不会让自己有种不忍直视的念头 *-*
还是先上图吧~
这是首页，主要是展示所有的列表页面，可以通过输入框进行模糊查询
代码如下：
<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（谷歌的产品，需要翻墙才能连接）。
代码在这：https://github.com/BENcorry/TODO/
注 ： 因为数据库需要翻墙，所以想要拿到数据请自行准备~
由于LZ也只是一个刚毕业了两个月的小菜鸟，工作上也没用到关于Vue的知识（俺们用的是knockoutJS =。=），所以可能会存在一些问题，望指正~
最新文章
- Java实现归并排序
- IOS--UIAlertView造成屏幕闪烁
- .Net语言 APP开发平台——Smobiler学习日志：如何仿微信朋友圈的消息样式？
- iOS学习笔记—ViewController/生命周期
- Java类加载器深入探索
- 【leetcode❤python】 205. Isomorphic Strings
- Java选择结构、循环结构
- input获取永久焦点
- java 实现视频转换通用工具类：视频相互转换-总方法及Mencoder（二）
- CSS3实现兼容性的渐变背景效果
- ES6-个人学习笔记一--let和const
- Andriod Studio科学文章——4.常见问题解答有关编译
- FTS下载地址
- php中DateTime的format格式以及 TtoDatetime函数
- arcpy.mapping常用四大件-StyleItem
- boost::assign(标准容器填充库)
- 什么是spool系统，什么是预输入，什么是缓输出？
- SAP LOGON 快捷登陆方式如何保存密码
- 软件工程---UML理解
- netsh 转发 5000 端口到 80端口的命令和删除方法