使用React的待办事项列表应用程序

在本教程中，我们将使用ActiveJ和React创建一个待办事项列表应用程序。我们将探讨如何在ActiveJ项目中集成React，以及如何使用HTTP模块简单管理路由。你可以在以下网站找到完整的例子来源 GitHub

这里我们将只考虑主应用程序类-- ApplicationLauncher。它使用ActiveJ HtpServerLauncher 和 AsyncServlet 用于设置嵌入式应用服务器的类。通过这种方法，你可以在没有XML配置或第三方依赖的情况下创建服务器。此外， HttpServerLauncher 将自动负责启动、运行和停止应用程序。你只需要为启动器提供servlets。

创建启动器

ApplicationLauncher 是程序的主类。除了启动应用程序，它还处理路由和大部分相应的逻辑。我们将使用ActiveJ HttpServerLauncher 并扩展它。

public final class ApplicationLauncher extends HttpServerLauncher {  @Provides  RecordDAO recordRepo() {    return new RecordImplDAO();  }
  @Provides  Executor executor() {    return newSingleThreadExecutor();  }
  @Provides  DslJson<?> dslJson() {    return new DslJson<>(Settings.withRuntime());  }

首先，我们提供了 RecordDAO 与应用业务逻辑和 Executor ，这是我们的 AsyncServlet所需要的。为了将对象转换为/从JSON，我们选择了 DSL-JSON库，，所以我们提供了一个 DslJson<?> 对象，它将处理数据的marshalling。 AsyncServlet 从 /build 目录加载静态内容，并负责路由。

@ProvidesAsyncServlet servlet(Executor executor, RecordDAO recordDAO, DslJson<?> dslJson) {  return RoutingServlet.create()      .map("/*", StaticServlet.ofClassPath(executor, "build/")          .withIndexHtml())

ActiveJ HTTP模块中的路由类似于Express方法。方法 map(@Nullable HttpMethod method, String path, AsyncServlet servlet) 添加路由到 RoutingServlet: method (optional) 是HTTP方法之一 (GET, POST, etc. ) path 是服务器上的路径 servlet 定义了请求处理的逻辑。如果您需要从 请求 获取一些数据，您可以使用： 请求。 etPathParameter(密钥)/请求。 etQueryParameter(密钥) (见 查询参数用法 提供所需参数的密钥并收到相应字符串 请求。 etPostParameters() 获取所有请求参数的地图请注意所提供的请求中的 `。它规定，无论哪个路径，直到收到下一个 /，它，将由我们的静态Servlet处理，它从/build` 目录上传静态内容。 Servlet应该能够添加一个新的记录，获得所有可用的记录，通过它的ID删除记录，，也可以将特定记录的计划标记为完成或未完成，所以我们提供相应的路由。

.map(POST, "/add", request -> request.loadBody()    .map($ -> {      ByteBuf body = request.getBody();      try {        byte[] bodyBytes = body.getArray();        Record record = dslJson.deserialize(Record.class, bodyBytes, bodyBytes.length);        recordDAO.add(record);        return HttpResponse.ok200();      } catch (IOException e) {        return HttpResponse.ofCode(400);      }    })).map(GET, "/get/all", request -> {  Map<Integer, Record> records = recordDAO.findAll();  JsonWriter writer = dslJson.newWriter();  try {    dslJson.serialize(writer, records);  } catch (IOException e) {    throw new AssertionError(e);  }  return HttpResponse.ok200()      .withJson(writer.toString());})//[START REGION_4].map(GET, "/delete/:recordId", request -> {  int id = parseInt(request.getPathParameter("recordId"));  recordDAO.delete(id);  return HttpResponse.ok200();})//[END REGION_4].map(GET, "/toggle/:recordId/:planId", request -> {  int id = parseInt(request.getPathParameter("recordId"));  int planId = parseInt(request.getPathParameter("planId"));
  Record record = recordDAO.find(id);  Plan plan = record.getPlans().get(planId);  plan.toggle();  return HttpResponse.ok200();});

注意带有 :的请求，例如。

.map(GET, "/delete/:recordId", request -> {  int id = parseInt(request.getPathParameter("recordId"));  recordDAO.delete(id);  return HttpResponse.ok200();})

： 说明以下字符，直到下一个 / 是一个变量，其关键字，在这种情况下，是 recordId。

运行应用程序

要运行该示例，克隆ActiveJ ，并将其导入作为Maven项目。查阅分支机构 v5.4.3。在运行这个例子之前，构建项目（Ctrl F9 for IntelliJ IDEA）。然后，在终端的 activej/examples/tutorials/react-integration-2/front 目录下运行以下命令。

npm inpm run-script build

打开 ApplicationLauncher ，运行其 main 方法。然后打开你喜欢的浏览器，进入 localhost:8080。尝试添加和删除一些任务，或将其标记为已完成。

创建启动器​

运行应用程序​

创建启动器

运行应用程序