Spring boot 试图按照教程构建spring boot vuejs项目，但出现了一些错误

我正试图按照本教程使用vuejs项目构建spring boot，我已经使用

vue create frontend--no git

创建了空的vue项目，直到这一步：“使用Axios调用REST服务很简单。进入组件的脚本区域，例如Hello.vue并添加：”

我不知道应该在哪里加上这个。我像这样在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>

---

首先，必须在

methods

或handler中添加

callRestService（）

其次，您应该删除不必要的
data（）
和
callRestService（）
之后编码

第三，如果要在某个地方重用组件，您应该
导出
和
命名

在您的
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>


调用Spring引导REST后端服务
{{response}}
从“axios”导入axios
导出默认值{
名称：“HelloComponent”，
数据（）{
返回{
答复：[]，
错误：[]
}
},
方法：{
callRestService（）{
get（`api/hello`）
。然后（响应=>{
//JSON响应会自动解析。
this.response=response.data
})
.catch（e=>{
此.errors.push（e）
})
}
}
}
删除
数据（）中的分号；{
@Ricky你是说像这样的
数据（）{
？然后它显示了这个错误：语法错误：语法错误：SyntaxError:C:\gitercn1\spring boot vuejs copy\frontend\src\views\Hello1.vue:意外标记，预期“；”（11:7）检查从底部的答案开始，他们给出了详细的解释。
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 |     }

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