JHipster with vue - 如何在前端显示来自后端的数据

Question

我是 JHipster 的新手，并创建了我的第一个端点，它为我提供了连接用户的实体“伙伴”：

@GetMapping("/buddies/view")
    public ResponseEntity<Buddy> getConnectedBuddy() { [...] }

这工作正常，我可以在日志中看到访问此页面的连接用户触发 controller，获取成功并给我用户：

Exit: com.mycompany.myapp.web.rest.AccountResource.getAccount() with result = UserDTO{login='haha', firstName='null', lastName='null', email='haha@gmail.com', imageUrl='null', activated=true, langKey='en', createdBy=anonymousUser, createdDate=2020-12-10T14:27:22.264Z, lastModifiedBy='anonymousUser', lastModifiedDate=2020-12-10T14:27:22.264Z, authorities=[ROLE_USER]}

现在，我想在类似于http://localhost:9000/< ENTITY-NAME >/{id}/view页面的页面中显示此用户的数据。 我成功地创建了页面本身，因为我复制了 buddy-details.vue 和 buddy-details.component.ts 并进行了必要的更改，我还将新页面添加到“entities.ts”文件中。 这一切都在工作。

但是现在我得到了带有实体表单的视图页面，尽管其中没有任何数据。 您能告诉我：如何使用 Typescript 获取后端数据？

我想我必须使用 buddy.service.ts class 但我不知道如何。

编辑（附加信息）：

在我的 buddy.service.ts 我创建了 get() 方法：

  public get(): Promise<IBuddy> {
    return new Promise<IBuddy>((resolve, reject) => {
      axios
        .get(`${baseApiUrl}/view`)
        .then(res => {
          resolve(res.data);
        })
        .catch(err => {
          reject(err);
        });
    });
  }

然后在自己创建的buddy-active.component.ts中调用：

import { Component, Vue, Inject } from 'vue-property-decorator';

import { IBuddy } from '@/shared/model/buddy.model';
import BuddyService from './buddy.service';

@Component
export default class BuddyActive extends Vue {
  @Inject('buddyService') private buddyService: () => BuddyService;
  public buddy: IBuddy = {};

  beforeRouteEnter(to, from, next) {
    next(vm => {
        vm.getBuddy();
    });
  }

  public getBuddy() {
    this.buddyService()
      .get()
      .then(res => {
        this.buddy = res;
      });
  }

  public previousState() {
    this.$router.go(-1);
  }
}

谢谢您的帮助。

Answer 1

最后的问题很简单。 我做了所有需要的事情，但是我在 buddy-actice.vue 中导入了错误的脚本。 如果你有同样的问题，你可以简单地阅读我的原始评论。 不过，您必须自己完成 java 端点。

感谢 Gaël Marziou 为我指明了正确的方向。