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

从一个新手到奇妙的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

我通常会使用和创建这种类型的仪表板，但如果您能提供关于如何使用jhipster框架实现相同功能的指导，我将不胜感激

谢谢

---

Iain

对于查询只涉及一个实体的简单情况，可以简单地向关联的存储库接口添加一个或多个方法，并让Spring数据处理查询生成

看看

如果您愿意提供查询

然后，您可以添加一个带有JS的HTML页面来呈现查询结果的绘图

对于需要连接实体的情况，有几种可能的方法

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

或者，可以使用JPQL查询JPA实体。这将为您提供一个对象集合，您可以使用Angular.js或fav js库中的任何内容进行渲染

您还可以使用JPA将本机SQL映射到PoJo（请特别参阅JPA2.1注释），然后创建REST服务并使用JS进行渲染

---

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

准备原料药 您应该将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();
}

公共接口BookRepository扩展了JpaRepository{
@查询（“按b.authorId从Book b group中选择b.authorId，计数（b.id））
列出findAllGroupByAuthor（）；
@查询（“选择b.authorId，YEAR（b.publicationDate）作为年份，按b.authorId，b.YEAR从Book b组中计数（*））
列出FindAllGroupByAuthor和Year（）；
}

然后将其添加到一些RESTController中。这里有一个例子

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

@RestController
@请求映射（“/api/books/query/”）
公共类CustomBookQueryResource{
私人书库；
公共CustomBookQueryResource（BookRepository BookRepository）{
this.bookRepository=bookRepository；
}
@GetMapping（“/group\u by\u author”）
公共责任组作者（）{
返回ResponseEntity.ok（bookRepository.findAllGroupByAuthor（））；
}
@GetMapping（“/按作者和年份分组”）
公共响应主题组作者和年份（）{
返回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');
      }
    };
}

angular
.模块（“”）
.factory（'CustomBookQuery'，CustomBookQuery）；
CustomBookQuery.$inject=['$http']；
函数CustomBookQuery（$http）{
var resourceUrl='api/books/query/'；
返回{
findAllGroupByAuthor:函数（）{
返回$http.get（resourceUrl+“groupbyauthor”）；
},
findAllGroupByAuthorAndYear:函数（）{
返回$http.get（resourceUrl+“按作者和年份分组”）；
}
};
}

现在，您只需注入您的服务，并将其承诺解析传递给您的plotly，它已经包含和JS部分以及

---

（我从脑海中编写了上述代码，因此它没有经过测试）

谢谢-这应该可以帮助我开始，但是如果您愿意，如果您可以使用剩余端点的工作示例更新您的代码，那就太好了。我还没弄明白，到底出了什么问题？