二，vue+flask 前端通过后台接口获取数据

为了能够通过接口从后端获取数据，我们需要安装axios， 通过axios来实现http访问。

npm install axios --save

我们在src/main.js中，引入axios：

import axios from 'axios'

// 指向我们的后台服务
axios.defaults.baseURL = 'http://127.0.0.1:5000'
Vue.prototype.$ajax = axios

将src/app.vue文件修成如下内容：

<template>
  <div id="app"><img alt="Vue logo" src="./assets/logo.png"/>
    <h1>{{datetime}}</h1></div>
</template>
<script>export default {
  name: 'App',
  data () {
    return {datetime: 'eeeeeee'}
  },
  methods: {
    initData () {
      this.$ajax.get('/time', {}).then(res => {
        this.datetime = res.data.time
      })
    }
  },
  mounted () {
    this.initData()
  }
}</script>
<style>
  #app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
  }
</style>

这时候，如果你访问前端页面，会发现也没上没有显示出时间戳，且有报错

 

这是因为跨域访问导致的，我们需要让flask支持跨域访问，我们使用flask-cors来解决这个问题。 安装这个包：

pip install flask-cors

然后将server-book-info/api.py 进行修改：

import time
from flask import Flask
from flask_cors import CORS

app = Flask(__name__)
CORS(app)
@app.route('/time')
def get_current_time():
    return {'time': time.time()}

这是，再次刷新页面，发现时间戳能够正常显示了