153.Vue实现个人博客（一）【Vue2.0-设定添加博客并实现post数据】 2019.03.13

个人博客项目主页面效果：

1、使用vue-cli脚手架搭建项目模板

2、安装vue-cli

     npm install --global vue-cli

3、创建一个基于 webpack 模板的新项目

     vue init webpack my-blog

4、进入项目文件夹目录下

    cd my-project

5、安装依赖

     npm install

6、运行项目

      npm run dev

 

项目代码实现： 

# AddBlog.vue

<template>
  <div id="add-blog">
    <h2>添加博客</h2>
    <form v-if="!submmited"> // 绑定一个v-if判断，当假的时候，form表单的 “您的博客发布成功！”隐藏起来

      <label>博客标题</label>
      // 使用v-model对blog-title进行绑定，可以让博客标题的信息实时显示出来
      <input type="text" v-model="blog.title" required />

      <label>博客内容</label>
      // 使用v-model对blog-content进行绑定，可以让博客内容的信息实时显示出来
      <textarea v-model="blog.content"></textarea>

       //选择博客分类部分
      <div id="checkboxes">
        
        <label>Vue.js</label>
        
        //用v-model绑定blog.categories，可以在事件被触发时找到对应的属性值
        <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>

      // 使用v-model对blog.author进行绑定，选择谁就是谁
      <select v-model="blog.author">
          // 使用v-for将authors遍历出来
         <option v-for="author in authors">
         {{authors}}
         </option>
      </select>
      
      // 把数据post到页面中去，使用v-on监听事件，prevent防止刷新页面，定义一个方法名post
      <button v-on:click.prevent="post">添加博客</button>
    </form>

    <div v-if="submmited"> // 当真的时候，“您的博客发布成功!” 会显示出来
      <h3>您的博客发布成功!</h3>
    </div>

    // 博客总览部分实现
    <div id="preview">
      <h3>博客总览</h3>
      <p>博客标题: {{blog.title}}</p> //{{blog.title}}，显示博客标题
      <p>博客内容:</p>
      <p>{{blog.content}}</p> //{{blog.content}}，显示博客内容
      
      //博客分类部分实现
      <p>博客分类:</p>
      <ul>

        // 博客分类可能会有多个，可以使用v-for将categories遍历出来
        <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 {
      blog:{
        title:"", // 博客标题
        content:"", // 博客内容
        categories:[], // 存储分类的属性种类
        author:""  // 定义一个空的author属性
      },
      authors:["Hemiah","Henry","Bucky"], // 数据写死了，给authors三个属性值
      submmited:false 
    }
  },
  methods:{

    // 向数据库当中post数据，vue提供了一个vue-resource数据请求方法
    // 定义一个post方法，并且将数据post到下面这个vuedemo-b1233网站的数据库中
    post:function(){
      
      // 使用vue-resource的$http.post（）方法发送请求
      this.$http.post("https://vuedemo-b1233.firebaseio.com/posts.json",this.blog)
          
          // post成功后，返回数据
          .then(function(data){
            console.log(data);
            this.submmited = true;  // 当点击添加博客时，submmited会被触发
          });
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

</style>