Question

我正在构建一个经典的数据库支持的动态网站，允许用户共享潜在客户。

我是一所古老的学校，希望使用纯MVC架构来实现我的系统。我考虑在一个纯粹的＆＃39; V＆＃39;中使用React。模式，Vapor满足＆＃39; M＆＃39;和＆＃39; C＆＃39;角色。我需要一些帮助来理解如何集成Vapor和React，或者更精确地确定哪些功能最适合驻留。

我的Vapor服务器端应用程序，处理所有安全性，路由，模型（通过Fluent存储在PostgreSQL数据库中）和模型控制器。模型控制器仅向通过中间件层的请求输出纯JSON响应：检查用户访问“命令”的权限。（基于数据库中保存的角色配置文件，允许动态更改权限）;验证访问关联记录的权限（基于他们可以成为的组的层次结构）;并记录用户正在执行的操作。

到目前为止，我一直在使用Leaf模板引擎为用户使用的网站生成.html文件。 Leaf模板通常只传递一个或两个属性 - 比如将要显示的记录的id，然后我使用一些javascript通过AJAX调用将数据拉回模型控制器。模型控制器和中间件可以访问cookie以满足所有用户身份验证/会话相关的需求。这样可以在模型和视图之间保持非常清晰的分离，并且可以让我更轻松地构建一个称为将来调用模型RESTful接口的移动应用程序。

现在我正在考虑使用React进行Web前端，使用React-Bootstrap库。但说实话，我有点迷失了如何正确地整合这个。例如，渲染页面以显示记录 - 如何传递记录ID（伪代码警告！）：

a）我应该创建一个叶子模板，我将id作为参数传递给它。模板只需要一小段javascript就可以将参数传递给react.js脚本？蒸汽方面看起来像：

drop.get("viewRecord", myObject) { request in
    let parameters = try Node(node:["objectId": myObject?.id.makeNode()])
    return try webApp.view.make("viewObject", parameters)
}

.leaf模板有点像：

<script ...>
    var objectID = #(viewObject.id)
</script>

b）或者我应该拨打电话，例如，我将id作为URL参数传递，然后我将使用一些小的javascript提取并传递给react组件：

drop.get("viewRecord", myObject) { request in
     return Response(redirect: "/viewObject.html", myObject?.Id)
}

c）Vapor中的其他一些方式？我错过了React的观点吗？我认为它的目的是关注前端和后端的不可知性，但React Router建议它也需要一些后端工作吗？

d）放弃反应，说坚持用叶子？

关于最后一点 - 如果我采用React的方式，我是否会为每个＆＃34;屏幕提供一个.jsx文件（转换为.js）。我会为它构建一个叶子模板？如果是这样，我将如何通过引用公共元素（例如react和react-bootstrap组件）来减少文件大小。目前我正在使用Webpack生成单个.js文件。我假设我不会使用React路由器，因为我使用Vapor。

很抱歉，如果其中一些是非常基本的，但我对后端感觉更舒服，但希望前端也能很好地设计，并使责任分工最佳。

感谢您提出的想法！

Answer 1

所以经过一些工作，我的问题的答案是c。

我有两个独立的项目：

1）使用Vapor构建纯粹的restful服务，使用JSON响应响应GET和POST请求。假设浏览器不安全，它可以处理所有安全问题。

2）然后在前端，我有一个React单页面应用程序。它在登录期间下载用户的权限，并使用它来控制屏幕上可见的内容。

服务器确保不会发送或持久保存超出用户权限的数据。因此，如果用户能够尝试在React应用中看到他们没有权限的页面，他们只会看到页面结构而没有数据。

Answer 2

回到这里......我在我的网站上为此写了一个介绍教程，在这里：https://www.vaporforums.io/thread/25

但实质上，使用2个单独的项目，并使用前端向后端发出API请求。

整合蒸汽和反应

2 个答案: