0

我有一个完全构建的节点/快速应用程序，我想添加响应，以便在全栈应用程序中练习这种关系。我之前在 react 和 node 中构建了应用程序，但从未一起构建过，我对 react 如何适合 MVC 架构感到困惑。

在反应节点全栈应用程序中，反应状态是否会处理我之前传递到ejs视图中的所有数据？

我一直在浏览有关使用 node 和 react 的全栈应用程序的教程，但它们似乎只涉及诸如 react 如何从后端获取数据或如何设置配置等​​问题，但我明白了那部分，我只是不明白 react 在全栈应用程序中的作用，节点/express 后端应用程序的模型-控制器-视图体系结构的哪一部分是 react 接管的？后端和前端的职责如何划分？

因此，例如，我正在使用 reddit 克隆类型的应用程序，因此当您单击帖子标题以查看帖子时，我的控制器会查询该帖子的数据库，然后将其传递给视图{post}：

show(req, res, next){
        postQueries.getPost(req.params.id, (error, post) => {
            if(error || post == null){
                res.redirect(404, "/");
            } else {
                res.render("posts/show", {post});
            }
        });
    },

所以当我添加一个带有反应的前端时，那个{post}对象会被反应处理吗？所以 react 会获取该数据并在 post 组件中使用它来创建当前我的视图show.ejs文件？

4

1 回答 1

1

所以当我添加一个带有 react 的前端时，那个 {post} 对象会是由 react 处理的吗？所以 react 会获取该数据并在 post 组件中使用它来创建当前我的视图 show.ejs 文件吗？

是的。这show.ejs将是一个 Reactview或一个page包含component处理如何显示它的 a。

简化：

React - 是一个虚拟 DOM，因此它会根据（如单击按钮）交换views//containers进出，这反过来会：检索、显示、操作和/或将数据发送到 API。在开发中，它与您的后端完全分离。所有路由都将由前端路由器包处理。在生产中，所有前端代码都被编译到一个or文件夹中，其中包含您的资产（图像、字体、css）和最重要的bundle.js 文件，然后由 express 提供服务。componentseventssrcdistbuild

Express + 一些数据库——将充当您的 API，它将根据前端请求对数据进行 CRUD。如果您的应用程序是 MPA（多页面应用程序），那么常见的做法是使用/api/前缀从前端路由中划定后端路由。在生产中，如果 express 无法识别路由（它不是请求），那么它将退回到前端文件中，由前端路由器处理。/api/bundle.js

在这里查看一个工作示例：https ://github.com/mattcarlotta/fullstack-mern-kit （client是前端，其他都是后端）

或者

查看一个工作代码框（我正在向返回的APIGET发出请求）：json

编辑重组应用

对于上面的示例，您的show控制器将只是将JSON（或string消息）发送回前端（重定向将通过路由器在前端发生 - 例如react-router-dom）：

show(req, res, next){
        postQueries.getPost(req.params.id, (error, post) => {
            if(error || post == null){
                // res.status(404).send("Unable to locate posts.");
                res.status(404).json({ err: Unable to locate posts });
            } else {
                res.status(200).json({ post });
            }
        });
    },

您甚至可以使用以下方法简化上述操作async/await：

const show = async (req, res, done) => {
        try {
           const post = await postQueries.getPost(req.params.id);
           res.status(200).json({ post });
        } catch(err) {
           // res.status(404).send("Unable to locate posts.");
           res.status(404).json({ err: Unable to locate posts });
        }
    };

然后 React 前端处理响应。

于 2019-04-07T16:58:47.390 回答