全栈教程：Spring Boot 和 Vue.js 入门

在本教程中，你将创建一个 CoffeeBot 应用程序。该应用程序就像机器人咖啡机的控制器。遗憾的是，它实际上不会为你提供咖啡，但它将演示大量有用的编程技术。该应用程序将有一个 Vue.js 客户端和一个 Spring Boot 资源服务器。它将使用 JHipster 进行引导，节省大量时间并演示一些最佳实践，包括在客户端和服务器中自动配置端到端 JWT 身份验证。你还将使用 Split 来展示如何分别使用 Split 的 Javascript SDK 和 Java SDK 在运行时动态地使用功能标志来管理前端和后端的功能集。
该应用程序本身提供饮料。服务器维护着一份饮料清单，主要是咖啡，附有尺寸、价格和名称。为简单起见，饮料列表将使用内存中的开发数据库进行保存，但如果需要，可以轻松地重新配置以实现持久性。客户端从服务器请求饮料列表，如果用户通过身份验证，则传递任何身份验证数据。

客户端接收此列表并将饮料列表显示为按钮列表。第二次分割纯粹与客户有关。添加了一项新功能：能够在饮料中添加奶油。正如你可以想象的那样，考虑到人们对咖啡中奶油的喜爱程度，虚拟骚乱已经开始要求此功能。人们在叫嚷。但经理们希望在广泛发布之前确保奶油功能正常工作（CoffeeBot 有时会失灵）。因此，根据经过身份验证的用户，添加奶油的能力被切换。你可以在这个链接：

看到如何使用 Split 的 Javascript SDK 来控制客户端的奶油功能，以及如何使用 Split 的 Java SDK 来控制服务器的饮料列表

Java + Vue.js 教程依赖项

Java：我在本教程中使用了 Java 12。你可以访问AdaptOpenJdk 网站下载并安装 Java 。或者你可以使用SDKMAN甚至Homebrew等版本管理器。

Node：按照 Node网站上的说明安装 Node 。本教程是使用 Node 12.14.0 编写的。

JHipster：一旦安装了 Java 和 Node，就可以安装 JHipster。按照其网站上的说明进行操作（如果出现问题，有助于排除故障）或只需运行此命令：npm install -g [email protected]使用npm.

拆分：如果你还没有免费的拆分帐户，请注册一个。这就是实现功能标志的方式。

使用 JHipster 引导你的 Spring Boot 应用程序

要创建示例 CoffeBot 应用程序，你将使用 JHipster。正如其网站上所述，“JHipster 是一个快速生成、开发和部署现代 Web 应用程序和微服务架构的开发平台。” 它允许你快速启动具有各种前端和服务器配置的基于 Java 的项目。本教程将使用 Vue.js。

JHipster 的优点之一是它为你创建了一个包含 Java 服务器应用程序和 Vue.js 前端应用程序的组合项目。它还包括将创建数据模型实体和 Web 服务控制器的生成器。它做了很多事情并创建了很多文件。如果你对这些平台相对陌生，那么项目结构可能看起来有点令人难以承受，但他们在网站上记录了所有内容，做得很好。他们布置的项目遵循当前的最佳实践，因此它是一个很好的学习工具。

打开 shell 并为你的项目创建一个根目录，例如 CoffeeBotApp. 导航到该目录。你将在此处生成项目文件。

通常，当你运行 JHipster 时，它会询问你许多有关你正在引导的项目的问题。但是，为了简化事情，你将使用此.yo-rc.json文件来预先配置项目，从而绕过询问。
在根项目目录中，创建一个.yo-rc.json包含以下内容的文件。此配置的一些亮点是：

applicationType：整体应用程序：典型的标准应用程序（本质上不是微服务）

baseName : coffeebot– 应用程序的名称

packageName : com.split.coffeebot– 基础 Java 包

authenticationType : jwt– JSON Web 令牌身份验证

devDatabaseType : h2Memory– 开发数据库使用内存中的 H2 数据库，该数据库不会跨会话持久化

clientFramework : vue– 使用Vue.js作为前端客户端框架

SkipFakeData : true– JHipster 默认情况下会为数据模型生成一组随机的假数据，我们希望在本教程中跳过这些数据

