如何从多页应用程序迁移到Piral
我们运行了一些带有一些页面的ASP.NET核心应用程序。这些都是“经典”的多页面应用程序。
对于我们的新门户网站，我们决定选择食人鱼。在添加几个新模块的同时，我们也希望使用现有的应用程序。
我们如何在盗版或客户端(SPA)微前端集成多页应用程序？
多页应用程序的一个示例如下(托管在像https://myexample.com/home这样的地址上)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Privacy Policy - DotnetApp</title>
<link rel="stylesheet" href="/lib/bootstrap/dist/css/bootstrap.min.css" />
<link rel="stylesheet" href="/css/site.css" />
</head>
<body>
<header>
<nav class="navbar navbar-expand-sm navbar-toggleable-sm navbar-light bg-white border-bottom box-shadow mb-3">
<div class="container">
<a class="navbar-brand" href="/">DotnetApp</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target=".navbar-collapse" aria-controls="navbarSupportedContent"
aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="navbar-collapse collapse d-sm-inline-flex flex-sm-row-reverse">
<ul class="navbar-nav flex-grow-1">
<li class="nav-item">
<a class="nav-link text-dark" href="/">Home</a>
</li>
<li class="nav-item">
<a class="nav-link text-dark" href="/Home/Privacy">Privacy</a>
</li>
</ul>
</div>
</div>
</nav>
</header>
<div class="container">
<main role="main" class="pb-3">
<h1>Privacy Policy</h1>
<p>Use this page to detail your site's privacy policy.</p>
</main>
</div>
<footer class="border-top footer text-muted">
<div class="container">
© 2020 - DotnetApp - <a href="/Home/Privacy">Privacy</a>
</div>
</footer>
<script src="/lib/jquery/dist/jquery.min.js"></script>
<script src="/lib/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
<script src="/js/site.js?v=4q1jwFhaPaZgr8WAUSrux6hAuh0XDg9kPS3xIVq36I0"></script>
</body>
</html>我们不需要所有的脚本--它们中的大多数都是因为样板而存在的。事实上，我们也可以在没有它们的情况下运行。
回答 1
Stack Overflow用户
发布于 2020-04-09 14:43:24
一个精神分裂症向海盗的迁移可以通过多种方式进行。
创建包装器pilet，通过iframes obtained
- Convert
- 公开不同的SSRed部件，创建包装器pilet，通过动态将Razor视图公开为React部件的片段公开不同的SSRed部件，并在FE/BE之间进行分割；将反应部件放到pilet
中
我不知道您的应用程序有多复杂，但是(1)可能是最容易开始的(特别是如果它只是一个页面)。
让我们看看如何实现(2)：
import * as React from 'react';
export function setup(app) {
const connect = app.createConnector(() => fetch('https://myexample.com/home').then(res => res.text()));
app.registerPage('/myexample', connect(({ data }) => {
const __html = data;
return <div dangerouslySetInnerHTML={{ __html }} />;
}));
}在这里，我们从https://myexample.com/home中延迟加载内容，并将其显示在组件中(这将是一个页面)。
有几件事你应该留心：
在最好的情况下，
- 检测
fetch(或发送一个特殊的标题)，如果需要样式表，则只返回一个片段，而不是完整的响应 - ，如果需要将它们从响应中“鱼”出来，或者将它们预先集成(请参阅下一点)
- ，上面的代码没有特殊的SPA链接处理。因此，所有链接都相对于给定的页面URL，并且它们正在进行完全转换，...
- JavaScript将不会在给定的解决方案
中加载/工作。
现在，关于样式表，您可以这样做(除其他事项外)：
import './my-style.css';
import * as React from 'react';
export function setup(app) {
// ...
}其中my-style.css看起来像：
@import url(https://myexample.com/css/site.css);我们可以在这里有更多的URL等等，但我是故意的。请记住，前面所示的方式可能会导致碰撞。因此，要么“先下载”工作表并前缀(“范围”)，要么将其全部用于影子DOM解决方案(影子DOM总是“免费”父DOM的样式，需要导入自己的样式表)。
对于您可以做的链接处理:使用布局效果，通过选择器获取所有a元素，附加一个事件并取消原始导航。而是使用history上下文。
在代码中，这类似于：
import * as React from 'react';
import { useHistory } from 'react-router';
export function setup(app) {
const connect = app.createConnector(() => fetch('https://myexample.com/home').then(res => res.text()));
app.registerPage('/myexample', connect(({ data }) => {
const __html = data;
const container = React.useRef();
const history = useHistory();
React.useLayoutEffect(() => {
if (container.current) {
const anchors = container.current.querySelectorAll('a[href]');
Array.prototype.forEach.call(anchors, anchor => {
anchor.addEventListener('click', ev => {
ev.preventDefault();
history.push(anchor.getAttribute('href'));
});
});
}
}, []);
return <div dangerouslySetInnerHTML={{ __html }} ref={container} />;
}));
}https://stackoverflow.com/questions/61117740
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号