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

Question

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

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

这工作正常，我可以在日志中看到访问此页面的已连接用户触发了控制器，获取成功并为我提供了用户：

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

然后在自建好友中调用-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

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

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

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

JHipster with vue - How to show data from the Backend in the Frontend

java

typescript

jhipster

vue.js