如何用Stimulus设计一个regex测试功能 pt 2（附代码）

在第一部分中，我们建立了一个测试regex的Stimulus控制器，然而，这个解决方案有一个问题。Ruby和JavaScript的regex实现略有不同。在我们的案例中，我们希望用户使用Ruby的regex实现来验证他们的regex。要做到这一点，我们需要在服务器端评估该regex。

1.添加一个Rails端点

为了在服务器端评估重词，我们需要暴露一个端点，以便Stimulus可以调用Rails应用程序。要做到这一点，我们需要生成一个Rails控制器：

1
bin/rails g controller regex_test create

我们需要设置一个新的路由，我们将其称为 regex_test:

1
resources :regex_test, only: :create

2.导入UJS

现在我们有一个Rails端点，我们想从Stimulus控制器中调用它。JavaScript有许多库可以进行API调用。我们将使用UJS，因为它能自动处理CSRF令牌。

为了使用UJS，我们需要在Stimulus控制器中导入它：

1
import Rails from "@rails/ujs";

然而，只有当我们将JavaScript模块导入代码库时，UJS才会发挥作用。在Rails 7中，我们可以使用导入地图来包含JavaScript模块，而不需要webpack或yarn。

导入地图有一个 "钉 "包的概念。我们可以钉住UJS，将其纳入项目中：

1
bin/importmap pin @rails/ujs

3.从JavaScript调用Rails

导入UJS后，我们可以用它来调用Rails。这里有一个基本的POST请求：

1
2
3
4
5
6
7
Rails.ajax({
  type: 'POST',
  url: `/regex_test`,
  success: (data) => {
    // do something
  }
})

这将向Rails端点发出一个请求，但它不会发送任何参数。要做到这一点，我们需要传入一个数据对象。不幸的是，UJS不支持JSON，所以我们必须将一个JavaScript对象转换成一串参数。

一个对象可以很容易地使用 regex和 exampleString刺激的目标：

1
2
3
4
const data = {
  regex: this.regexTarget.value,
  exampleString: this.exampleStringTarget.value
}

然后我们可以用 URLSearchParams来将对象转换为字符串：

1
2
3
4
5
6
7
8
Rails.ajax({
  type: 'POST',
  url: `/regex_test`,
  data: new URLSearchParams(data).toString(),
  success: (data) => {
    // do something
  }
})

4.在Rails控制器中添加regex匹配逻辑

在Rails控制器中，我们可以使用参数来评估反义词，使用 Regexp#match?在Rails控制器中，我们可以使用参数来评估搜索结果，并使用 "搜索 "来运行搜索结果与示例字符串：

1
Regexp.new(params["regex"]).match?(params["exampleString"])

然后，我们可以在一个简单的JSON对象中返回结果，以便在客户端使用：

1
2
3
4
5
6
7
class RegexTestController < ApplicationController
  def create
    render json: {
      match: Regexp.new(params["regex"]).match?(params["exampleString"])
    }, status: 200
  end
end

5.在Stimulus控制器中使用Rails响应

现在，Rails控制器返回一个结果，我们可以在Stimulus控制器中使用它。我们可以从响应对象中抽出 match响应对象，并使用该值来设置表单字段的颜色：

1
this.exampleStringTarget.style.borderColor = data.match ? "green" : "red"

下面是Stimulus控制器现在的样子：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
import { Controller } from "@hotwired/stimulus"

import Rails from "@rails/ujs";

export default class extends Controller {
  static targets = [ "regex", "exampleString" ]

  test() {
    const data = {
      regex: this.regexTarget.value,
      exampleString: this.exampleStringTarget.value
    }

    Rails.ajax({
      type: 'POST',
      url: `/regex_test`,
      data: new URLSearchParams(data).toString(),
      success: (data) => {
        this.exampleStringTarget.style.borderColor = data.match ? "green" : "red"
      }
    })
  }
}

这就是第二部分的结束。如果我们刷新浏览器并测试一下表单，我们应该看到它和以前一样工作，但评估的是Ruby的regex实现，而不是JavaScript的regex。