如何从多页应用程序迁移到Piral

我们运行了一些带有某些页面的ASP.NET Core应用程序。这些都是"经典"的多页应用程序。

对于我们的新门户网站，我们决定使用piral。在添加几个新模块的同时，我们还希望使用现有的应用程序。

我们如何在piral或客户端(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">
&copy; 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>

我们不需要拥有所有的脚本——由于样板，它们中的大多数都在那里。事实上，我们也可以在没有它们的情况下跑步。

可以通过多种方式将MPA迁移到Piral。

创建一个包装器堆，通过iframe公开不同的SSRed部分
创建一个包装器堆，通过动态获取的片段公开不同的SSRed部件
将您的Razor视图转换为React部分，并在FE/BE之间进行拆分；将React零件堆放起来

我不知道你的应用程序有多复杂，但也许(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等，但我故意忽略了这一点。请记住，前面显示的方法可能会引入冲突。因此，可以提前"下载"工作表并为其添加前缀("scope"(，也可以在shadow DOM解决方案中全部使用它(shadow 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} />;
}));
}

相关内容

最新更新

热门标签：