有很多选择。请参阅文档以深入了解这一点。

{
  "generator-jhipster": {
    "promptValues": {
      "packageName": "com.split.coffeebot"
    },
    "jhipsterVersion": "6.9.0",
    "applicationType": "monolith",
    "baseName": "coffeebot",
    "packageName": "com.split.coffeebot",
    "packageFolder": "com/split/coffeebot",
    "serverPort": "8080",
    "authenticationType": "jwt",
    "cacheProvider": "ehcache",
    "enableHibernateCache": true,
    "websocket": false,
    "databaseType": "sql",
    "devDatabaseType": "h2Memory",
    "prodDatabaseType": "mysql",
    "searchEngine": false,
    "messageBroker": false,
    "serviceDiscoveryType": false,
    "buildTool": "gradle",
    "enableSwaggerCodegen": false,
    "jwtSecretKey": "ZDg4ZjkzMDJkNWQ4YWJlMjUxOTY3YjE1MDNjY2ZkMzJjYWQwYjJiOTkyMWQ3YTE5ZTgwNWY3Y2E1ZDg0OWViZjM0Nzg1NDE3MjNlMGY1MDBkNTg4YWU1MmZmNTU1ZGEzOTJiMTVlMWZjZDc5NDUyMTlmZmRmYTU0NDJjMDdiODA=",
    "embeddableLaunchScript": false,
    "useSass": true,
    "clientPackageManager": "npm",
    "clientFramework": "vue",
    "clientTheme": "none",
    "clientThemeVariant": "",
    "creationTimestamp": 1601147759112,
    "testFrameworks": [],
    "jhiPrefix": "jhi",
    "entitySuffix": "",
    "dtoSuffix": "DTO",
    "otherModules": [
      {
        "name": "generator-jhipster-vuejs",
        "version": "1.8.0"
      }
    ],
    "enableTranslation": false,
    "blueprints": [
      {
        "name": "generator-jhipster-vuejs",
        "version": "1.8.0"
      }
    ],
    "skipFakeData": true
  }
}

通过运行以下命令（在包含该文件的根项目目录中.yo-rc.json）创建入门应用程序。

jhipster

当 JHipster 创建项目时，你将看到大量控制台输出。它应该以以下行结束。

INFO! Congratulations, JHipster execution is complete!

代码语言： Swift （斯威夫特）
JHipster 已经创建了一个 Git 存储库并进行了初始提交。此时，你可以通过打开两个 shell（一个用于客户端，一个用于服务器）并运行以下命令来运行入门应用程序。

Spring Boot 服务器:

./gradlew

Vue.js 客户端：

npm start

生成 Spring Boot 数据模型

现在你想要使用 JHipster 生成数据模型或实体。它们定义了将存储在数据库中并由 REST 服务提供服务的数据结构。当你使用 JHipster 的生成器创建实体时，JHipster 和 Spring 会为你完成许多出色的幕后工作。它创建表示数据结构的 Java 类，并使用允许将数据保存到数据库的 JPA 注释进行注释。它还创建一个实现创建、读取、更新和删除 (CRUD) 功能的资源文件，该文件会自动受到所选身份验证方案（在我们的示例中为 JWT）的保护。

在前端，生成器创建必要的文件，允许你与实体的资源服务器进行交互，以及前端文件来创建、更新和检查持久数据实体（要访问它，你必须以管理员用户身份登录）。

在项目根目录中，创建一个新文件：entities.jdl. 该文件定义了一种具有四个属性的实体类型，以及该实体中使用的枚举类型。

enum DrinkSize {
    Small,
    Medium,
    Large,
    XLarge,
    XXLarge
}

entity Drink {
    name String required,
    size DrinkSize required,
    caffeineMilligrams Integer required,
    priceDollars Integer required,
}

通过运行生成实体文件：

jhipster import-jdl entities.jdl

当它询问你是否覆盖文件时，只需键入ato overwrite this and all others。

现在是运行入门应用程序并探索引导功能的好时机。请记住，你需要运行两个不同的进程。

