使用Spring Boot和Vue进行有益的开发

“我喜欢编写身份验证和授权代码。” 〜从来没有Java开发人员。 厌倦了一次又一次地建立相同的登录屏幕？尝试使用Okta API进行托管身份验证，授权和多因素身份验证。

Vue是一个Web框架，由于它的精简和刻薄，最近引起了很多关注。它的基准框架成本约为4万，被称为简约Web框架。随着最近对Web性能的关注以及移动优先，移动快速的关注，Vue变得越来越流行也就不足为奇了。如果您花时间学习AngularJS，很可能会在Vue.js中找到老朋友。

Spring Boot是Java生态系统中我最喜欢的框架之一。是的，我有偏见。自2004年以来，我就一直是Spring Framework的爱好者。能够使用Spring MVC编写Java Webapp真是太好了，但是大多数人都使用XML进行配置。尽管Spring支持JavaConfig，但直到Spring Boot（在2014年）才真正起步。如今，您再也看不到Spring教程，该教程向您展示了如何使用XML进行配置。做得好，Spring Boot团队！

我之所以写本教程，是因为我是Vue的忠实拥护者。如果您了解我，就会知道我是一个Web框架爱好者。也就是说，我是Web框架的忠实拥护者。就像NBA球迷有一些喜欢的球员一样，我也有一些喜欢的框架。 Vue最近成为其中之一，我想向您展示原因。

在本文中，我将向您展示如何使用Spring Data JPA和Hibernate构建Spring Boot API。然后，我将向您展示如何创建Vue PWA并对其进行自定义以显示API中的数据。然后，您将添加一些动画gif，一些认证，并祝您玩得开心！

使用Spring Boot构建REST API

要开始使用Spring Boot，请导航至start.spring.io并选择版本2.1.1+。在“搜索依赖项”字段中，选择以下内容：

H2 ：内存数据库
Lombok（Lombok）：因为没有人喜欢生成（甚至更糟糕的是编写！）getter和setter。
JPA ：Java的标准ORM
其余存储库：允许您将JPA存储库公开为REST端点
Web ：具有Jackson（用于JSON），Hibernate Validator和嵌入式Tomcat的Spring MVC

如果您更喜欢命令行，请安装HTTPie并运行以下命令以下载demo.zip 。

http https://start.spring.io/starter.zip dependencies==h2,lombok,data-jpa,data-rest,web \packageName==com.okta.developer.demo -d

创建一个名为spring-boot-vue-example 。将demo.zip的内容demo.zip到其server目录中。

mkdir spring-boot-vue-example
unzip demo.zip -d spring-boot-vue-example/server

在您喜欢的IDE中打开“服务器”项目，然后运行DemoApplication或使用./mvnw spring-boot:run从命令行启动它。

创建一个com.okta.developer.demo.beer程序包和其中的Beer.java文件。此类将是保存您的数据的实体。

package com.okta.developer.demo.beer;import lombok.Data;
import lombok.NoArgsConstructor;
import lombok.NonNull;import javax.persistence.Entity;
import javax.persistence.GeneratedValue;
import javax.persistence.Id;@Data
@NoArgsConstructor
@Entity
class Beer {public Beer(String name) {this.name = name;}@Id@GeneratedValueprivate Long id;@NonNullprivate String name;
}

添加一个利用Spring Data在此实体上执行CRUD的BeerRepository类。

package com.okta.developer.demo.beer;import org.springframework.data.jpa.repository.JpaRepository;
import org.springframework.data.rest.core.annotation.RepositoryRestResource;@RepositoryRestResource
interface BeerRepository extends JpaRepository<Beer, Long> {
}

添加@RepositoryRestResource注释BeerRepository暴露了其所有的CRUD操作的REST端点。

添加使用此存储库的BeerCommandLineRunner并创建一组默认数据。

