Vue和Flask实现前后端分离

引言

近期了解了下目前比较热门的前端框架Vue.js，新技能嘛，只有实践了用起来了，才能有比较直观的体验。因此考虑写个小demo练练手，后端采用Flask提供几个Restfull风格的API，前端放弃惯用的flasky常用的Jinja模板引擎，采用灵活的Vue.js框架，顺便实践一把前后端分离。
既然前后端分离，那么就需要在开发环境独立创建两个项目。下面逐一介绍。

前端

环境准备

开发是在windows10系统上进行。

1. 安装node.js
2. node.js自带npm，换源

npm install  -g cnpm --registry=https://registry.npm.taobao.org

3. 安装vue

cnpm install -g vue

4. 安装webpack

cnpm install -g webpack

5. 安装vue-cli

cnpm install -g vue-cli

6. 创建工程

vue init webpack example

7. 安装项目依赖

cnpm install

8. 启动项目
   方法一：命令启动

cnpm run dev

方法二： 在pycharm中打开项目，并启动。
项目启动后，会提示输入localhost:8080，在浏览器可以正常打开页面。至此，开发环境准备妥当，下面可进行前端代码的开发。

代码开发

工程目录结构如下图：

vue是以组件为单位组织成复杂的页面。我们直接在componets下的HelloWorld.vue上进行代码调整和编写。
template部分主要包含一个select元素，value对应后端API，触发button会向选择的后端API发送请求。
script部分methods部分实现对元素事件的响应，通过axios与后端服务器进行通信，分别采用get和post方法。具体代码如下图：

<template>
  <div class="hello">
    <button @click="test">测试</button>
    <select v-model="selected" name="url-option">
      <option value="">选择一个Url</option>
      <option value="/api/speech/event_extraction">思必驰警情信息抽取</option>
      <option value="/api/speech/addr_fix">思必驰地址理解</option>
      <option value="/api/gaode/get_poi">高德关键字搜索</option>
    </select>
    <input v-model="input_query" style="width: 400px">
    <button @click="sendRequest">发送请求</button>
    <br></br>
    <textarea style="width: 600px; height: 300px">{{ resp }}</textarea>
  </div>
</template>

<script>
import axios from 'axios'
// 后端服务器地址
axios.defaults.baseURL = 'http://10.67.*.*:5000';
export default {
  name: 'HelloWorld',
  data () {
    return {
      selected: '',
      input_query: '',
      resp: ''
    }
  },
  methods: {
    test () {
      axios
        .get('/api/hello')
        .then(response => {
          console.log(response.data.name)
          this.resp = response.data.name
        })
        .cache(error => {
          console.error(error)
        })
    },
    sendRequest () {
      console.log(this.selected)
      axios
        .post(this.selected, {query: this.input_query})
        .then(response => {
          console.log(response)
          this.resp = response.data
        }).catch(error => {
          console.error(error)
        })
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1, h2 {
  font-weight: normal;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>

界面很简单，展示如下：

后端

打开pycharm，新建一个flask项目，配置venv。flask项目目录如下：

在app.py里编写几个Restfull 风格的API，用于响应前端请求。

from flask import Flask, jsonify, request
from flask_cors import CORS
import requests
import json

app = Flask(__name__)
# 实现跨域访问
cors = CORS(app, resources={r"*": {"origins": "*"}})

# get请求
@app.route('/api/hello')
def hello_world():
    content = {
            "name": "网站",
            "num": 3,
            "sites": [{"name": "Google", "info": ["Android", "Google 搜索", "Google 翻译"]},
                      {"name": "Runoob", "info": ["菜鸟教程", "菜鸟工具", "菜鸟微信"]},
                      {"name": "Taobao", "info": ["淘宝", "网购"]}],
            }

    return jsonify(content)

# post请求
@app.route('/api/gaode/get_poi', methods=['POST'])
def get_poi():
    json_data = request.get_json()
    url_prefix = "***"   
    url = url_prefix + '&keywords=' + json_data['query']
    headers = {"Content-Type": "application/json"}
    resp = requests.get(url, headers=headers)
    text = resp.json()
    return text

# 其它接口此处可进行补充.............

if __name__ == '__main__':
    app.run(
        # TODO 设置无效，原因未知
        # host='10.67.*.*',
        # port='5000',
        # debug=True
    )

点击运行。或者用命令启动：python -m flask run

遇到问题

1、为了支持外部网络访问，后端在app.run里设置host运行不生效。pycharm中配置，运行却可以生效。原因未知。
2、flask 跨域访问

from flask_cors import CORS
cors = CORS(app, resources={r"*": {"origins": "*"}})

小结

Flask是一个轻量级的web后端框架，Vue是动态响应性能好、开发较为便捷的前端框架，选用两者作为前后端可快速搭建一个web应用。本文可以作为参考。