个人中心
gpt4 book ai didi

javascript - 用于 Web 和 native 移动应用程序的 React.js 架构？

转载 作者：行者123 更新时间：2023-11-30 17:03:50 24 4
gpt4 key购买 nike

我对将 React.js 用于我的 Web 服务的服务器端呈现很感兴趣，但是我在尝试从使用 Express.js 开发的 Web 服务进行移植时遇到了一个问题。目前，我的网络服务服务于 2 个平台

  1. 网络(Angular.js 客户端)
  2. Android( native 应用程序 - 用 Ja​​va 开发)

我目前的架构是我所有的客户端都使用 JSON 连接到我的服务器。因此，我的客户端将向我的服务器发送一个 HTTP GET/POST 请求，我将返回 JSON。我的服务器不提供 HTML 页面。

下面是我使用 REST 的端点 API 的示例:

  • /api/书籍
    1. GET - 返回包含书籍信息数组的 JSON
    2. POST - 发送 JSOn 到服务器，添加新书信息

我应该如何更改我的服务器端以包含 React？由于 React 使用服务器端渲染而不是使用 JSON 进行通信？

我当前的 Angular.js 项目，我把它们放在一个公共(public)文件夹中，它作为静态文件。

可能的解决方案:

  • 我是否应该添加一组新的 URL，一个用于呈现 (/books)，第二个用于 JSON (/api/books)？
  • 服务器检测应用程序的类型(移动或网络)并相应地提供服务？

更新 1

另一种可能的解决方案

res.format({
    'text/html': function() {
        var html = React.renderToString(React.createElement(BooksPage, {books: books})); 
        res.render('main-layout', {
            html: html, 
            data: JSON.stringify({books:books})
        });
    },
    'application/json': function() {
        res.send({
            book: books
        })
    }
})

是否使用 Express.js 内容协商(res.format)，这样做我对 handline HTML 和 JSON 保持相同的路由？

最佳答案

你有你的 api 路由，你有你的页面路由。用户没有去 http://example.com/api/books要查看图书列表，他们会转到类似 http://example.com/books/ 的位置查看图书页面。

当您收到对/books/这样的页面的请求时，您将提供 html。您的 api 仍然可以在客户端上使用。

做到这一点的最简单方法是制作非常精简的 Controller ，并将大部分逻辑保留在普通函数中(带有 promise 的示例，但不重要)。

function getBooks(){ return /* database thing returns promise */ };

app.get('/api/books', function(req, res){
  getBooks().then(function(books){ res.send(books); });
});

app.get('/books/', function(req, res){
  getBooks().then(function(books){ 
    var html = React.renderToString(React.createElement(BooksPage, {books: books})); 
    res.render('main-layout', {
        html: html, 
        data: JSON.stringify({books:books})
    });
  });
});

假设您的主布局模板最终产生了这个:

<html><head></head>
<body>
  <div id="root">
    <!-- output of renderToString -->
    <div data-reactid="0">...</div>
  </div>
  <script>
    /* output of the JSON.stringify */
    var __initial_data = [{"id": ...}];
  </script>
  <script src="client-side-code-bundle.js"></script>
</body>
</html>

您使用与服务器使用的相同数据在客户端上获取渲染:

React.render(React.createElement(BooksPage, __initial_data));

您的事件监听器已绑定(bind)，您可以从那里开始。

关于javascript - 用于 Web 和 native 移动应用程序的 React.js 架构？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/28401714/

24 4 0
文章推荐： c# - Lucene.net - 如何从每场比赛中提取一小段文本？
文章推荐： 条件变量和消除误解
文章推荐： c# - 按条件读取 Excel 文件
文章推荐： javascript - node.js读取txt文件，而c在其中写入
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com