161.Vue实现个人博客（九）【Vue2.0-get拉取数据及项目打包上传到服务器】 2019.03.15

0、知识点

• get数据
• 打包项目到自己的服务器、或者Github

1、问题提出

• 在ShowBlog.vue中，this.blogs = data.body.slice(0,10);的data.body.slice不在是一个数组了，而是一个对象，而filterblogs遍历的却还是一个数组，那么可以采取将这些对象存储到数组里面中去，
• 将每一个对象前面的标识当做我们的id值，进行传递

2、ShowBlog.vue

export default {
  name: 'show-blogs',
  data(){
  	return {
  		blogs:[], // 空的blog数组
  		search:""
  	}
  },


this.$http.get('https://vuedemo-b1233.firebaseio.com/posts.json')
      .then(function(data){
           return data.json() // 返回一个对象
  		})
  		
  		// 再then一次，用于接收上面return回来的data数据
  		// 拿到data后，第一件事是要把data放到数组当中去，第二件事是把数组赋给blogs
      .then(function(data){
        var blogsArray = []; // 定义一个数组blogsArray
        for(let key in data){ //遍历对象
          // console.log(key);
          // console.log(data[key]);
          data[key].id = key; // 将每一个对象添加一个id，并将key赋值给id
          blogsArray.push(data[key]); // 将data[key]对象push到数组当中去
        }
        // console.log(blogsArray);
        this.blogs = blogsArray; //将数组当中的值赋值给blog
        console.log(this.blogs);
      })
  },

3、SingleBlog.vue

// 展示content
<article>
    {{blog.content}}
</article>
   ...
created(){
			// 接口地址，后面拼接一个要获取的对象id以及json，这样就可以获取到数据了
			this.$http.get('https://vuedemo-b1233.firebaseio.com/posts/' + this.id + ".json")
				.then(function(data){
					console.log(data);
					return data.json(); // 返回data对象
					// this.blog = data.body;
				})
				.then(function(data){
					this.blog = data; // 遍历好的对象
				})
		},

4、打包项目到服务器

• 打包命令：npm run build
  
• 打包完后，会生成一个dist文件，以及两个文件static、index.html
  
• 将static、index.html两个文件上传到服务器当中
• 这里是上传到GitHub服务器，你也可以上传到自己搭建的服务器当中
  
• 更新一下GitHub上面上传的内容
  
• 通过GitHub地址链接访问到服务器
  
• 还可以通过域名访问服务器