0、知识点
- 删除博客内容
- 编辑博客内容
1、删除
- 在SingleBlog.vue文件,添加一个删除按钮
<button @click="deleteSingleBlog()">删除</button>
- 实现删除方法
methods:{
deleteSingleBlog(){
// 使用v-resource方法请求数据,并使用delete方法删除数据
this.$http.delete("https://vuedemo-b1233.firebaseio.com/posts/" + this.id + ".json")
.then(response =>{ // 使用then方法进行跳转
this.$router.push({path:'/'}) // 跳转到当前的主页展示博客页面当中去,也就是/根路径
})
}
}
2、编辑
- 在SingleBlog.vue文件,添加一个编辑按钮
// 使用router-link标签,并使用to绑定需要跳转到edit页面中的哪一个id上面去
<router-link :to="'/edit/' + id">编辑</router-link>
- 新建一个EditBlog.vue文件
<template>
<div id="add-blog">
<h2>编辑博客</h2>
<form v-if="!submmited">
<label>博客标题</label>
<input type="text" v-model="blog.title" required />
<label>博客内容</label>
<textarea v-model="blog.content"></textarea>
// 博客分类部分实现
<div id="checkboxes">
<label>Vue.js</label>
<input type="checkbox" value="Vue.js" v-model="blog.categories">
<label>Node.js</label>
<input type="checkbox" value="Node.js" v-model="blog.categories">
<label>React.js</label>
<input type="checkbox" value="React.js" v-model="blog.categories">
<label>Angular4</label>
<input type="checkbox" value="Angular4" v-model="blog.categories">
</div>
<label>作者:</label>
<select v-model="blog.author">
<option v-for="author in authors">
{{author}}
</option>
</select>
<button v-on:click.prevent="post">编辑博客</button>
</form>
<div v-if="submmited">
<h3>您的博客发布成功!</h3>
</div>
<div id="preview">
<h3>博客总览</h3>
<p>博客标题: {{blog.title}}</p>
<p>博客内容:</p>
<p>{{blog.content}}</p>
<p>博客分类:</p>
<ul>
<li v-for="category in blog.categories">
{{category}}
</li>
</ul>
<p>作者: {{blog.author}}</p>
</div>
</div>
</template>
<script>
export default {
// https://jsonplaceholder.typicode.com/
// https://jsonplaceholder.typicode.com/posts
name: 'add-blog',
data () {
return {
id:this.$route.params.id,
blog:{},
authors:["Hemiah","Henry","Bucky"],
submmited:false
}
},
methods:{
fetchData(){ // 实现一个调用方法fetchData
// console.log(this.id);
// 使用get方法获取到对应的数据
this.$http.get('https://vuedemo-b1233.firebaseio.com/posts/' + this.id + ".json")
.then(response => { //
// console.log(response.body);
this.blog = response.body; // 将获取到的数据赋值给blog对象
})
},
post:function(){
this.$http.put('https://vuedemo-b1233.firebaseio.com/posts/' + this.id + ".json",this.blog)
.then(function(data){
console.log(data);
this.submmited = true;
});
}
},
created(){
this.fetchData(); // 定义一个调用方法fetchData
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
#add-blog *{
box-sizing: border-box;
}
#add-blog{
margin: 20px auto;
max-width: 600px;
padding: 20px;
}
label{
display: block;
margin: 20px 0 10px;
}
input[type="text"],textarea,select{
display: block;
width: 100%;
padding: 8px;
}
textarea{
height: 200px;
}
#checkboxes label{
display: inline-block;
margin-top: 0;
}
#checkboxes input{
display: inline-block;
margin-right: 10px;
}
button{
display: block;
margin: 20px 0;
background: crimson;
color: #fff;
border: 0;
padding: 14px;
border-radius: 4px;
font-size: 18px;
cursor: pointer;
}
#preview{
padding: 10px 20px;
border: 1px dotted #ccc;
margin: 30px 0;
}
h3{
margin-top: 10px;
}
</style>