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，那么在任何组件中进行异步通信获取数据的用法都如下一样

  <template>
    <div id="app">
      <img src="./assets/logo.png"><br>
      <button v-on:click="catchData">点我</button>
      <ul>
        <li v-for="item in items" v-bind:key="item.hello">{{ item }}</li>
      </ul> 
      <router-view/>
    </div>
  </template>
  
  <script>
  export default {
    name: 'App',
    data () {
      return {
        items:[{hello:"vue"}]
      }
    },
    methods: {
      catchData () {
        // 为了在内部函数能使用外部函数的this对象
        var self = this;
        this.$http.get("/api/index")
          .then(res => {
            console.log(res);
            console.log(res.data);
            self.items.push(res.data);
        });
      }
    }
  }
  </script>

  注2：如果是希望在刷新页面时即自动获取数据而不需要按钮触发，那么异步获取数据的函数需要写在mounted()或created()中（关于究竟有什么区别，我暂时还没弄明白vue的生命周期钩子，无法作出解释，有兴趣的小伙伴可以戳官方文档寻找答案），以下是一个示例，亲测刷新页面时能够自动获取后台数据

  mounted() {
      var self = this;
      this.$http.get('/api/index')
          .then( response => {
            let data = response.data
            self.items = data
          })
          .catch( function(err) {
            console.log(err);
          });
  }

3. 运行前端

在win10本地进行调试

npm run dev

后台部分

1. virtualenv

当然要使用virtualenv啦，具体怎么使用可以戳之前的博文，其实win10和linux是类似的操作，这里不进行详细讲解了

pip install virtualenv
virtualenv -p C:\Python27\python.exe --no-site-packages venv
./venv/Scripts/activate.bat

与linux的情况的唯一的区别就是使用bat文件**或退出虚拟环境

2. 安装flask相关

当然是在虚拟环境中安装啦

pip install flask
pip install flask_restful
pip install flask_cors

3. 构建简单的flask后台

工程目录结构如下：

• 整个web后台以一个package的形式被导入到run.py中运行

  
  # run.py
  
  
  # coding=utf-8
  
  from web import app
  app.run(debug=True) # 开启debug模式，在生产环境中不能使用

• web/__init__.py主要用于写app的初始化和api的路由

  
  # web/__init__.py
  
  
  # coding=utf-8
  
  
  from flask import Flask, request, redirect, url_for
  from flask_restful import Api
  from flask_cors import CORS
  from web.resource.helloWorld import HelloWorld
  
  app = Flask(__name__)
  CORS(app, supports_credentials=True) # 用于处理跨域问题
  
  '''添加api资源'''
  api = Api(app)
  api.add_resource(HelloWorld, '/api/index')

  这里稍微解释一下：add_resource(Resource类名, url[, endpoint])，url可以多个。详细介绍戳这里

• web/resource主要用于写逻辑，每一个事务可以写为一个py文件，每一个api的路由都对应一个Resource类，该类的函数名对应着请求方式（get,post等）

  
  # web/resource/helloWorld.py
  
  
  # coding=utf-8
  
  
  from flask_restful import Resource
  from flask import Response
  import json
  
  class HelloWorld(Resource):
    def get(self):
      data = json.dumps({'hello':'world'})
      resp = Response(response=data, status=200, mimetype="application/json")
      return resp
  
    def post(self):
      pass

4. 运行后台

(venv) λ python run.py
 * Serving Flask app "web" (lazy loading)
 * Environment: production
   WARNING: Do not use the development server in a production environment.
   Use a production WSGI server instead.
 * Debug mode: on
 * Restarting with stat
 * Debugger is active!
 * Debugger PIN: 209-467-162
 * Running on http://127.0.0.1:5000/ (Press CTRL+C to quit)

测试前后端异步通信

1. 点击按钮前：

2. 点击按钮后：

---

一个彩蛋

安利一个叫postman的chrome浏览器插件，已经有客户端版本了，完全可以脱离前端页面也能调试后台是否正确返回所需数据

参考文档：

flask-restful官方文档：戳这里
axios的github文档：戳这里
vue的官方文档：戳这里
postman官网：戳这里