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

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/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);
};

-编辑

我做了一些改变.现在,我有反应组件显示,当我使用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

首先，你应该在其他主管中创建反应应用程序，例如

Root ->
|-- client // emply
|-- clint_src // 反应应用程序

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

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

例子：

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);
};

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

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

在"paths": ["*"],所有路线上都将打开反应文件，除了“/api”和“explorer”，因此您应该处理反应应用程序内未找到的页面

希望这对你有帮助祝你好运

Answer 2

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

在组件配置.json 中：

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

然后通过 /__explorer 访问资源管理器。