Question

我正在调用一个 get 到我的后端 (Spring) 并且当我这样做时我没有收到任何响应数据。当我直接打电话给邮递员时，控制台会向我显示用户。我不确定我在这里做错了什么？我错过了什么吗？

这是我第一次用打字稿写作，所以我对正确的方法有点困惑。

此外，当我加载页面时，我可以在我的智能控制台中看到它们（我是故意将它们打印出来的），所以我知道它正在到达并正确调用数据库

Intellij 控制台打印输出 -

[com.***.models.User@4f2a84a4, com.***.models.User@5e4892e8, com.***.models.User@15661f74, com.***.models.User@4c0652a3, com.***.models.User@5024c966, com.***.models.User@4ae1ce58, com.***.models.User@6fd9e5cf, com.***.models.User@113421dd, com.***.models.User@672da564]

控制器中的GetMapping -

@GetMapping(value = "/getUsers")
public ResponseEntity<?> getUsers() {
    userService.findAll();
    return new ResponseEntity<Authenticator.Success>(HttpStatus.OK);
}

打字稿服务-

import axios from 'axios'

export interface User {
    id: number
    email: string
    firstName: string
    lastName: string
    phoneNumber: string
    state: string
    companyName: string
    departmentName: string
    emailIsVerified: boolean
    dateTimeCreated: number
    psapAffiliationHasBeenVerified: boolean
    psapId: number
    isAdmin: boolean
    options?: {
        locationFormat?: 'LatLong' | 'DMS' | 'DDM'
    }
}

export const findUsers = () => axios.get<User[]>(`http://localhost:8080/api/v1/getUsers`)

Vue/Ts 代码 -

<script lang="ts">
import Vue from 'vue'
import { findUsers, User } from '@/services/users'
import UserEditModal from './UserEditModal.vue'

export default Vue.extend({
    data(): { showUserEditModal: boolean; selectedUser: User | null; search: string; headers: any[]; users: User[] } {
        return {
            showUserEditModal: false,
            selectedUser: null,
            search: '',
            headers: [
                { text: 'Actions', value: 'action', sortable: false },
                { text: 'email', value: 'email' },
                { text: 'firstName', value: 'firstName' },
                { text: 'lastName', value: 'lastName' },
                { text: 'phoneNumber', value: 'phoneNumber' },
                { text: 'companyName', value: 'companyName' },
                { text: 'departmentName', value: 'departmentName' },
                { text: 'emailIsVerified', value: 'emailIsVerified' },
                { text: 'dateTimeCreated', value: 'dateTimeCreated' },
            ],
            users: []
        }
    },
    methods: {
        async loadData() {
            const response = await findUsers()
            this.users = response.data
        }
    },
    mounted() {
        this.loadData()
    },
})
</script>

HTML -

    <v-data-table
        dense
        calculate-widths
        :search="search"
        :headers="headers"
        :items="users"
        class="elevation-0"
    >
        <template v-slot:item.action="{ item }">
            <v-icon small @click="editUser(item)">$vuetify.icons.edit</v-icon>
        </template>
    </v-data-table>

Answer 1

@GetMapping(value = "/getUsers")
public ResponseEntity<?> getUsers() {
    userService.findAll();
    return new ResponseEntity<Authenticator.Success>(HttpStatus.OK);
}

您需要将 findAll 结果返回给客户端。

return ResponseEntity.ok(userService.findAll());

如果实体中存在循环结构，则可能会导致错误。最好的方法可以将实体转换为 dto 或资源对象

Answer 2

使用 Chrome devtools（网络选项卡）检查响应，或执行 console.log(JSON.stringify(response)) 以检查响应中是否确实存在属性“数据”。

Axios Get 请求没有返回数据

2 个答案: