将绘图添加到示例 jhipster 应用程序答案

【问题标题】：Add plot to sample jhipster app将绘图添加到示例 jhipster 应用程序
【发布时间】：2017-01-08 17:22:58
【问题描述】：

从新手到奇妙的 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 框架实现相同功能的指导

谢谢

伊恩

【问题讨论】：

标签： jhipster

【解决方案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 中添加您的自定义查询书服务

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

（我在脑海中编写了上面的代码，所以没有经过测试）

【讨论】：

谢谢 - 这应该可以帮助我开始，但如果您愿意，如果您可以使用工作示例更新您的代码以作为其余端点，那就太好了。我一直无法弄清楚。
它到底有什么问题？

【解决方案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 中创建一个视图，该视图将有效地创建一个作为此查询的表，然后为其创建一个实体（然后将它们呈现在您最喜欢的 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 注释），然后创建 REST 服务并使用您的 JS 进行渲染。

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

【讨论】：