package com.okta.developer.demo.beer;import org.springframework.boot.CommandLineRunner;
import org.springframework.stereotype.Component;import java.util.stream.Stream;@Component
public class BeerCommandLineRunner implements CommandLineRunner {private final BeerRepository repository;public BeerCommandLineRunner(BeerRepository repository) {this.repository = repository;}@Overridepublic void run(String... strings) throws Exception {// Top beers from https://www.beeradvocate.com/lists/us, November 2018Stream.of("Kentucky Brunch Brand Stout", "Marshmallow Handjee", "Barrel-Aged Abraxas","Hunahpu's Imperial Stout", "King Julius", "Heady Topper","Budweiser", "Coors Light", "PBR").forEach(name ->repository.save(new Beer(name)));repository.findAll().forEach(System.out::println);}
}

重新启动您的应用程序，您应该会在终端上看到印刷的啤酒列表。

添加一个BeerController类来创建一个端点，该端点过滤出的啤酒数量少于大啤酒。

package com.okta.developer.demo.beer;import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RestController;import java.util.Collection;
import java.util.stream.Collectors;@RestController
public class BeerController {private BeerRepository repository;public BeerController(BeerRepository repository) {this.repository = repository;}@GetMapping("/good-beers")public CollectiongoodBeers() {return repository.findAll().stream().filter(this::isGreat).collect(Collectors.toList());}private boolean isGreat(Beer beer) {return !beer.getName().equals("Budweiser") &&!beer.getName().equals("Coors Light") &&!beer.getName().equals("PBR");}
}

重新构建您的应用程序并导航到http://localhost:8080/good-beers 。您应该在浏览器中看到优质啤酒的列表。

使用HTTPie时，您也应该在终端窗口中看到相同的结果。

http :8080/good-beers

使用Vue CLI创建项目

这些天来，创建API似乎很容易，这在很大程度上要归功于Spring Boot。在本节中，我希望向您展示使用Vue创建UI也非常简单。我还将向您展示如何使用TypeScript开发Vue应用。如果您按照以下步骤操作，则将创建一个新的Vue应用，从API获取啤酒名称和图像，并创建组件以显示其数据。

要创建Vue项目，请确保已安装Node.js和Vue CLI 3 。创建本教程时，我使用了Node 11.3.0。

npm install -g @vue/cli@3.2.1

在终端窗口中，使用cd进入spring-boot-vue-example目录的根目录并运行以下命令。该命令将创建一个新的Vue应用程序并提示您选择。

vue create client

当提示您选择礼物时，选择手动选择功能 。

检查TypeScript ， PWA和Router功能。选择其余问题的默认值（按Enter ）。

在终端窗口中，cd进入client目录，然后在您喜欢的编辑器中打开package.json 。添加与serve脚本相同的start脚本。

"scripts": {"start": "vue-cli-service serve","serve": "vue-cli-service serve","build": "vue-cli-service build","lint": "vue-cli-service lint"
},

现在，您可以使用npm start Vue应用npm start 。您的Spring Boot应用程序仍应在端口8080上运行，这将导致您的Vue应用程序使用端口8081。我希望您在本教程中始终在8081上运行您的Vue应用程序。为确保它始终在此端口上运行，请创建一个client/vue.config.js文件，并向其中添加以下JavaScript。

module.exports = {devServer: {port: 8081}
};

在浏览器中打开http://localhost:8081 ，您应该会看到类似下面的页面。

在Vue中创建良好的Beers UI

到目前为止，您已经创建了一个好的啤酒API和一个Vue客户端，但是尚未创建UI来显示API中的啤酒列表。为此，请打开client/src/views/Home.vue并添加一个created()方法。

import axios from 'axios';
...private async created() {const response = await axios.get('/good-beers');this.beers = await response.data;
}

Vue的组件生命周期将调用created()方法。

John Papa的带有TypeScript的Vue.js对弄清楚如何将TypeScript与Vue一起使用提供了很大的帮助。 Vue的TypeScript文档也很有帮助。

您需要安装axios才能编译此代码。

npm i axios

您会看到这会将响应数据放入本地beers变量中。要正确定义此变量，请创建一个Beer接口并将Home类的beers变量初始化为一个空数组。

export interface Beer {id: number;name: string;giphyUrl: string;
}@Component({components: {HelloWorld,},
})
export default class Home extends Vue {public beers: Beer[] = [];private async created() {const response = await axios.get('/good-beers');this.beers = await response.data;}
}

敏锐的眼睛会注意到，这会在与Vue应用程序相同的端口上向/good-beers发出请求（因为它是相对URL）。为此，您需要修改client/vue.config.js以使其具有将此URL发送到Spring Boot应用程序的代理。

module.exports = {devServer: {port: 8081,proxy: {"/good-beers": {target: "http://localhost:8080",secure: false}}}
};

修改client/src/views/Home.vue的模板，以显示API中的优质啤酒列表。

<template><div class="home"><img alt="Vue logo" src="../assets/logo.png"><h1>Beer List</h1><div v-for="beer in beers">{{ beer.name }}</div></div>
</template>

使用npm start重新启动Vue应用，并在http://localhost:8081上刷新您的应用。您应该从Spring Boot API中看到啤酒列表。

创建一个BeerList组件

为了使此应用程序易于维护，请将啤酒清单逻辑和渲染移至其自己的BeerList组件。创建client/src/components/BeerList.vue并用Home.vue的代码填充它。删除Vue徽标，自定义模板的主类名称，然后删除HelloWorld组件。完成后，它应该如下所示。

<template><div class="beer-list"><h1>Beer List</h1><div v-for="beer in beers">{{ beer.name }}</div></div>
</template><script lang="ts">
import { Component, Vue } from 'vue-property-decorator';
import axios from 'axios';export interface Beer {id: number;name: string;giphyUrl: string;
}@Component
export default class BeerList extends Vue {public beers: Beer[] = [];private async created() {const response = await axios.get('/good-beers');this.beers = await response.data;}
}
</script>

然后更改client/src/views/Home.vue ，使其仅包含徽标和对<BeerList/>的引用。

<template><div class="home"><img alt="Vue logo" src="../assets/logo.png"><BeerList/></div>
</template><script lang="ts">
import { Component, Vue } from 'vue-property-decorator';
import BeerList from '@/components/BeerList.vue';@Component({components: {BeerList,},
})
export default class Home extends Vue {}
</script>

创建一个GiphyImage组件

为了使外观看起来更好一点，添加GIPHY组件以根据啤酒的名称获取图像。创建client/src/components/GiphyImage.vue并将以下代码放入其中。

<template><img :src=giphyUrl v-bind:alt=name height="200"/>
</template><script lang="ts">
import { Component, Prop, Vue } from 'vue-property-decorator';
import axios from 'axios';@Component
export default class GiphyImage extends Vue {@Prop() private name!: string;private giphyUrl: string = '';private async created() {const giphyApi = '//api.giphy.com/v1/gifs/search?api_key=dc6zaTOxFJmzC&limit=1&q=';const response = await axios.get(giphyApi + this.name);const data = await response.data.data;if (data.length) {this.giphyUrl = data[0].images.original.url;} else {this.giphyUrl = '//media.giphy.com/media/YaOxRsmrv9IeA/giphy.gif';}}
}
</script><!-- The "scoped" attribute limits CSS to this component only -->
<style scoped>
img {margin: 10px 0 0;
}
</style>

更改BeerList.vue以在其模板中使用<GiphyImage/>组件：

<div v-for="beer in beers">{{ beer.name }}<br/><GiphyImage :name="beer.name"/>
</div>

并将其添加到<script>块中的components列表中：

import GiphyImage from '@/components/GiphyImage.vue';@Component({components: {GiphyImage},
})
export default class BeerList extends Vue { ... }

在同一文件中，在底部添加<style>部分，然后使用CSS Grid布局将啤酒按行组织。

<style scoped>
.grid {display: grid;grid-template-columns: repeat(3, 1fr);grid-gap: 10px;grid-auto-rows: minmax(100px, auto);
}
</style>

您需要将div环绕在啤酒清单模板上，以使其生效。

<div class="grid"><div v-for="beer in beers">{{ beer.name }}<br/><GiphyImage :name="beer.name"/></div>
</div>

进行这些更改后，您的用户界面应类似于以下啤酒名称和匹配图像列表。

您刚刚创建了一个与Spring Boot API对话的Vue应用。恭喜你！