Flask(flask_restful.Api)+vue(webpack)+axios实现简单的前后端分离

前端部分

1. 部署webpack脚手架

首先按照此博文的步骤在win10本地部署好vuejs的webpack脚手架

2. 安装并使用axios进行异步通信

搜了一些介绍，现在vue2.0以上官方都是建议使用axios与后台进行异步通信获取数据，vue-resource.js似乎是不维护了；另一方面本来打算自己在vuejs框架内实现原生态的AJAX的，但由于对框架原理的不理解受到了很大的障碍，最终决定使用axios

• 安装axios

  npm install axios --save

  axios的github戳这里，提供了三种安装方式，我选择了npm安装。安装完毕之后在webpackProject/node_modules/下会多一个名叫axios的文件夹

• 引入全局变量

  在webpackProject/src/main.js中增加以下内容：

  import axios from 'axios'
  
  Vue.prototype.$http = axios.create({
    baseURL: "http://127.0.0.1:5000",
    timeout: 5000,
    headers: {'Content-Type': 'application/json'}
  });

• 在组件中使用$http变量

  例如在组件webpackProject/src/App.vue中使用：增加一个按钮用于触发请求，即当点击点我按钮时，触发catchData方法，发起GET http://127.0.0.1:5000/api/index的请求，并在接收到响应之后将响应报文和响应数据打印到控制台，最后将响应数据添加到当前组件的数据成员items中去，用于页面渲染

  注1：当然可以在src/components下的组件使用，只要在main.js中引入了$http，那么在任何组件中进行异步通信获取数据的用法都如下一样