Question

我正在使用环回反应。我想在环回中集成反应代码。如果我做这3个步骤

1)middleware.json - put this
 "files": {
    "loopback#static": {
      "params":"$!../client"
    }
  },`
2)root.js
 router.get('/');
3)front end code
 "build": "react-scripts build && cp -r build/* ../client/",

那确实打开了我在localhost：3000上的反应网站。现在问题就是当我这样做的时候我无法访问我的环回：3000 /资源管理器所以我的第一个问题是在这个场景中，如何访问资源管理器。

但后来我回滚了，因为我想再次使用loopback explorer。

所以，我删除了所有这些添加的代码，浏览器又回来了但当我再次添加它现在，我没有看到我的反应代码

我仍然可以在http://localhost:3000/explorer/看到探险家如果我去http://localhost:3000/apphome 我看到404错误

现在，我的用于环回的middleware.json文件是

    {
  "initial:before": {
    "loopback#favicon": {}
  },
  "initial": {
    "compression": {},
    "cors": {
      "params": {
        "origin": true,
        "credentials": true,
        "maxAge": 86400
      }
    },
    "helmet#xssFilter": {},
    "helmet#frameguard": {
      "params": [
        "deny"
      ]
    },
    "helmet#hsts": {
      "params": {
        "maxAge": 0,
        "includeSubdomains": true
      }
    },
    "helmet#hidePoweredBy": {},
    "helmet#ieNoOpen": {},
    "helmet#noSniff": {},
    "helmet#noCache": {
      "enabled": false
    }
  },
  "session": {},
  "auth": {},
  "parse": {
    "body-parser#json": {},
    "body-parser#urlencoded": {
      "params": {
        "extended": true
      }
    }
  },
  "routes": {
    "loopback#rest": {
      "paths": [
        "${restApiRoot}"
      ]
    }
  },
  "files": {
    "loopback#static": {
      "params":"$!../client"
    }
  },
  "final": {
    "loopback#urlNotFound": {},
    "./LoopbackUrlNotFoundCatch.js": {}
  },
  "final:after": {
    "strong-error-handler": {}
  }
}

root.js文件

'use strict';
//router.get('/', server.loopback.status());
module.exports = function(server) {
  // Install a `/` route that returns server status
  var router = server.loopback.Router();

  router.get('/');
  server.use(router);
};

-edit

我做了一些改变。现在，我有反应组件显示，当我使用api路由时，我也可以看到数据。但是，探险家仍然缺席。

middleware.json

"files": {
    "loopback#static": [
      {
        "name": "publicPath",
      "paths": ["/"],
      "params": "$!../client"
      },
      {
        "name": "reactRouter",
      "paths": ["*"],
      "params": "$!../client/index.html",
      "optional":true
      }
    ]
  },

我还将root.js的名称更改为root_something.js。在文档中，它是书面的，不需要root.js

Answer 1

首先，您应该在其他导演（如

）中创建react app

根->
|-客户// emply
|-clint_src //反应应用程序

并获取构建React应用并将构建文件复制到客户端

现在您应该从“ server / boot / root.js”文件中删除server.loopback.status()

示例：

router.get('/', server.loopback.status());

收件人：

module.exports = function(server) {
  // Install a `/` route that returns server status
  var router = server.loopback.Router();
  router.get('/');
  server.use(router);
};

之后，您需要说回环回中间件哪个文件应该在您的路径中加载转到中间件/server/middleware.json，并将打击代码替换为"files": {}

"files": {
    "loopback#static": [
      {
        "paths": ["/"],
        "params": "$!../client"
      },
      {
        "paths": ["*"],
        "params": "$!../client"
      }
    ]
  },

在"paths": ["*"],上，所有路径都将打开“ / api”和“ explorer”的React文件，所以您应该处理react应用内未找到的页面

希望这对您有很大帮助祝你好运

Answer 2

我怀疑React的默认服务工作者拦截并尝试缓存/资源管理器。它会跳过以__为前缀的网址，因此可能需要清除浏览器：

在component-config.json中：

{ "loopback-component-explorer": {
"mountPath": "/__explorer"  }}

然后在/ __ explorer中访问资源管理器。

Answer 3

作为向回送应用程序状态添加GUI的说明，您需要删除root.js＆＃39; /＆＃39;完全路由，通过将root.js文件重命名为没有.js扩展名的内容，或者完全删除该文件。

$ rm root.js
### or, you can do this
$ mv root.js root.js.old

在loopback 3服务器配置中，必须将客户端文件夹设置为middleware.json中的中间件路由，如下所示：

 "files": {
    "loopback#static": {
      "params": "$!../client"
    }
  },

现在，您的客户端应用程序是从/client文件夹提供的，默认情况下静态文件是使用Express提供的 - 因此，当您点击index.html时，它会查找localhost:3000/

如何在loopback.js中处理客户端响应路由

3 个答案: