Question

从新手到美妙的jhipster生态系统的一个非常基本的问题。

如何在我的应用中添加一个额外的页面，根据对数据库的查询显示两个图？

我已经创建了演示jhipster应用程序，该应用程序跟踪postgres数据库中的作者和书籍，如本教程所述。

我现在想在我的示例jhipster应用程序中添加一个摘要页面，该应用程序根据从sql查询中检索到的数据显示两个图表。

1）每位作者出版的总书籍的情节

 select author_id, count(*)
 from book
 group by author_id

2）线图显示每位作者每年的出版物数量

select author_id,extract(year from publication_date) as year,count(*)
from book
group by author_id,year

我通常会使用R/Shiny和plotly来创建此类型的信息中心，但非常感谢有关如何使用jhipster框架实现相同功能的任何指导

由于

伊恩

Answer 1

我在这里看到2个任务。通常，您首先准备2个API端点以将数据传递到您的前端（请记住，JHI提供服务器和客户端），然后使用plotly（js）来完成您的绘图

准备API

你应该将你的SQL查询翻译成JPA，如下所示：

public interface BookRepository extends JpaRepository<Book,Long> {
  @Query("select b.authorId, count(b.id) from Book b  group by b.authorId ")
  List<Book> findAllGroupByAuthor();

  @Query("select b.authorId, YEAR(b.publicationDate) as year,count(*) from Book b group by b.authorId, b.year")
  List<Book> findAllGroupByAuthorAndYear();
}

然后你将它添加到一些RestControllers。这是一个例子

@RestController
@RequestMapping("/api/books/query/")
public class CustomBookQueryResource {

  private BookRepository bookRepository;

  public CustomBookQueryResource(BookRepository bookRepository) {
    this.bookRepository = bookRepository;
  }

  @GetMapping("/group_by_author")
  public ResponseEntity<List<Book>> groupByAuthor() {
    return ResponseEntity.ok(bookRepository.findAllGroupByAuthor());
  }

  @GetMapping("/group_by_author_and_year")
  public ResponseEntity<List<Book>> groupByAuthorAndYear() {
    return ResponseEntity.ok(bookRepository.findAllGroupByAuthorAndYear());
  }
}

所以在这一点上，你应该已经有了一些api端点，为你的数据提供服务。现在，您应该以角度

添加自定义查询簿服务

angular
    .module('<yourApp>')
    .factory('CustomBookQuery', CustomBookQuery);

CustomBookQuery.$inject = ['$http'];
function CustomBookQuery ($http) {
    var resourceUrl =  'api/books/query/';

    return {
      findAllGroupByAuthor: function () {
        return $http.get(resourceUrl + 'group_by_author');
      },
      findAllGroupByAuthorAndYear: function () {
        return $http.get(resourceUrl + 'group_by_author_and_year');
      }
    };
}

现在你可以注入你的服务并将其承诺解决到你的情节，已经有了JS部分和Angular implementation

（我在头脑中编码代码，因此未经过测试）

Answer 2

对于您的查询只涉及一个实体的简单情况，它可能就像向关联的Repository接口添加一个或多个方法一样简单，并让Spring Data处理查询生成。

查看https://docs.spring.io/spring-data/jpa/docs/current/reference/html/#repositories.query-methods.query-creation

如果您更愿意提供查询

https://docs.spring.io/spring-data/jpa/docs/current/reference/html/#jpa.query-methods.at-query

然后，您可以添加带有JS的HTML页面，以呈现查询结果的图表。

对于需要通过实体进行连接的情况，有一些可能的方法......

你可以在PostGresQL中创建一个视图，它可以有效地创建一个这个查询的表，然后为它创建一个实体（然后在你的fav JS库中渲染它们）。这是我的首选。您需要更新liquidbase文件以创建视图。您将创建一个实体，您将创建一个Spring Data存储库接口（这将导致REST服务的自动生成等），然后使用HTML和JS进行渲染。

或者，JPA实体可以是使用JPQL的查询。这将为您提供一组对象，您可以使用Angular.js或任何您喜欢的JS库来呈现这些对象。

http://www.oracle.com/technetwork/articles/vasiliev-jpql-087123.html

您还可以使用JPA将本机SQL映射到PoJo（特别参见JPA 2.1说明），然后使用您的JS创建REST服务并进行渲染。

JPA : How to convert a native query result set to POJO class collection http://www.thoughts-on-java.org/jpa-native-queries/

添加绘图到示例jhipster应用

2 个答案:

准备API