引言
近期了解了下目前比较热门的前端框架Vue.js，新技能嘛，只有实践了用起来了，才能有比较直观的体验。因此考虑写个小demo练练手，后端采用Flask提供几个Restfull风格的API，前端放弃惯用的flasky常用的Jinja模板引擎，采用灵活的Vue.js框架，顺便实践一把前后端分离。
既然前后端分离，那么就需要在开发环境独立创建两个项目。下面逐一介绍。
前端
环境准备
开发是在windows10系统上进行。
- 安装node.js
- node.js自带npm，换源
npm install -g cnpm --registry=https://registry.npm.taobao.org
- 安装vue
cnpm install -g vue
- 安装webpack
cnpm install -g webpack
- 安装vue-cli
cnpm install -g vue-cli
- 创建工程
vue init webpack example
- 安装项目依赖
cnpm install
- 启动项目
方法一：命令启动
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应用。本文可以作为参考。