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

前端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)

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'
})

（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>

重要的是Scripts部分:直接放代码，一点一点写的，可能有错，但是可以实现功能👇
我的理解是这样，三个Methods:
（1）首先用户输入，点击提交，会触发Onsubmit()
其实它的作用就两个,一是定义translatio函数要传递的参数，这里的message是上面输入框的输入的message。【输入框v-model="message"就说明了这点】
const payload = {
words: this.message
}
this.translation(payload)
二是触发translation函数
(2)tranlation函数主要目的是【post】数据到后端，一般POST的函数都有path（写后端的router地址），payload（写要传递的参数）
这个post成功之后
触发gettl()函数，获取【GET】后端传回的内容。
同时 console.log(payload)控制台输出一下，看看传的对不

（3）gettl是从后台获取处理好的数据 this.tl = res.data.data.tl
这个第一个data是固定的，第二个data是app.py里起的名字，代表的是WORDTL列表的最后一个（也是最新的一个）

<script>
import axios from 'axios'
// 从后端获取数据
import Alert from './Alert'

export default {
  name: 'Translation',
  data () {
    return {
      tl: '',
      message: '',
      tips: '',
      showMessage: false
    }
  },
  components: {
    alert: Alert
  },
  methods: {
    gettl () {
      const path = 'http://localhost:5000/tl'
      axios.get(path)
        .then((res) => {
          this.tl = res.data.data.tl
          console.log(this.tl)
        })
        .catch((error) => {
          // eslint-disable-next-line
          console.error(error);
        })
    },
    translation (payload) {
      const path = 'http://localhost:5000/tl'
      axios.post(path, payload)
        .then(() => {
          this.gettl()
          console.log(payload)
          this.tips = 'submit success'
          this.showMessage = true
        })
        .catch((error) => {
          // eslint-disable-next-line
          console.log(error)
        })
    },
    onsubmit () {
      const payload = {
        words: this.message
      }
      this.translation(payload)
    }

  }
}
</script>

Problem:
这里遇到的一个问题是这样，就是
前端成功的post数据之后（8080控制台可以看到），但是后端（5000一刷新，命令行那里变成get,然后返回的数据里没有传过来,5000界面出现的还是最原始初始化WORDTL数据，很迷？？？）

后来参照了第一次那个添加书的教程的方法，在server端：初始化一个列表
WORDTL=[{
‘words’: ‘’,
‘tl’: []
}]
【get】方法的时候，让其显示目前WORDTL列表的最后一个（也是最新的一个）
【Post】请求的时候，就获取前端的内容，用request.get_json()
因为在前端给this.message代表的内容起名叫"words"了，此时可以直接request.get_json()[‘’words’]或者request.get_json().get(‘words’)都可以，得到的都是str类型的内容。

然后在WORDTL里加上这个新内容。

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)

【中文的话，在py文件里加↓，亲测有效！】

# 中文可以显示
app.config['JSON_AS_ASCII'] = False

-------------------------------EchoZhang------2020/03/03---------------

改进一下
【post】改成【put】了
一般我理解的是add用post，update用put
直接放代码和结果，
（1）改app.py加个路径

（2）vue里改成把methods里post改成put，再改下路径

看此时查一次词后台变化：

再查一次相同的词也不会再添加，其实就是加了一个如果查相同的词，就先wordtl.remove(相同的词的信息)。

----------------------------EchoZhang------2020/03/04补充-------------