TL:DR:本文是关于使用Vue.js版对于前端和Spring Boot GraphqlAPI，后端为Kotlin。在本部分中，您将使用存储在H2数据库引擎中的模式、查询、突变和实体来创建graphqlapi。了解如何使用Vuex管理应用程序的状态，改进路由处理，最后，但并非最不重要的是，使用Bootstrap、Font Awesome和Google字体改进应用程序的UI。要快速浏览本系列文章末尾的应用程序，云主机服务器，请克隆此GitHub存储库。"学习如何使用Vue.js版对于前端和Spring Boot，使用Kotlin，后端使用GraphQL API。"在推特上留言快速回顾构建现代应用程序系列第一部分在本系列的第一部分中，您引导了前端和后端，并使用Auth0保护它们。您还了解了如何使用来自不安全且安全的后端API的数据。在这一部分中，您将重点介绍如何使用Vuex改进状态管理，通过引导、Google字体和字体Awesome来路由和改进前端的UI。在后端，您将使用springboot和Kotlin构建一个graphqlapi。接下来，您可以在GitHub上派生和克隆本系列第一部分中完成的应用程序，或者只使用您开发的应用程序。如何构建graphqlapi在开始构建API之前，您需要对GraphQL有一个基本的了解。根据官方网站的说法，"GraphQL是一种api查询语言，也是一个用现有数据实现查询的运行时"。这是什么意思？好吧，这意味着GraphQL将通过在模式中创建类型、关系、查询（获取数据的操作）和突变（修改数据的操作）来描述API提供的数据，并提供运行查询和突变所需的环境。在开始为GraphQL创建所有必要的组件之前，首先需要将GraphQL支持添加到springboot应用程序中。为此，请将以下依赖项添加到生成.gradle/MovieReviewBoard/backend中的文件///MovieReviewBoard/后端/生成.gradle//保持其他一切不变依赖关系{//保持其他一切不变实施'com.graphql网站-java:graphql弹簧引导启动器：5.0.2'实施'com.graphql网站-java:graphiql springbootstarter：5.0.2'实施'com.graphql网站-java:graphql java工具：5.2.4英尺}//保持其他一切不变graphql spring boot starter依赖项将graphql规范的实现添加到您的项目中，以及一个支持graphql查询的GET和POST请求的servlet：8888/graphql，graphiql spring boot starter在浏览器客户端中添加了一个graphql，您可以使用它向API发送查询，graphqljava工具解析graphql模式并将其映射到java实体。创建GraphQL模式和支持实体有了这些依赖关系，就需要创建GraphQL模式。模式定义API的数据类型、可以对这些数据类型执行的操作以及这些类型之间的关系。首先在/MovieReviewBoard/backend/src/main/resources目录中创建一个graphql目录。接下来，创建一个电影.qls文件并将以下代码段添加到此目录中：#MovieReviewBoard/backend/src/main/resources类型电影{id:身份证！标题：字符串！导演：导演！评级：长期发布日期：字符串！}类型查询{芬达尔莫维斯：【电影】！countMovies:长！}类型突变{更新视频（movieId:Long，投票：Long！）：长！新电影（标题：字符串！，导演ID:ID！，发布日期：字符串！，评分：长）：电影！}此架构为电影实体创建电影类型，定义电影属性的所有类型。它还创建findAllMovies和countMovies，这是对数据库中电影数据的查询操作。该模式定义了两个突变updateMovieRating和newMovie，这两个操作分别用于更新电影的分级和创建新的电影。在上面的代码片段中，电影类型的director属性将在电影和导演类型之间创建一个关系。属性或参数上的感叹号表示它是必需的，方括号表示值列表的期望值。接下来，继续创建一个昆士兰州董事文件位于/MovieReviewBoard/backend/src/main/resources中，并向其中添加以下架构代码：#MovieReviewBoard/backend/src/main/resources类型控制器{id:身份证！名字：字符串！姓：字符串！}输入方向输入{名字：字符串！姓：字符串！}扩展类型查询{findMoviesByDirector（directorId:ID）：[电影]！countMoviesByDirector（导演ID:ID）：长！findAllDirectors:[导演]！局长：长！}扩展型突变{newDirector（directorId:ID，名字：String！，姓氏：String！）：导演更新目录（directorId:Long！，directorInput：directorInput！）：导演}此架构代码段通过指定其属性及其类型来创建控制器类型。此控制器类型表示将在H2数据库中创建的控制器实体。它还创建了一个输入类型DirectorInput，用于创建新的控制器。通过扩展查询和变异，此模式将添加到您在电影模式中创建的运算符列表中。有了模式之后，graphqljava工具库现在正等待您创建映射到这些模式的实体。要创建电影实体，请在中创建电影包com.example.MovieReviewBoard包，云服务器哪个好，然后创建一个电影.kt文件并将以下代码段添加到其中：//MovieReviewBoard/backend/src/main/kotlin/com/example/MovieReviewBoard/movie/电影.kt包裹com.example.MovieReviewBoard.电影进口com.example.MovieReviewBoard.导演。导演进口javax.persistence.Entity进口javax.persistence.GeneratedValue进口javax.persistence.Id进口javax.persistence.ManyToOne@实体数据类电影（var title:String，@ManyToOne var董事：董事，var rating:Long，var releaseDate:String，@Id@GeneratedValue var Id:Long？=空）在上面的代码中，类声明顶部的@Entity注释发出信号JPA（javapersistenceapi）在数据库中自动创建一个电影表。Movie实体的所有属性都在类声明中定义。类声明还用@ManyToOne注释定义了Movie实体和Director实体之间的多对一关系。@Id和@GeneratedValue注释向JPA发出信号，Id属性是主键，应该是自动生成的。如果你不能查询一个实体，它有什么好处？要将此功能添加到电影实体，请创建一个Spring数据存储库，该存储库自动实现查询实体所需的大多数方法。为此，创建一个电影历史.kt在您的com.example.MovieReviewBoard.movie包，并向其中添加以下代码段：//MovieReviewBoard/backend/src/main/kotlin/com/example/MovieReviewBoard/movie/电影历史.kt包裹com.example.MovieReviewBoard.电影进口com.example.MovieReviewBoard.导演。导演进口org.springframework.data.存储库.CrudRepository界面动画场景：CrudRepository{有趣的导演（导演：导演）：Iterable有趣的countByDirector（director:director）：长}springboot将为您生成findAll和findOne等查询方法。但在您的例子中，大数据啥意思，这还不够，好评返现模板，因为遵循GraphQL模式，您需要findByDirector和countByDirector这样的方法。你猜怎么着？通过在存储库中声明这些方法的签名，springboot将为您生成实现。它这样做是因为这些方法的名称是以一种它理解如何生成它们的实现的方式组织的。你可以在这里读到更多现在您已经有了一个电影实体及其存储库，继续通过在中创建Director包来创建Director实体com.example.MovieReviewBoard包裹。然后创建一个董事kt文件并添加以下代码：//MovieReviewBoard/backend/src/main/kotlin/com/example/MovieReviewBoard/director/董事kt包裹com.example.MovieReviewBoard.董事进口javax.persistence.Entity进口javax.persistence.GeneratedValue进口持久性.javax@实体数据类控制器（var firstName:String，var lastName:String，@Id@GeneratedValue变量Id:Long？=空）到目前为止，您应该已经熟悉这种代码了。在Director实体就位后，继续创建一个存储库来查询它。为此，创建一个董事记录.kt文件com.example.MovieReviewBoard.director包，并向其中添加以下代码段：//MovieReviewBoard/backend/src/main/kotlin/com/example/MovieReviewBoard/director/董事记录.kt包裹com.example.MovieReviewBoard.董事进口org.springframework.data.存储库.CrudRepository接口目录：CrudRepository{}在实体和存储库就位后，您需要向应用程序添加一些虚拟数据，将CORS支持移动到主类，大数据系统，并删除com.example.MovieReviewBoard包裹。之后，你的电影人视图板应用程序.kt文件com.example.MovieReviewBoard包装应如下所示。请注意添加了一个init函数，该函数用于将一些电影数据持久化到应用程序中。//MovieReviewBoard/backend/src/main/kotlin/com/example/MovieReviewBoard/MovieRe视图板应用程序.kt包裹com.example.MovieReviewBoard进口com.example.MovieReviewBoard.董事会董事进口com.example.MovieReviewBoard.电影.电影记录片进口com.example.MovieReviewBoard.分解器。突变进口org.springfracom/auth0/MovieReviewBoard/movie/movie.ktmework.boot.CommandLineRunner进口org.springframework.boot.