整合蒸汽和反应

Question

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

我有点老了,想要使用纯MVC架构来实现我的系统.我正在考虑在纯粹的'V'模式下使用React,Vapor履行'M'和'C'角色.我需要一些帮助来理解如何集成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方式,我是否会为每个"屏幕"创建一个.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 请求。