【VUE】小白入门（3）前端vue与后端Flask数据传输交互（demo）_vue和flask交互

前端vue与后端Flask数据传输交互（demo）

1.实现目的

昨天过了一遍vue加flask的教程，然后准备把自己以前写的简单demo变成vue和flask的形式的。
流程：
（1）在前端输入框输入【英文单词】
（2）点击提交按钮，POST到flask后端
（3）得到后端处理【翻译】后，数据显示在前端。
处理数据的部分全在flask后端
前端是vue的，与后端唯一交集在于传数据，so开始吧。

先放结果图！[简单demo,不好看认了]

提交后：
【client端】：


【server端】：

2.实现代码

用了很多抖机灵的方法
首先server端：app.py里：
queryWords()是根据有道翻译写的一个函数:英译中。不是重点。
（1）新建一个列表WORDTL
words代表单词，tl代表翻译结果【因为可能会有几个意思，就用列表形式，当然queryword()也让他返回一个列表就成】
（2）定义一个新route和方法：

WORDTL=[{
    'words': '',
    'tl': []
}]
@app.route('/tl', methods=['GET', 'POST'])
def tl():
    response_object = {'status': 'success'}
    if request.method == 'POST':
        post_data = request.get_json()
        WORDTL.append({
            'words': post_data.get('words'),
            'tl': queryWords(post_data.get('words'))
        })
    else:
        response_object['data'] = WORDTL[-1]
    return jsonify(response_object)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

Client端
(1)新添加一个组件Translation.vue
(2)在index.js里加一些常规引入的操作

import Vue from 'vue'
import Router from 'vue-router'
import Translation from '@/components/Translation'

Vue.use(Router)


export default new Router({
  routes: [
    {
      path: '/tl',
      name: 'Translation',
      component: Translation
    }
  ]
  // mode: 'hash'
})

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

（3）在Translation.vue:
template部分：

一个输入框，两个alert组件，一个提交（其实是<a></a>）.
<template>
<div id="app">
   <alert :message="tips" v-if="showMessage"></alert>
  <p>Please  input English words：</p>
  <input v-model="message" placeholder="input the word:">
  <p>没啥用这行我只是想看看输入的效果: {{ message }}</p>
  <alert :message="tl" v-if="showMessage"></alert>
    <!--<p>翻译是: {{tl}}</p>-->
  <a href="javascript:;" class="bluebtn" @click="onsubmit();">提交</a>
</div>
</template>
1
2
3
4
5
6
7
8
9
10
11
12

重要的是Scripts部分:直接放代码，一点一点写的，可能有错，但是可以实现功能