Spring Boot Java 服务器`

./gradlew

Vue.js 客户端（你可能需要等待一分钟左右服务器才能完成运行）：

npm start

客户端应用程序应自动打开。如果没有，请打开 http://localhost:9000

使用默认凭据以管理员用户身份登录admin:admin。查看“管理”菜单下的所有功能。另请查看“实体”菜单。你可以在此处查看、添加和更新你创建的实体。在我们的例子中，这是Drink实体，它有四个属性：name、size、caffeine mgs和Price Dollars。
Vue.js 客户端使用 TypeScript 和类组件，并将模板和组件声明拆分为两个单独的文件。如果你习惯于更传统的.vue单文件结构，一开始这可能看起来有点奇怪，但大多数差异都是不言自明的。如果你需要帮助，请查看文档中的官方页面以获取更多信息。

将功能标志添加到你的 Spring Boot Java 服务器

你将使用 Split 在客户端和服务器上实现功能标志。你应该已经注册了一个免费帐户（如果没有，请立即注册）。目前，你要将 Java Split SDK 集成到 Spring Boot 应用程序中。我将引导你完成此过程，但如果你需要更多信息或遇到麻烦，请查看他们的 Java SDK 文档。

首先，将Split依赖添加到build.gradle文件中（在项目根目录中）。该build.gradle文件包含大量内容。只需在末尾附近添加以下行，就在开始的注释行上方//jhipster-needle-gradle-dependency。

dependencies {
    ....
    compile 'io.split.client:java-client:4.0.1'
    //jhipster-needle-gradle-dependency - JHipster will add additional dependencies here
}

你将需要你的 Split API 密钥。打开你的拆分仪表板。通过转到仪表板左上角的方形工作区图标（可能显示默认为DE）找到 API 密钥，单击它，然后单击Admin Settings。单击左侧面板中“工作区设置”下的“API 密钥”。
你将看到已创建四个 API 密钥，其中两个用于生产，两个用于暂存。服务器端 SDK 使用和客户端 Javascript 使用有不同的密钥。SDK和staging-default密钥是你稍后需要的。

将 API 密钥添加到配置文件的末尾application.yml。
src/main/resources/application.yml

#application:
split:
    api-key: 代码语言： 小黄瓜 （gherkin ）

我只是指出，在这里你将其添加到全局配置文件中，但在更实际的用例中，你可能会使用两个不同的 API 密钥，一个用于暂存和生产，分别将它们添加到 和application-dev.yml文件application-prod.yml中。

创建一个名为 的 Java 文件，SplitConfig.java该文件将在 Spring Boot 应用程序中配置 Split 客户端。它创建了一个可用于依赖注入的 Spring Bean，并且由于 Bean 的默认行为是创建一个单例实例，因此这与 Split 自己的指导一致，建议只创建一个客户端实例。

src/main/java/com/split/coffeebot/config/SplitConfig.java

@Configurationpublic class SplitConfig {
    @Value("#{ @environment['split.api-key'] }")
    private String splitApiKey;
    @Bean
    public SplitClient splitClient() throws Exception {
        SplitClientConfig config = SplitClientConfig.builder()
                .setBlockUntilReadyTimeout(1000)
                .enableDebug()
                .build();
        SplitFactory splitFactory = SplitFactoryBuilder.build(splitApiKey, config);
        SplitClient client = splitFactory.client();
        client.blockUntilReady();
        return client;
    }
}

你还需要向DrinkRepository. 它JPARepository为你提供了相当多的功能，无需任何自定义，但在这个应用程序中，你将需要一个自定义方法，该方法允许你从标准方法中排除一些饮料findAll()。该方法findByNameNotIn()是一个JPA查询方法，其语法和实现由Spring Boot提供。你所要做的就是定义方法以使其可供使用。有关更多信息，请参阅Spring Data JPA 查询方法的文档。

src/main/java/com/split/coffeebot/repository/DrinkRepository.java

@SuppressWarnings("unused")  @Repository  public interface DrinkRepository extends JpaRepository {  
    List findByNameNotIn(Collection names);  
}

现在创建一个CoffeeBotResource.java文件，其中包含 CoffeeBot 应用程序的业务逻辑和 REST 端点。

src/main/java/com/split/coffeebot/web/rest/CoffeeBotResource.java

package com.split.coffeebot.web.rest;
…
@RestController
@RequestMapping("/api/coffee-bot")public class CoffeeBotResource {
    private final Logger log = LoggerFactory.getLogger(CoffeeBotResource.class);
    SplitClient splitClient;
    DrinkRepository drinkRepository;
    public CoffeeBotResource(SplitClient splitClient, DrinkRepository drinkRepository) {
        this.splitClient = splitClient;
        this.drinkRepository = drinkRepository;
    }
    private Drink makeDrink(String name, DrinkSize size, Integer caffeineMg, Integer price) {
        Drink drink = new Drink();
        drink.setCaffeineMilligrams(caffeineMg);
        drink.setName(name);
        drink.setSize(size);
        drink.setPriceDollars(price);
        return drink;
    }
    @EventListener
    public void onApplicationEvent(ContextRefreshedEvent event) {
        drinkRepository.save(makeDrink("Water", DrinkSize.Small, 0, 1));
        drinkRepository.save(makeDrink("Soda", DrinkSize.Medium, 30, 3));
        drinkRepository.save(makeDrink("Coffee", DrinkSize.XLarge, 50, 5));
        drinkRepository.save(makeDrink("Coffee", DrinkSize.Small, 30, 3));
        drinkRepository.save(makeDrink("Coffee", DrinkSize.Medium, 40, 3));
        drinkRepository.save(makeDrink("Latte", DrinkSize.Large, 100, 8));
        drinkRepository.save(makeDrink("Latte", DrinkSize.Small, 80, 6));
        drinkRepository.save(makeDrink("Latte", DrinkSize.Medium, 60, 5));
    }
    @GetMapping("/list-drinks")
    public List listDrinks() {
        Optional userName = SecurityUtils.getCurrentUserLogin();
        String treatment = splitClient.getTreatment(userName.get(),"drink-types");
        if (treatment.equals("on")) {
            return drinkRepository.findAll();
        }
        else {
            return drinkRepository.findByNameNotIn(Arrays.asList("Latte", "Soda"));
        }
    }
}

和方法作为辅助方法，用于在应用程序启动时创建一些示例makeDrink()数据onApplicationEvent()（请记住，它使用的是内存数据库，不会在会话之间保留任何数据）。

该类使用 Spring 的依赖注入来使两个对象可用：DrinkRepository，这是自动创建的接口，定义应用程序如何操作实体（饮料）；，SplitClient它是负责与 Split 通信并获取给定密钥和治疗名称的治疗的客户端。

你很快就会创建这种治疗方法。现在，请注意该getTreatment()方法至少需要两个参数。一种是文本键，它是任意字符串值，通常是用户名、帐户 ID 或用于区分用户的另一个唯一键。另一个是分割名称，它指定使用哪种处理来进行分割。

专业提示：可选的第三个getTreatment参数（我们在这里不会使用）是一个属性 映射对象，包含名称-值对中的用户属性。即使是敏感的用户数据也可以在此映射中传递，因为这些数据都不会发送到斯普利特的云。相反，属性映射会在本地内存中与你在拆分 UI 中输入的定位规则进行比较。更多内容请参见 Split SDK 文档：使用属性映射进行自定义定位。

如果治疗是on，它会返回所有可用的饮料。如果处理不是on（off或control或任何其他值），则返回除Latte和之外的所有饮料Soda。这演示了一种基于拆分来分叉代码的简单方法。更复杂的分割和治疗用例是可能的。
在你搬家之前，最后一项改变。打开SecurityConfiguration文件并允许api/coffee-bot资源路径上的所有流量。这将允许匿名用户获得饮料清单。

你要添加这一行：

.antMatchers("/api/coffee-bot/**").permitAll()  代码语言： Bash  （bash ）

至configure(HttpSecurity http)方法。立场很重要。该行需要添加到该.antMatchers("/api/**").authenticated()行之前。

src/main/java/com/split/coffeebot/config/SecurityConfiguration.java

@Overridepublic void configure(HttpSecurity http) throws Exception {
    // @formatter:off
    http
    ...
    .and()
        .authorizeRequests()
        .antMatchers("/api/authenticate").permitAll()
        .antMatchers("/api/register").permitAll()
        .antMatchers("/api/activate").permitAll()
        .antMatchers("/api/account/reset-password/init").permitAll()
        .antMatchers("/api/account/reset-password/finish").permitAll()
        .antMatchers("/api/coffee-bot/**").permitAll()
        .antMatchers("/api/**").authenticated()
        .antMatchers("/management/health").permitAll()
        .antMatchers("/management/info").permitAll()
        .antMatchers("/management/prometheus").permitAll()
        .antMatchers("/management/**").hasAuthority(AuthoritiesConstants.ADMIN)
    ...
    // @formatter:on
}

创建特征标志处理

如果你对治疗和 Split 不熟悉，你可能需要阅读Split 网站上的入门信息。简而言之，分割定义了一个决策点，一个标志，可以在代码中使用它来修改呈现给一组用户的功能。键（以及可选的属性映射）是根据拆分中定义的规则确定标志状态的值。这个决定是在运行时调用该方法时做出的。SplitClientgetTreatment()

在我们非常简单的示例中，你将创建一个名为Drink-types的拆分。这个分割将是一个简单的开/关分割，就像一个布尔标志（除了开和关之外，还可以有多个值）。分割将默认为off，但on如果admin用户在场，则分割将变为 。这是一个非常幼稚的例子。举个例子，在生产中，你可以根据用户群的一部分来定义这种划分，以在细分中推出新功能；或者，你可以先将功能仅提供给公共 Beta 测试人员，然后再将其发布给整个用户群。
打开拆分仪表板。你应该位于默认工作区中。

单击左侧的“拆分” 。

单击蓝色的“创建拆分”按钮。

为分割命名：drink-types。你可以将其余部分留空。

单击创建。

从环境下拉列表中选择暂存-默认。

单击添加规则按钮。

请注意，在定义处理部分下，定义了两个值：on和off。对于我们的用例来说，这非常棒。

在“创建单个目标”下，单击“添加目标”按钮。添加名为 的用户admin。这意味着用户admin将受到治疗on。

单击面板右上角的保存更改。

单击下一个面板上的“确认”以确认更改。

更新 Vue.js 客户端应用程序

客户端代码使用axios向资源服务器发出请求。你还需要安装 Split 模块依赖项。从项目根目录添加依赖项。

npm install --save axios @splitsoftware/[email protected]

更新home.component.ts文件以创建 CoffeeBot 应用程序。你需要为下面代码中的位置添加Javascript – staging-default键。const SPLIT_AUTH_KEY
src/main/webapp/app/core/home/home.component.ts

import Component from 'vue-class-component';
import { Inject, Vue, Watch } from 'vue-property-decorator';
import LoginService from '@/account/login.service';
import { SplitFactory } from '@splitsoftware/splitio';
import { IClient } from '@splitsoftware/splitio/types/splitio';
import axios from 'axios';const SPLIT_AUTH_KEY = ;
@Component
export default class Home extends Vue {
  @Inject('loginService')
  private loginService: () => LoginService;
  private splitClient: IClient = null;
  // our list of drinks
  private drinks = [];
  // holds the drink that is the current order
  private currentOrder = null;
  // cream or no cream?
  private withCream = false;
  // the current Split.io treatment
  private treatment = null;
  public openLogin(): void {
    this.loginService().openLogin((this).$root);
  }
  public get authenticated(): boolean {
    return this.$store.getters.authenticated;
  }
  public get username(): string {
    return this.$store.getters.account ? this.$store.getters.account.login : '';
  }
  async getTreatment() {
    // create a configured SplitFactory
    const splitFactory = SplitFactory({
      core: {
        authorizationKey: SPLIT_AUTH_KEY,  // your Split.io auth key
        key: this.username,  // identifier for this treatment (username in this case)
        trafficType: 'user'
      },
      startup: {
        readyTimeout: 1.5 // 1.5 sec
      }
    });
    // create the split client (NOT READY TO USE YET)
    this.splitClient = splitFactory.client();
    // block untli the client is ready
    this.splitClient.on(this.splitClient.Event.SDK_READY, function() {
      // client is ready, get the treatment
      this.treatment = this.splitClient.getTreatment('drink-types');
    }.bind(this));
  }
  // triggered when username changes to update list
  // of drinks and Split.io treatment
  @Watch('username')
  async usernameChanged(newVal: string, oldVal: String) {
    // get treatment from split.io
    await this.getTreatment();
    // call the REST service to load drinks
    await this.loadDrinks();
        // clear the current order
        this.currentOrder = null;
  }
  async loadDrinks() {
    const response = await axios.get('http://localhost:8080/api/coffee-bot/list-drinks');
    console.log(response);
    if (response && response.status === 200) {
      this.drinks = response.data;
    }
    else {
      this.drinks = [];
    }
  }
  async mounted() {
    await this.getTreatment();
    await this.loadDrinks();
  }
  beforeDestroy() {
    this.splitClient.destroy();
  }
}

该组件的身份验证部分是通过 JHipster 引导程序免费提供的。通过该方法从 Spring Boot 资源服务器加载数据loadDrinks()，该方法只是将饮料存储在本地数组中，巧妙地称为drinks. 当安装组件和用户更改时（因为可用的饮料取决于治疗，而治疗由用户决定），则会调用此方法。你可能会注意到此方法没有传递用户名。这是因为用户名会自动通过 JWT（JSON Web 令牌）传递到服务器，由 Spring Security 处理，身份验证代码由 JHipster 引导。

另一个重要的函数是usernameChanged()方法，当属性更改时调用该方法username。每次有新用户时，都需要创建新的 Split 客户端并重新加载处理。你还需要从服务器重新加载饮料。这个方法处理所有这些。

请注意此处的一般流程。首先，SplitFactory使用分割身份验证密钥和新用户名配置 a。该SplitFactory实例用于创建SplitClient实例。然而，客户此时不一定准备好。该代码会阻塞，直到SDK_READY事件被触发（参见下面的代码），然后才尝试从 获取处理SplitClient，否则它将仅返回control处理。

// block until SDK is readythis.splitClient.on(this.splitClient.Event.SDK_READY, function () {
  // ready now, so get treatment
  this.treatment = this.splitClient.getTreatment('drink-types');
}.bind(this))

home.vue现在更新与该组件对应的模板文件。

src/main/webapp/app/core/home/home.vue

请注意，该文件使用 Vue 的条件语法根据处理状态有条件地渲染添加和删除奶油按钮。在这种情况下，即使组件中有一些与添加和删除奶油功能相关的代码未切换，这就是我们管理功能状态所需要做的全部工作。

    Add Cream - FREE
    Remove Cream

尝试完成的 Spring Boot + Vue.js 教程应用程序

你现在可以尝试完成的应用程序。启动或重新启动服务器和客户端。你可能希望在启动客户端之前让服务器完成启动。

Spring Boot Java 服务器：

./gradlew

Vue.js 客户端：

npm start

客户端应用程序应自动打开。如果没有，请打开 http://localhost:9000

当你第一次加载应用程序时，你会看到用户是anonymous并且治疗是对照治疗。

使用默认管理员凭据 ( ) 登录admin:admin，你将看到扩展的饮料列表。当你添加一个饮料时，你会看到一个名为"Add Cream"的按钮。该按钮的可见性或功能可能受到名为"split treatment"的处理方式的控制。换句话说，根据某种分割处理的规则或逻辑，决定了是否显示或启用这个"Add Cream"按钮。

注销并以默认用户 ( user:user) 身份登录，你将看到处理方式，并且off你将获得与该用户相同的饮料列表anonymous。此外，你无法选择添加奶油。

了解有关 Spring Boot、功能标志和生产中测试的更多信息

在本教程中，你创建了一个全栈应用程序，其中包括 Vue.js 客户端和 Spring Boot 资源服务器。Vue.js 客户端使用 TypeScript 进行更现代、无错误的开发（因为如果使用得当，类型检查可以大大减少运行时错误）。Spring Boot 服务器使用 Spring Security 和 Spring JPA 等技术来快速轻松地定义数据模型（或实体），将该实体的实例保存到数据库，并在 REST 接口中提供该数据。

客户端和服务器都使用 JWT 身份验证来保护安全。Split用于实现功能标志，在服务器端使用Java SDK实现拆分，在客户端使用Javascript SDK实现拆分。

所有这一切都是使用 JHipster 引导的，这使得使用现代最佳实践和技术启动新的全栈项目变得非常容易。

你可以在Split 的示例 GitHub上找到所有设置的 JHipster 的完整源代码。