Vue快速上手（四）获取接口数据并展示

在上一章中，我们把vue的基本语法简单介绍了下（实际上是让你自己去看文档的O(∩_∩)O哈哈~），介绍了一下组件和路由的用法。本章我们实现从后台获取接口数据，并使用vue获取展示。

后台接口

后台接口我选用了Python的flask，这个比较简单，非常适合自己做项目，可以快速的尝试各种各样的拓展。实际上Java、go都差不多，简单说就是写个输出json的函数，套用个插件（注解什么的），发出api，客户端接收展示，完成。
逻辑原理类似，只是实现方式不同而已。
我这里是举例，所以直接上代码（Python不熟悉的、flask不熟悉的，换成自己熟悉的）。

from . import main
from flask import jsonify

@main.route('/api/books',methods = ['GET'])
def api_books():
    books = [
        {
            'id': 1,
            'title': '解忧杂货店',
            'author': '东野圭吾',
            'price': 18,
            'publish':'2012年3月'
        },
        {
            'id': 2,
            'title': '明朝哪些事儿',
            'author': '当年明月',
            'price': 315,
            'publish': '2006年3月'
        }
    ]
    return jsonify({'books':books})

这个不是重点，大家有个能发出json的地址即可，如果没有自己写，使用一些公用的也可以，例如淘宝这个：https://suggest.taobao.com/sug?code=utf-8&q=皮鞋&callback=cb

vue获取

vue获取数据的方式很多，ajax，jsonp，axios
我们使用axios，为什么用它？貌似是vue的作者比较推荐~~

<!-- 在component/maincomponent.vue文件中 -->
<!-- 在<template><div></div></template>标签之内，用于展示数据的 -->
...
<ul class="list-group leftul">
  <li class="list-group-item" v-for="body in bodys">
    <span class="list-group-item-heading">{{body[0].author}}{{body[0].title}}{{body[0].publish}}{{body[0].price}}</span><br>
      <span class="list-group-item-text">{{body[1]}}</span>
  </li>
</ul>
...
<script>
export default {
    name: 'maincomponent',
    data () {
      return{
        author:'Lee',
        bodys:[]
      }
    },
    mounted:function() {
      //这里放获取json数据
      var that = this
      this.axios({
        method: 'get',
        headers: {
          'ContentType': 'application/json',
          'Access-Control-Allow-Origin':'*'
        },
        dataType: 'json',
        ContentType: 'application/json;charset-utf-8',
        url: 'http://127.0.0.1:5000/api/books',
        data: {
        }

      }).then(function (response) {
        console.log('获取数据response:' + response)
        that.bodys = response.data
        console.log('books:' +  JSON.stringify(that.bodys, null, 4))
      }).catch(function (error) {
        console.log(error)
      })
    }
  }
</script>

安装axios和qs

//安装
npm install qs -S
npm install axios -S

在main.js中引入

import Axios from 'axios'
import qs from 'qs'
Vue.prototype.axios = Axios    //全局注册，使用方法为:this.$axios
Vue.prototype.qs = qs          //全局注册，使用方法为:this.qs

以上，运行vue（flask的服务也要运行），为了展示清楚，我把console.log的内容也截图

image.png
axios获取json接口数据并展示已经完成，增删改查以此类推，理解了原理和调用方式，剩下的拓展直接看文档就可以了http://www.axios-js.com/zh-cn/docs/

可能会有的坑

axios跨域

解决方案一

在服务端设置响应头，我这里用的是在flask的init.py中引入了CORS，安装pip install flask_cors

from flask_cors import CORS
CORS(main,supports_credentials = True)

解决方案二

在vue中设置代理
从其他大神那里看了一些，在注册axios时配置个代理，但是我没学会。小尴尬Σ( ° △ °|||)︴，不过我在axios中配置了headers貌似也解决了这个问题，暂时还没想明白为啥 ( ⊙o⊙?)懵逼中...

headers: {
          'ContentType': 'application/json',
          'Access-Control-Allow-Origin':'*'
        }

这里放一下我搜索axios跨域问题时的大神们的地址，大家可以看下，写的非常详细：
https://www.cnblogs.com/ysx215/p/11446615.html
https://blog.csdn.net/qq_36415230/article/details/92072269

感谢各位大神分享自己的经验助我们脱坑成功