后端采用Flask提供几个Restfull风格的API，前端放弃惯用的flasky常用的Jinja模板引擎，采用灵活的Vue.js框架，顺便实践一把前后端分离。既然前后端分离，那么就需要在开发环境独立创建两个项目。下面逐一介绍。

安装node.js

安装vue，安装webpack，安装vue-cli，创建工程

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>

在vue中还用

v-for 来在前端页面中做for循环，v-on:click=点击，v-if=表示IF语句

后端

打开pycharm，新建一个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
    )