尝试按照教程构建一个 spring boot vuejs 项目但得到一些错误答案

【问题标题】：Trying to follow a tutorial to build a spring boot vuejs project but get some errors尝试按照教程构建一个 spring boot vuejs 项目但得到一些错误
【发布时间】：2020-07-01 04:28:55
【问题描述】：

我正在尝试按照本教程https://github.com/jonashackt/spring-boot-vuejs 使用 vuejs 项目构建一个 spring boot，我使用 vue create frontend --no-git 创建了一个空的 vue 项目，然后直到这一步：“使用 Axios 调用 REST 服务很简单。进入组件的脚本区域，例如 Hello.vue 并添加："

import axios from 'axios'

data ();{
  return {
    response: [],
    errors: []
  }
},

callRestService ();{
  axios.get(`api/hello`)
    .then(response => {
      // JSON responses are automatically parsed.
      this.response = response.data
    })
    .catch(e => {
      this.errors.push(e)
    })
}
}

我不知道应该在哪里添加。我像这样在 frontend\src\views 文件夹下创建了 Hello.vue 文件，并将其添加到 src\router\index.js

<template>
  <div class="hello">
    <button class=”Search__button” @click="callRestService()">CALL Spring Boot REST backend service</button>
    <h3>{{ response }}</h3>
  </div>
</template>

<script>
import axios from 'axios'

data ();{
  return {
    response: [],
    errors: []
  }
},

callRestService ();{
  axios.get(`api/hello`)
    .then(response => {
      // JSON responses are automatically parsed.
      this.response = response.data
    })
    .catch(e => {
      this.errors.push(e)
    })
}
}
</script>

但是 npm run build 给了我这个错误：

C:\gitercn1\spring-boot-vuejs-copy\frontend\src\views\Hello.vue: 'return' outside of function (13:4)

  11 |
  12 |   data ();{
> 13 |     return {
     |     ^
  14 |       response: [],
  15 |       errors: []
  16 |     }

【问题讨论】：

去掉data ();{中的分号。
@Ricky 你的意思是这样data (){？然后它显示这个错误： Syntax Error: SyntaxError: C:\gitercn1\spring-boot-vuejs-copy\frontend\src\views\Hello1.vue: Unexpected token, expected ";" (11:7)
检查 StartedFromTheBottom 的答案，他们给出了详细的解释。

标签： spring-boot vue.js vuejs2

【解决方案1】：

首先，您必须在methods 或处理程序中添加callRestService()（因为您在单击按钮时调用该方法）。

其次，你应该删除data()和callRestService()之后不必要的;。

第三，如果你打算在某处重复使用你的组件，你应该export 和name。

在您的 Home.vue 组件中，它可能如下所示：

<template>
  <div class="hello">
    <button class=”Search__button” @click="callRestService()">CALL Spring Boot REST backend service</button>
    <h3>{{ response }}</h3>
  </div>
</template>

<script>
  import axios from 'axios'

  export default {
    name: "HelloComponent",
    data() {
      return {
        response: [],
        errors: []
      }
    },
    methods: {
      callRestService() {
        axios.get(`api/hello`)
          .then(response => {
            // JSON responses are automatically parsed.
            this.response = response.data
          })
          .catch(e => {
            this.errors.push(e)
          })
      }
    }
  }
</script>

【讨论】：