Open main menu
IT人
微前端(Micro Frontend ) 落地實施的一些具體例子
發表於
2021-07-29
前端
前文[微前端概述(Micro Frontends) 以及相比單體應用，微前端能帶來什麼好處](https://jerry.blog.csdn.net/article/details/119190124) 簡單介紹了微前端的概念，本文來看一個具體的應用例子。 [原文地址](https://martinfowler.com/articles/micro-frontends.html) 想象一個網站，客戶可以在其中訂購外賣食品。從表面上看，這是一個相當簡單的概念，但如果你想做得好，還有驚人的細節： * 應該有一個登陸頁面，客戶可以在其中瀏覽和搜尋餐館。 餐廳應該可以透過任意數量的屬性進行搜尋和過濾，包括價格、美食或客戶之前訂購的東西 * 每家餐廳都需要自己的頁面來顯示其選單項，並允許客戶選擇他們想吃的東西，包括折扣、餐飲優惠和特殊要求 * 客戶應該有一個個人資料頁面，他們可以在其中檢視他們的訂單歷史記錄、跟蹤交付和自定義他們的付款選項  每個頁面都有足夠的複雜性，我們可以輕鬆地證明每個頁面都有一個專門的團隊，並且每個團隊都應該能夠獨立於所有其他團隊在他們的頁面上工作。 他們應該能夠開發、測試、部署和維護他們的程式碼，而不必擔心與其他團隊發生衝突或協調。 但是，我們的客戶仍然應該看到一個無縫的網站。 在本文的其餘部分，我們將在需要示例程式碼或場景的任何地方使用此示例應用程式。 # Integration approaches 鑑於上面相當鬆散的定義，有許多方法可以合理地稱為微前端。 在本節中，我們將展示一些示例並討論它們的權衡。 所有這些方法都有一個相當自然的架構——通常應用程式中的每個頁面都有一個微前端，並且有一個容器應用程式，它： * 呈現常見的頁面元素，例如頁首和頁尾 * 解決跨領域問題，如身份驗證和導航 * 將各種微前端放在頁面上，並告訴每個微前端何時何地渲染自己  # Server-side template composition 我們從一種絕對不新穎的前端開發方法開始——用多個模板或片段在伺服器上渲染 HTML。 我們有一個 index.html ，它包含所有常見的頁面元素，然後使用伺服器端包含從片段 HTML 檔案中插入特定於頁面的內容： ```html <meta charset="utf-8"> <title>Feed me</title> <h1>Feed me</h1> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="renderer" content="webkit"> <title>微前端(Micro Frontend ) 落地實施的一些具體例子_ITPUB部落格</title> <meta name="keywords" content="應用開發,IT綜合"> <meta name="description" content="前文微前端概述(Micro Frontends) 以及相比單體應用，微前端能帶來什麼好處 簡單介紹了微前端的概念，本文來看一個具體的應用例子。 原文地址 想象一個網站，客戶可以在其中訂購外賣食品。從表面上看，這是一個相當簡單的概念，但如果你想做得好，還有驚人的細節： 應該有一個登陸頁面，客戶可以在其中瀏覽和搜尋餐館。 餐廳應該可以透過任意數量的屬性進行搜尋和過濾，包括價格、美食或客戶之前ITPUB部落格每天千篇餘篇博文新資訊，40多萬活躍博主，為IT技術人提供全面的IT資訊和交流互動的IT部落格平臺-中國專業的IT技術ITPUB部落格。"> <link rel="stylesheet" href="http://blog.itpub.net/layui/css/layui.css?v234"> <link rel="stylesheet" href="http://blog.itpub.net/css/base.css?v1.5"> <link rel="stylesheet" href="http://blog.itpub.net/css/zhuanlan.css?v=1.3"> <!--[if lt IE 9]> <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script> <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script> <![endif]--> <div></div> <div></div> <div></div> <div></div> <!--header部分開始--> <div class="blog-header"> <div class="w1200"> <a href="http://blog.itpub.net/" class="fl" rel="nofollow"><h1 class="logo">ITPub部落格</h1></a> <div class="nav fl"> <a href="http://www.itpub.net/" rel="nofollow">首頁</a> <a href="http://blog.itpub.net/" rel="nofollow">部落格</a> <a href="http://blog.itpub.net/column" rel="nofollow">專欄</a> <a href="http://edu.itpub.net/" rel="nofollow">學院</a> <a href="http://www.itpub.net/forum.php" rel="nofollow">社群</a> <a href="https://z.itpub.net/" rel="nofollow">技術棧</a> </div> <div class="fr"> <form action="http://blog.itpub.net/search/blog/" class="layui-form blog-search-wrap fl"> <input type="hidden" name="type" value="blog"> <input placeholder="搜尋" type="text" class="layui-input" name="keyword"> <button class="search-btn icon-blog"></button> </form> <a href="http://blog.itpub.net/blog/post/" class="layui-btn layui-btn-primary fl mlr30" target="_blank" rel="nofollow">發博</a> <!--登入前--> <div class="fl head-name" id="u_info"> </div> </div> </div> </div> <!--header部分結束--> <link rel="stylesheet" href="http://blog.itpub.net/markdown/css/editormd.css"> <link rel="stylesheet" href="http://blog.itpub.net/markdown/css/editormd.min.css"> <link rel="stylesheet" href="http://blog.itpub.net/markdown/css/editormd.preview.min.css"> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <link href="http://blog.itpub.net/ueditor/third-party/SyntaxHighlighter/shCoreDefault.css" rel="stylesheet" type="text/css"> <div></div> <link rel="stylesheet" href="http://g.alicdn.com/de/prismplayer/2.6.0/skins/default/aliplayer-min.css"> <div></div> <div></div> <div></div> <div></div> <div></div> <style> .code .container > textarea{ height:100%; } .translate{color: #9fa3a7 !important;font-size:12px !important;} .translate a{font-size:12px !important;color:#9fa3a7 !important;} .translate a:hover {font-size:12px !important;color:#f15142 !important;} .newslist{padding:10px 5px;height:20px !important;line-height:20px;overflow:hidden;text-overflow: ellipsis;white-space: nowrap;border-bottom:1px solid #eee} .fake-video-btn:hover{ cursor: pointer; border-style: solid; border-width: 2px; border-radius: 63px; border-color: #00c1de; } .it-player-wrap { display: flex; flex-direction: row; box-sizing: border-box; padding: 5px; margin-bottom: 20px; background: #FBFBFB; border: 1px solid #EFEFEF; border-radius: 4px; } .it-player-wrap .control { width: 50px; height: 50px; background-color: #57a5f2; margin-right: 15px; border-radius: 50%; } .it-player-wrap .control .play,.it-player-wrap .control .pause { background-size: 30px !important; color: #ffffff; width: 100%; height: 100%; } .it-player-wrap .control .play { background: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/PjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+PHN2ZyB0PSIxNTU5NjM3ODcxMTQ0IiBjbGFzcz0iaWNvbiIgc3R5bGU9IiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHAtaWQ9IjYwMjkiIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iMjAwIiBoZWlnaHQ9IjIwMCI+PGRlZnM+PHN0eWxlIHR5cGU9InRleHQvY3NzIj48L3N0eWxlPjwvZGVmcz48cGF0aCBkPSJNOTUzLjQ0NTA2NSA2MDguMjkwNzI0TDM1MC4yOTkyMSA5ODAuNjM0MjExQzI1Ni42NDExNTEgMTAzOC40NTUyNjMgMTgwLjY5MDc4OSA5OTcuNzk5ODM2IDE4MC42OTA3ODkgODkxLjkxNTAzM1YxMTUuNDg2NzExQzE4MC42OTA3ODkgOC42MzgyMjQgMjU2LjIxOTUzOS0zMS4yOTQ0NCAzNTAuMjM4OTggMjYuNzY3NTM0bDYwMy4yNjYzMTUgMzcyLjIyMzAyNmM5My42NTgwNTkgNTcuODIxMDUzIDk0LjA3OTY3MSAxNTEuMjM4MTkxIDAgMjA5LjMwMDE2NHoiIHAtaWQ9IjYwMzAiIGZpbGw9IiNmZmZmZmYiPjwvcGF0aD48L3N2Zz4=") no-repeat center; } .it-player-wrap .control .pause { background: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/PjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+PHN2ZyB0PSIxNTU5NjM3NzQ2MzAwIiBjbGFzcz0iaWNvbiIgc3R5bGU9IiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHAtaWQ9IjQ0NjciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iMjAwIiBoZWlnaHQ9IjIwMCI+PGRlZnM+PHN0eWxlIHR5cGU9InRleHQvY3NzIj48L3N0eWxlPjwvZGVmcz48cGF0aCBkPSJNNzM1LjkgNjQuOWMtNTEuMiAwLTk2IDQ0LjctOTYgOTUuOHY3MDIuNmMwIDUxLjEgNDQuOCA5NS44IDk2IDk1LjhzOTYtNDQuNyA5Ni05NS44VjE2MC43YzAtNTEuMS00NC44LTk1LjgtOTYtOTUuOHogbS00NDcuOCAwYy01MS4yIDAtOTYgNDQuNy05NiA5NS44djcwMi42YzAgNTEuMSA0NC44IDk1LjggOTYgOTUuOHM5Ni00NC43IDk2LTk1LjhWMTYwLjdjLTAuMS01MS4xLTQ0LjktOTUuOC05Ni05NS44eiIgcC1pZD0iNDQ2OCIgZmlsbD0iI2ZmZmZmZiI+PC9wYXRoPjwvc3ZnPg==") no-repeat center; } .it-player-wrap .box { flex: 1; } .it-player-wrap .box .info { font-family: PingFang-SC-Regular; font-size: 12px; color: #A8A8A8; text-align: left; line-height: 24px; margin: 0; } .it-player-wrap .box .info .size { display: inline-block; margin-right: 15px; } .it-player-wrap .progress-wrap { position: relative; margin-top: 15px; display: flex; flex-direction: row; align-items: center; } .it-player-wrap .progress-line,.it-player-wrap .progress-line-inner { position: absolute; height: 6px; width: 100%; background: #DDECFF; border-radius: 8.5px; } .it-player-wrap .progress-line-inner { background: #4C83E5 !important; } .it-player-wrap .progress-button { position: absolute; width: 50px; height: 20px; background: #4C83E5; box-shadow: 0 2px 4px 0 #A0C2FF; border-radius: 10px; top: -10px; font-family: PingFang-SC-Regular; font-size: 12px; color: #FFFFFF; text-align: center; line-height: 20px; cursor: pointer; } </style> <style> .crumb{ padding: 10px; margin-bottom: 10px; border-bottom: 1px solid rgba(238,238,238,0.4); } .crumb p{ width: 1200px; margin: 0 auto; } .newul{ line-height: 25px; } .new-item{ padding: 5px; display: block; width: 250px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } #doc-content img{ margin:none; display:initial; } .syntaxhighlighter{ width:890px; } .syntaxhighlighter td.code .line{ white-space: nowrap; } .syntaxhighlighter td.code .container{ width:840px!important; } .syntaxhighlighter td.code{ overflow: scroll!important; } </style> <div class="crumb"> <p> <a href="http://blog.itpub.net/" rel="nofollow">首頁</a> > <a href="http://blog.itpub.net/appdevelop/" rel="nofollow">應用開發</a> > <a href="http://blog.itpub.net/itother/" rel="nofollow">IT綜合</a> > <a rel="nofollow">微前端(Micro Frontend ) 落地實施的一些具體例子</a> </p> </div> <!--main部分開始--> <div class="blog-main clearfix w1200"> <div class="preview-wrap"> <div class="preview-header"> <h1 class="preview-title ">微前端(Micro Frontend ) 落地實施的一些具體例子 </h1> <div class="mess"> <span class="label label-original">原創</span> <span style="margin: auto 10px auto 0px"><a href="http://blog.itpub.net/itother/" rel="nofollow">IT綜合</a></span> <span>作者：<a href="http://blog.itpub.net/24475491/" rel="nofollow">i042416</a></span> <span>時間：2021-07-29 15:10:49</span> <span class="dian"></span> <span class="icon-see"></span> <span class="dian"></span> <span class="icon-comment">0</span> <!--博主本人和管理員 顯示 開始--> <i class="superman"><a href="javascript:;" mid="2784083" onclick="blogObj.delDraft($(this))" rel="nofollow">刪除</a></i> <i class="superman"><a href="http://blog.itpub.net/blog/post/2784083/" rel="nofollow">編輯</a></i> <!--博主本人和管理員 顯示 結束--> </div> </div> <div class="preview-body windowH"> <div class="preview-main"> <div id="doc-content" style="padding: 0px;"> <textarea style="display: none">前文[微前端概述(Micro Frontends) 以及相比單體應用，微前端能帶來什麼好處](https://jerry.blog.csdn.net/article/details/119190124) 簡單介紹了微前端的概念，本文來看一個具體的應用例子。 [原文地址](https://martinfowler.com/articles/micro-frontends.html) 想象一個網站，客戶可以在其中訂購外賣食品。從表面上看，這是一個相當簡單的概念，但如果你想做得好，還有驚人的細節： * 應該有一個登陸頁面，客戶可以在其中瀏覽和搜尋餐館。 餐廳應該可以透過任意數量的屬性進行搜尋和過濾，包括價格、美食或客戶之前訂購的東西 * 每家餐廳都需要自己的頁面來顯示其選單項，並允許客戶選擇他們想吃的東西，包括折扣、餐飲優惠和特殊要求 * 客戶應該有一個個人資料頁面，他們可以在其中檢視他們的訂單歷史記錄、跟蹤交付和自定義他們的付款選項  每個頁面都有足夠的複雜性，我們可以輕鬆地證明每個頁面都有一個專門的團隊，並且每個團隊都應該能夠獨立於所有其他團隊在他們的頁面上工作。 他們應該能夠開發、測試、部署和維護他們的程式碼，而不必擔心與其他團隊發生衝突或協調。 但是，我們的客戶仍然應該看到一個無縫的網站。 在本文的其餘部分，我們將在需要示例程式碼或場景的任何地方使用此示例應用程式。 # Integration approaches 鑑於上面相當鬆散的定義，有許多方法可以合理地稱為微前端。 在本節中，我們將展示一些示例並討論它們的權衡。 所有這些方法都有一個相當自然的架構——通常應用程式中的每個頁面都有一個微前端，並且有一個容器應用程式，它： * 呈現常見的頁面元素，例如頁首和頁尾 * 解決跨領域問題，如身份驗證和導航 * 將各種微前端放在頁面上，並告訴每個微前端何時何地渲染自己  # Server-side template composition 我們從一種絕對不新穎的前端開發方法開始——用多個模板或片段在伺服器上渲染 HTML。 我們有一個 index.html ，它包含所有常見的頁面元素，然後使用伺服器端包含從片段 HTML 檔案中插入特定於頁面的內容： ```html <meta charset="utf-8"> <title>Feed me</title> <h1>Feed me</h1> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="renderer" content="webkit"> <title>微前端(Micro Frontend ) 落地實施的一些具體例子_ITPUB部落格</title> <meta name="keywords" content="應用開發,IT綜合"> <meta name="description" content="前文微前端概述(Micro Frontends) 以及相比單體應用，微前端能帶來什麼好處 簡單介紹了微前端的概念，本文來看一個具體的應用例子。 原文地址 想象一個網站，客戶可以在其中訂購外賣食品。從表面上看，這是一個相當簡單的概念，但如果你想做得好，還有驚人的細節： 應該有一個登陸頁面，客戶可以在其中瀏覽和搜尋餐館。 餐廳應該可以透過任意數量的屬性進行搜尋和過濾，包括價格、美食或客戶之前ITPUB部落格每天千篇餘篇博文新資訊，40多萬活躍博主，為IT技術人提供全面的IT資訊和交流互動的IT部落格平臺-中國專業的IT技術ITPUB部落格。"> <link rel="stylesheet" href="http://blog.itpub.net/layui/css/layui.css?v234"> <link rel="stylesheet" href="http://blog.itpub.net/css/base.css?v1.5"> <link rel="stylesheet" href="http://blog.itpub.net/css/zhuanlan.css?v=1.3"> <!--[if lt IE 9]> <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script> <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script> <![endif]--> <div></div> <div></div> <div></div> <div></div> <!--header部分開始--> <div class="blog-header"> <div class="w1200"> <a href="http://blog.itpub.net/" class="fl" rel="nofollow"><h1 class="logo">ITPub部落格</h1></a> <div class="nav fl"> <a href="http://www.itpub.net/" rel="nofollow">首頁</a> <a href="http://blog.itpub.net/" rel="nofollow">部落格</a> <a href="http://blog.itpub.net/column" rel="nofollow">專欄</a> <a href="http://edu.itpub.net/" rel="nofollow">學院</a> <a href="http://www.itpub.net/forum.php" rel="nofollow">社群</a> <a href="https://z.itpub.net/" rel="nofollow">技術棧</a> </div> <div class="fr"> <form action="http://blog.itpub.net/search/blog/" class="layui-form blog-search-wrap fl"> <input type="hidden" name="type" value="blog"> <input placeholder="搜尋" type="text" class="layui-input" name="keyword"> <button class="search-btn icon-blog"></button> </form> <a href="http://blog.itpub.net/blog/post/" class="layui-btn layui-btn-primary fl mlr30" target="_blank" rel="nofollow">發博</a> <!--登入前--> <div class="fl head-name" id="u_info"> </div> </div> </div> </div> <!--header部分結束--> <link rel="stylesheet" href="http://blog.itpub.net/markdown/css/editormd.css"> <link rel="stylesheet" href="http://blog.itpub.net/markdown/css/editormd.min.css"> <link rel="stylesheet" href="http://blog.itpub.net/markdown/css/editormd.preview.min.css"> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <link href="http://blog.itpub.net/ueditor/third-party/SyntaxHighlighter/shCoreDefault.css" rel="stylesheet" type="text/css"> <div></div> <link rel="stylesheet" href="http://g.alicdn.com/de/prismplayer/2.6.0/skins/default/aliplayer-min.css"> <div></div> <div></div> <div></div> <div></div> <div></div> <style> .code .container > textarea{ height:100%; } .translate{color: #9fa3a7 !important;font-size:12px !important;} .translate a{font-size:12px !important;color:#9fa3a7 !important;} .translate a:hover {font-size:12px !important;color:#f15142 !important;} .newslist{padding:10px 5px;height:20px !important;line-height:20px;overflow:hidden;text-overflow: ellipsis;white-space: nowrap;border-bottom:1px solid #eee} .fake-video-btn:hover{ cursor: pointer; border-style: solid; border-width: 2px; border-radius: 63px; border-color: #00c1de; } .it-player-wrap { display: flex; flex-direction: row; box-sizing: border-box; padding: 5px; margin-bottom: 20px; background: #FBFBFB; border: 1px solid #EFEFEF; border-radius: 4px; } .it-player-wrap .control { width: 50px; height: 50px; background-color: #57a5f2; margin-right: 15px; border-radius: 50%; } .it-player-wrap .control .play,.it-player-wrap .control .pause { background-size: 30px !important; color: #ffffff; width: 100%; height: 100%; } .it-player-wrap .control .play { background: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/PjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+PHN2ZyB0PSIxNTU5NjM3ODcxMTQ0IiBjbGFzcz0iaWNvbiIgc3R5bGU9IiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHAtaWQ9IjYwMjkiIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iMjAwIiBoZWlnaHQ9IjIwMCI+PGRlZnM+PHN0eWxlIHR5cGU9InRleHQvY3NzIj48L3N0eWxlPjwvZGVmcz48cGF0aCBkPSJNOTUzLjQ0NTA2NSA2MDguMjkwNzI0TDM1MC4yOTkyMSA5ODAuNjM0MjExQzI1Ni42NDExNTEgMTAzOC40NTUyNjMgMTgwLjY5MDc4OSA5OTcuNzk5ODM2IDE4MC42OTA3ODkgODkxLjkxNTAzM1YxMTUuNDg2NzExQzE4MC42OTA3ODkgOC42MzgyMjQgMjU2LjIxOTUzOS0zMS4yOTQ0NCAzNTAuMjM4OTggMjYuNzY3NTM0bDYwMy4yNjYzMTUgMzcyLjIyMzAyNmM5My42NTgwNTkgNTcuODIxMDUzIDk0LjA3OTY3MSAxNTEuMjM4MTkxIDAgMjA5LjMwMDE2NHoiIHAtaWQ9IjYwMzAiIGZpbGw9IiNmZmZmZmYiPjwvcGF0aD48L3N2Zz4=") no-repeat center; } .it-player-wrap .control .pause { background: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/PjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+PHN2ZyB0PSIxNTU5NjM3NzQ2MzAwIiBjbGFzcz0iaWNvbiIgc3R5bGU9IiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHAtaWQ9IjQ0NjciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iMjAwIiBoZWlnaHQ9IjIwMCI+PGRlZnM+PHN0eWxlIHR5cGU9InRleHQvY3NzIj48L3N0eWxlPjwvZGVmcz48cGF0aCBkPSJNNzM1LjkgNjQuOWMtNTEuMiAwLTk2IDQ0LjctOTYgOTUuOHY3MDIuNmMwIDUxLjEgNDQuOCA5NS44IDk2IDk1LjhzOTYtNDQuNyA5Ni05NS44VjE2MC43YzAtNTEuMS00NC44LTk1LjgtOTYtOTUuOHogbS00NDcuOCAwYy01MS4yIDAtOTYgNDQuNy05NiA5NS44djcwMi42YzAgNTEuMSA0NC44IDk1LjggOTYgOTUuOHM5Ni00NC43IDk2LTk1LjhWMTYwLjdjLTAuMS01MS4xLTQ0LjktOTUuOC05Ni05NS44eiIgcC1pZD0iNDQ2OCIgZmlsbD0iI2ZmZmZmZiI+PC9wYXRoPjwvc3ZnPg==") no-repeat center; } .it-player-wrap .box { flex: 1; } .it-player-wrap .box .info { font-family: PingFang-SC-Regular; font-size: 12px; color: #A8A8A8; text-align: left; line-height: 24px; margin: 0; } .it-player-wrap .box .info .size { display: inline-block; margin-right: 15px; } .it-player-wrap .progress-wrap { position: relative; margin-top: 15px; display: flex; flex-direction: row; align-items: center; } .it-player-wrap .progress-line,.it-player-wrap .progress-line-inner { position: absolute; height: 6px; width: 100%; background: #DDECFF; border-radius: 8.5px; } .it-player-wrap .progress-line-inner { background: #4C83E5 !important; } .it-player-wrap .progress-button { position: absolute; width: 50px; height: 20px; background: #4C83E5; box-shadow: 0 2px 4px 0 #A0C2FF; border-radius: 10px; top: -10px; font-family: PingFang-SC-Regular; font-size: 12px; color: #FFFFFF; text-align: center; line-height: 20px; cursor: pointer; } </style> <style> .crumb{ padding: 10px; margin-bottom: 10px; border-bottom: 1px solid rgba(238,238,238,0.4); } .crumb p{ width: 1200px; margin: 0 auto; } .newul{ line-height: 25px; } .new-item{ padding: 5px; display: block; width: 250px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } #doc-content img{ margin:none; display:initial; } .syntaxhighlighter{ width:890px; } .syntaxhighlighter td.code .line{ white-space: nowrap; } .syntaxhighlighter td.code .container{ width:840px!important; } .syntaxhighlighter td.code{ overflow: scroll!important; } </style> <div class="crumb"> <p> <a href="http://blog.itpub.net/" rel="nofollow">首頁</a> > <a href="http://blog.itpub.net/appdevelop/" rel="nofollow">應用開發</a> > <a href="http://blog.itpub.net/itother/" rel="nofollow">IT綜合</a> > <a rel="nofollow">微前端(Micro Frontend ) 落地實施的一些具體例子</a> </p> </div> <!--main部分開始--> <div class="blog-main clearfix w1200"> <div class="preview-wrap"> <div class="preview-header"> <h1 class="preview-title ">微前端(Micro Frontend ) 落地實施的一些具體例子 </h1> <div class="mess"> <span class="label label-original">原創</span> <span style="margin: auto 10px auto 0px"><a href="http://blog.itpub.net/itother/" rel="nofollow">IT綜合</a></span> <span>作者：<a href="http://blog.itpub.net/24475491/" rel="nofollow">i042416</a></span> <span>時間：2021-07-29 15:10:49</span> <span class="dian"></span> <span class="icon-see"></span> <span class="dian"></span> <span class="icon-comment">0</span> <!--博主本人和管理員 顯示 開始--> <i class="superman"><a href="javascript:;" mid="2784083" onclick="blogObj.delDraft($(this))" rel="nofollow">刪除</a></i> <i class="superman"><a href="http://blog.itpub.net/blog/post/2784083/" rel="nofollow">編輯</a></i> <!--博主本人和管理員 顯示 結束--> </div> </div> <div class="preview-body windowH"> <div class="preview-main"> <div id="doc-content" style="padding: 0px;"> <textarea style="display: none">前文[微前端概述(Micro Frontends) 以及相比單體應用，微前端能帶來什麼好處](https://jerry.blog.csdn.net/article/details/119190124) 簡單介紹了微前端的概念，本文來看一個具體的應用例子。 [原文地址](https://martinfowler.com/articles/micro-frontends.html) 想象一個網站，客戶可以在其中訂購外賣食品。從表面上看，這是一個相當簡單的概念，但如果你想做得好，還有驚人的細節： * 應該有一個登陸頁面，客戶可以在其中瀏覽和搜尋餐館。 餐廳應該可以透過任意數量的屬性進行搜尋和過濾，包括價格、美食或客戶之前訂購的東西 * 每家餐廳都需要自己的頁面來顯示其選單項，並允許客戶選擇他們想吃的東西，包括折扣、餐飲優惠和特殊要求 * 客戶應該有一個個人資料頁面，他們可以在其中檢視他們的訂單歷史記錄、跟蹤交付和自定義他們的付款選項  每個頁面都有足夠的複雜性，我們可以輕鬆地證明每個頁面都有一個專門的團隊，並且每個團隊都應該能夠獨立於所有其他團隊在他們的頁面上工作。 他們應該能夠開發、測試、部署和維護他們的程式碼，而不必擔心與其他團隊發生衝突或協調。 但是，我們的客戶仍然應該看到一個無縫的網站。 在本文的其餘部分，我們將在需要示例程式碼或場景的任何地方使用此示例應用程式。 # Integration approaches 鑑於上面相當鬆散的定義，有許多方法可以合理地稱為微前端。 在本節中，我們將展示一些示例並討論它們的權衡。 所有這些方法都有一個相當自然的架構——通常應用程式中的每個頁面都有一個微前端，並且有一個容器應用程式，它： * 呈現常見的頁面元素，例如頁首和頁尾 * 解決跨領域問題，如身份驗證和導航 * 將各種微前端放在頁面上，並告訴每個微前端何時何地渲染自己  # Server-side template composition 我們從一種絕對不新穎的前端開發方法開始——用多個模板或片段在伺服器上渲染 HTML。 我們有一個 index.html ，它包含所有常見的頁面元素，然後使用伺服器端包含從片段 HTML 檔案中插入特定於頁面的內容： ```html <meta charset="utf-8"> <title>Feed me</title> <h1>Feed me</h1> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="renderer" content="webkit"> <title>微前端(Micro Frontend ) 落地實施的一些具體例子_ITPUB部落格</title> <meta name="keywords" content="應用開發,IT綜合"> <meta name="description" content="前文微前端概述(Micro Frontends) 以及相比單體應用，微前端能帶來什麼好處 簡單介紹了微前端的概念，本文來看一個具體的應用例子。 原文地址 想象一個網站，客戶可以在其中訂購外賣食品。從表面上看，這是一個相當簡單的概念，但如果你想做得好，還有驚人的細節： 應該有一個登陸頁面，客戶可以在其中瀏覽和搜尋餐館。 餐廳應該可以透過任意數量的屬性進行搜尋和過濾，包括價格、美食或客戶之前ITPUB部落格每天千篇餘篇博文新資訊，40多萬活躍博主，為IT技術人提供全面的IT資訊和交流互動的IT部落格平臺-中國專業的IT技術ITPUB部落格。"> <link rel="stylesheet" href="http://blog.itpub.net/layui/css/layui.css?v234"> <link rel="stylesheet" href="http://blog.itpub.net/css/base.css?v1.5"> <link rel="stylesheet" href="http://blog.itpub.net/css/zhuanlan.css?v=1.3"> <!--[if lt IE 9]> <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script> <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script> <![endif]--> <div></div> <div></div> <div></div> <div></div> <!--header部分開始--> <div class="blog-header"> <div class="w1200"> <a href="http://blog.itpub.net/" class="fl" rel="nofollow"><h1 class="logo">ITPub部落格</h1></a> <div class="nav fl"> <a href="http://www.itpub.net/" rel="nofollow">首頁</a> <a href="http://blog.itpub.net/" rel="nofollow">部落格</a> <a href="http://blog.itpub.net/column" rel="nofollow">專欄</a> <a href="http://edu.itpub.net/" rel="nofollow">學院</a> <a href="http://www.itpub.net/forum.php" rel="nofollow">社群</a> <a href="https://z.itpub.net/" rel="nofollow">技術棧</a> </div> <div class="fr"> <form action="http://blog.itpub.net/search/blog/" class="layui-form blog-search-wrap fl"> <input type="hidden" name="type" value="blog"> <input placeholder="搜尋" type="text" class="layui-input" name="keyword"> <button class="search-btn icon-blog"></button> </form> <a href="http://blog.itpub.net/blog/post/" class="layui-btn layui-btn-primary fl mlr30" target="_blank" rel="nofollow">發博</a> <!--登入前--> <div class="fl head-name" id="u_info"> </div> </div> </div> </div> <!--header部分結束--> <link rel="stylesheet" href="http://blog.itpub.net/markdown/css/editormd.css"> <link rel="stylesheet" href="http://blog.itpub.net/markdown/css/editormd.min.css"> <link rel="stylesheet" href="http://blog.itpub.net/markdown/css/editormd.preview.min.css"> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <link href="http://blog.itpub.net/ueditor/third-party/SyntaxHighlighter/shCoreDefault.css" rel="stylesheet" type="text/css"> <div></div> <link rel="stylesheet" href="http://g.alicdn.com/de/prismplayer/2.6.0/skins/default/aliplayer-min.css"> <div></div> <div></div> <div></div> <div></div> <div></div> <style> .code .container > textarea{ height:100%; } .translate{color: #9fa3a7 !important;font-size:12px !important;} .translate a{font-size:12px !important;color:#9fa3a7 !important;} .translate a:hover {font-size:12px !important;color:#f15142 !important;} .newslist{padding:10px 5px;height:20px !important;line-height:20px;overflow:hidden;text-overflow: ellipsis;white-space: nowrap;border-bottom:1px solid #eee} .fake-video-btn:hover{ cursor: pointer; border-style: solid; border-width: 2px; border-radius: 63px; border-color: #00c1de; } .it-player-wrap { display: flex; flex-direction: row; box-sizing: border-box; padding: 5px; margin-bottom: 20px; background: #FBFBFB; border: 1px solid #EFEFEF; border-radius: 4px; } .it-player-wrap .control { width: 50px; height: 50px; background-color: #57a5f2; margin-right: 15px; border-radius: 50%; } .it-player-wrap .control .play,.it-player-wrap .control .pause { background-size: 30px !important; color: #ffffff; width: 100%; height: 100%; } .it-player-wrap .control .play { background: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/PjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+PHN2ZyB0PSIxNTU5NjM3ODcxMTQ0IiBjbGFzcz0iaWNvbiIgc3R5bGU9IiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHAtaWQ9IjYwMjkiIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iMjAwIiBoZWlnaHQ9IjIwMCI+PGRlZnM+PHN0eWxlIHR5cGU9InRleHQvY3NzIj48L3N0eWxlPjwvZGVmcz48cGF0aCBkPSJNOTUzLjQ0NTA2NSA2MDguMjkwNzI0TDM1MC4yOTkyMSA5ODAuNjM0MjExQzI1Ni42NDExNTEgMTAzOC40NTUyNjMgMTgwLjY5MDc4OSA5OTcuNzk5ODM2IDE4MC42OTA3ODkgODkxLjkxNTAzM1YxMTUuNDg2NzExQzE4MC42OTA3ODkgOC42MzgyMjQgMjU2LjIxOTUzOS0zMS4yOTQ0NCAzNTAuMjM4OTggMjYuNzY3NTM0bDYwMy4yNjYzMTUgMzcyLjIyMzAyNmM5My42NTgwNTkgNTcuODIxMDUzIDk0LjA3OTY3MSAxNTEuMjM4MTkxIDAgMjA5LjMwMDE2NHoiIHAtaWQ9IjYwMzAiIGZpbGw9IiNmZmZmZmYiPjwvcGF0aD48L3N2Zz4=") no-repeat center; } .it-player-wrap .control .pause { background: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/PjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+PHN2ZyB0PSIxNTU5NjM3NzQ2MzAwIiBjbGFzcz0iaWNvbiIgc3R5bGU9IiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHAtaWQ9IjQ0NjciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iMjAwIiBoZWlnaHQ9IjIwMCI+PGRlZnM+PHN0eWxlIHR5cGU9InRleHQvY3NzIj48L3N0eWxlPjwvZGVmcz48cGF0aCBkPSJNNzM1LjkgNjQuOWMtNTEuMiAwLTk2IDQ0LjctOTYgOTUuOHY3MDIuNmMwIDUxLjEgNDQuOCA5NS44IDk2IDk1LjhzOTYtNDQuNyA5Ni05NS44VjE2MC43YzAtNTEuMS00NC44LTk1LjgtOTYtOTUuOHogbS00NDcuOCAwYy01MS4yIDAtOTYgNDQuNy05NiA5NS44djcwMi42YzAgNTEuMSA0NC44IDk1LjggOTYgOTUuOHM5Ni00NC43IDk2LTk1LjhWMTYwLjdjLTAuMS01MS4xLTQ0LjktOTUuOC05Ni05NS44eiIgcC1pZD0iNDQ2OCIgZmlsbD0iI2ZmZmZmZiI+PC9wYXRoPjwvc3ZnPg==") no-repeat center; } .it-player-wrap .box { flex: 1; } .it-player-wrap .box .info { font-family: PingFang-SC-Regular; font-size: 12px; color: #A8A8A8; text-align: left; line-height: 24px; margin: 0; } .it-player-wrap .box .info .size { display: inline-block; margin-right: 15px; } .it-player-wrap .progress-wrap { position: relative; margin-top: 15px; display: flex; flex-direction: row; align-items: center; } .it-player-wrap .progress-line,.it-player-wrap .progress-line-inner { position: absolute; height: 6px; width: 100%; background: #DDECFF; border-radius: 8.5px; } .it-player-wrap .progress-line-inner { background: #4C83E5 !important; } .it-player-wrap .progress-button { position: absolute; width: 50px; height: 20px; background: #4C83E5; box-shadow: 0 2px 4px 0 #A0C2FF; border-radius: 10px; top: -10px; font-family: PingFang-SC-Regular; font-size: 12px; color: #FFFFFF; text-align: center; line-height: 20px; cursor: pointer; } </style> <style> .crumb{ padding: 10px; margin-bottom: 10px; border-bottom: 1px solid rgba(238,238,238,0.4); } .crumb p{ width: 1200px; margin: 0 auto; } .newul{ line-height: 25px; } .new-item{ padding: 5px; display: block; width: 250px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } #doc-content img{ margin:none; display:initial; } .syntaxhighlighter{ width:890px; } .syntaxhighlighter td.code .line{ white-space: nowrap; } .syntaxhighlighter td.code .container{ width:840px!important; } .syntaxhighlighter td.code{ overflow: scroll!important; } </style> <div class="crumb"> <p> <a href="http://blog.itpub.net/" rel="nofollow">首頁</a> > <a href="http://blog.itpub.net/appdevelop/" rel="nofollow">應用開發</a> > <a href="http://blog.itpub.net/itother/" rel="nofollow">IT綜合</a> > <a rel="nofollow">微前端(Micro Frontend ) 落地實施的一些具體例子</a> </p> </div> <!--main部分開始--> <div class="blog-main clearfix w1200"> <div class="preview-wrap"> <div class="preview-header"> <h1 class="preview-title ">微前端(Micro Frontend ) 落地實施的一些具體例子 </h1> <div class="mess"> <span class="label label-original">原創</span> <span style="margin: auto 10px auto 0px"><a href="http://blog.itpub.net/itother/" rel="nofollow">IT綜合</a></span> <span>作者：<a href="http://blog.itpub.net/24475491/" rel="nofollow">i042416</a></span> <span>時間：2021-07-29 15:10:49</span> <span class="dian"></span> <span class="icon-see"></span> <span class="dian"></span> <span class="icon-comment">0</span> <!--博主本人和管理員 顯示 開始--> <i class="superman"><a href="javascript:;" mid="2784083" onclick="blogObj.delDraft($(this))" rel="nofollow">刪除</a></i> <i class="superman"><a href="http://blog.itpub.net/blog/post/2784083/" rel="nofollow">編輯</a></i> <!--博主本人和管理員 顯示 結束--> </div> </div> <div class="preview-body windowH"> <div class="preview-main"> <div id="doc-content" style="padding: 0px;"> <textarea style="display: none">前文[微前端概述(Micro Frontends) 以及相比單體應用，微前端能帶來什麼好處](https://jerry.blog.csdn.net/article/details/119190124) 簡單介紹了微前端的概念，本文來看一個具體的應用例子。 [原文地址](https://martinfowler.com/articles/micro-frontends.html) 想象一個網站，客戶可以在其中訂購外賣食品。從表面上看，這是一個相當簡單的概念，但如果你想做得好，還有驚人的細節： * 應該有一個登陸頁面，客戶可以在其中瀏覽和搜尋餐館。 餐廳應該可以透過任意數量的屬性進行搜尋和過濾，包括價格、美食或客戶之前訂購的東西 * 每家餐廳都需要自己的頁面來顯示其選單項，並允許客戶選擇他們想吃的東西，包括折扣、餐飲優惠和特殊要求 * 客戶應該有一個個人資料頁面，他們可以在其中檢視他們的訂單歷史記錄、跟蹤交付和自定義他們的付款選項  每個頁面都有足夠的複雜性，我們可以輕鬆地證明每個頁面都有一個專門的團隊，並且每個團隊都應該能夠獨立於所有其他團隊在他們的頁面上工作。 他們應該能夠開發、測試、部署和維護他們的程式碼，而不必擔心與其他團隊發生衝突或協調。 但是，我們的客戶仍然應該看到一個無縫的網站。 在本文的其餘部分，我們將在需要示例程式碼或場景的任何地方使用此示例應用程式。 # Integration approaches 鑑於上面相當鬆散的定義，有許多方法可以合理地稱為微前端。 在本節中，我們將展示一些示例並討論它們的權衡。 所有這些方法都有一個相當自然的架構——通常應用程式中的每個頁面都有一個微前端，並且有一個容器應用程式，它： * 呈現常見的頁面元素，例如頁首和頁尾 * 解決跨領域問題，如身份驗證和導航 * 將各種微前端放在頁面上，並告訴每個微前端何時何地渲染自己  # Server-side template composition 我們從一種絕對不新穎的前端開發方法開始——用多個模板或片段在伺服器上渲染 HTML。 我們有一個 index.html ，它包含所有常見的頁面元素，然後使用伺服器端包含從片段 HTML 檔案中插入特定於頁面的內容： ```html <meta charset="utf-8"> <title>Feed me</title> <h1>Feed me</h1> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="renderer" content="webkit"> <title>微前端(Micro Frontend ) 落地實施的一些具體例子_ITPUB部落格</title> <meta name="keywords" content="應用開發,IT綜合"> <meta name="description" content="前文微前端概述(Micro Frontends) 以及相比單體應用，微前端能帶來什麼好處 簡單介紹了微前端的概念，本文來看一個具體的應用例子。 原文地址 想象一個網站，客戶可以在其中訂購外賣食品。從表面上看，這是一個相當簡單的概念，但如果你想做得好，還有驚人的細節： 應該有一個登陸頁面，客戶可以在其中瀏覽和搜尋餐館。 餐廳應該可以透過任意數量的屬性進行搜尋和過濾，包括價格、美食或客戶之前ITPUB部落格每天千篇餘篇博文新資訊，40多萬活躍博主，為IT技術人提供全面的IT資訊和交流互動的IT部落格平臺-中國專業的IT技術ITPUB部落格。"> <link rel="stylesheet" href="http://blog.itpub.net/layui/css/layui.css?v234"> <link rel="stylesheet" href="http://blog.itpub.net/css/base.css?v1.5"> <link rel="stylesheet" href="http://blog.itpub.net/css/zhuanlan.css?v=1.3"> <!--[if lt IE 9]> <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script> <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script> <![endif]--> <div></div> <div></div> <div></div> <div></div> <!--header部分開始--> <div class="blog-header"> <div class="w1200"> <a href="http://blog.itpub.net/" class="fl" rel="nofollow"><h1 class="logo">ITPub部落格</h1></a> <div class="nav fl"> <a href="http://www.itpub.net/" rel="nofollow">首頁</a> <a href="http://blog.itpub.net/" rel="nofollow">部落格</a> <a href="http://blog.itpub.net/column" rel="nofollow">專欄</a> <a href="http://edu.itpub.net/" rel="nofollow">學院</a> <a href="http://www.itpub.net/forum.php" rel="nofollow">社群</a> <a href="https://z.itpub.net/" rel="nofollow">技術棧</a> </div> <div class="fr"> <form action="http://blog.itpub.net/search/blog/" class="layui-form blog-search-wrap fl"> <input type="hidden" name="type" value="blog"> <input placeholder="搜尋" type="text" class="layui-input" name="keyword"> <button class="search-btn icon-blog"></button> </form> <a href="http://blog.itpub.net/blog/post/" class="layui-btn layui-btn-primary fl mlr30" target="_blank" rel="nofollow">發博</a> <!--登入前--> <div class="fl head-name" id="u_info"> </div> </div> </div> </div> <!--header部分結束--> <link rel="stylesheet" href="http://blog.itpub.net/markdown/css/editormd.css"> <link rel="stylesheet" href="http://blog.itpub.net/markdown/css/editormd.min.css"> <link rel="stylesheet" href="http://blog.itpub.net/markdown/css/editormd.preview.min.css"> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <link href="http://blog.itpub.net/ueditor/third-party/SyntaxHighlighter/shCoreDefault.css" rel="stylesheet" type="text/css"> <div></div> <link rel="stylesheet" href="http://g.alicdn.com/de/prismplayer/2.6.0/skins/default/aliplayer-min.css"> <div></div> <div></div> <div></div> <div></div> <div></div> <style> .code .container > textarea{ height:100%; } .translate{color: #9fa3a7 !important;font-size:12px !important;} .translate a{font-size:12px !important;color:#9fa3a7 !important;} .translate a:hover {font-size:12px !important;color:#f15142 !important;} .newslist{padding:10px 5px;height:20px !important;line-height:20px;overflow:hidden;text-overflow: ellipsis;white-space: nowrap;border-bottom:1px solid #eee} .fake-video-btn:hover{ cursor: pointer; border-style: solid; border-width: 2px; border-radius: 63px; border-color: #00c1de; } .it-player-wrap { display: flex; flex-direction: row; box-sizing: border-box; padding: 5px; margin-bottom: 20px; background: #FBFBFB; border: 1px solid #EFEFEF; border-radius: 4px; } .it-player-wrap .control { width: 50px; height: 50px; background-color: #57a5f2; margin-right: 15px; border-radius: 50%; } .it-player-wrap .control .play,.it-player-wrap .control .pause { background-size: 30px !important; color: #ffffff; width: 100%; height: 100%; } .it-player-wrap .control .play { background: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/PjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+PHN2ZyB0PSIxNTU5NjM3ODcxMTQ0IiBjbGFzcz0iaWNvbiIgc3R5bGU9IiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHAtaWQ9IjYwMjkiIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iMjAwIiBoZWlnaHQ9IjIwMCI+PGRlZnM+PHN0eWxlIHR5cGU9InRleHQvY3NzIj48L3N0eWxlPjwvZGVmcz48cGF0aCBkPSJNOTUzLjQ0NTA2NSA2MDguMjkwNzI0TDM1MC4yOTkyMSA5ODAuNjM0MjExQzI1Ni42NDExNTEgMTAzOC40NTUyNjMgMTgwLjY5MDc4OSA5OTcuNzk5ODM2IDE4MC42OTA3ODkgODkxLjkxNTAzM1YxMTUuNDg2NzExQzE4MC42OTA3ODkgOC42MzgyMjQgMjU2LjIxOTUzOS0zMS4yOTQ0NCAzNTAuMjM4OTggMjYuNzY3NTM0bDYwMy4yNjYzMTUgMzcyLjIyMzAyNmM5My42NTgwNTkgNTcuODIxMDUzIDk0LjA3OTY3MSAxNTEuMjM4MTkxIDAgMjA5LjMwMDE2NHoiIHAtaWQ9IjYwMzAiIGZpbGw9IiNmZmZmZmYiPjwvcGF0aD48L3N2Zz4=") no-repeat center; } .it-player-wrap .control .pause { background: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/PjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+PHN2ZyB0PSIxNTU5NjM3NzQ2MzAwIiBjbGFzcz0iaWNvbiIgc3R5bGU9IiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHAtaWQ9IjQ0NjciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iMjAwIiBoZWlnaHQ9IjIwMCI+PGRlZnM+PHN0eWxlIHR5cGU9InRleHQvY3NzIj48L3N0eWxlPjwvZGVmcz48cGF0aCBkPSJNNzM1LjkgNjQuOWMtNTEuMiAwLTk2IDQ0LjctOTYgOTUuOHY3MDIuNmMwIDUxLjEgNDQuOCA5NS44IDk2IDk1LjhzOTYtNDQuNyA5Ni05NS44VjE2MC43YzAtNTEuMS00NC44LTk1LjgtOTYtOTUuOHogbS00NDcuOCAwYy01MS4yIDAtOTYgNDQuNy05NiA5NS44djcwMi42YzAgNTEuMSA0NC44IDk1LjggOTYgOTUuOHM5Ni00NC43IDk2LTk1LjhWMTYwLjdjLTAuMS01MS4xLTQ0LjktOTUuOC05Ni05NS44eiIgcC1pZD0iNDQ2OCIgZmlsbD0iI2ZmZmZmZiI+PC9wYXRoPjwvc3ZnPg==") no-repeat center; } .it-player-wrap .box { flex: 1; } .it-player-wrap .box .info { font-family: PingFang-SC-Regular; font-size: 12px; color: #A8A8A8; text-align: left; line-height: 24px; margin: 0; } .it-player-wrap .box .info .size { display: inline-block; margin-right: 15px; } .it-player-wrap .progress-wrap { position: relative; margin-top: 15px; display: flex; flex-direction: row; align-items: center; } .it-player-wrap .progress-line,.it-player-wrap .progress-line-inner { position: absolute; height: 6px; width: 100%; background: #DDECFF; border-radius: 8.5px; } .it-player-wrap .progress-line-inner { background: #4C83E5 !important; } .it-player-wrap .progress-button { position: absolute; width: 50px; height: 20px; background: #4C83E5; box-shadow: 0 2px 4px 0 #A0C2FF; border-radius: 10px; top: -10px; font-family: PingFang-SC-Regular; font-size: 12px; color: #FFFFFF; text-align: center; line-height: 20px; cursor: pointer; } </style> <style> .crumb{ padding: 10px; margin-bottom: 10px; border-bottom: 1px solid rgba(238,238,238,0.4); } .crumb p{ width: 1200px; margin: 0 auto; } .newul{ line-height: 25px; } .new-item{ padding: 5px; display: block; width: 250px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } #doc-content img{ margin:none; display:initial; } .syntaxhighlighter{ width:890px; } .syntaxhighlighter td.code .line{ white-space: nowrap; } .syntaxhighlighter td.code .container{ width:840px!important; } .syntaxhighlighter td.code{ overflow: scroll!important; } </style> <div class="crumb"> <p> <a href="http://blog.itpub.net/" rel="nofollow">首頁</a> > <a href="http://blog.itpub.net/appdevelop/" rel="nofollow">應用開發</a> > <a href="http://blog.itpub.net/itother/" rel="nofollow">IT綜合</a> > <a rel="nofollow">微前端(Micro Frontend ) 落地實施的一些具體例子</a> </p> </div> <!--main部分開始--> <div class="blog-main clearfix w1200"> <div class="preview-wrap"> <div class="preview-header"> <h1 class="preview-title ">微前端(Micro Frontend ) 落地實施的一些具體例子 </h1> <div class="mess"> <span class="label label-original">原創</span> <span style="margin: auto 10px auto 0px"><a href="http://blog.itpub.net/itother/" rel="nofollow">IT綜合</a></span> <span>作者：<a href="http://blog.itpub.net/24475491/" rel="nofollow">i042416</a></span> <span>時間：2021-07-29 15:10:49</span> <span class="dian"></span> <span class="icon-see"></span> <span class="dian"></span> <span class="icon-comment">0</span> <!--博主本人和管理員 顯示 開始--> <i class="superman"><a href="javascript:;" mid="2784083" onclick="blogObj.delDraft($(this))" rel="nofollow">刪除</a></i> <i class="superman"><a href="http://blog.itpub.net/blog/post/2784083/" rel="nofollow">編輯</a></i> <!--博主本人和管理員 顯示 結束--> </div> </div> <div class="preview-body windowH"> <div class="preview-main"> <div id="doc-content" style="padding: 0px;"> <textarea style="display: none">前文[微前端概述(Micro Frontends) 以及相比單體應用，微前端能帶來什麼好處](https://jerry.blog.csdn.net/article/details/119190124) 簡單介紹了微前端的概念，本文來看一個具體的應用例子。 [原文地址](https://martinfowler.com/articles/micro-frontends.html) 想象一個網站，客戶可以在其中訂購外賣食品。從表面上看，這是一個相當簡單的概念，但如果你想做得好，還有驚人的細節： * 應該有一個登陸頁面，客戶可以在其中瀏覽和搜尋餐館。 餐廳應該可以透過任意數量的屬性進行搜尋和過濾，包括價格、美食或客戶之前訂購的東西 * 每家餐廳都需要自己的頁面來顯示其選單項，並允許客戶選擇他們想吃的東西，包括折扣、餐飲優惠和特殊要求 * 客戶應該有一個個人資料頁面，他們可以在其中檢視他們的訂單歷史記錄、跟蹤交付和自定義他們的付款選項  每個頁面都有足夠的複雜性，我們可以輕鬆地證明每個頁面都有一個專門的團隊，並且每個團隊都應該能夠獨立於所有其他團隊在他們的頁面上工作。 他們應該能夠開發、測試、部署和維護他們的程式碼，而不必擔心與其他團隊發生衝突或協調。 但是，我們的客戶仍然應該看到一個無縫的網站。 在本文的其餘部分，我們將在需要示例程式碼或場景的任何地方使用此示例應用程式。 # Integration approaches 鑑於上面相當鬆散的定義，有許多方法可以合理地稱為微前端。 在本節中，我們將展示一些示例並討論它們的權衡。 所有這些方法都有一個相當自然的架構——通常應用程式中的每個頁面都有一個微前端，並且有一個容器應用程式，它： * 呈現常見的頁面元素，例如頁首和頁尾 * 解決跨領域問題，如身份驗證和導航 * 將各種微前端放在頁面上，並告訴每個微前端何時何地渲染自己  # Server-side template composition 我們從一種絕對不新穎的前端開發方法開始——用多個模板或片段在伺服器上渲染 HTML。 我們有一個 index.html ，它包含所有常見的頁面元素，然後使用伺服器端包含從片段 HTML 檔案中插入特定於頁面的內容： ```html <meta charset="utf-8"> <title>Feed me</title> <h1>Feed me</h1> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="renderer" content="webkit"> <title>微前端(Micro Frontend ) 落地實施的一些具體例子_ITPUB部落格</title> <meta name="keywords" content="應用開發,IT綜合"> <meta name="description" content="前文微前端概述(Micro Frontends) 以及相比單體應用，微前端能帶來什麼好處 簡單介紹了微前端的概念，本文來看一個具體的應用例子。 原文地址 想象一個網站，客戶可以在其中訂購外賣食品。從表面上看，這是一個相當簡單的概念，但如果你想做得好，還有驚人的細節： 應該有一個登陸頁面，客戶可以在其中瀏覽和搜尋餐館。 餐廳應該可以透過任意數量的屬性進行搜尋和過濾，包括價格、美食或客戶之前ITPUB部落格每天千篇餘篇博文新資訊，40多萬活躍博主，為IT技術人提供全面的IT資訊和交流互動的IT部落格平臺-中國專業的IT技術ITPUB部落格。"> <link rel="stylesheet" href="http://blog.itpub.net/layui/css/layui.css?v234"> <link rel="stylesheet" href="http://blog.itpub.net/css/base.css?v1.5"> <link rel="stylesheet" href="http://blog.itpub.net/css/zhuanlan.css?v=1.3"> <!--[if lt IE 9]> <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script> <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script> <![endif]--> <div></div> <div></div> <div></div> <div></div> <!--header部分開始--> <div class="blog-header"> <div class="w1200"> <a href="http://blog.itpub.net/" class="fl" rel="nofollow"><h1 class="logo">ITPub部落格</h1></a> <div class="nav fl"> <a href="http://www.itpub.net/" rel="nofollow">首頁</a> <a href="http://blog.itpub.net/" rel="nofollow">部落格</a> <a href="http://blog.itpub.net/column" rel="nofollow">專欄</a> <a href="http://edu.itpub.net/" rel="nofollow">學院</a> <a href="http://www.itpub.net/forum.php" rel="nofollow">社群</a> <a href="https://z.itpub.net/" rel="nofollow">技術棧</a> </div> <div class="fr"> <form action="http://blog.itpub.net/search/blog/" class="layui-form blog-search-wrap fl"> <input type="hidden" name="type" value="blog"> <input placeholder="搜尋" type="text" class="layui-input" name="keyword"> <button class="search-btn icon-blog"></button> </form> <a href="http://blog.itpub.net/blog/post/" class="layui-btn layui-btn-primary fl mlr30" target="_blank" rel="nofollow">發博</a> <!--登入前--> <div class="fl head-name" id="u_info"> </div> </div> </div> </div> <!--header部分結束--> <link rel="stylesheet" href="http://blog.itpub.net/markdown/css/editormd.css"> <link rel="stylesheet" href="http://blog.itpub.net/markdown/css/editormd.min.css"> <link rel="stylesheet" href="http://blog.itpub.net/markdown/css/editormd.preview.min.css"> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <link href="http://blog.itpub.net/ueditor/third-party/SyntaxHighlighter/shCoreDefault.css" rel="stylesheet" type="text/css"> <div></div> <link rel="stylesheet" href="http://g.alicdn.com/de/prismplayer/2.6.0/skins/default/aliplayer-min.css"> <div></div> <div></div> <div></div> <div></div> <div></div> <style> .code .container > textarea{ height:100%; } .translate{color: #9fa3a7 !important;font-size:12px !important;} .translate a{font-size:12px !important;color:#9fa3a7 !important;} .translate a:hover {font-size:12px !important;color:#f15142 !important;} .newslist{padding:10px 5px;height:20px !important;line-height:20px;overflow:hidden;text-overflow: ellipsis;white-space: nowrap;border-bottom:1px solid #eee} .fake-video-btn:hover{ cursor: pointer; border-style: solid; border-width: 2px; border-radius: 63px; border-color: #00c1de; } .it-player-wrap { display: flex; flex-direction: row; box-sizing: border-box; padding: 5px; margin-bottom: 20px; background: #FBFBFB; border: 1px solid #EFEFEF; border-radius: 4px; } .it-player-wrap .control { width: 50px; height: 50px; background-color: #57a5f2; margin-right: 15px; border-radius: 50%; } .it-player-wrap .control .play,.it-player-wrap .control .pause { background-size: 30px !important; color: #ffffff; width: 100%; height: 100%; } .it-player-wrap .control .play { background: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/PjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+PHN2ZyB0PSIxNTU5NjM3ODcxMTQ0IiBjbGFzcz0iaWNvbiIgc3R5bGU9IiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHAtaWQ9IjYwMjkiIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iMjAwIiBoZWlnaHQ9IjIwMCI+PGRlZnM+PHN0eWxlIHR5cGU9InRleHQvY3NzIj48L3N0eWxlPjwvZGVmcz48cGF0aCBkPSJNOTUzLjQ0NTA2NSA2MDguMjkwNzI0TDM1MC4yOTkyMSA5ODAuNjM0MjExQzI1Ni42NDExNTEgMTAzOC40NTUyNjMgMTgwLjY5MDc4OSA5OTcuNzk5ODM2IDE4MC42OTA3ODkgODkxLjkxNTAzM1YxMTUuNDg2NzExQzE4MC42OTA3ODkgOC42MzgyMjQgMjU2LjIxOTUzOS0zMS4yOTQ0NCAzNTAuMjM4OTggMjYuNzY3NTM0bDYwMy4yNjYzMTUgMzcyLjIyMzAyNmM5My42NTgwNTkgNTcuODIxMDUzIDk0LjA3OTY3MSAxNTEuMjM4MTkxIDAgMjA5LjMwMDE2NHoiIHAtaWQ9IjYwMzAiIGZpbGw9IiNmZmZmZmYiPjwvcGF0aD48L3N2Zz4=") no-repeat center; } .it-player-wrap .control .pause { background: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/PjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+PHN2ZyB0PSIxNTU5NjM3NzQ2MzAwIiBjbGFzcz0iaWNvbiIgc3R5bGU9IiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHAtaWQ9IjQ0NjciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iMjAwIiBoZWlnaHQ9IjIwMCI+PGRlZnM+PHN0eWxlIHR5cGU9InRleHQvY3NzIj48L3N0eWxlPjwvZGVmcz48cGF0aCBkPSJNNzM1LjkgNjQuOWMtNTEuMiAwLTk2IDQ0LjctOTYgOTUuOHY3MDIuNmMwIDUxLjEgNDQuOCA5NS44IDk2IDk1LjhzOTYtNDQuNyA5Ni05NS44VjE2MC43YzAtNTEuMS00NC44LTk1LjgtOTYtOTUuOHogbS00NDcuOCAwYy01MS4yIDAtOTYgNDQuNy05NiA5NS44djcwMi42YzAgNTEuMSA0NC44IDk1LjggOTYgOTUuOHM5Ni00NC43IDk2LTk1LjhWMTYwLjdjLTAuMS01MS4xLTQ0LjktOTUuOC05Ni05NS44eiIgcC1pZD0iNDQ2OCIgZmlsbD0iI2ZmZmZmZiI+PC9wYXRoPjwvc3ZnPg==") no-repeat center; } .it-player-wrap .box { flex: 1; } .it-player-wrap .box .info { font-family: PingFang-SC-Regular; font-size: 12px; color: #A8A8A8; text-align: left; line-height: 24px; margin: 0; } .it-player-wrap .box .info .size { display: inline-block; margin-right: 15px; } .it-player-wrap .progress-wrap { position: relative; margin-top: 15px; display: flex; flex-direction: row; align-items: center; } .it-player-wrap .progress-line,.it-player-wrap .progress-line-inner { position: absolute; height: 6px; width: 100%; background: #DDECFF; border-radius: 8.5px; } .it-player-wrap .progress-line-inner { background: #4C83E5 !important; } .it-player-wrap .progress-button { position: absolute; width: 50px; height: 20px; background: #4C83E5; box-shadow: 0 2px 4px 0 #A0C2FF; border-radius: 10px; top: -10px; font-family: PingFang-SC-Regular; font-size: 12px; color: #FFFFFF; text-align: center; line-height: 20px; cursor: pointer; } </style> <style> .crumb{ padding: 10px; margin-bottom: 10px; border-bottom: 1px solid rgba(238,238,238,0.4); } .crumb p{ width: 1200px; margin: 0 auto; } .newul{ line-height: 25px; } .new-item{ padding: 5px; display: block; width: 250px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } #doc-content img{ margin:none; display:initial; } .syntaxhighlighter{ width:890px; } .syntaxhighlighter td.code .line{ white-space: nowrap; } .syntaxhighlighter td.code .container{ width:840px!important; } .syntaxhighlighter td.code{ overflow: scroll!important; } </style> <div class="crumb"> <p> <a href="http://blog.itpub.net/" rel="nofollow">首頁</a> > <a href="http://blog.itpub.net/appdevelop/" rel="nofollow">應用開發</a> > <a href="http://blog.itpub.net/itother/" rel="nofollow">IT綜合</a> > <a rel="nofollow">微前端(Micro Frontend ) 落地實施的一些具體例子</a> </p> </div> <!--main部分開始--> <div class="blog-main clearfix w1200"> <div class="preview-wrap"> <div class="preview-header"> <h1 class="preview-title ">微前端(Micro Frontend ) 落地實施的一些具體例子 </h1> <div class="mess"> <span class="label label-original">原創</span> <span style="margin: auto 10px auto 0px"><a href="http://blog.itpub.net/itother/" rel="nofollow">IT綜合</a></span> <span>作者：<a href="http://blog.itpub.net/24475491/" rel="nofollow">i042416</a></span> <span>時間：2021-07-29 15:10:49</span> <span class="dian"></span> <span class="icon-see"></span> <span class="dian"></span> <span class="icon-comment">0</span> <!--博主本人和管理員 顯示 開始--> <i class="superman"><a href="javascript:;" mid="2784083" onclick="blogObj.delDraft($(this))" rel="nofollow">刪除</a></i> <i class="superman"><a href="http://blog.itpub.net/blog/post/2784083/" rel="nofollow">編輯</a></i> <!--博主本人和管理員 顯示 結束--> </div> </div> <div class="preview-body windowH"> <div class="preview-main"> <div id="doc-content" style="padding: 0px;"> <textarea style="display: none">前文[微前端概述(Micro Frontends) 以及相比單體應用，微前端能帶來什麼好處](https://jerry.blog.csdn.net/article/details/119190124) 簡單介紹了微前端的概念，本文來看一個具體的應用例子。 [原文地址](https://martinfowler.com/articles/micro-frontends.html) 想象一個網站，客戶可以在其中訂購外賣食品。從表面上看，這是一個相當簡單的概念，但如果你想做得好，還有驚人的細節： * 應該有一個登陸頁面，客戶可以在其中瀏覽和搜尋餐館。 餐廳應該可以透過任意數量的屬性進行搜尋和過濾，包括價格、美食或客戶之前訂購的東西 * 每家餐廳都需要自己的頁面來顯示其選單項，並允許客戶選擇他們想吃的東西，包括折扣、餐飲優惠和特殊要求 * 客戶應該有一個個人資料頁面，他們可以在其中檢視他們的訂單歷史記錄、跟蹤交付和自定義他們的付款選項  每個頁面都有足夠的複雜性，我們可以輕鬆地證明每個頁面都有一個專門的團隊，並且每個團隊都應該能夠獨立於所有其他團隊在他們的頁面上工作。 他們應該能夠開發、測試、部署和維護他們的程式碼，而不必擔心與其他團隊發生衝突或協調。 但是，我們的客戶仍然應該看到一個無縫的網站。 在本文的其餘部分，我們將在需要示例程式碼或場景的任何地方使用此示例應用程式。 # Integration approaches 鑑於上面相當鬆散的定義，有許多方法可以合理地稱為微前端。 在本節中，我們將展示一些示例並討論它們的權衡。 所有這些方法都有一個相當自然的架構——通常應用程式中的每個頁面都有一個微前端，並且有一個容器應用程式，它： * 呈現常見的頁面元素，例如頁首和頁尾 * 解決跨領域問題，如身份驗證和導航 * 將各種微前端放在頁面上，並告訴每個微前端何時何地渲染自己  # Server-side template composition 我們從一種絕對不新穎的前端開發方法開始——用多個模板或片段在伺服器上渲染 HTML。 我們有一個 index.html ，它包含所有常見的頁面元素，然後使用伺服器端包含從片段 HTML 檔案中插入特定於頁面的內容： ```html <meta charset="utf-8"> <title>Feed me</title> <h1>Feed me</h1> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="renderer" content="webkit"> <title>微前端(Micro Frontend ) 落地實施的一些具體例子_ITPUB部落格</title> <meta name="keywords" content="應用開發,IT綜合"> <meta name="description" content="前文微前端概述(Micro Frontends) 以及相比單體應用，微前端能帶來什麼好處 簡單介紹了微前端的概念，本文來看一個具體的應用例子。 原文地址 想象一個網站，客戶可以在其中訂購外賣食品。從表面上看，這是一個相當簡單的概念，但如果你想做得好，還有驚人的細節： 應該有一個登陸頁面，客戶可以在其中瀏覽和搜尋餐館。 餐廳應該可以透過任意數量的屬性進行搜尋和過濾，包括價格、美食或客戶之前ITPUB部落格每天千篇餘篇博文新資訊，40多萬活躍博主，為IT技術人提供全面的IT資訊和交流互動的IT部落格平臺-中國專業的IT技術ITPUB部落格。"> <link rel="stylesheet" href="http://blog.itpub.net/layui/css/layui.css?v234"> <link rel="stylesheet" href="http://blog.itpub.net/css/base.css?v1.5"> <link rel="stylesheet" href="http://blog.itpub.net/css/zhuanlan.css?v=1.3"> <!--[if lt IE 9]> <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script> <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script> <![endif]--> <div></div> <div></div> <div></div> <div></div> <!--header部分開始--> <div class="blog-header"> <div class="w1200"> <a href="http://blog.itpub.net/" class="fl" rel="nofollow"><h1 class="logo">ITPub部落格</h1></a> <div class="nav fl"> <a href="http://www.itpub.net/" rel="nofollow">首頁</a> <a href="http://blog.itpub.net/" rel="nofollow">部落格</a> <a href="http://blog.itpub.net/column" rel="nofollow">專欄</a> <a href="http://edu.itpub.net/" rel="nofollow">學院</a> <a href="http://www.itpub.net/forum.php" rel="nofollow">社群</a> <a href="https://z.itpub.net/" rel="nofollow">技術棧</a> </div> <div class="fr"> <form action="http://blog.itpub.net/search/blog/" class="layui-form blog-search-wrap fl"> <input type="hidden" name="type" value="blog"> <input placeholder="搜尋" type="text" class="layui-input" name="keyword"> <button class="search-btn icon-blog"></button> </form> <a href="http://blog.itpub.net/blog/post/" class="layui-btn layui-btn-primary fl mlr30" target="_blank" rel="nofollow">發博</a> <!--登入前--> <div class="fl head-name" id="u_info"> </div> </div> </div> </div> <!--header部分結束--> <link rel="stylesheet" href="http://blog.itpub.net/markdown/css/editormd.css"> <link rel="stylesheet" href="http://blog.itpub.net/markdown/css/editormd.min.css"> <link rel="stylesheet" href="http://blog.itpub.net/markdown/css/editormd.preview.min.css"> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <link href="http://blog.itpub.net/ueditor/third-party/SyntaxHighlighter/shCoreDefault.css" rel="stylesheet" type="text/css"> <div></div> <link rel="stylesheet" href="http://g.alicdn.com/de/prismplayer/2.6.0/skins/default/aliplayer-min.css"> <div></div> <div></div> <div></div> <div></div> <div></div> <style> .code .container > textarea{ height:100%; } .translate{color: #9fa3a7 !important;font-size:12px !important;} .translate a{font-size:12px !important;color:#9fa3a7 !important;} .translate a:hover {font-size:12px !important;color:#f15142 !important;} .newslist{padding:10px 5px;height:20px !important;line-height:20px;overflow:hidden;text-overflow: ellipsis;white-space: nowrap;border-bottom:1px solid #eee} .fake-video-btn:hover{ cursor: pointer; border-style: solid; border-width: 2px; border-radius: 63px; border-color: #00c1de; } .it-player-wrap { display: flex; flex-direction: row; box-sizing: border-box; padding: 5px; margin-bottom: 20px; background: #FBFBFB; border: 1px solid #EFEFEF; border-radius: 4px; } .it-player-wrap .control { width: 50px; height: 50px; background-color: #57a5f2; margin-right: 15px; border-radius: 50%; } .it-player-wrap .control .play,.it-player-wrap .control .pause { background-size: 30px !important; color: #ffffff; width: 100%; height: 100%; } .it-player-wrap .control .play { background: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/PjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+PHN2ZyB0PSIxNTU5NjM3ODcxMTQ0IiBjbGFzcz0iaWNvbiIgc3R5bGU9IiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHAtaWQ9IjYwMjkiIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iMjAwIiBoZWlnaHQ9IjIwMCI+PGRlZnM+PHN0eWxlIHR5cGU9InRleHQvY3NzIj48L3N0eWxlPjwvZGVmcz48cGF0aCBkPSJNOTUzLjQ0NTA2NSA2MDguMjkwNzI0TDM1MC4yOTkyMSA5ODAuNjM0MjExQzI1Ni42NDExNTEgMTAzOC40NTUyNjMgMTgwLjY5MDc4OSA5OTcuNzk5ODM2IDE4MC42OTA3ODkgODkxLjkxNTAzM1YxMTUuNDg2NzExQzE4MC42OTA3ODkgOC42MzgyMjQgMjU2LjIxOTUzOS0zMS4yOTQ0NCAzNTAuMjM4OTggMjYuNzY3NTM0bDYwMy4yNjYzMTUgMzcyLjIyMzAyNmM5My42NTgwNTkgNTcuODIxMDUzIDk0LjA3OTY3MSAxNTEuMjM4MTkxIDAgMjA5LjMwMDE2NHoiIHAtaWQ9IjYwMzAiIGZpbGw9IiNmZmZmZmYiPjwvcGF0aD48L3N2Zz4=") no-repeat center; } .it-player-wrap .control .pause { background: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/PjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+PHN2ZyB0PSIxNTU5NjM3NzQ2MzAwIiBjbGFzcz0iaWNvbiIgc3R5bGU9IiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHAtaWQ9IjQ0NjciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iMjAwIiBoZWlnaHQ9IjIwMCI+PGRlZnM+PHN0eWxlIHR5cGU9InRleHQvY3NzIj48L3N0eWxlPjwvZGVmcz48cGF0aCBkPSJNNzM1LjkgNjQuOWMtNTEuMiAwLTk2IDQ0LjctOTYgOTUuOHY3MDIuNmMwIDUxLjEgNDQuOCA5NS44IDk2IDk1LjhzOTYtNDQuNyA5Ni05NS44VjE2MC43YzAtNTEuMS00NC44LTk1LjgtOTYtOTUuOHogbS00NDcuOCAwYy01MS4yIDAtOTYgNDQuNy05NiA5NS44djcwMi42YzAgNTEuMSA0NC44IDk1LjggOTYgOTUuOHM5Ni00NC43IDk2LTk1LjhWMTYwLjdjLTAuMS01MS4xLTQ0LjktOTUuOC05Ni05NS44eiIgcC1pZD0iNDQ2OCIgZmlsbD0iI2ZmZmZmZiI+PC9wYXRoPjwvc3ZnPg==") no-repeat center; } .it-player-wrap .box { flex: 1; } .it-player-wrap .box .info { font-family: PingFang-SC-Regular; font-size: 12px; color: #A8A8A8; text-align: left; line-height: 24px; margin: 0; } .it-player-wrap .box .info .size { display: inline-block; margin-right: 15px; } .it-player-wrap .progress-wrap { position: relative; margin-top: 15px; display: flex; flex-direction: row; align-items: center; } .it-player-wrap .progress-line,.it-player-wrap .progress-line-inner { position: absolute; height: 6px; width: 100%; background: #DDECFF; border-radius: 8.5px; } .it-player-wrap .progress-line-inner { background: #4C83E5 !important; } .it-player-wrap .progress-button { position: absolute; width: 50px; height: 20px; background: #4C83E5; box-shadow: 0 2px 4px 0 #A0C2FF; border-radius: 10px; top: -10px; font-family: PingFang-SC-Regular; font-size: 12px; color: #FFFFFF; text-align: center; line-height: 20px; cursor: pointer; } </style> <style> .crumb{ padding: 10px; margin-bottom: 10px; border-bottom: 1px solid rgba(238,238,238,0.4); } .crumb p{ width: 1200px; margin: 0 auto; } .newul{ line-height: 25px; } .new-item{ padding: 5px; display: block; width: 250px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } #doc-content img{ margin:none; display:initial; } .syntaxhighlighter{ width:890px; } .syntaxhighlighter td.code .line{ white-space: nowrap; } .syntaxhighlighter td.code .container{ width:840px!important; } .syntaxhighlighter td.code{ overflow: scroll!important; } </style> <div class="crumb"> <p> <a href="http://blog.itpub.net/" rel="nofollow">首頁</a> > <a href="http://blog.itpub.net/appdevelop/" rel="nofollow">應用開發</a> > <a href="http://blog.itpub.net/itother/" rel="nofollow">IT綜合</a> > <a rel="nofollow">微前端(Micro Frontend ) 落地實施的一些具體例子</a> </p> </div> <!--main部分開始--> <div class="blog-main clearfix w1200"> <div class="preview-wrap"> <div class="preview-header"> <h1 class="preview-title ">微前端(Micro Frontend ) 落地實施的一些具體例子 </h1> <div class="mess"> <span class="label label-original">原創</span> <span style="margin: auto 10px auto 0px"><a href="http://blog.itpub.net/itother/" rel="nofollow">IT綜合</a></span> <span>作者：<a href="http://blog.itpub.net/24475491/" rel="nofollow">i042416</a></span> <span>時間：2021-07-29 15:10:49</span> <span class="dian"></span> <span class="icon-see"></span> <span class="dian"></span> <span class="icon-comment">0</span> <!--博主本人和管理員 顯示 開始--> <i class="superman"><a href="javascript:;" mid="2784083" onclick="blogObj.delDraft($(this))" rel="nofollow">刪除</a></i> <i class="superman"><a href="http://blog.itpub.net/blog/post/2784083/" rel="nofollow">編輯</a></i> <!--博主本人和管理員 顯示 結束--> </div> </div> <div class="preview-body windowH"> <div class="preview-main"> <div id="doc-content" style="padding: 0px;"> <textarea style="display: none">前文[微前端概述(Micro Frontends) 以及相比單體應用，微前端能帶來什麼好處](https://jerry.blog.csdn.net/article/details/119190124) 簡單介紹了微前端的概念，本文來看一個具體的應用例子。 [原文地址](https://martinfowler.com/articles/micro-frontends.html) 想象一個網站，客戶可以在其中訂購外賣食品。從表面上看，這是一個相當簡單的概念，但如果你想做得好，還有驚人的細節： * 應該有一個登陸頁面，客戶可以在其中瀏覽和搜尋餐館。 餐廳應該可以透過任意數量的屬性進行搜尋和過濾，包括價格、美食或客戶之前訂購的東西 * 每家餐廳都需要自己的頁面來顯示其選單項，並允許客戶選擇他們想吃的東西，包括折扣、餐飲優惠和特殊要求 * 客戶應該有一個個人資料頁面，他們可以在其中檢視他們的訂單歷史記錄、跟蹤交付和自定義他們的付款選項  每個頁面都有足夠的複雜性，我們可以輕鬆地證明每個頁面都有一個專門的團隊，並且每個團隊都應該能夠獨立於所有其他團隊在他們的頁面上工作。 他們應該能夠開發、測試、部署和維護他們的程式碼，而不必擔心與其他團隊發生衝突或協調。 但是，我們的客戶仍然應該看到一個無縫的網站。 在本文的其餘部分，我們將在需要示例程式碼或場景的任何地方使用此示例應用程式。 # Integration approaches 鑑於上面相當鬆散的定義，有許多方法可以合理地稱為微前端。 在本節中，我們將展示一些示例並討論它們的權衡。 所有這些方法都有一個相當自然的架構——通常應用程式中的每個頁面都有一個微前端，並且有一個容器應用程式，它： * 呈現常見的頁面元素，例如頁首和頁尾 * 解決跨領域問題，如身份驗證和導航 * 將各種微前端放在頁面上，並告訴每個微前端何時何地渲染自己  # Server-side template composition 我們從一種絕對不新穎的前端開發方法開始——用多個模板或片段在伺服器上渲染 HTML。 我們有一個 index.html ，它包含所有常見的頁面元素，然後使用伺服器端包含從片段 HTML 檔案中插入特定於頁面的內容： ```html <meta charset="utf-8"> <title>Feed me</title> <h1>Feed me</h1> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="renderer" content="webkit"> <title>微前端(Micro Frontend ) 落地實施的一些具體例子_ITPUB部落格</title> <meta name="keywords" content="應用開發,IT綜合"> <meta name="description" content="前文微前端概述(Micro Frontends) 以及相比單體應用，微前端能帶來什麼好處 簡單介紹了微前端的概念，本文來看一個具體的應用例子。 原文地址 想象一個網站，客戶可以在其中訂購外賣食品。從表面上看，這是一個相當簡單的概念，但如果你想做得好，還有驚人的細節： 應該有一個登陸頁面，客戶可以在其中瀏覽和搜尋餐館。 餐廳應該可以透過任意數量的屬性進行搜尋和過濾，包括價格、美食或客戶之前ITPUB部落格每天千篇餘篇博文新資訊，40多萬活躍博主，為IT技術人提供全面的IT資訊和交流互動的IT部落格平臺-中國專業的IT技術ITPUB部落格。"> <link rel="stylesheet" href="http://blog.itpub.net/layui/css/layui.css?v234"> <link rel="stylesheet" href="http://blog.itpub.net/css/base.css?v1.5"> <link rel="stylesheet" href="http://blog.itpub.net/css/zhuanlan.css?v=1.3"> <!--[if lt IE 9]> <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script> <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script> <![endif]--> <div></div> <div></div> <div></div> <div></div> <!--header部分開始--> <div class="blog-header"> <div class="w1200"> <a href="http://blog.itpub.net/" class="fl" rel="nofollow"><h1 class="logo">ITPub部落格</h1></a> <div class="nav fl"> <a href="http://www.itpub.net/" rel="nofollow">首頁</a> <a href="http://blog.itpub.net/" rel="nofollow">部落格</a> <a href="http://blog.itpub.net/column" rel="nofollow">專欄</a> <a href="http://edu.itpub.net/" rel="nofollow">學院</a> <a href="http://www.itpub.net/forum.php" rel="nofollow">社群</a> <a href="https://z.itpub.net/" rel="nofollow">技術棧</a> </div> <div class="fr"> <form action="http://blog.itpub.net/search/blog/" class="layui-form blog-search-wrap fl"> <input type="hidden" name="type" value="blog"> <input placeholder="搜尋" type="text" class="layui-input" name="keyword"> <button class="search-btn icon-blog"></button> </form> <a href="http://blog.itpub.net/blog/post/" class="layui-btn layui-btn-primary fl mlr30" target="_blank" rel="nofollow">發博</a> <!--登入前--> <div class="fl head-name" id="u_info"> </div> </div> </div> </div> <!--header部分結束--> <link rel="stylesheet" href="http://blog.itpub.net/markdown/css/editormd.css"> <link rel="stylesheet" href="http://blog.itpub.net/markdown/css/editormd.min.css"> <link rel="stylesheet" href="http://blog.itpub.net/markdown/css/editormd.preview.min.css"> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <link href="http://blog.itpub.net/ueditor/third-party/SyntaxHighlighter/shCoreDefault.css" rel="stylesheet" type="text/css"> <div></div> <link rel="stylesheet" href="http://g.alicdn.com/de/prismplayer/2.6.0/skins/default/aliplayer-min.css"> <div></div> <div></div> <div></div> <div></div> <div></div> <style> .code .container > textarea{ height:100%; } .translate{color: #9fa3a7 !important;font-size:12px !important;} .translate a{font-size:12px !important;color:#9fa3a7 !important;} .translate a:hover {font-size:12px !important;color:#f15142 !important;} .newslist{padding:10px 5px;height:20px !important;line-height:20px;overflow:hidden;text-overflow: ellipsis;white-space: nowrap;border-bottom:1px solid #eee} .fake-video-btn:hover{ cursor: pointer; border-style: solid; border-width: 2px; border-radius: 63px; border-color: #00c1de; } .it-player-wrap { display: flex; flex-direction: row; box-sizing: border-box; padding: 5px; margin-bottom: 20px; background: #FBFBFB; border: 1px solid #EFEFEF; border-radius: 4px; } .it-player-wrap .control { width: 50px; height: 50px; background-color: #57a5f2; margin-right: 15px; border-radius: 50%; } .it-player-wrap .control .play,.it-player-wrap .control .pause { background-size: 30px !important; color: #ffffff; width: 100%; height: 100%; } .it-player-wrap .control .play { background: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/PjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+PHN2ZyB0PSIxNTU5NjM3ODcxMTQ0IiBjbGFzcz0iaWNvbiIgc3R5bGU9IiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHAtaWQ9IjYwMjkiIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iMjAwIiBoZWlnaHQ9IjIwMCI+PGRlZnM+PHN0eWxlIHR5cGU9InRleHQvY3NzIj48L3N0eWxlPjwvZGVmcz48cGF0aCBkPSJNOTUzLjQ0NTA2NSA2MDguMjkwNzI0TDM1MC4yOTkyMSA5ODAuNjM0MjExQzI1Ni42NDExNTEgMTAzOC40NTUyNjMgMTgwLjY5MDc4OSA5OTcuNzk5ODM2IDE4MC42OTA3ODkgODkxLjkxNTAzM1YxMTUuNDg2NzExQzE4MC42OTA3ODkgOC42MzgyMjQgMjU2LjIxOTUzOS0zMS4yOTQ0NCAzNTAuMjM4OTggMjYuNzY3NTM0bDYwMy4yNjYzMTUgMzcyLjIyMzAyNmM5My42NTgwNTkgNTcuODIxMDUzIDk0LjA3OTY3MSAxNTEuMjM4MTkxIDAgMjA5LjMwMDE2NHoiIHAtaWQ9IjYwMzAiIGZpbGw9IiNmZmZmZmYiPjwvcGF0aD48L3N2Zz4=") no-repeat center; } .it-player-wrap .control .pause { background: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/PjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+PHN2ZyB0PSIxNTU5NjM3NzQ2MzAwIiBjbGFzcz0iaWNvbiIgc3R5bGU9IiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHAtaWQ9IjQ0NjciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iMjAwIiBoZWlnaHQ9IjIwMCI+PGRlZnM+PHN0eWxlIHR5cGU9InRleHQvY3NzIj48L3N0eWxlPjwvZGVmcz48cGF0aCBkPSJNNzM1LjkgNjQuOWMtNTEuMiAwLTk2IDQ0LjctOTYgOTUuOHY3MDIuNmMwIDUxLjEgNDQuOCA5NS44IDk2IDk1LjhzOTYtNDQuNyA5Ni05NS44VjE2MC43YzAtNTEuMS00NC44LTk1LjgtOTYtOTUuOHogbS00NDcuOCAwYy01MS4yIDAtOTYgNDQuNy05NiA5NS44djcwMi42YzAgNTEuMSA0NC44IDk1LjggOTYgOTUuOHM5Ni00NC43IDk2LTk1LjhWMTYwLjdjLTAuMS01MS4xLTQ0LjktOTUuOC05Ni05NS44eiIgcC1pZD0iNDQ2OCIgZmlsbD0iI2ZmZmZmZiI+PC9wYXRoPjwvc3ZnPg==") no-repeat center; } .it-player-wrap .box { flex: 1; } .it-player-wrap .box .info { font-family: PingFang-SC-Regular; font-size: 12px; color: #A8A8A8; text-align: left; line-height: 24px; margin: 0; } .it-player-wrap .box .info .size { display: inline-block; margin-right: 15px; } .it-player-wrap .progress-wrap { position: relative; margin-top: 15px; display: flex; flex-direction: row; align-items: center; } .it-player-wrap .progress-line,.it-player-wrap .progress-line-inner { position: absolute; height: 6px; width: 100%; background: #DDECFF; border-radius: 8.5px; } .it-player-wrap .progress-line-inner { background: #4C83E5 !important; } .it-player-wrap .progress-button { position: absolute; width: 50px; height: 20px; background: #4C83E5; box-shadow: 0 2px 4px 0 #A0C2FF; border-radius: 10px; top: -10px; font-family: PingFang-SC-Regular; font-size: 12px; color: #FFFFFF; text-align: center; line-height: 20px; cursor: pointer; } </style> <style> .crumb{ padding: 10px; margin-bottom: 10px; border-bottom: 1px solid rgba(238,238,238,0.4); } .crumb p{ width: 1200px; margin: 0 auto; } .newul{ line-height: 25px; } .new-item{ padding: 5px; display: block; width: 250px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } #doc-content img{ margin:none; display:initial; } .syntaxhighlighter{ width:890px; } .syntaxhighlighter td.code .line{ white-space: nowrap; } .syntaxhighlighter td.code .container{ width:840px!important; } .syntaxhighlighter td.code{ overflow: scroll!important; } </style> <div class="crumb"> <p> <a href="http://blog.itpub.net/" rel="nofollow">首頁</a> > <a href="http://blog.itpub.net/appdevelop/" rel="nofollow">應用開發</a> > <a href="http://blog.itpub.net/itother/" rel="nofollow">IT綜合</a> > <a rel="nofollow">微前端(Micro Frontend ) 落地實施的一些具體例子</a> </p> </div> <!--main部分開始--> <div class="blog-main clearfix w1200"> <div class="preview-wrap"> <div class="preview-header"> <h1 class="preview-title ">微前端(Micro Frontend ) 落地實施的一些具體例子 </h1> <div class="mess"> <span class="label label-original">原創</span> <span style="margin: auto 10px auto 0px"><a href="http://blog.itpub.net/itother/" rel="nofollow">IT綜合</a></span> <span>作者：<a href="http://blog.itpub.net/24475491/" rel="nofollow">i042416</a></span> <span>時間：2021-07-29 15:10:49</span> <span class="dian"></span> <span class="icon-see"></span> <span class="dian"></span> <span class="icon-comment">0</span> <!--博主本人和管理員 顯示 開始--> <i class="superman"><a href="javascript:;" mid="2784083" onclick="blogObj.delDraft($(this))" rel="nofollow">刪除</a></i> <i class="superman"><a href="http://blog.itpub.net/blog/post/2784083/" rel="nofollow">編輯</a></i> <!--博主本人和管理員 顯示 結束--> </div> </div> <div class="preview-body windowH"> <div class="preview-main"> <div id="doc-content" style="padding: 0px;"> <textarea style="display: none">前文[微前端概述(Micro Frontends) 以及相比單體應用，微前端能帶來什麼好處](https://jerry.blog.csdn.net/article/details/119190124) 簡單介紹了微前端的概念，本文來看一個具體的應用例子。 [原文地址](https://martinfowler.com/articles/micro-frontends.html) 想象一個網站，客戶可以在其中訂購外賣食品。從表面上看，這是一個相當簡單的概念，但如果你想做得好，還有驚人的細節： * 應該有一個登陸頁面，客戶可以在其中瀏覽和搜尋餐館。 餐廳應該可以透過任意數量的屬性進行搜尋和過濾，包括價格、美食或客戶之前訂購的東西 * 每家餐廳都需要自己的頁面來顯示其選單項，並允許客戶選擇他們想吃的東西，包括折扣、餐飲優惠和特殊要求 * 客戶應該有一個個人資料頁面，他們可以在其中檢視他們的訂單歷史記錄、跟蹤交付和自定義他們的付款選項  每個頁面都有足夠的複雜性，我們可以輕鬆地證明每個頁面都有一個專門的團隊，並且每個團隊都應該能夠獨立於所有其他團隊在他們的頁面上工作。 他們應該能夠開發、測試、部署和維護他們的程式碼，而不必擔心與其他團隊發生衝突或協調。 但是，我們的客戶仍然應該看到一個無縫的網站。 在本文的其餘部分，我們將在需要示例程式碼或場景的任何地方使用此示例應用程式。 # Integration approaches 鑑於上面相當鬆散的定義，有許多方法可以合理地稱為微前端。 在本節中，我們將展示一些示例並討論它們的權衡。 所有這些方法都有一個相當自然的架構——通常應用程式中的每個頁面都有一個微前端，並且有一個容器應用程式，它： * 呈現常見的頁面元素，例如頁首和頁尾 * 解決跨領域問題，如身份驗證和導航 * 將各種微前端放在頁面上，並告訴每個微前端何時何地渲染自己  # Server-side template composition 我們從一種絕對不新穎的前端開發方法開始——用多個模板或片段在伺服器上渲染 HTML。 我們有一個 index.html ，它包含所有常見的頁面元素，然後使用伺服器端包含從片段 HTML 檔案中插入特定於頁面的內容： ```html <meta charset="utf-8"> <title>Feed me</title> <h1>Feed me</h1> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="renderer" content="webkit"> <title>微前端(Micro Frontend ) 落地實施的一些具體例子_ITPUB部落格</title> <meta name="keywords" content="應用開發,IT綜合"> <meta name="description" content="前文微前端概述(Micro Frontends) 以及相比單體應用，微前端能帶來什麼好處 簡單介紹了微前端的概念，本文來看一個具體的應用例子。 原文地址 想象一個網站，客戶可以在其中訂購外賣食品。從表面上看，這是一個相當簡單的概念，但如果你想做得好，還有驚人的細節： 應該有一個登陸頁面，客戶可以在其中瀏覽和搜尋餐館。 餐廳應該可以透過任意數量的屬性進行搜尋和過濾，包括價格、美食或客戶之前ITPUB部落格每天千篇餘篇博文新資訊，40多萬活躍博主，為IT技術人提供全面的IT資訊和交流互動的IT部落格平臺-中國專業的IT技術ITPUB部落格。"> <link rel="stylesheet" href="http://blog.itpub.net/layui/css/layui.css?v234"> <link rel="stylesheet" href="http://blog.itpub.net/css/base.css?v1.5"> <link rel="stylesheet" href="http://blog.itpub.net/css/zhuanlan.css?v=1.3"> <!--[if lt IE 9]> <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script> <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script> <![endif]--> <div></div> <div></div> <div></div> <div></div> <!--header部分開始--> <div class="blog-header"> <div class="w1200"> <a href="http://blog.itpub.net/" class="fl" rel="nofollow"><h1 class="logo">ITPub部落格</h1></a> <div class="nav fl"> <a href="http://www.itpub.net/" rel="nofollow">首頁</a> <a href="http://blog.itpub.net/" rel="nofollow">部落格</a> <a href="http://blog.itpub.net/column" rel="nofollow">專欄</a> <a href="http://edu.itpub.net/" rel="nofollow">學院</a> <a href="http://www.itpub.net/forum.php" rel="nofollow">社群</a> <a href="https://z.itpub.net/" rel="nofollow">技術棧</a> </div> <div class="fr"> <form action="http://blog.itpub.net/search/blog/" class="layui-form blog-search-wrap fl"> <input type="hidden" name="type" value="blog"> <input placeholder="搜尋" type="text" class="layui-input" name="keyword"> <button class="search-btn icon-blog"></button> </form> <a href="http://blog.itpub.net/blog/post/" class="layui-btn layui-btn-primary fl mlr30" target="_blank" rel="nofollow">發博</a> <!--登入前--> <div class="fl head-name" id="u_info"> </div> </div> </div> </div> <!--header部分結束--> <link rel="stylesheet" href="http://blog.itpub.net/markdown/css/editormd.css"> <link rel="stylesheet" href="http://blog.itpub.net/markdown/css/editormd.min.css"> <link rel="stylesheet" href="http://blog.itpub.net/markdown/css/editormd.preview.min.css"> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <link href="http://blog.itpub.net/ueditor/third-party/SyntaxHighlighter/shCoreDefault.css" rel="stylesheet" type="text/css"> <div></div> <link rel="stylesheet" href="http://g.alicdn.com/de/prismplayer/2.6.0/skins/default/aliplayer-min.css"> <div></div> <div></div> <div></div> <div></div> <div></div> <style> .code .container > textarea{ height:100%; } .translate{color: #9fa3a7 !important;font-size:12px !important;} .translate a{font-size:12px !important;color:#9fa3a7 !important;} .translate a:hover {font-size:12px !important;color:#f15142 !important;} .newslist{padding:10px 5px;height:20px !important;line-height:20px;overflow:hidden;text-overflow: ellipsis;white-space: nowrap;border-bottom:1px solid #eee} .fake-video-btn:hover{ cursor: pointer; border-style: solid; border-width: 2px; border-radius: 63px; border-color: #00c1de; } .it-player-wrap { display: flex; flex-direction: row; box-sizing: border-box; padding: 5px; margin-bottom: 20px; background: #FBFBFB; border: 1px solid #EFEFEF; border-radius: 4px; } .it-player-wrap .control { width: 50px; height: 50px; background-color: #57a5f2; margin-right: 15px; border-radius: 50%; } .it-player-wrap .control .play,.it-player-wrap .control .pause { background-size: 30px !important; color: #ffffff; width: 100%; height: 100%; } .it-player-wrap .control .play { background: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/PjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+PHN2ZyB0PSIxNTU5NjM3ODcxMTQ0IiBjbGFzcz0iaWNvbiIgc3R5bGU9IiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHAtaWQ9IjYwMjkiIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iMjAwIiBoZWlnaHQ9IjIwMCI+PGRlZnM+PHN0eWxlIHR5cGU9InRleHQvY3NzIj48L3N0eWxlPjwvZGVmcz48cGF0aCBkPSJNOTUzLjQ0NTA2NSA2MDguMjkwNzI0TDM1MC4yOTkyMSA5ODAuNjM0MjExQzI1Ni42NDExNTEgMTAzOC40NTUyNjMgMTgwLjY5MDc4OSA5OTcuNzk5ODM2IDE4MC42OTA3ODkgODkxLjkxNTAzM1YxMTUuNDg2NzExQzE4MC42OTA3ODkgOC42MzgyMjQgMjU2LjIxOTUzOS0zMS4yOTQ0NCAzNTAuMjM4OTggMjYuNzY3NTM0bDYwMy4yNjYzMTUgMzcyLjIyMzAyNmM5My42NTgwNTkgNTcuODIxMDUzIDk0LjA3OTY3MSAxNTEuMjM4MTkxIDAgMjA5LjMwMDE2NHoiIHAtaWQ9IjYwMzAiIGZpbGw9IiNmZmZmZmYiPjwvcGF0aD48L3N2Zz4=") no-repeat center; } .it-player-wrap .control .pause { background: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/PjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+PHN2ZyB0PSIxNTU5NjM3NzQ2MzAwIiBjbGFzcz0iaWNvbiIgc3R5bGU9IiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHAtaWQ9IjQ0NjciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iMjAwIiBoZWlnaHQ9IjIwMCI+PGRlZnM+PHN0eWxlIHR5cGU9InRleHQvY3NzIj48L3N0eWxlPjwvZGVmcz48cGF0aCBkPSJNNzM1LjkgNjQuOWMtNTEuMiAwLTk2IDQ0LjctOTYgOTUuOHY3MDIuNmMwIDUxLjEgNDQuOCA5NS44IDk2IDk1LjhzOTYtNDQuNyA5Ni05NS44VjE2MC43YzAtNTEuMS00NC44LTk1LjgtOTYtOTUuOHogbS00NDcuOCAwYy01MS4yIDAtOTYgNDQuNy05NiA5NS44djcwMi42YzAgNTEuMSA0NC44IDk1LjggOTYgOTUuOHM5Ni00NC43IDk2LTk1LjhWMTYwLjdjLTAuMS01MS4xLTQ0LjktOTUuOC05Ni05NS44eiIgcC1pZD0iNDQ2OCIgZmlsbD0iI2ZmZmZmZiI+PC9wYXRoPjwvc3ZnPg==") no-repeat center; } .it-player-wrap .box { flex: 1; } .it-player-wrap .box .info { font-family: PingFang-SC-Regular; font-size: 12px; color: #A8A8A8; text-align: left; line-height: 24px; margin: 0; } .it-player-wrap .box .info .size { display: inline-block; margin-right: 15px; } .it-player-wrap .progress-wrap { position: relative; margin-top: 15px; display: flex; flex-direction: row; align-items: center; } .it-player-wrap .progress-line,.it-player-wrap .progress-line-inner { position: absolute; height: 6px; width: 100%; background: #DDECFF; border-radius: 8.5px; } .it-player-wrap .progress-line-inner { background: #4C83E5 !important; } .it-player-wrap .progress-button { position: absolute; width: 50px; height: 20px; background: #4C83E5; box-shadow: 0 2px 4px 0 #A0C2FF; border-radius: 10px; top: -10px; font-family: PingFang-SC-Regular; font-size: 12px; color: #FFFFFF; text-align: center; line-height: 20px; cursor: pointer; } </style> <style> .crumb{ padding: 10px; margin-bottom: 10px; border-bottom: 1px solid rgba(238,238,238,0.4); } .crumb p{ width: 1200px; margin: 0 auto; } .newul{ line-height: 25px; } .new-item{ padding: 5px; display: block; width: 250px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } #doc-content img{ margin:none; display:initial; } .syntaxhighlighter{ width:890px; } .syntaxhighlighter td.code .line{ white-space: nowrap; } .syntaxhighlighter td.code .container{ width:840px!important; } .syntaxhighlighter td.code{ overflow: scroll!important; } </style> <div class="crumb"> <p> <a href="http://blog.itpub.net/" rel="nofollow">首頁</a> > <a href="http://blog.itpub.net/appdevelop/" rel="nofollow">應用開發</a> > <a href="http://blog.itpub.net/itother/" rel="nofollow">IT綜合</a> > <a rel="nofollow">微前端(Micro Frontend ) 落地實施的一些具體例子</a> </p> </div> <!--main部分開始--> <div class="blog-main clearfix w1200"> <div class="preview-wrap"> <div class="preview-header"> <h1 class="preview-title ">微前端(Micro Frontend ) 落地實施的一些具體例子 </h1> <div class="mess"> <span class="label label-original">原創</span> <span style="margin: auto 10px auto 0px"><a href="http://blog.itpub.net/itother/" rel="nofollow">IT綜合</a></span> <span>作者：<a href="http://blog.itpub.net/24475491/" rel="nofollow">i042416</a></span> <span>時間：2021-07-29 15:10:49</span> <span class="dian"></span> <span class="icon-see"></span> <span class="dian"></span> <span class="icon-comment">0</span> <!--博主本人和管理員 顯示 開始--> <i class="superman"><a href="javascript:;" mid="2784083" onclick="blogObj.delDraft($(this))" rel="nofollow">刪除</a></i> <i class="superman"><a href="http://blog.itpub.net/blog/post/2784083/" rel="nofollow">編輯</a></i> <!--博主本人和管理員 顯示 結束--> </div> </div> <div class="preview-body windowH"> <div class="preview-main"> <div id="doc-content" style="padding: 0px;"> <textarea style="display: none">前文[微前端概述(Micro Frontends) 以及相比單體應用，微前端能帶來什麼好處](https://jerry.blog.csdn.net/article/details/119190124) 簡單介紹了微前端的概念，本文來看一個具體的應用例子。 [原文地址](https://martinfowler.com/articles/micro-frontends.html) 想象一個網站，客戶可以在其中訂購外賣食品。從表面上看，這是一個相當簡單的概念，但如果你想做得好，還有驚人的細節： * 應該有一個登陸頁面，客戶可以在其中瀏覽和搜尋餐館。 餐廳應該可以透過任意數量的屬性進行搜尋和過濾，包括價格、美食或客戶之前訂購的東西 * 每家餐廳都需要自己的頁面來顯示其選單項，並允許客戶選擇他們想吃的東西，包括折扣、餐飲優惠和特殊要求 * 客戶應該有一個個人資料頁面，他們可以在其中檢視他們的訂單歷史記錄、跟蹤交付和自定義他們的付款選項  每個頁面都有足夠的複雜性，我們可以輕鬆地證明每個頁面都有一個專門的團隊，並且每個團隊都應該能夠獨立於所有其他團隊在他們的頁面上工作。 他們應該能夠開發、測試、部署和維護他們的程式碼，而不必擔心與其他團隊發生衝突或協調。 但是，我們的客戶仍然應該看到一個無縫的網站。 在本文的其餘部分，我們將在需要示例程式碼或場景的任何地方使用此示例應用程式。 # Integration approaches 鑑於上面相當鬆散的定義，有許多方法可以合理地稱為微前端。 在本節中，我們將展示一些示例並討論它們的權衡。 所有這些方法都有一個相當自然的架構——通常應用程式中的每個頁面都有一個微前端，並且有一個容器應用程式，它： * 呈現常見的頁面元素，例如頁首和頁尾 * 解決跨領域問題，如身份驗證和導航 * 將各種微前端放在頁面上，並告訴每個微前端何時何地渲染自己  # Server-side template composition 我們從一種絕對不新穎的前端開發方法開始——用多個模板或片段在伺服器上渲染 HTML。 我們有一個 index.html ，它包含所有常見的頁面元素，然後使用伺服器端包含從片段 HTML 檔案中插入特定於頁面的內容： ```html <meta charset="utf-8"> <title>Feed me</title> <h1>Feed me</h1> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="renderer" content="webkit"> <title>微前端(Micro Frontend ) 落地實施的一些具體例子_ITPUB部落格</title> <meta name="keywords" content="應用開發,IT綜合"> <meta name="description" content="前文微前端概述(Micro Frontends) 以及相比單體應用，微前端能帶來什麼好處 簡單介紹了微前端的概念，本文來看一個具體的應用例子。 原文地址 想象一個網站，客戶可以在其中訂購外賣食品。從表面上看，這是一個相當簡單的概念，但如果你想做得好，還有驚人的細節： 應該有一個登陸頁面，客戶可以在其中瀏覽和搜尋餐館。 餐廳應該可以透過任意數量的屬性進行搜尋和過濾，包括價格、美食或客戶之前ITPUB部落格每天千篇餘篇博文新資訊，40多萬活躍博主，為IT技術人提供全面的IT資訊和交流互動的IT部落格平臺-中國專業的IT技術ITPUB部落格。"> <link rel="stylesheet" href="http://blog.itpub.net/layui/css/layui.css?v234"> <link rel="stylesheet" href="http://blog.itpub.net/css/base.css?v1.5"> <link rel="stylesheet" href="http://blog.itpub.net/css/zhuanlan.css?v=1.3"> <!--[if lt IE 9]> <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script> <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script> <![endif]--> <div></div> <div></div> <div></div> <div></div> <!--header部分開始--> <div class="blog-header"> <div class="w1200"> <a href="http://blog.itpub.net/" class="fl" rel="nofollow"><h1 class="logo">ITPub部落格</h1></a> <div class="nav fl"> <a href="http://www.itpub.net/" rel="nofollow">首頁</a> <a href="http://blog.itpub.net/" rel="nofollow">部落格</a> <a href="http://blog.itpub.net/column" rel="nofollow">專欄</a> <a href="http://edu.itpub.net/" rel="nofollow">學院</a> <a href="http://www.itpub.net/forum.php" rel="nofollow">社群</a> <a href="https://z.itpub.net/" rel="nofollow">技術棧</a> </div> <div class="fr"> <form action="http://blog.itpub.net/search/blog/" class="layui-form blog-search-wrap fl"> <input type="hidden" name="type" value="blog"> <input placeholder="搜尋" type="text" class="layui-input" name="keyword"> <button class="search-btn icon-blog"></button> </form> <a href="http://blog.itpub.net/blog/post/" class="layui-btn layui-btn-primary fl mlr30" target="_blank" rel="nofollow">發博</a> <!--登入前--> <div class="fl head-name" id="u_info"> </div> </div> </div> </div> <!--header部分結束--> <link rel="stylesheet" href="http://blog.itpub.net/markdown/css/editormd.css"> <link rel="stylesheet" href="http://blog.itpub.net/markdown/css/editormd.min.css"> <link rel="stylesheet" href="http://blog.itpub.net/markdown/css/editormd.preview.min.css"> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <link href="http://blog.itpub.net/ueditor/third-party/SyntaxHighlighter/shCoreDefault.css" rel="stylesheet" type="text/css"> <div></div> <link rel="stylesheet" href="http://g.alicdn.com/de/prismplayer/2.6.0/skins/default/aliplayer-min.css"> <div></div> <div></div> <div></div> <div></div> <div></div> <style> .code .container > textarea{ height:100%; } .translate{color: #9fa3a7 !important;font-size:12px !important;} .translate a{font-size:12px !important;color:#9fa3a7 !important;} .translate a:hover {font-size:12px !important;color:#f15142 !important;} .newslist{padding:10px 5px;height:20px !important;line-height:20px;overflow:hidden;text-overflow: ellipsis;white-space: nowrap;border-bottom:1px solid #eee} .fake-video-btn:hover{ cursor: pointer; border-style: solid; border-width: 2px; border-radius: 63px; border-color: #00c1de; } .it-player-wrap { display: flex; flex-direction: row; box-sizing: border-box; padding: 5px; margin-bottom: 20px; background: #FBFBFB; border: 1px solid #EFEFEF; border-radius: 4px; } .it-player-wrap .control { width: 50px; height: 50px; background-color: #57a5f2; margin-right: 15px; border-radius: 50%; } .it-player-wrap .control .play,.it-player-wrap .control .pause { background-size: 30px !important; color: #ffffff; width: 100%; height: 100%; } .it-player-wrap .control .play { background: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/PjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+PHN2ZyB0PSIxNTU5NjM3ODcxMTQ0IiBjbGFzcz0iaWNvbiIgc3R5bGU9IiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHAtaWQ9IjYwMjkiIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iMjAwIiBoZWlnaHQ9IjIwMCI+PGRlZnM+PHN0eWxlIHR5cGU9InRleHQvY3NzIj48L3N0eWxlPjwvZGVmcz48cGF0aCBkPSJNOTUzLjQ0NTA2NSA2MDguMjkwNzI0TDM1MC4yOTkyMSA5ODAuNjM0MjExQzI1Ni42NDExNTEgMTAzOC40NTUyNjMgMTgwLjY5MDc4OSA5OTcuNzk5ODM2IDE4MC42OTA3ODkgODkxLjkxNTAzM1YxMTUuNDg2NzExQzE4MC42OTA3ODkgOC42MzgyMjQgMjU2LjIxOTUzOS0zMS4yOTQ0NCAzNTAuMjM4OTggMjYuNzY3NTM0bDYwMy4yNjYzMTUgMzcyLjIyMzAyNmM5My42NTgwNTkgNTcuODIxMDUzIDk0LjA3OTY3MSAxNTEuMjM4MTkxIDAgMjA5LjMwMDE2NHoiIHAtaWQ9IjYwMzAiIGZpbGw9IiNmZmZmZmYiPjwvcGF0aD48L3N2Zz4=") no-repeat center; } .it-player-wrap .control .pause { background: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/PjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+PHN2ZyB0PSIxNTU5NjM3NzQ2MzAwIiBjbGFzcz0iaWNvbiIgc3R5bGU9IiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHAtaWQ9IjQ0NjciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iMjAwIiBoZWlnaHQ9IjIwMCI+PGRlZnM+PHN0eWxlIHR5cGU9InRleHQvY3NzIj48L3N0eWxlPjwvZGVmcz48cGF0aCBkPSJNNzM1LjkgNjQuOWMtNTEuMiAwLTk2IDQ0LjctOTYgOTUuOHY3MDIuNmMwIDUxLjEgNDQuOCA5NS44IDk2IDk1LjhzOTYtNDQuNyA5Ni05NS44VjE2MC43YzAtNTEuMS00NC44LTk1LjgtOTYtOTUuOHogbS00NDcuOCAwYy01MS4yIDAtOTYgNDQuNy05NiA5NS44djcwMi42YzAgNTEuMSA0NC44IDk1LjggOTYgOTUuOHM5Ni00NC43IDk2LTk1LjhWMTYwLjdjLTAuMS01MS4xLTQ0LjktOTUuOC05Ni05NS44eiIgcC1pZD0iNDQ2OCIgZmlsbD0iI2ZmZmZmZiI+PC9wYXRoPjwvc3ZnPg==") no-repeat center; } .it-player-wrap .box { flex: 1; } .it-player-wrap .box .info { font-family: PingFang-SC-Regular; font-size: 12px; color: #A8A8A8; text-align: left; line-height: 24px; margin: 0; } .it-player-wrap .box .info .size { display: inline-block; margin-right: 15px; } .it-player-wrap .progress-wrap { position: relative; margin-top: 15px; display: flex; flex-direction: row; align-items: center; } .it-player-wrap .progress-line,.it-player-wrap .progress-line-inner { position: absolute; height: 6px; width: 100%; background: #DDECFF; border-radius: 8.5px; } .it-player-wrap .progress-line-inner { background: #4C83E5 !important; } .it-player-wrap .progress-button { position: absolute; width: 50px; height: 20px; background: #4C83E5; box-shadow: 0 2px 4px 0 #A0C2FF; border-radius: 10px; top: -10px; font-family: PingFang-SC-Regular; font-size: 12px; color: #FFFFFF; text-align: center; line-height: 20px; cursor: pointer; } </style> <style> .crumb{ padding: 10px; margin-bottom: 10px; border-bottom: 1px solid rgba(238,238,238,0.4); } .crumb p{ width: 1200px; margin: 0 auto; } .newul{ line-height: 25px; } .new-item{ padding: 5px; display: block; width: 250px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } #doc-content img{ margin:none; display:initial; } .syntaxhighlighter{ width:890px; } .syntaxhighlighter td.code .line{ white-space: nowrap; } .syntaxhighlighter td.code .container{ width:840px!important; } .syntaxhighlighter td.code{ overflow: scroll!important; } </style> <div class="crumb"> <p> <a href="http://blog.itpub.net/" rel="nofollow">首頁</a> > <a href="http://blog.itpub.net/appdevelop/" rel="nofollow">應用開發</a> > <a href="http://blog.itpub.net/itother/" rel="nofollow">IT綜合</a> > <a rel="nofollow">微前端(Micro Frontend ) 落地實施的一些具體例子</a> </p> </div> <!--main部分開始--> <div class="blog-main clearfix w1200"> <div class="preview-wrap"> <div class="preview-header"> <h1 class="preview-title ">微前端(Micro Frontend ) 落地實施的一些具體例子 </h1> <div class="mess"> <span class="label label-original">原創</span> <span style="margin: auto 10px auto 0px"><a href="http://blog.itpub.net/itother/" rel="nofollow">IT綜合</a></span> <span>作者：<a href="http://blog.itpub.net/24475491/" rel="nofollow">i042416</a></span> <span>時間：2021-07-29 15:10:49</span> <span class="dian"></span> <span class="icon-see"></span> <span class="dian"></span> <span class="icon-comment">0</span> <!--博主本人和管理員 顯示 開始--> <i class="superman"><a href="javascript:;" mid="2784083" onclick="blogObj.delDraft($(this))" rel="nofollow">刪除</a></i> <i class="superman"><a href="http://blog.itpub.net/blog/post/2784083/" rel="nofollow">編輯</a></i> <!--博主本人和管理員 顯示 結束--> </div> </div> <div class="preview-body windowH"> <div class="preview-main"> <div id="doc-content" style="padding: 0px;"> <textarea style="display: none">前文[微前端概述(Micro Frontends) 以及相比單體應用，微前端能帶來什麼好處](https://jerry.blog.csdn.net/article/details/119190124) 簡單介紹了微前端的概念，本文來看一個具體的應用例子。 [原文地址](https://martinfowler.com/articles/micro-frontends.html) 想象一個網站，客戶可以在其中訂購外賣食品。從表面上看，這是一個相當簡單的概念，但如果你想做得好，還有驚人的細節： * 應該有一個登陸頁面，客戶可以在其中瀏覽和搜尋餐館。 餐廳應該可以透過任意數量的屬性進行搜尋和過濾，包括價格、美食或客戶之前訂購的東西 * 每家餐廳都需要自己的頁面來顯示其選單項，並允許客戶選擇他們想吃的東西，包括折扣、餐飲優惠和特殊要求 * 客戶應該有一個個人資料頁面，他們可以在其中檢視他們的訂單歷史記錄、跟蹤交付和自定義他們的付款選項  每個頁面都有足夠的複雜性，我們可以輕鬆地證明每個頁面都有一個專門的團隊，並且每個團隊都應該能夠獨立於所有其他團隊在他們的頁面上工作。 他們應該能夠開發、測試、部署和維護他們的程式碼，而不必擔心與其他團隊發生衝突或協調。 但是，我們的客戶仍然應該看到一個無縫的網站。 在本文的其餘部分，我們將在需要示例程式碼或場景的任何地方使用此示例應用程式。 # Integration approaches 鑑於上面相當鬆散的定義，有許多方法可以合理地稱為微前端。 在本節中，我們將展示一些示例並討論它們的權衡。 所有這些方法都有一個相當自然的架構——通常應用程式中的每個頁面都有一個微前端，並且有一個容器應用程式，它： * 呈現常見的頁面元素，例如頁首和頁尾 * 解決跨領域問題，如身份驗證和導航 * 將各種微前端放在頁面上，並告訴每個微前端何時何地渲染自己  # Server-side template composition 我們從一種絕對不新穎的前端開發方法開始——用多個模板或片段在伺服器上渲染 HTML。 我們有一個 index.html ，它包含所有常見的頁面元素，然後使用伺服器端包含從片段 HTML 檔案中插入特定於頁面的內容： ```html <meta charset="utf-8"> <title>Feed me</title> <h1>Feed me</h1> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="renderer" content="webkit"> <title>微前端(Micro Frontend ) 落地實施的一些具體例子_ITPUB部落格</title> <meta name="keywords" content="應用開發,IT綜合"> <meta name="description" content="前文微前端概述(Micro Frontends) 以及相比單體應用，微前端能帶來什麼好處 簡單介紹了微前端的概念，本文來看一個具體的應用例子。 原文地址 想象一個網站，客戶可以在其中訂購外賣食品。從表面上看，這是一個相當簡單的概念，但如果你想做得好，還有驚人的細節： 應該有一個登陸頁面，客戶可以在其中瀏覽和搜尋餐館。 餐廳應該可以透過任意數量的屬性進行搜尋和過濾，包括價格、美食或客戶之前ITPUB部落格每天千篇餘篇博文新資訊，40多萬活躍博主，為IT技術人提供全面的IT資訊和交流互動的IT部落格平臺-中國專業的IT技術ITPUB部落格。"> <link rel="stylesheet" href="http://blog.itpub.net/layui/css/layui.css?v234"> <link rel="stylesheet" href="http://blog.itpub.net/css/base.css?v1.5"> <link rel="stylesheet" href="http://blog.itpub.net/css/zhuanlan.css?v=1.3"> <!--[if lt IE 9]> <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script> <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script> <![endif]--> <div></div> <div></div> <div></div> <div></div> <!--header部分開始--> <div class="blog-header"> <div class="w1200"> <a href="http://blog.itpub.net/" class="fl" rel="nofollow"><h1 class="logo">ITPub部落格</h1></a> <div class="nav fl"> <a href="http://www.itpub.net/" rel="nofollow">首頁</a> <a href="http://blog.itpub.net/" rel="nofollow">部落格</a> <a href="http://blog.itpub.net/column" rel="nofollow">專欄</a> <a href="http://edu.itpub.net/" rel="nofollow">學院</a> <a href="http://www.itpub.net/forum.php" rel="nofollow">社群</a> <a href="https://z.itpub.net/" rel="nofollow">技術棧</a> </div> <div class="fr"> <form action="http://blog.itpub.net/search/blog/" class="layui-form blog-search-wrap fl"> <input type="hidden" name="type" value="blog"> <input placeholder="搜尋" type="text" class="layui-input" name="keyword"> <button class="search-btn icon-blog"></button> </form> <a href="http://blog.itpub.net/blog/post/" class="layui-btn layui-btn-primary fl mlr30" target="_blank" rel="nofollow">發博</a> <!--登入前--> <div class="fl head-name" id="u_info"> </div> </div> </div> </div> <!--header部分結束--> <link rel="stylesheet" href="http://blog.itpub.net/markdown/css/editormd.css"> <link rel="stylesheet" href="http://blog.itpub.net/markdown/css/editormd.min.css"> <link rel="stylesheet" href="http://blog.itpub.net/markdown/css/editormd.preview.min.css"> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <link href="http://blog.itpub.net/ueditor/third-party/SyntaxHighlighter/shCoreDefault.css" rel="stylesheet" type="text/css"> <div></div> <link rel="stylesheet" href="http://g.alicdn.com/de/prismplayer/2.6.0/skins/default/aliplayer-min.css"> <div></div> <div></div> <div></div> <div></div> <div></div> <style> .code .container > textarea{ height:100%; } .translate{color: #9fa3a7 !important;font-size:12px !important;} .translate a{font-size:12px !important;color:#9fa3a7 !important;} .translate a:hover {font-size:12px !important;color:#f15142 !important;} .newslist{padding:10px 5px;height:20px !important;line-height:20px;overflow:hidden;text-overflow: ellipsis;white-space: nowrap;border-bottom:1px solid #eee} .fake-video-btn:hover{ cursor: pointer; border-style: solid; border-width: 2px; border-radius: 63px; border-color: #00c1de; } .it-player-wrap { display: flex; flex-direction: row; box-sizing: border-box; padding: 5px; margin-bottom: 20px; background: #FBFBFB; border: 1px solid #EFEFEF; border-radius: 4px; } .it-player-wrap .control { width: 50px; height: 50px; background-color: #57a5f2; margin-right: 15px; border-radius: 50%; } .it-player-wrap .control .play,.it-player-wrap .control .pause { background-size: 30px !important; color: #ffffff; width: 100%; height: 100%; } .it-player-wrap .control .play { background: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/PjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+PHN2ZyB0PSIxNTU5NjM3ODcxMTQ0IiBjbGFzcz0iaWNvbiIgc3R5bGU9IiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHAtaWQ9IjYwMjkiIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iMjAwIiBoZWlnaHQ9IjIwMCI+PGRlZnM+PHN0eWxlIHR5cGU9InRleHQvY3NzIj48L3N0eWxlPjwvZGVmcz48cGF0aCBkPSJNOTUzLjQ0NTA2NSA2MDguMjkwNzI0TDM1MC4yOTkyMSA5ODAuNjM0MjExQzI1Ni42NDExNTEgMTAzOC40NTUyNjMgMTgwLjY5MDc4OSA5OTcuNzk5ODM2IDE4MC42OTA3ODkgODkxLjkxNTAzM1YxMTUuNDg2NzExQzE4MC42OTA3ODkgOC42MzgyMjQgMjU2LjIxOTUzOS0zMS4yOTQ0NCAzNTAuMjM4OTggMjYuNzY3NTM0bDYwMy4yNjYzMTUgMzcyLjIyMzAyNmM5My42NTgwNTkgNTcuODIxMDUzIDk0LjA3OTY3MSAxNTEuMjM4MTkxIDAgMjA5LjMwMDE2NHoiIHAtaWQ9IjYwMzAiIGZpbGw9IiNmZmZmZmYiPjwvcGF0aD48L3N2Zz4=") no-repeat center; } .it-player-wrap .control .pause { background: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/PjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+PHN2ZyB0PSIxNTU5NjM3NzQ2MzAwIiBjbGFzcz0iaWNvbiIgc3R5bGU9IiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHAtaWQ9IjQ0NjciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iMjAwIiBoZWlnaHQ9IjIwMCI+PGRlZnM+PHN0eWxlIHR5cGU9InRleHQvY3NzIj48L3N0eWxlPjwvZGVmcz48cGF0aCBkPSJNNzM1LjkgNjQuOWMtNTEuMiAwLTk2IDQ0LjctOTYgOTUuOHY3MDIuNmMwIDUxLjEgNDQuOCA5NS44IDk2IDk1LjhzOTYtNDQuNyA5Ni05NS44VjE2MC43YzAtNTEuMS00NC44LTk1LjgtOTYtOTUuOHogbS00NDcuOCAwYy01MS4yIDAtOTYgNDQuNy05NiA5NS44djcwMi42YzAgNTEuMSA0NC44IDk1LjggOTYgOTUuOHM5Ni00NC43IDk2LTk1LjhWMTYwLjdjLTAuMS01MS4xLTQ0LjktOTUuOC05Ni05NS44eiIgcC1pZD0iNDQ2OCIgZmlsbD0iI2ZmZmZmZiI+PC9wYXRoPjwvc3ZnPg==") no-repeat center; } .it-player-wrap .box { flex: 1; } .it-player-wrap .box .info { font-family: PingFang-SC-Regular; font-size: 12px; color: #A8A8A8; text-align: left; line-height: 24px; margin: 0; } .it-player-wrap .box .info .size { display: inline-block; margin-right: 15px; } .it-player-wrap .progress-wrap { position: relative; margin-top: 15px; display: flex; flex-direction: row; align-items: center; } .it-player-wrap .progress-line,.it-player-wrap .progress-line-inner { position: absolute; height: 6px; width: 100%; background: #DDECFF; border-radius: 8.5px; } .it-player-wrap .progress-line-inner { background: #4C83E5 !important; } .it-player-wrap .progress-button { position: absolute; width: 50px; height: 20px; background: #4C83E5; box-shadow: 0 2px 4px 0 #A0C2FF; border-radius: 10px; top: -10px; font-family: PingFang-SC-Regular; font-size: 12px; color: #FFFFFF; text-align: center; line-height: 20px; cursor: pointer; } </style> <style> .crumb{ padding: 10px; margin-bottom: 10px; border-bottom: 1px solid rgba(238,238,238,0.4); } .crumb p{ width: 1200px; margin: 0 auto; } .newul{ line-height: 25px; } .new-item{ padding: 5px; display: block; width: 250px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } #doc-content img{ margin:none; display:initial; } .syntaxhighlighter{ width:890px; } .syntaxhighlighter td.code .line{ white-space: nowrap; } .syntaxhighlighter td.code .container{ width:840px!important; } .syntaxhighlighter td.code{ overflow: scroll!important; } </style> <div class="crumb"> <p> <a href="http://blog.itpub.net/" rel="nofollow">首頁</a> > <a href="http://blog.itpub.net/appdevelop/" rel="nofollow">應用開發</a> > <a href="http://blog.itpub.net/itother/" rel="nofollow">IT綜合</a> > <a rel="nofollow">微前端(Micro Frontend ) 落地實施的一些具體例子</a> </p> </div> <!--main部分開始--> <div class="blog-main clearfix w1200"> <div class="preview-wrap"> <div class="preview-header"> <h1 class="preview-title ">微前端(Micro Frontend ) 落地實施的一些具體例子 </h1> <div class="mess"> <span class="label label-original">原創</span> <span style="margin: auto 10px auto 0px"><a href="http://blog.itpub.net/itother/" rel="nofollow">IT綜合</a></span> <span>作者：<a href="http://blog.itpub.net/24475491/" rel="nofollow">i042416</a></span> <span>時間：2021-07-29 15:10:49</span> <span class="dian"></span> <span class="icon-see"></span> <span class="dian"></span> <span class="icon-comment">0</span> <!--博主本人和管理員 顯示 開始--> <i class="superman"><a href="javascript:;" mid="2784083" onclick="blogObj.delDraft($(this))" rel="nofollow">刪除</a></i> <i class="superman"><a href="http://blog.itpub.net/blog/post/2784083/" rel="nofollow">編輯</a></i> <!--博主本人和管理員 顯示 結束--> </div> </div> <div class="preview-body windowH"> <div class="preview-main"> <div id="doc-content" style="padding: 0px;"> <textarea style="display: none">前文[微前端概述(Micro Frontends) 以及相比單體應用，微前端能帶來什麼好處](https://jerry.blog.csdn.net/article/details/119190124) 簡單介紹了微前端的概念，本文來看一個具體的應用例子。 [原文地址](https://martinfowler.com/articles/micro-frontends.html) 想象一個網站，客戶可以在其中訂購外賣食品。從表面上看，這是一個相當簡單的概念，但如果你想做得好，還有驚人的細節： * 應該有一個登陸頁面，客戶可以在其中瀏覽和搜尋餐館。 餐廳應該可以透過任意數量的屬性進行搜尋和過濾，包括價格、美食或客戶之前訂購的東西 * 每家餐廳都需要自己的頁面來顯示其選單項，並允許客戶選擇他們想吃的東西，包括折扣、餐飲優惠和特殊要求 * 客戶應該有一個個人資料頁面，他們可以在其中檢視他們的訂單歷史記錄、跟蹤交付和自定義他們的付款選項  每個頁面都有足夠的複雜性，我們可以輕鬆地證明每個頁面都有一個專門的團隊，並且每個團隊都應該能夠獨立於所有其他團隊在他們的頁面上工作。 他們應該能夠開發、測試、部署和維護他們的程式碼，而不必擔心與其他團隊發生衝突或協調。 但是，我們的客戶仍然應該看到一個無縫的網站。 在本文的其餘部分，我們將在需要示例程式碼或場景的任何地方使用此示例應用程式。 # Integration approaches 鑑於上面相當鬆散的定義，有許多方法可以合理地稱為微前端。 在本節中，我們將展示一些示例並討論它們的權衡。 所有這些方法都有一個相當自然的架構——通常應用程式中的每個頁面都有一個微前端，並且有一個容器應用程式，它： * 呈現常見的頁面元素，例如頁首和頁尾 * 解決跨領域問題，如身份驗證和導航 * 將各種微前端放在頁面上，並告訴每個微前端何時何地渲染自己  # Server-side template composition 我們從一種絕對不新穎的前端開發方法開始——用多個模板或片段在伺服器上渲染 HTML。 我們有一個 index.html ，它包含所有常見的頁面元素，然後使用伺服器端包含從片段 HTML 檔案中插入特定於頁面的內容： ```html <meta charset="utf-8"> <title>Feed me</title> <h1>Feed me</h1> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="renderer" content="webkit"> <title>微前端(Micro Frontend ) 落地實施的一些具體例子_ITPUB部落格</title> <meta name="keywords" content="應用開發,IT綜合"> <meta name="description" content="前文微前端概述(Micro Frontends) 以及相比單體應用，微前端能帶來什麼好處 簡單介紹了微前端的概念，本文來看一個具體的應用例子。 原文地址 想象一個網站，客戶可以在其中訂購外賣食品。從表面上看，這是一個相當簡單的概念，但如果你想做得好，還有驚人的細節： 應該有一個登陸頁面，客戶可以在其中瀏覽和搜尋餐館。 餐廳應該可以透過任意數量的屬性進行搜尋和過濾，包括價格、美食或客戶之前ITPUB部落格每天千篇餘篇博文新資訊，40多萬活躍博主，為IT技術人提供全面的IT資訊和交流互動的IT部落格平臺-中國專業的IT技術ITPUB部落格。"> <link rel="stylesheet" href="http://blog.itpub.net/layui/css/layui.css?v234"> <link rel="stylesheet" href="http://blog.itpub.net/css/base.css?v1.5"> <link rel="stylesheet" href="http://blog.itpub.net/css/zhuanlan.css?v=1.3"> <!--[if lt IE 9]> <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script> <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script> <![endif]--> <div></div> <div></div> <div></div> <div></div> <!--header部分開始--> <div class="blog-header"> <div class="w1200"> <a href="http://blog.itpub.net/" class="fl" rel="nofollow"><h1 class="logo">ITPub部落格</h1></a> <div class="nav fl"> <a href="http://www.itpub.net/" rel="nofollow">首頁</a> <a href="http://blog.itpub.net/" rel="nofollow">部落格</a> <a href="http://blog.itpub.net/column" rel="nofollow">專欄</a> <a href="http://edu.itpub.net/" rel="nofollow">學院</a> <a href="http://www.itpub.net/forum.php" rel="nofollow">社群</a> <a href="https://z.itpub.net/" rel="nofollow">技術棧</a> </div> <div class="fr"> <form action="http://blog.itpub.net/search/blog/" class="layui-form blog-search-wrap fl"> <input type="hidden" name="type" value="blog"> <input placeholder="搜尋" type="text" class="layui-input" name="keyword"> <button class="search-btn icon-blog"></button> </form> <a href="http://blog.itpub.net/blog/post/" class="layui-btn layui-btn-primary fl mlr30" target="_blank" rel="nofollow">發博</a> <!--登入前--> <div class="fl head-name" id="u_info"> </div> </div> </div> </div> <!--header部分結束--> <link rel="stylesheet" href="http://blog.itpub.net/markdown/css/editormd.css"> <link rel="stylesheet" href="http://blog.itpub.net/markdown/css/editormd.min.css"> <link rel="stylesheet" href="http://blog.itpub.net/markdown/css/editormd.preview.min.css"> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <link href="http://blog.itpub.net/ueditor/third-party/SyntaxHighlighter/shCoreDefault.css" rel="stylesheet" type="text/css"> <div></div> <link rel="stylesheet" href="http://g.alicdn.com/de/prismplayer/2.6.0/skins/default/aliplayer-min.css"> <div></div> <div></div> <div></div> <div></div> <div></div> <style> .code .container > textarea{ height:100%; } .translate{color: #9fa3a7 !important;font-size:12px !important;} .translate a{font-size:12px !important;color:#9fa3a7 !important;} .translate a:hover {font-size:12px !important;color:#f15142 !important;} .newslist{padding:10px 5px;height:20px !important;line-height:20px;overflow:hidden;text-overflow: ellipsis;white-space: nowrap;border-bottom:1px solid #eee} .fake-video-btn:hover{ cursor: pointer; border-style: solid; border-width: 2px; border-radius: 63px; border-color: #00c1de; } .it-player-wrap { display: flex; flex-direction: row; box-sizing: border-box; padding: 5px; margin-bottom: 20px; background: #FBFBFB; border: 1px solid #EFEFEF; border-radius: 4px; } .it-player-wrap .control { width: 50px; height: 50px; background-color: #57a5f2; margin-right: 15px; border-radius: 50%; } .it-player-wrap .control .play,.it-player-wrap .control .pause { background-size: 30px !important; color: #ffffff; width: 100%; height: 100%; } .it-player-wrap .control .play { background: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/PjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+PHN2ZyB0PSIxNTU5NjM3ODcxMTQ0IiBjbGFzcz0iaWNvbiIgc3R5bGU9IiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHAtaWQ9IjYwMjkiIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iMjAwIiBoZWlnaHQ9IjIwMCI+PGRlZnM+PHN0eWxlIHR5cGU9InRleHQvY3NzIj48L3N0eWxlPjwvZGVmcz48cGF0aCBkPSJNOTUzLjQ0NTA2NSA2MDguMjkwNzI0TDM1MC4yOTkyMSA5ODAuNjM0MjExQzI1Ni42NDExNTEgMTAzOC40NTUyNjMgMTgwLjY5MDc4OSA5OTcuNzk5ODM2IDE4MC42OTA3ODkgODkxLjkxNTAzM1YxMTUuNDg2NzExQzE4MC42OTA3ODkgOC42MzgyMjQgMjU2LjIxOTUzOS0zMS4yOTQ0NCAzNTAuMjM4OTggMjYuNzY3NTM0bDYwMy4yNjYzMTUgMzcyLjIyMzAyNmM5My42NTgwNTkgNTcuODIxMDUzIDk0LjA3OTY3MSAxNTEuMjM4MTkxIDAgMjA5LjMwMDE2NHoiIHAtaWQ9IjYwMzAiIGZpbGw9IiNmZmZmZmYiPjwvcGF0aD48L3N2Zz4=") no-repeat center; } .it-player-wrap .control .pause { background: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/PjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+PHN2ZyB0PSIxNTU5NjM3NzQ2MzAwIiBjbGFzcz0iaWNvbiIgc3R5bGU9IiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHAtaWQ9IjQ0NjciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iMjAwIiBoZWlnaHQ9IjIwMCI+PGRlZnM+PHN0eWxlIHR5cGU9InRleHQvY3NzIj48L3N0eWxlPjwvZGVmcz48cGF0aCBkPSJNNzM1LjkgNjQuOWMtNTEuMiAwLTk2IDQ0LjctOTYgOTUuOHY3MDIuNmMwIDUxLjEgNDQuOCA5NS44IDk2IDk1LjhzOTYtNDQuNyA5Ni05NS44VjE2MC43YzAtNTEuMS00NC44LTk1LjgtOTYtOTUuOHogbS00NDcuOCAwYy01MS4yIDAtOTYgNDQuNy05NiA5NS44djcwMi42YzAgNTEuMSA0NC44IDk1LjggOTYgOTUuOHM5Ni00NC43IDk2LTk1LjhWMTYwLjdjLTAuMS01MS4xLTQ0LjktOTUuOC05Ni05NS44eiIgcC1pZD0iNDQ2OCIgZmlsbD0iI2ZmZmZmZiI+PC9wYXRoPjwvc3ZnPg==") no-repeat center; } .it-player-wrap .box { flex: 1; } .it-player-wrap .box .info { font-family: PingFang-SC-Regular; font-size: 12px; color: #A8A8A8; text-align: left; line-height: 24px; margin: 0; } .it-player-wrap .box .info .size { display: inline-block; margin-right: 15px; } .it-player-wrap .progress-wrap { position: relative; margin-top: 15px; display: flex; flex-direction: row; align-items: center; } .it-player-wrap .progress-line,.it-player-wrap .progress-line-inner { position: absolute; height: 6px; width: 100%; background: #DDECFF; border-radius: 8.5px; } .it-player-wrap .progress-line-inner { background: #4C83E5 !important; } .it-player-wrap .progress-button { position: absolute; width: 50px; height: 20px; background: #4C83E5; box-shadow: 0 2px 4px 0 #A0C2FF; border-radius: 10px; top: -10px; font-family: PingFang-SC-Regular; font-size: 12px; color: #FFFFFF; text-align: center; line-height: 20px; cursor: pointer; } </style> <style> .crumb{ padding: 10px; margin-bottom: 10px; border-bottom: 1px solid rgba(238,238,238,0.4); } .crumb p{ width: 1200px; margin: 0 auto; } .newul{ line-height: 25px; } .new-item{ padding: 5px; display: block; width: 250px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } #doc-content img{ margin:none; display:initial; } .syntaxhighlighter{ width:890px; } .syntaxhighlighter td.code .line{ white-space: nowrap; } .syntaxhighlighter td.code .container{ width:840px!important; } .syntaxhighlighter td.code{ overflow: scroll!important; } </style> <div class="crumb"> <p> <a href="http://blog.itpub.net/" rel="nofollow">首頁</a> > <a href="http://blog.itpub.net/appdevelop/" rel="nofollow">應用開發</a> > <a href="http://blog.itpub.net/itother/" rel="nofollow">IT綜合</a> > <a rel="nofollow">微前端(Micro Frontend ) 落地實施的一些具體例子</a> </p> </div> <!--main部分開始--> <div class="blog-main clearfix w1200"> <div class="preview-wrap"> <div class="preview-header"> <h1 class="preview-title ">微前端(Micro Frontend ) 落地實施的一些具體例子 </h1> <div class="mess"> <span class="label label-original">原創</span> <span style="margin: auto 10px auto 0px"><a href="http://blog.itpub.net/itother/" rel="nofollow">IT綜合</a></span> <span>作者：<a href="http://blog.itpub.net/24475491/" rel="nofollow">i042416</a></span> <span>時間：2021-07-29 15:10:49</span> <span class="dian"></span> <span class="icon-see"></span> <span class="dian"></span> <span class="icon-comment">0</span> <!--博主本人和管理員 顯示 開始--> <i class="superman"><a href="javascript:;" mid="2784083" onclick="blogObj.delDraft($(this))" rel="nofollow">刪除</a></i> <i class="superman"><a href="http://blog.itpub.net/blog/post/2784083/" rel="nofollow">編輯</a></i> <!--博主本人和管理員 顯示 結束--> </div> </div> <div class="preview-body windowH"> <div class="preview-main"> <div id="doc-content" style="padding: 0px;"> <textarea style="display: none">前文[微前端概述(Micro Frontends) 以及相比單體應用，微前端能帶來什麼好處](https://jerry.blog.csdn.net/article/details/119190124) 簡單介紹了微前端的概念，本文來看一個具體的應用例子。 [原文地址](https://martinfowler.com/articles/micro-frontends.html) 想象一個網站，客戶可以在其中訂購外賣食品。從表面上看，這是一個相當簡單的概念，但如果你想做得好，還有驚人的細節： * 應該有一個登陸頁面，客戶可以在其中瀏覽和搜尋餐館。 餐廳應該可以透過任意數量的屬性進行搜尋和過濾，包括價格、美食或客戶之前訂購的東西 * 每家餐廳都需要自己的頁面來顯示其選單項，並允許客戶選擇他們想吃的東西，包括折扣、餐飲優惠和特殊要求 * 客戶應該有一個個人資料頁面，他們可以在其中檢視他們的訂單歷史記錄、跟蹤交付和自定義他們的付款選項  每個頁面都有足夠的複雜性，我們可以輕鬆地證明每個頁面都有一個專門的團隊，並且每個團隊都應該能夠獨立於所有其他團隊在他們的頁面上工作。 他們應該能夠開發、測試、部署和維護他們的程式碼，而不必擔心與其他團隊發生衝突或協調。 但是，我們的客戶仍然應該看到一個無縫的網站。 在本文的其餘部分，我們將在需要示例程式碼或場景的任何地方使用此示例應用程式。 # Integration approaches 鑑於上面相當鬆散的定義，有許多方法可以合理地稱為微前端。 在本節中，我們將展示一些示例並討論它們的權衡。 所有這些方法都有一個相當自然的架構——通常應用程式中的每個頁面都有一個微前端，並且有一個容器應用程式，它： * 呈現常見的頁面元素，例如頁首和頁尾 * 解決跨領域問題，如身份驗證和導航 * 將各種微前端放在頁面上，並告訴每個微前端何時何地渲染自己  # Server-side template composition 我們從一種絕對不新穎的前端開發方法開始——用多個模板或片段在伺服器上渲染 HTML。 我們有一個 index.html ，它包含所有常見的頁面元素，然後使用伺服器端包含從片段 HTML 檔案中插入特定於頁面的內容： ```html <meta charset="utf-8"> <title>Feed me</title> <h1>Feed me</h1> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="renderer" content="webkit"> <title>微前端(Micro Frontend ) 落地實施的一些具體例子_ITPUB部落格</title> <meta name="keywords" content="應用開發,IT綜合"> <meta name="description" content="前文微前端概述(Micro Frontends) 以及相比單體應用，微前端能帶來什麼好處 簡單介紹了微前端的概念，本文來看一個具體的應用例子。 原文地址 想象一個網站，客戶可以在其中訂購外賣食品。從表面上看，這是一個相當簡單的概念，但如果你想做得好，還有驚人的細節： 應該有一個登陸頁面，客戶可以在其中瀏覽和搜尋餐館。 餐廳應該可以透過任意數量的屬性進行搜尋和過濾，包括價格、美食或客戶之前ITPUB部落格每天千篇餘篇博文新資訊，40多萬活躍博主，為IT技術人提供全面的IT資訊和交流互動的IT部落格平臺-中國專業的IT技術ITPUB部落格。"> <link rel="stylesheet" href="http://blog.itpub.net/layui/css/layui.css?v234"> <link rel="stylesheet" href="http://blog.itpub.net/css/base.css?v1.5"> <link rel="stylesheet" href="http://blog.itpub.net/css/zhuanlan.css?v=1.3"> <!--[if lt IE 9]> <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script> <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script> <![endif]--> <div></div> <div></div> <div></div> <div></div> <!--header部分開始--> <div class="blog-header"> <div class="w1200"> <a href="http://blog.itpub.net/" class="fl" rel="nofollow"><h1 class="logo">ITPub部落格</h1></a> <div class="nav fl"> <a href="http://www.itpub.net/" rel="nofollow">首頁</a> <a href="http://blog.itpub.net/" rel="nofollow">部落格</a> <a href="http://blog.itpub.net/column" rel="nofollow">專欄</a> <a href="http://edu.itpub.net/" rel="nofollow">學院</a> <a href="http://www.itpub.net/forum.php" rel="nofollow">社群</a> <a href="https://z.itpub.net/" rel="nofollow">技術棧</a> </div> <div class="fr"> <form action="http://blog.itpub.net/search/blog/" class="layui-form blog-search-wrap fl"> <input type="hidden" name="type" value="blog"> <input placeholder="搜尋" type="text" class="layui-input" name="keyword"> <button class="search-btn icon-blog"></button> </form> <a href="http://blog.itpub.net/blog/post/" class="layui-btn layui-btn-primary fl mlr30" target="_blank" rel="nofollow">發博</a> <!--登入前--> <div class="fl head-name" id="u_info"> </div> </div> </div> </div> <!--header部分結束--> <link rel="stylesheet" href="http://blog.itpub.net/markdown/css/editormd.css"> <link rel="stylesheet" href="http://blog.itpub.net/markdown/css/editormd.min.css"> <link rel="stylesheet" href="http://blog.itpub.net/markdown/css/editormd.preview.min.css"> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <link href="http://blog.itpub.net/ueditor/third-party/SyntaxHighlighter/shCoreDefault.css" rel="stylesheet" type="text/css"> <div></div> <link rel="stylesheet" href="http://g.alicdn.com/de/prismplayer/2.6.0/skins/default/aliplayer-min.css"> <div></div> <div></div> <div></div> <div></div> <div></div> <style> .code .container > textarea{ height:100%; } .translate{color: #9fa3a7 !important;font-size:12px !important;} .translate a{font-size:12px !important;color:#9fa3a7 !important;} .translate a:hover {font-size:12px !important;color:#f15142 !important;} .newslist{padding:10px 5px;height:20px !important;line-height:20px;overflow:hidden;text-overflow: ellipsis;white-space: nowrap;border-bottom:1px solid #eee} .fake-video-btn:hover{ cursor: pointer; border-style: solid; border-width: 2px; border-radius: 63px; border-color: #00c1de; } .it-player-wrap { display: flex; flex-direction: row; box-sizing: border-box; padding: 5px; margin-bottom: 20px; background: #FBFBFB; border: 1px solid #EFEFEF; border-radius: 4px; } .it-player-wrap .control { width: 50px; height: 50px; background-color: #57a5f2; margin-right: 15px; border-radius: 50%; } .it-player-wrap .control .play,.it-player-wrap .control .pause { background-size: 30px !important; color: #ffffff; width: 100%; height: 100%; } .it-player-wrap .control .play { background: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/PjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+PHN2ZyB0PSIxNTU5NjM3ODcxMTQ0IiBjbGFzcz0iaWNvbiIgc3R5bGU9IiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHAtaWQ9IjYwMjkiIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iMjAwIiBoZWlnaHQ9IjIwMCI+PGRlZnM+PHN0eWxlIHR5cGU9InRleHQvY3NzIj48L3N0eWxlPjwvZGVmcz48cGF0aCBkPSJNOTUzLjQ0NTA2NSA2MDguMjkwNzI0TDM1MC4yOTkyMSA5ODAuNjM0MjExQzI1Ni42NDExNTEgMTAzOC40NTUyNjMgMTgwLjY5MDc4OSA5OTcuNzk5ODM2IDE4MC42OTA3ODkgODkxLjkxNTAzM1YxMTUuNDg2NzExQzE4MC42OTA3ODkgOC42MzgyMjQgMjU2LjIxOTUzOS0zMS4yOTQ0NCAzNTAuMjM4OTggMjYuNzY3NTM0bDYwMy4yNjYzMTUgMzcyLjIyMzAyNmM5My42NTgwNTkgNTcuODIxMDUzIDk0LjA3OTY3MSAxNTEuMjM4MTkxIDAgMjA5LjMwMDE2NHoiIHAtaWQ9IjYwMzAiIGZpbGw9IiNmZmZmZmYiPjwvcGF0aD48L3N2Zz4=") no-repeat center; } .it-player-wrap .control .pause { background: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/PjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+PHN2ZyB0PSIxNTU5NjM3NzQ2MzAwIiBjbGFzcz0iaWNvbiIgc3R5bGU9IiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHAtaWQ9IjQ0NjciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iMjAwIiBoZWlnaHQ9IjIwMCI+PGRlZnM+PHN0eWxlIHR5cGU9InRleHQvY3NzIj48L3N0eWxlPjwvZGVmcz48cGF0aCBkPSJNNzM1LjkgNjQuOWMtNTEuMiAwLTk2IDQ0LjctOTYgOTUuOHY3MDIuNmMwIDUxLjEgNDQuOCA5NS44IDk2IDk1LjhzOTYtNDQuNyA5Ni05NS44VjE2MC43YzAtNTEuMS00NC44LTk1LjgtOTYtOTUuOHogbS00NDcuOCAwYy01MS4yIDAtOTYgNDQuNy05NiA5NS44djcwMi42YzAgNTEuMSA0NC44IDk1LjggOTYgOTUuOHM5Ni00NC43IDk2LTk1LjhWMTYwLjdjLTAuMS01MS4xLTQ0LjktOTUuOC05Ni05NS44eiIgcC1pZD0iNDQ2OCIgZmlsbD0iI2ZmZmZmZiI+PC9wYXRoPjwvc3ZnPg==") no-repeat center; } .it-player-wrap .box { flex: 1; } .it-player-wrap .box .info { font-family: PingFang-SC-Regular; font-size: 12px; color: #A8A8A8; text-align: left; line-height: 24px; margin: 0; } .it-player-wrap .box .info .size { display: inline-block; margin-right: 15px; } .it-player-wrap .progress-wrap { position: relative; margin-top: 15px; display: flex; flex-direction: row; align-items: center; } .it-player-wrap .progress-line,.it-player-wrap .progress-line-inner { position: absolute; height: 6px; width: 100%; background: #DDECFF; border-radius: 8.5px; } .it-player-wrap .progress-line-inner { background: #4C83E5 !important; } .it-player-wrap .progress-button { position: absolute; width: 50px; height: 20px; background: #4C83E5; box-shadow: 0 2px 4px 0 #A0C2FF; border-radius: 10px; top: -10px; font-family: PingFang-SC-Regular; font-size: 12px; color: #FFFFFF; text-align: center; line-height: 20px; cursor: pointer; } </style> <style> .crumb{ padding: 10px; margin-bottom: 10px; border-bottom: 1px solid rgba(238,238,238,0.4); } .crumb p{ width: 1200px; margin: 0 auto; } .newul{ line-height: 25px; } .new-item{ padding: 5px; display: block; width: 250px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } #doc-content img{ margin:none; display:initial; } .syntaxhighlighter{ width:890px; } .syntaxhighlighter td.code .line{ white-space: nowrap; } .syntaxhighlighter td.code .container{ width:840px!important; } .syntaxhighlighter td.code{ overflow: scroll!important; } </style> <div class="crumb"> <p> <a href="http://blog.itpub.net/" rel="nofollow">首頁</a> > <a href="http://blog.itpub.net/appdevelop/" rel="nofollow">應用開發</a> > <a href="http://blog.itpub.net/itother/" rel="nofollow">IT綜合</a> > <a rel="nofollow">微前端(Micro Frontend ) 落地實施的一些具體例子</a> </p> </div> <!--main部分開始--> <div class="blog-main clearfix w1200"> <div class="preview-wrap"> <div class="preview-header"> <h1 class="preview-title ">微前端(Micro Frontend ) 落地實施的一些具體例子 </h1> <div class="mess"> <span class="label label-original">原創</span> <span style="margin: auto 10px auto 0px"><a href="http://blog.itpub.net/itother/" rel="nofollow">IT綜合</a></span> <span>作者：<a href="http://blog.itpub.net/24475491/" rel="nofollow">i042416</a></span> <span>時間：2021-07-29 15:10:49</span> <span class="dian"></span> <span class="icon-see"></span> <span class="dian"></span> <span class="icon-comment">0</span> <!--博主本人和管理員 顯示 開始--> <i class="superman"><a href="javascript:;" mid="2784083" onclick="blogObj.delDraft($(this))" rel="nofollow">刪除</a></i> <i class="superman"><a href="http://blog.itpub.net/blog/post/2784083/" rel="nofollow">編輯</a></i> <!--博主本人和管理員 顯示 結束--> </div> </div> <div class="preview-body windowH"> <div class="preview-main"> <div id="doc-content" style="padding: 0px;"> <textarea style="display: none">前文[微前端概述(Micro Frontends) 以及相比單體應用，微前端能帶來什麼好處](https://jerry.blog.csdn.net/article/details/119190124) 簡單介紹了微前端的概念，本文來看一個具體的應用例子。 [原文地址](https://martinfowler.com/articles/micro-frontends.html) 想象一個網站，客戶可以在其中訂購外賣食品。從表面上看，這是一個相當簡單的概念，但如果你想做得好，還有驚人的細節： * 應該有一個登陸頁面，客戶可以在其中瀏覽和搜尋餐館。 餐廳應該可以透過任意數量的屬性進行搜尋和過濾，包括價格、美食或客戶之前訂購的東西 * 每家餐廳都需要自己的頁面來顯示其選單項，並允許客戶選擇他們想吃的東西，包括折扣、餐飲優惠和特殊要求 * 客戶應該有一個個人資料頁面，他們可以在其中檢視他們的訂單歷史記錄、跟蹤交付和自定義他們的付款選項  每個頁面都有足夠的複雜性，我們可以輕鬆地證明每個頁面都有一個專門的團隊，並且每個團隊都應該能夠獨立於所有其他團隊在他們的頁面上工作。 他們應該能夠開發、測試、部署和維護他們的程式碼，而不必擔心與其他團隊發生衝突或協調。 但是，我們的客戶仍然應該看到一個無縫的網站。 在本文的其餘部分，我們將在需要示例程式碼或場景的任何地方使用此示例應用程式。 # Integration approaches 鑑於上面相當鬆散的定義，有許多方法可以合理地稱為微前端。 在本節中，我們將展示一些示例並討論它們的權衡。 所有這些方法都有一個相當自然的架構——通常應用程式中的每個頁面都有一個微前端，並且有一個容器應用程式，它： * 呈現常見的頁面元素，例如頁首和頁尾 * 解決跨領域問題，如身份驗證和導航 * 將各種微前端放在頁面上，並告訴每個微前端何時何地渲染自己  # Server-side template composition 我們從一種絕對不新穎的前端開發方法開始——用多個模板或片段在伺服器上渲染 HTML。 我們有一個 index.html ，它包含所有常見的頁面元素，然後使用伺服器端包含從片段 HTML 檔案中插入特定於頁面的內容： ```html <meta charset="utf-8"> <title>Feed me</title> <h1>Feed me</h1> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="renderer" content="webkit"> <title>微前端(Micro Frontend ) 落地實施的一些具體例子_ITPUB部落格</title> <meta name="keywords" content="應用開發,IT綜合"> <meta name="description" content="前文微前端概述(Micro Frontends) 以及相比單體應用，微前端能帶來什麼好處 簡單介紹了微前端的概念，本文來看一個具體的應用例子。 原文地址 想象一個網站，客戶可以在其中訂購外賣食品。從表面上看，這是一個相當簡單的概念，但如果你想做得好，還有驚人的細節： 應該有一個登陸頁面，客戶可以在其中瀏覽和搜尋餐館。 餐廳應該可以透過任意數量的屬性進行搜尋和過濾，包括價格、美食或客戶之前ITPUB部落格每天千篇餘篇博文新資訊，40多萬活躍博主，為IT技術人提供全面的IT資訊和交流互動的IT部落格平臺-中國專業的IT技術ITPUB部落格。"> <link rel="stylesheet" href="http://blog.itpub.net/layui/css/layui.css?v234"> <link rel="stylesheet" href="http://blog.itpub.net/css/base.css?v1.5"> <link rel="stylesheet" href="http://blog.itpub.net/css/zhuanlan.css?v=1.3"> <!--[if lt IE 9]> <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script> <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script> <![endif]--> <div></div> <div></div> <div></div> <div></div> <!--header部分開始--> <div class="blog-header"> <div class="w1200"> <a href="http://blog.itpub.net/" class="fl" rel="nofollow"><h1 class="logo">ITPub部落格</h1></a> <div class="nav fl"> <a href="http://www.itpub.net/" rel="nofollow">首頁</a> <a href="http://blog.itpub.net/" rel="nofollow">部落格</a> <a href="http://blog.itpub.net/column" rel="nofollow">專欄</a> <a href="http://edu.itpub.net/" rel="nofollow">學院</a> <a href="http://www.itpub.net/forum.php" rel="nofollow">社群</a> <a href="https://z.itpub.net/" rel="nofollow">技術棧</a> </div> <div class="fr"> <form action="http://blog.itpub.net/search/blog/" class="layui-form blog-search-wrap fl"> <input type="hidden" name="type" value="blog"> <input placeholder="搜尋" type="text" class="layui-input" name="keyword"> <button class="search-btn icon-blog"></button> </form> <a href="http://blog.itpub.net/blog/post/" class="layui-btn layui-btn-primary fl mlr30" target="_blank" rel="nofollow">發博</a> <!--登入前--> <div class="fl head-name" id="u_info"> </div> </div> </div> </div> <!--header部分結束--> <link rel="stylesheet" href="http://blog.itpub.net/markdown/css/editormd.css"> <link rel="stylesheet" href="http://blog.itpub.net/markdown/css/editormd.min.css"> <link rel="stylesheet" href="http://blog.itpub.net/markdown/css/editormd.preview.min.css"> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <link href="http://blog.itpub.net/ueditor/third-party/SyntaxHighlighter/shCoreDefault.css" rel="stylesheet" type="text/css"> <div></div> <link rel="stylesheet" href="http://g.alicdn.com/de/prismplayer/2.6.0/skins/default/aliplayer-min.css"> <div></div> <div></div> <div></div> <div></div> <div></div> <style> .code .container > textarea{ height:100%; } .translate{color: #9fa3a7 !important;font-size:12px !important;} .translate a{font-size:12px !important;color:#9fa3a7 !important;} .translate a:hover {font-size:12px !important;color:#f15142 !important;} .newslist{padding:10px 5px;height:20px !important;line-height:20px;overflow:hidden;text-overflow: ellipsis;white-space: nowrap;border-bottom:1px solid #eee} .fake-video-btn:hover{ cursor: pointer; border-style: solid; border-width: 2px; border-radius: 63px; border-color: #00c1de; } .it-player-wrap { display: flex; flex-direction: row; box-sizing: border-box; padding: 5px; margin-bottom: 20px; background: #FBFBFB; border: 1px solid #EFEFEF; border-radius: 4px; } .it-player-wrap .control { width: 50px; height: 50px; background-color: #57a5f2; margin-right: 15px; border-radius: 50%; } .it-player-wrap .control .play,.it-player-wrap .control .pause { background-size: 30px !important; color: #ffffff; width: 100%; height: 100%; } .it-player-wrap .control .play { background: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/PjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+PHN2ZyB0PSIxNTU5NjM3ODcxMTQ0IiBjbGFzcz0iaWNvbiIgc3R5bGU9IiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHAtaWQ9IjYwMjkiIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iMjAwIiBoZWlnaHQ9IjIwMCI+PGRlZnM+PHN0eWxlIHR5cGU9InRleHQvY3NzIj48L3N0eWxlPjwvZGVmcz48cGF0aCBkPSJNOTUzLjQ0NTA2NSA2MDguMjkwNzI0TDM1MC4yOTkyMSA5ODAuNjM0MjExQzI1Ni42NDExNTEgMTAzOC40NTUyNjMgMTgwLjY5MDc4OSA5OTcuNzk5ODM2IDE4MC42OTA3ODkgODkxLjkxNTAzM1YxMTUuNDg2NzExQzE4MC42OTA3ODkgOC42MzgyMjQgMjU2LjIxOTUzOS0zMS4yOTQ0NCAzNTAuMjM4OTggMjYuNzY3NTM0bDYwMy4yNjYzMTUgMzcyLjIyMzAyNmM5My42NTgwNTkgNTcuODIxMDUzIDk0LjA3OTY3MSAxNTEuMjM4MTkxIDAgMjA5LjMwMDE2NHoiIHAtaWQ9IjYwMzAiIGZpbGw9IiNmZmZmZmYiPjwvcGF0aD48L3N2Zz4=") no-repeat center; } .it-player-wrap .control .pause { background: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/PjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+PHN2ZyB0PSIxNTU5NjM3NzQ2MzAwIiBjbGFzcz0iaWNvbiIgc3R5bGU9IiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHAtaWQ9IjQ0NjciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iMjAwIiBoZWlnaHQ9IjIwMCI+PGRlZnM+PHN0eWxlIHR5cGU9InRleHQvY3NzIj48L3N0eWxlPjwvZGVmcz48cGF0aCBkPSJNNzM1LjkgNjQuOWMtNTEuMiAwLTk2IDQ0LjctOTYgOTUuOHY3MDIuNmMwIDUxLjEgNDQuOCA5NS44IDk2IDk1LjhzOTYtNDQuNyA5Ni05NS44VjE2MC43YzAtNTEuMS00NC44LTk1LjgtOTYtOTUuOHogbS00NDcuOCAwYy01MS4yIDAtOTYgNDQuNy05NiA5NS44djcwMi42YzAgNTEuMSA0NC44IDk1LjggOTYgOTUuOHM5Ni00NC43IDk2LTk1LjhWMTYwLjdjLTAuMS01MS4xLTQ0LjktOTUuOC05Ni05NS44eiIgcC1pZD0iNDQ2OCIgZmlsbD0iI2ZmZmZmZiI+PC9wYXRoPjwvc3ZnPg==") no-repeat center; } .it-player-wrap .box { flex: 1; } .it-player-wrap .box .info { font-family: PingFang-SC-Regular; font-size: 12px; color: #A8A8A8; text-align: left; line-height: 24px; margin: 0; } .it-player-wrap .box .info .size { display: inline-block; margin-right: 15px; } .it-player-wrap .progress-wrap { position: relative; margin-top: 15px; display: flex; flex-direction: row; align-items: center; } .it-player-wrap .progress-line,.it-player-wrap .progress-line-inner { position: absolute; height: 6px; width: 100%; background: #DDECFF; border-radius: 8.5px; } .it-player-wrap .progress-line-inner { background: #4C83E5 !important; } .it-player-wrap .progress-button { position: absolute; width: 50px; height: 20px; background: #4C83E5; box-shadow: 0 2px 4px 0 #A0C2FF; border-radius: 10px; top: -10px; font-family: PingFang-SC-Regular; font-size: 12px; color: #FFFFFF; text-align: center; line-height: 20px; cursor: pointer; } </style> <style> .crumb{ padding: 10px; margin-bottom: 10px; border-bottom: 1px solid rgba(238,238,238,0.4); } .crumb p{ width: 1200px; margin: 0 auto; } .newul{ line-height: 25px; } .new-item{ padding: 5px; display: block; width: 250px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } #doc-content img{ margin:none; display:initial; } .syntaxhighlighter{ width:890px; } .syntaxhighlighter td.code .line{ white-space: nowrap; } .syntaxhighlighter td.code .container{ width:840px!important; } .syntaxhighlighter td.code{ overflow: scroll!important; } </style> <div class="crumb"> <p> <a href="http://blog.itpub.net/" rel="nofollow">首頁</a> > <a href="http://blog.itpub.net/appdevelop/" rel="nofollow">應用開發</a> > <a href="http://blog.itpub.net/itother/" rel="nofollow">IT綜合</a> > <a rel="nofollow">微前端(Micro Frontend ) 落地實施的一些具體例子</a> </p> </div> <!--main部分開始--> <div class="blog-main clearfix w1200"> <div class="preview-wrap"> <div class="preview-header"> <h1 class="preview-title ">微前端(Micro Frontend ) 落地實施的一些具體例子 </h1> <div class="mess"> <span class="label label-original">原創</span> <span style="margin: auto 10px auto 0px"><a href="http://blog.itpub.net/itother/" rel="nofollow">IT綜合</a></span> <span>作者：<a href="http://blog.itpub.net/24475491/" rel="nofollow">i042416</a></span> <span>時間：2021-07-29 15:10:49</span> <span class="dian"></span> <span class="icon-see"></span> <span class="dian"></span> <span class="icon-comment">0</span> <!--博主本人和管理員 顯示 開始--> <i class="superman"><a href="javascript:;" mid="2784083" onclick="blogObj.delDraft($(this))" rel="nofollow">刪除</a></i> <i class="superman"><a href="http://blog.itpub.net/blog/post/2784083/" rel="nofollow">編輯</a></i> <!--博主本人和管理員 顯示 結束--> </div> </div> <div class="preview-body windowH"> <div class="preview-main"> <div id="doc-content" style="padding: 0px;"> <textarea style="display: none">前文[微前端概述(Micro Frontends) 以及相比單體應用，微前端能帶來什麼好處](https://jerry.blog.csdn.net/article/details/119190124) 簡單介紹了微前端的概念，本文來看一個具體的應用例子。 [原文地址](https://martinfowler.com/articles/micro-frontends.html) 想象一個網站，客戶可以在其中訂購外賣食品。從表面上看，這是一個相當簡單的概念，但如果你想做得好，還有驚人的細節： * 應該有一個登陸頁面，客戶可以在其中瀏覽和搜尋餐館。 餐廳應該可以透過任意數量的屬性進行搜尋和過濾，包括價格、美食或客戶之前訂購的東西 * 每家餐廳都需要自己的頁面來顯示其選單項，並允許客戶選擇他們想吃的東西，包括折扣、餐飲優惠和特殊要求 * 客戶應該有一個個人資料頁面，他們可以在其中檢視他們的訂單歷史記錄、跟蹤交付和自定義他們的付款選項  每個頁面都有足夠的複雜性，我們可以輕鬆地證明每個頁面都有一個專門的團隊，並且每個團隊都應該能夠獨立於所有其他團隊在他們的頁面上工作。 他們應該能夠開發、測試、部署和維護他們的程式碼，而不必擔心與其他團隊發生衝突或協調。 但是，我們的客戶仍然應該看到一個無縫的網站。 在本文的其餘部分，我們將在需要示例程式碼或場景的任何地方使用此示例應用程式。 # Integration approaches 鑑於上面相當鬆散的定義，有許多方法可以合理地稱為微前端。 在本節中，我們將展示一些示例並討論它們的權衡。 所有這些方法都有一個相當自然的架構——通常應用程式中的每個頁面都有一個微前端，並且有一個容器應用程式，它： * 呈現常見的頁面元素，例如頁首和頁尾 * 解決跨領域問題，如身份驗證和導航 * 將各種微前端放在頁面上，並告訴每個微前端何時何地渲染自己  # Server-side template composition 我們從一種絕對不新穎的前端開發方法開始——用多個模板或片段在伺服器上渲染 HTML。 我們有一個 index.html ，它包含所有常見的頁面元素，然後使用伺服器端包含從片段 HTML 檔案中插入特定於頁面的內容： ```html <meta charset="utf-8"> <title>Feed me</title> <h1>Feed me</h1> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="renderer" content="webkit"> <title>微前端(Micro Frontend ) 落地實施的一些具體例子_ITPUB部落格</title> <meta name="keywords" content="應用開發,IT綜合"> <meta name="description" content="前文微前端概述(Micro Frontends) 以及相比單體應用，微前端能帶來什麼好處 簡單介紹了微前端的概念，本文來看一個具體的應用例子。 原文地址 想象一個網站，客戶可以在其中訂購外賣食品。從表面上看，這是一個相當簡單的概念，但如果你想做得好，還有驚人的細節： 應該有一個登陸頁面，客戶可以在其中瀏覽和搜尋餐館。 餐廳應該可以透過任意數量的屬性進行搜尋和過濾，包括價格、美食或客戶之前ITPUB部落格每天千篇餘篇博文新資訊，40多萬活躍博主，為IT技術人提供全面的IT資訊和交流互動的IT部落格平臺-中國專業的IT技術ITPUB部落格。"> <link rel="stylesheet" href="http://blog.itpub.net/layui/css/layui.css?v234"> <link rel="stylesheet" href="http://blog.itpub.net/css/base.css?v1.5"> <link rel="stylesheet" href="http://blog.itpub.net/css/zhuanlan.css?v=1.3"> <!--[if lt IE 9]> <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script> <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script> <![endif]--> <div></div> <div></div> <div></div> <div></div> <!--header部分開始--> <div class="blog-header"> <div class="w1200"> <a href="http://blog.itpub.net/" class="fl" rel="nofollow"><h1 class="logo">ITPub部落格</h1></a> <div class="nav fl"> <a href="http://www.itpub.net/" rel="nofollow">首頁</a> <a href="http://blog.itpub.net/" rel="nofollow">部落格</a> <a href="http://blog.itpub.net/column" rel="nofollow">專欄</a> <a href="http://edu.itpub.net/" rel="nofollow">學院</a> <a href="http://www.itpub.net/forum.php" rel="nofollow">社群</a> <a href="https://z.itpub.net/" rel="nofollow">技術棧</a> </div> <div class="fr"> <form action="http://blog.itpub.net/search/blog/" class="layui-form blog-search-wrap fl"> <input type="hidden" name="type" value="blog"> <input placeholder="搜尋" type="text" class="layui-input" name="keyword"> <button class="search-btn icon-blog"></button> </form> <a href="http://blog.itpub.net/blog/post/" class="layui-btn layui-btn-primary fl mlr30" target="_blank" rel="nofollow">發博</a> <!--登入前--> <div class="fl head-name" id="u_info"> </div> </div> </div> </div> <!--header部分結束--> <link rel="stylesheet" href="http://blog.itpub.net/markdown/css/editormd.css"> <link rel="stylesheet" href="http://blog.itpub.net/markdown/css/editormd.min.css"> <link rel="stylesheet" href="http://blog.itpub.net/markdown/css/editormd.preview.min.css"> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <link href="http://blog.itpub.net/ueditor/third-party/SyntaxHighlighter/shCoreDefault.css" rel="stylesheet" type="text/css"> <div></div> <link rel="stylesheet" href="http://g.alicdn.com/de/prismplayer/2.6.0/skins/default/aliplayer-min.css"> <div></div> <div></div> <div></div> <div></div> <div></div> <style> .code .container > textarea{ height:100%; } .translate{color: #9fa3a7 !important;font-size:12px !important;} .translate a{font-size:12px !important;color:#9fa3a7 !important;} .translate a:hover {font-size:12px !important;color:#f15142 !important;} .newslist{padding:10px 5px;height:20px !important;line-height:20px;overflow:hidden;text-overflow: ellipsis;white-space: nowrap;border-bottom:1px solid #eee} .fake-video-btn:hover{ cursor: pointer; border-style: solid; border-width: 2px; border-radius: 63px; border-color: #00c1de; } .it-player-wrap { display: flex; flex-direction: row; box-sizing: border-box; padding: 5px; margin-bottom: 20px; background: #FBFBFB; border: 1px solid #EFEFEF; border-radius: 4px; } .it-player-wrap .control { width: 50px; height: 50px; background-color: #57a5f2; margin-right: 15px; border-radius: 50%; } .it-player-wrap .control .play,.it-player-wrap .control .pause { background-size: 30px !important; color: #ffffff; width: 100%; height: 100%; } .it-player-wrap .control .play { background: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/PjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+PHN2ZyB0PSIxNTU5NjM3ODcxMTQ0IiBjbGFzcz0iaWNvbiIgc3R5bGU9IiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHAtaWQ9IjYwMjkiIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iMjAwIiBoZWlnaHQ9IjIwMCI+PGRlZnM+PHN0eWxlIHR5cGU9InRleHQvY3NzIj48L3N0eWxlPjwvZGVmcz48cGF0aCBkPSJNOTUzLjQ0NTA2NSA2MDguMjkwNzI0TDM1MC4yOTkyMSA5ODAuNjM0MjExQzI1Ni42NDExNTEgMTAzOC40NTUyNjMgMTgwLjY5MDc4OSA5OTcuNzk5ODM2IDE4MC42OTA3ODkgODkxLjkxNTAzM1YxMTUuNDg2NzExQzE4MC42OTA3ODkgOC42MzgyMjQgMjU2LjIxOTUzOS0zMS4yOTQ0NCAzNTAuMjM4OTggMjYuNzY3NTM0bDYwMy4yNjYzMTUgMzcyLjIyMzAyNmM5My42NTgwNTkgNTcuODIxMDUzIDk0LjA3OTY3MSAxNTEuMjM4MTkxIDAgMjA5LjMwMDE2NHoiIHAtaWQ9IjYwMzAiIGZpbGw9IiNmZmZmZmYiPjwvcGF0aD48L3N2Zz4=") no-repeat center; } .it-player-wrap .control .pause { background: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/PjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+PHN2ZyB0PSIxNTU5NjM3NzQ2MzAwIiBjbGFzcz0iaWNvbiIgc3R5bGU9IiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHAtaWQ9IjQ0NjciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iMjAwIiBoZWlnaHQ9IjIwMCI+PGRlZnM+PHN0eWxlIHR5cGU9InRleHQvY3NzIj48L3N0eWxlPjwvZGVmcz48cGF0aCBkPSJNNzM1LjkgNjQuOWMtNTEuMiAwLTk2IDQ0LjctOTYgOTUuOHY3MDIuNmMwIDUxLjEgNDQuOCA5NS44IDk2IDk1LjhzOTYtNDQuNyA5Ni05NS44VjE2MC43YzAtNTEuMS00NC44LTk1LjgtOTYtOTUuOHogbS00NDcuOCAwYy01MS4yIDAtOTYgNDQuNy05NiA5NS44djcwMi42YzAgNTEuMSA0NC44IDk1LjggOTYgOTUuOHM5Ni00NC43IDk2LTk1LjhWMTYwLjdjLTAuMS01MS4xLTQ0LjktOTUuOC05Ni05NS44eiIgcC1pZD0iNDQ2OCIgZmlsbD0iI2ZmZmZmZiI+PC9wYXRoPjwvc3ZnPg==") no-repeat center; } .it-player-wrap .box { flex: 1; } .it-player-wrap .box .info { font-family: PingFang-SC-Regular; font-size: 12px; color: #A8A8A8; text-align: left; line-height: 24px; margin: 0; } .it-player-wrap .box .info .size { display: inline-block; margin-right: 15px; } .it-player-wrap .progress-wrap { position: relative; margin-top: 15px; display: flex; flex-direction: row; align-items: center; } .it-player-wrap .progress-line,.it-player-wrap .progress-line-inner { position: absolute; height: 6px; width: 100%; background: #DDECFF; border-radius: 8.5px; } .it-player-wrap .progress-line-inner { background: #4C83E5 !important; } .it-player-wrap .progress-button { position: absolute; width: 50px; height: 20px; background: #4C83E5; box-shadow: 0 2px 4px 0 #A0C2FF; border-radius: 10px; top: -10px; font-family: PingFang-SC-Regular; font-size: 12px; color: #FFFFFF; text-align: center; line-height: 20px; cursor: pointer; } </style> <style> .crumb{ padding: 10px; margin-bottom: 10px; border-bottom: 1px solid rgba(238,238,238,0.4); } .crumb p{ width: 1200px; margin: 0 auto; } .newul{ line-height: 25px; } .new-item{ padding: 5px; display: block; width: 250px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } #doc-content img{ margin:none; display:initial; } .syntaxhighlighter{ width:890px; } .syntaxhighlighter td.code .line{ white-space: nowrap; } .syntaxhighlighter td.code .container{ width:840px!important; } .syntaxhighlighter td.code{ overflow: scroll!important; } </style> <div class="crumb"> <p> <a href="http://blog.itpub.net/" rel="nofollow">首頁</a> > <a href="http://blog.itpub.net/appdevelop/" rel="nofollow">應用開發</a> > <a href="http://blog.itpub.net/itother/" rel="nofollow">IT綜合</a> > <a rel="nofollow">微前端(Micro Frontend ) 落地實施的一些具體例子</a> </p> </div> <!--main部分開始--> <div class="blog-main clearfix w1200"> <div class="preview-wrap"> <div class="preview-header"> <h1 class="preview-title ">微前端(Micro Frontend ) 落地實施的一些具體例子 </h1> <div class="mess"> <span class="label label-original">原創</span> <span style="margin: auto 10px auto 0px"><a href="http://blog.itpub.net/itother/" rel="nofollow">IT綜合</a></span> <span>作者：<a href="http://blog.itpub.net/24475491/" rel="nofollow">i042416</a></span> <span>時間：2021-07-29 15:10:49</span> <span class="dian"></span> <span class="icon-see"></span> <span class="dian"></span> <span class="icon-comment">0</span> <!--博主本人和管理員 顯示 開始--> <i class="superman"><a href="javascript:;" mid="2784083" onclick="blogObj.delDraft($(this))" rel="nofollow">刪除</a></i> <i class="superman"><a href="http://blog.itpub.net/blog/post/2784083/" rel="nofollow">編輯</a></i> <!--博主本人和管理員 顯示 結束--> </div> </div> <div class="preview-body windowH"> <div class="preview-main"> <div id="doc-content" style="padding: 0px;"> <textarea style="display: none">前文[微前端概述(Micro Frontends) 以及相比單體應用，微前端能帶來什麼好處](https://jerry.blog.csdn.net/article/details/119190124) 簡單介紹了微前端的概念，本文來看一個具體的應用例子。 [原文地址](https://martinfowler.com/articles/micro-frontends.html) 想象一個網站，客戶可以在其中訂購外賣食品。從表面上看，這是一個相當簡單的概念，但如果你想做得好，還有驚人的細節： * 應該有一個登陸頁面，客戶可以在其中瀏覽和搜尋餐館。 餐廳應該可以透過任意數量的屬性進行搜尋和過濾，包括價格、美食或客戶之前訂購的東西 * 每家餐廳都需要自己的頁面來顯示其選單項，並允許客戶選擇他們想吃的東西，包括折扣、餐飲優惠和特殊要求 * 客戶應該有一個個人資料頁面，他們可以在其中檢視他們的訂單歷史記錄、跟蹤交付和自定義他們的付款選項  每個頁面都有足夠的複雜性，我們可以輕鬆地證明每個頁面都有一個專門的團隊，並且每個團隊都應該能夠獨立於所有其他團隊在他們的頁面上工作。 他們應該能夠開發、測試、部署和維護他們的程式碼，而不必擔心與其他團隊發生衝突或協調。 但是，我們的客戶仍然應該看到一個無縫的網站。 在本文的其餘部分，我們將在需要示例程式碼或場景的任何地方使用此示例應用程式。 # Integration approaches 鑑於上面相當鬆散的定義，有許多方法可以合理地稱為微前端。 在本節中，我們將展示一些示例並討論它們的權衡。 所有這些方法都有一個相當自然的架構——通常應用程式中的每個頁面都有一個微前端，並且有一個容器應用程式，它： * 呈現常見的頁面元素，例如頁首和頁尾 * 解決跨領域問題，如身份驗證和導航 * 將各種微前端放在頁面上，並告訴每個微前端何時何地渲染自己  # Server-side template composition 我們從一種絕對不新穎的前端開發方法開始——用多個模板或片段在伺服器上渲染 HTML。 我們有一個 index.html ，它包含所有常見的頁面元素，然後使用伺服器端包含從片段 HTML 檔案中插入特定於頁面的內容： ```html <meta charset="utf-8"> <title>Feed me</title> <h1>Feed me</h1> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="renderer" content="webkit"> <title>微前端(Micro Frontend ) 落地實施的一些具體例子_ITPUB部落格</title> <meta name="keywords" content="應用開發,IT綜合"> <meta name="description" content="前文微前端概述(Micro Frontends) 以及相比單體應用，微前端能帶來什麼好處 簡單介紹了微前端的概念，本文來看一個具體的應用例子。 原文地址 想象一個網站，客戶可以在其中訂購外賣食品。從表面上看，這是一個相當簡單的概念，但如果你想做得好，還有驚人的細節： 應該有一個登陸頁面，客戶可以在其中瀏覽和搜尋餐館。 餐廳應該可以透過任意數量的屬性進行搜尋和過濾，包括價格、美食或客戶之前ITPUB部落格每天千篇餘篇博文新資訊，40多萬活躍博主，為IT技術人提供全面的IT資訊和交流互動的IT部落格平臺-中國專業的IT技術ITPUB部落格。"> <link rel="stylesheet" href="http://blog.itpub.net/layui/css/layui.css?v234"> <link rel="stylesheet" href="http://blog.itpub.net/css/base.css?v1.5"> <link rel="stylesheet" href="http://blog.itpub.net/css/zhuanlan.css?v=1.3"> <!--[if lt IE 9]> <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script> <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script> <![endif]--> <div></div> <div></div> <div></div> <div></div> <!--header部分開始--> <div class="blog-header"> <div class="w1200"> <a href="http://blog.itpub.net/" class="fl" rel="nofollow"><h1 class="logo">ITPub部落格</h1></a> <div class="nav fl"> <a href="http://www.itpub.net/" rel="nofollow">首頁</a> <a href="http://blog.itpub.net/" rel="nofollow">部落格</a> <a href="http://blog.itpub.net/column" rel="nofollow">專欄</a> <a href="http://edu.itpub.net/" rel="nofollow">學院</a> <a href="http://www.itpub.net/forum.php" rel="nofollow">社群</a> <a href="https://z.itpub.net/" rel="nofollow">技術棧</a> </div> <div class="fr"> <form action="http://blog.itpub.net/search/blog/" class="layui-form blog-search-wrap fl"> <input type="hidden" name="type" value="blog"> <input placeholder="搜尋" type="text" class="layui-input" name="keyword"> <button class="search-btn icon-blog"></button> </form> <a href="http://blog.itpub.net/blog/post/" class="layui-btn layui-btn-primary fl mlr30" target="_blank" rel="nofollow">發博</a> <!--登入前--> <div class="fl head-name" id="u_info"> </div> </div> </div> </div> <!--header部分結束--> <link rel="stylesheet" href="http://blog.itpub.net/markdown/css/editormd.css"> <link rel="stylesheet" href="http://blog.itpub.net/markdown/css/editormd.min.css"> <link rel="stylesheet" href="http://blog.itpub.net/markdown/css/editormd.preview.min.css"> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <link href="http://blog.itpub.net/ueditor/third-party/SyntaxHighlighter/shCoreDefault.css" rel="stylesheet" type="text/css"> <div></div> <link rel="stylesheet" href="http://g.alicdn.com/de/prismplayer/2.6.0/skins/default/aliplayer-min.css"> <div></div> <div></div> <div></div> <div></div> <div></div> <style> .code .container > textarea{ height:100%; } .translate{color: #9fa3a7 !important;font-size:12px !important;} .translate a{font-size:12px !important;color:#9fa3a7 !important;} .translate a:hover {font-size:12px !important;color:#f15142 !important;} .newslist{padding:10px 5px;height:20px !important;line-height:20px;overflow:hidden;text-overflow: ellipsis;white-space: nowrap;border-bottom:1px solid #eee} .fake-video-btn:hover{ cursor: pointer; border-style: solid; border-width: 2px; border-radius: 63px; border-color: #00c1de; } .it-player-wrap { display: flex; flex-direction: row; box-sizing: border-box; padding: 5px; margin-bottom: 20px; background: #FBFBFB; border: 1px solid #EFEFEF; border-radius: 4px; } .it-player-wrap .control { width: 50px; height: 50px; background-color: #57a5f2; margin-right: 15px; border-radius: 50%; } .it-player-wrap .control .play,.it-player-wrap .control .pause { background-size: 30px !important; color: #ffffff; width: 100%; height: 100%; } .it-player-wrap .control .play { background: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/PjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+PHN2ZyB0PSIxNTU5NjM3ODcxMTQ0IiBjbGFzcz0iaWNvbiIgc3R5bGU9IiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHAtaWQ9IjYwMjkiIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iMjAwIiBoZWlnaHQ9IjIwMCI+PGRlZnM+PHN0eWxlIHR5cGU9InRleHQvY3NzIj48L3N0eWxlPjwvZGVmcz48cGF0aCBkPSJNOTUzLjQ0NTA2NSA2MDguMjkwNzI0TDM1MC4yOTkyMSA5ODAuNjM0MjExQzI1Ni42NDExNTEgMTAzOC40NTUyNjMgMTgwLjY5MDc4OSA5OTcuNzk5ODM2IDE4MC42OTA3ODkgODkxLjkxNTAzM1YxMTUuNDg2NzExQzE4MC42OTA3ODkgOC42MzgyMjQgMjU2LjIxOTUzOS0zMS4yOTQ0NCAzNTAuMjM4OTggMjYuNzY3NTM0bDYwMy4yNjYzMTUgMzcyLjIyMzAyNmM5My42NTgwNTkgNTcuODIxMDUzIDk0LjA3OTY3MSAxNTEuMjM4MTkxIDAgMjA5LjMwMDE2NHoiIHAtaWQ9IjYwMzAiIGZpbGw9IiNmZmZmZmYiPjwvcGF0aD48L3N2Zz4=") no-repeat center; } .it-player-wrap .control .pause { background: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/PjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+PHN2ZyB0PSIxNTU5NjM3NzQ2MzAwIiBjbGFzcz0iaWNvbiIgc3R5bGU9IiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHAtaWQ9IjQ0NjciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iMjAwIiBoZWlnaHQ9IjIwMCI+PGRlZnM+PHN0eWxlIHR5cGU9InRleHQvY3NzIj48L3N0eWxlPjwvZGVmcz48cGF0aCBkPSJNNzM1LjkgNjQuOWMtNTEuMiAwLTk2IDQ0LjctOTYgOTUuOHY3MDIuNmMwIDUxLjEgNDQuOCA5NS44IDk2IDk1LjhzOTYtNDQuNyA5Ni05NS44VjE2MC43YzAtNTEuMS00NC44LTk1LjgtOTYtOTUuOHogbS00NDcuOCAwYy01MS4yIDAtOTYgNDQuNy05NiA5NS44djcwMi42YzAgNTEuMSA0NC44IDk1LjggOTYgOTUuOHM5Ni00NC43IDk2LTk1LjhWMTYwLjdjLTAuMS01MS4xLTQ0LjktOTUuOC05Ni05NS44eiIgcC1pZD0iNDQ2OCIgZmlsbD0iI2ZmZmZmZiI+PC9wYXRoPjwvc3ZnPg==") no-repeat center; } .it-player-wrap .box { flex: 1; } .it-player-wrap .box .info { font-family: PingFang-SC-Regular; font-size: 12px; color: #A8A8A8; text-align: left; line-height: 24px; margin: 0; } .it-player-wrap .box .info .size { display: inline-block; margin-right: 15px; } .it-player-wrap .progress-wrap { position: relative; margin-top: 15px; display: flex; flex-direction: row; align-items: center; } .it-player-wrap .progress-line,.it-player-wrap .progress-line-inner { position: absolute; height: 6px; width: 100%; background: #DDECFF; border-radius: 8.5px; } .it-player-wrap .progress-line-inner { background: #4C83E5 !important; } .it-player-wrap .progress-button { position: absolute; width: 50px; height: 20px; background: #4C83E5; box-shadow: 0 2px 4px 0 #A0C2FF; border-radius: 10px; top: -10px; font-family: PingFang-SC-Regular; font-size: 12px; color: #FFFFFF; text-align: center; line-height: 20px; cursor: pointer; } </style> <style> .crumb{ padding: 10px; margin-bottom: 10px; border-bottom: 1px solid rgba(238,238,238,0.4); } .crumb p{ width: 1200px; margin: 0 auto; } .newul{ line-height: 25px; } .new-item{ padding: 5px; display: block; width: 250px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } #doc-content img{ margin:none; display:initial; } .syntaxhighlighter{ width:890px; } .syntaxhighlighter td.code .line{ white-space: nowrap; } .syntaxhighlighter td.code .container{ width:840px!important; } .syntaxhighlighter td.code{ overflow: scroll!important; } </style> <div class="crumb"> <p> <a href="http://blog.itpub.net/" rel="nofollow">首頁</a> > <a href="http://blog.itpub.net/appdevelop/" rel="nofollow">應用開發</a> > <a href="http://blog.itpub.net/itother/" rel="nofollow">IT綜合</a> > <a rel="nofollow">微前端(Micro Frontend ) 落地實施的一些具體例子</a> </p> </div> <!--main部分開始--> <div class="blog-main clearfix w1200"> <div class="preview-wrap"> <div class="preview-header"> <h1 class="preview-title ">微前端(Micro Frontend ) 落地實施的一些具體例子 </h1> <div class="mess"> <span class="label label-original">原創</span> <span style="margin: auto 10px auto 0px"><a href="http://blog.itpub.net/itother/" rel="nofollow">IT綜合</a></span> <span>作者：<a href="http://blog.itpub.net/24475491/" rel="nofollow">i042416</a></span> <span>時間：2021-07-29 15:10:49</span> <span class="dian"></span> <span class="icon-see"></span> <span class="dian"></span> <span class="icon-comment">0</span> <!--博主本人和管理員 顯示 開始--> <i class="superman"><a href="javascript:;" mid="2784083" onclick="blogObj.delDraft($(this))" rel="nofollow">刪除</a></i> <i class="superman"><a href="http://blog.itpub.net/blog/post/2784083/" rel="nofollow">編輯</a></i> <!--博主本人和管理員 顯示 結束--> </div> </div> <div class="preview-body windowH"> <div class="preview-main"> <div id="doc-content" style="padding: 0px;"> <textarea style="display: none">前文[微前端概述(Micro Frontends) 以及相比單體應用，微前端能帶來什麼好處](https://jerry.blog.csdn.net/article/details/119190124) 簡單介紹了微前端的概念，本文來看一個具體的應用例子。 [原文地址](https://martinfowler.com/articles/micro-frontends.html) 想象一個網站，客戶可以在其中訂購外賣食品。從表面上看，這是一個相當簡單的概念，但如果你想做得好，還有驚人的細節： * 應該有一個登陸頁面，客戶可以在其中瀏覽和搜尋餐館。 餐廳應該可以透過任意數量的屬性進行搜尋和過濾，包括價格、美食或客戶之前訂購的東西 * 每家餐廳都需要自己的頁面來顯示其選單項，並允許客戶選擇他們想吃的東西，包括折扣、餐飲優惠和特殊要求 * 客戶應該有一個個人資料頁面，他們可以在其中檢視他們的訂單歷史記錄、跟蹤交付和自定義他們的付款選項  每個頁面都有足夠的複雜性，我們可以輕鬆地證明每個頁面都有一個專門的團隊，並且每個團隊都應該能夠獨立於所有其他團隊在他們的頁面上工作。 他們應該能夠開發、測試、部署和維護他們的程式碼，而不必擔心與其他團隊發生衝突或協調。 但是，我們的客戶仍然應該看到一個無縫的網站。 在本文的其餘部分，我們將在需要示例程式碼或場景的任何地方使用此示例應用程式。 # Integration approaches 鑑於上面相當鬆散的定義，有許多方法可以合理地稱為微前端。 在本節中，我們將展示一些示例並討論它們的權衡。 所有這些方法都有一個相當自然的架構——通常應用程式中的每個頁面都有一個微前端，並且有一個容器應用程式，它： * 呈現常見的頁面元素，例如頁首和頁尾 * 解決跨領域問題，如身份驗證和導航 * 將各種微前端放在頁面上，並告訴每個微前端何時何地渲染自己  # Server-side template composition 我們從一種絕對不新穎的前端開發方法開始——用多個模板或片段在伺服器上渲染 HTML。 我們有一個 index.html ，它包含所有常見的頁面元素，然後使用伺服器端包含從片段 HTML 檔案中插入特定於頁面的內容： ```html <meta charset="utf-8"> <title>Feed me</title> <h1>Feed me</h1> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="renderer" content="webkit"> <title>微前端(Micro Frontend ) 落地實施的一些具體例子_ITPUB部落格</title> <meta name="keywords" content="應用開發,IT綜合"> <meta name="description" content="前文微前端概述(Micro Frontends) 以及相比單體應用，微前端能帶來什麼好處 簡單介紹了微前端的概念，本文來看一個具體的應用例子。 原文地址 想象一個網站，客戶可以在其中訂購外賣食品。從表面上看，這是一個相當簡單的概念，但如果你想做得好，還有驚人的細節： 應該有一個登陸頁面，客戶可以在其中瀏覽和搜尋餐館。 餐廳應該可以透過任意數量的屬性進行搜尋和過濾，包括價格、美食或客戶之前ITPUB部落格每天千篇餘篇博文新資訊，40多萬活躍博主，為IT技術人提供全面的IT資訊和交流互動的IT部落格平臺-中國專業的IT技術ITPUB部落格。"> <link rel="stylesheet" href="http://blog.itpub.net/layui/css/layui.css?v234"> <link rel="stylesheet" href="http://blog.itpub.net/css/base.css?v1.5"> <link rel="stylesheet" href="http://blog.itpub.net/css/zhuanlan.css?v=1.3"> <!--[if lt IE 9]> <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script> <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script> <![endif]--> <div></div> <div></div> <div></div> <div></div> <!--header部分開始--> <div class="blog-header"> <div class="w1200"> <a href="http://blog.itpub.net/" class="fl" rel="nofollow"><h1 class="logo">ITPub部落格</h1></a> <div class="nav fl"> <a href="http://www.itpub.net/" rel="nofollow">首頁</a> <a href="http://blog.itpub.net/" rel="nofollow">部落格</a> <a href="http://blog.itpub.net/column" rel="nofollow">專欄</a> <a href="http://edu.itpub.net/" rel="nofollow">學院</a> <a href="http://www.itpub.net/forum.php" rel="nofollow">社群</a> <a href="https://z.itpub.net/" rel="nofollow">技術棧</a> </div> <div class="fr"> <form action="http://blog.itpub.net/search/blog/" class="layui-form blog-search-wrap fl"> <input type="hidden" name="type" value="blog"> <input placeholder="搜尋" type="text" class="layui-input" name="keyword"> <button class="search-btn icon-blog"></button> </form> <a href="http://blog.itpub.net/blog/post/" class="layui-btn layui-btn-primary fl mlr30" target="_blank" rel="nofollow">發博</a> <!--登入前--> <div class="fl head-name" id="u_info"> </div> </div> </div> </div> <!--header部分結束--> <link rel="stylesheet" href="http://blog.itpub.net/markdown/css/editormd.css"> <link rel="stylesheet" href="http://blog.itpub.net/markdown/css/editormd.min.css"> <link rel="stylesheet" href="http://blog.itpub.net/markdown/css/editormd.preview.min.css"> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <link href="http://blog.itpub.net/ueditor/third-party/SyntaxHighlighter/shCoreDefault.css" rel="stylesheet" type="text/css"> <div></div> <link rel="stylesheet" href="http://g.alicdn.com/de/prismplayer/2.6.0/skins/default/aliplayer-min.css"> <div></div> <div></div> <div></div> <div></div> <div></div> <style> .code .container > textarea{ height:100%; } .translate{color: #9fa3a7 !important;font-size:12px !important;} .translate a{font-size:12px !important;color:#9fa3a7 !important;} .translate a:hover {font-size:12px !important;color:#f15142 !important;} .newslist{padding:10px 5px;height:20px !important;line-height:20px;overflow:hidden;text-overflow: ellipsis;white-space: nowrap;border-bottom:1px solid #eee} .fake-video-btn:hover{ cursor: pointer; border-style: solid; border-width: 2px; border-radius: 63px; border-color: #00c1de; } .it-player-wrap { display: flex; flex-direction: row; box-sizing: border-box; padding: 5px; margin-bottom: 20px; background: #FBFBFB; border: 1px solid #EFEFEF; border-radius: 4px; } .it-player-wrap .control { width: 50px; height: 50px; background-color: #57a5f2; margin-right: 15px; border-radius: 50%; } .it-player-wrap .control .play,.it-player-wrap .control .pause { background-size: 30px !important; color: #ffffff; width: 100%; height: 100%; } .it-player-wrap .control .play { background: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/PjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+PHN2ZyB0PSIxNTU5NjM3ODcxMTQ0IiBjbGFzcz0iaWNvbiIgc3R5bGU9IiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHAtaWQ9IjYwMjkiIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iMjAwIiBoZWlnaHQ9IjIwMCI+PGRlZnM+PHN0eWxlIHR5cGU9InRleHQvY3NzIj48L3N0eWxlPjwvZGVmcz48cGF0aCBkPSJNOTUzLjQ0NTA2NSA2MDguMjkwNzI0TDM1MC4yOTkyMSA5ODAuNjM0MjExQzI1Ni42NDExNTEgMTAzOC40NTUyNjMgMTgwLjY5MDc4OSA5OTcuNzk5ODM2IDE4MC42OTA3ODkgODkxLjkxNTAzM1YxMTUuNDg2NzExQzE4MC42OTA3ODkgOC42MzgyMjQgMjU2LjIxOTUzOS0zMS4yOTQ0NCAzNTAuMjM4OTggMjYuNzY3NTM0bDYwMy4yNjYzMTUgMzcyLjIyMzAyNmM5My42NTgwNTkgNTcuODIxMDUzIDk0LjA3OTY3MSAxNTEuMjM4MTkxIDAgMjA5LjMwMDE2NHoiIHAtaWQ9IjYwMzAiIGZpbGw9IiNmZmZmZmYiPjwvcGF0aD48L3N2Zz4=") no-repeat center; } .it-player-wrap .control .pause { background: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/PjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+PHN2ZyB0PSIxNTU5NjM3NzQ2MzAwIiBjbGFzcz0iaWNvbiIgc3R5bGU9IiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHAtaWQ9IjQ0NjciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iMjAwIiBoZWlnaHQ9IjIwMCI+PGRlZnM+PHN0eWxlIHR5cGU9InRleHQvY3NzIj48L3N0eWxlPjwvZGVmcz48cGF0aCBkPSJNNzM1LjkgNjQuOWMtNTEuMiAwLTk2IDQ0LjctOTYgOTUuOHY3MDIuNmMwIDUxLjEgNDQuOCA5NS44IDk2IDk1LjhzOTYtNDQuNyA5Ni05NS44VjE2MC43YzAtNTEuMS00NC44LTk1LjgtOTYtOTUuOHogbS00NDcuOCAwYy01MS4yIDAtOTYgNDQuNy05NiA5NS44djcwMi42YzAgNTEuMSA0NC44IDk1LjggOTYgOTUuOHM5Ni00NC43IDk2LTk1LjhWMTYwLjdjLTAuMS01MS4xLTQ0LjktOTUuOC05Ni05NS44eiIgcC1pZD0iNDQ2OCIgZmlsbD0iI2ZmZmZmZiI+PC9wYXRoPjwvc3ZnPg==") no-repeat center; } .it-player-wrap .box { flex: 1; } .it-player-wrap .box .info { font-family: PingFang-SC-Regular; font-size: 12px; color: #A8A8A8; text-align: left; line-height: 24px; margin: 0; } .it-player-wrap .box .info .size { display: inline-block; margin-right: 15px; } .it-player-wrap .progress-wrap { position: relative; margin-top: 15px; display: flex; flex-direction: row; align-items: center; } .it-player-wrap .progress-line,.it-player-wrap .progress-line-inner { position: absolute; height: 6px; width: 100%; background: #DDECFF; border-radius: 8.5px; } .it-player-wrap .progress-line-inner { background: #4C83E5 !important; } .it-player-wrap .progress-button { position: absolute; width: 50px; height: 20px; background: #4C83E5; box-shadow: 0 2px 4px 0 #A0C2FF; border-radius: 10px; top: -10px; font-family: PingFang-SC-Regular; font-size: 12px; color: #FFFFFF; text-align: center; line-height: 20px; cursor: pointer; } </style> <style> .crumb{ padding: 10px; margin-bottom: 10px; border-bottom: 1px solid rgba(238,238,238,0.4); } .crumb p{ width: 1200px; margin: 0 auto; } .newul{ line-height: 25px; } .new-item{ padding: 5px; display: block; width: 250px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } #doc-content img{ margin:none; display:initial; } .syntaxhighlighter{ width:890px; } .syntaxhighlighter td.code .line{ white-space: nowrap; } .syntaxhighlighter td.code .container{ width:840px!important; } .syntaxhighlighter td.code{ overflow: scroll!important; } </style> <div class="crumb"> <p> <a href="http://blog.itpub.net/" rel="nofollow">首頁</a> > <a href="http://blog.itpub.net/appdevelop/" rel="nofollow">應用開發</a> > <a href="http://blog.itpub.net/itother/" rel="nofollow">IT綜合</a> > <a rel="nofollow">微前端(Micro Frontend ) 落地實施的一些具體例子</a> </p> </div> <!--main部分開始--> <div class="blog-main clearfix w1200"> <div class="preview-wrap"> <div class="preview-header"> <h1 class="preview-title ">微前端(Micro Frontend ) 落地實施的一些具體例子 </h1> <div class="mess"> <span class="label label-original">原創</span> <span style="margin: auto 10px auto 0px"><a href="http://blog.itpub.net/itother/" rel="nofollow">IT綜合</a></span> <span>作者：<a href="http://blog.itpub.net/24475491/" rel="nofollow">i042416</a></span> <span>時間：2021-07-29 15:10:49</span> <span class="dian"></span> <span class="icon-see"></span> <span class="dian"></span> <span class="icon-comment">0</span> <!--博主本人和管理員 顯示 開始--> <i class="superman"><a href="javascript:;" mid="2784083" onclick="blogObj.delDraft($(this))" rel="nofollow">刪除</a></i> <i class="superman"><a href="http://blog.itpub.net/blog/post/2784083/" rel="nofollow">編輯</a></i> <!--博主本人和管理員 顯示 結束--> </div> </div> <div class="preview-body windowH"> <div class="preview-main"> <div id="doc-content" style="padding: 0px;"> <textarea style="display: none">前文[微前端概述(Micro Frontends) 以及相比單體應用，微前端能帶來什麼好處](https://jerry.blog.csdn.net/article/details/119190124) 簡單介紹了微前端的概念，本文來看一個具體的應用例子。 [原文地址](https://martinfowler.com/articles/micro-frontends.html) 想象一個網站，客戶可以在其中訂購外賣食品。從表面上看，這是一個相當簡單的概念，但如果你想做得好，還有驚人的細節： * 應該有一個登陸頁面，客戶可以在其中瀏覽和搜尋餐館。 餐廳應該可以透過任意數量的屬性進行搜尋和過濾，包括價格、美食或客戶之前訂購的東西 * 每家餐廳都需要自己的頁面來顯示其選單項，並允許客戶選擇他們想吃的東西，包括折扣、餐飲優惠和特殊要求 * 客戶應該有一個個人資料頁面，他們可以在其中檢視他們的訂單歷史記錄、跟蹤交付和自定義他們的付款選項  每個頁面都有足夠的複雜性，我們可以輕鬆地證明每個頁面都有一個專門的團隊，並且每個團隊都應該能夠獨立於所有其他團隊在他們的頁面上工作。 他們應該能夠開發、測試、部署和維護他們的程式碼，而不必擔心與其他團隊發生衝突或協調。 但是，我們的客戶仍然應該看到一個無縫的網站。 在本文的其餘部分，我們將在需要示例程式碼或場景的任何地方使用此示例應用程式。 # Integration approaches 鑑於上面相當鬆散的定義，有許多方法可以合理地稱為微前端。 在本節中，我們將展示一些示例並討論它們的權衡。 所有這些方法都有一個相當自然的架構——通常應用程式中的每個頁面都有一個微前端，並且有一個容器應用程式，它： * 呈現常見的頁面元素，例如頁首和頁尾 * 解決跨領域問題，如身份驗證和導航 * 將各種微前端放在頁面上，並告訴每個微前端何時何地渲染自己  # Server-side template composition 我們從一種絕對不新穎的前端開發方法開始——用多個模板或片段在伺服器上渲染 HTML。 我們有一個 index.html ，它包含所有常見的頁面元素，然後使用伺服器端包含從片段 HTML 檔案中插入特定於頁面的內容： ```html <meta charset="utf-8"> <title>Feed me</title> <h1>Feed me</h1> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="renderer" content="webkit"> <title>微前端(Micro Frontend ) 落地實施的一些具體例子_ITPUB部落格</title> <meta name="keywords" content="應用開發,IT綜合"> <meta name="description" content="前文微前端概述(Micro Frontends) 以及相比單體應用，微前端能帶來什麼好處 簡單介紹了微前端的概念，本文來看一個具體的應用例子。 原文地址 想象一個網站，客戶可以在其中訂購外賣食品。從表面上看，這是一個相當簡單的概念，但如果你想做得好，還有驚人的細節： 應該有一個登陸頁面，客戶可以在其中瀏覽和搜尋餐館。 餐廳應該可以透過任意數量的屬性進行搜尋和過濾，包括價格、美食或客戶之前ITPUB部落格每天千篇餘篇博文新資訊，40多萬活躍博主，為IT技術人提供全面的IT資訊和交流互動的IT部落格平臺-中國專業的IT技術ITPUB部落格。"> <link rel="stylesheet" href="http://blog.itpub.net/layui/css/layui.css?v234"> <link rel="stylesheet" href="http://blog.itpub.net/css/base.css?v1.5"> <link rel="stylesheet" href="http://blog.itpub.net/css/zhuanlan.css?v=1.3"> <!--[if lt IE 9]> <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script> <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script> <![endif]--> <div></div> <div></div> <div></div> <div></div> <!--header部分開始--> <div class="blog-header"> <div class="w1200"> <a href="http://blog.itpub.net/" class="fl" rel="nofollow"><h1 class="logo">ITPub部落格</h1></a> <div class="nav fl"> <a href="http://www.itpub.net/" rel="nofollow">首頁</a> <a href="http://blog.itpub.net/" rel="nofollow">部落格</a> <a href="http://blog.itpub.net/column" rel="nofollow">專欄</a> <a href="http://edu.itpub.net/" rel="nofollow">學院</a> <a href="http://www.itpub.net/forum.php" rel="nofollow">社群</a> <a href="https://z.itpub.net/" rel="nofollow">技術棧</a> </div> <div class="fr"> <form action="http://blog.itpub.net/search/blog/" class="layui-form blog-search-wrap fl"> <input type="hidden" name="type" value="blog"> <input placeholder="搜尋" type="text" class="layui-input" name="keyword"> <button class="search-btn icon-blog"></button> </form> <a href="http://blog.itpub.net/blog/post/" class="layui-btn layui-btn-primary fl mlr30" target="_blank" rel="nofollow">發博</a> <!--登入前--> <div class="fl head-name" id="u_info"> </div> </div> </div> </div> <!--header部分結束--> <link rel="stylesheet" href="http://blog.itpub.net/markdown/css/editormd.css"> <link rel="stylesheet" href="http://blog.itpub.net/markdown/css/editormd.min.css"> <link rel="stylesheet" href="http://blog.itpub.net/markdown/css/editormd.preview.min.css"> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <link href="http://blog.itpub.net/ueditor/third-party/SyntaxHighlighter/shCoreDefault.css" rel="stylesheet" type="text/css"> <div></div> <link rel="stylesheet" href="http://g.alicdn.com/de/prismplayer/2.6.0/skins/default/aliplayer-min.css"> <div></div> <div></div> <div></div> <div></div> <div></div> <style> .code .container > textarea{ height:100%; } .translate{color: #9fa3a7 !important;font-size:12px !important;} .translate a{font-size:12px !important;color:#9fa3a7 !important;} .translate a:hover {font-size:12px !important;color:#f15142 !important;} .newslist{padding:10px 5px;height:20px !important;line-height:20px;overflow:hidden;text-overflow: ellipsis;white-space: nowrap;border-bottom:1px solid #eee} .fake-video-btn:hover{ cursor: pointer; border-style: solid; border-width: 2px; border-radius: 63px; border-color: #00c1de; } .it-player-wrap { display: flex; flex-direction: row; box-sizing: border-box; padding: 5px; margin-bottom: 20px; background: #FBFBFB; border: 1px solid #EFEFEF; border-radius: 4px; } .it-player-wrap .control { width: 50px; height: 50px; background-color: #57a5f2; margin-right: 15px; border-radius: 50%; } .it-player-wrap .control .play,.it-player-wrap .control .pause { background-size: 30px !important; color: #ffffff; width: 100%; height: 100%; } .it-player-wrap .control .play { background: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/PjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+PHN2ZyB0PSIxNTU5NjM3ODcxMTQ0IiBjbGFzcz0iaWNvbiIgc3R5bGU9IiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHAtaWQ9IjYwMjkiIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iMjAwIiBoZWlnaHQ9IjIwMCI+PGRlZnM+PHN0eWxlIHR5cGU9InRleHQvY3NzIj48L3N0eWxlPjwvZGVmcz48cGF0aCBkPSJNOTUzLjQ0NTA2NSA2MDguMjkwNzI0TDM1MC4yOTkyMSA5ODAuNjM0MjExQzI1Ni42NDExNTEgMTAzOC40NTUyNjMgMTgwLjY5MDc4OSA5OTcuNzk5ODM2IDE4MC42OTA3ODkgODkxLjkxNTAzM1YxMTUuNDg2NzExQzE4MC42OTA3ODkgOC42MzgyMjQgMjU2LjIxOTUzOS0zMS4yOTQ0NCAzNTAuMjM4OTggMjYuNzY3NTM0bDYwMy4yNjYzMTUgMzcyLjIyMzAyNmM5My42NTgwNTkgNTcuODIxMDUzIDk0LjA3OTY3MSAxNTEuMjM4MTkxIDAgMjA5LjMwMDE2NHoiIHAtaWQ9IjYwMzAiIGZpbGw9IiNmZmZmZmYiPjwvcGF0aD48L3N2Zz4=") no-repeat center; } .it-player-wrap .control .pause { background: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/PjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+PHN2ZyB0PSIxNTU5NjM3NzQ2MzAwIiBjbGFzcz0iaWNvbiIgc3R5bGU9IiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHAtaWQ9IjQ0NjciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iMjAwIiBoZWlnaHQ9IjIwMCI+PGRlZnM+PHN0eWxlIHR5cGU9InRleHQvY3NzIj48L3N0eWxlPjwvZGVmcz48cGF0aCBkPSJNNzM1LjkgNjQuOWMtNTEuMiAwLTk2IDQ0LjctOTYgOTUuOHY3MDIuNmMwIDUxLjEgNDQuOCA5NS44IDk2IDk1LjhzOTYtNDQuNyA5Ni05NS44VjE2MC43YzAtNTEuMS00NC44LTk1LjgtOTYtOTUuOHogbS00NDcuOCAwYy01MS4yIDAtOTYgNDQuNy05NiA5NS44djcwMi42YzAgNTEuMSA0NC44IDk1LjggOTYgOTUuOHM5Ni00NC43IDk2LTk1LjhWMTYwLjdjLTAuMS01MS4xLTQ0LjktOTUuOC05Ni05NS44eiIgcC1pZD0iNDQ2OCIgZmlsbD0iI2ZmZmZmZiI+PC9wYXRoPjwvc3ZnPg==") no-repeat center; } .it-player-wrap .box { flex: 1; } .it-player-wrap .box .info { font-family: PingFang-SC-Regular; font-size: 12px; color: #A8A8A8; text-align: left; line-height: 24px; margin: 0; } .it-player-wrap .box .info .size { display: inline-block; margin-right: 15px; } .it-player-wrap .progress-wrap { position: relative; margin-top: 15px; display: flex; flex-direction: row; align-items: center; } .it-player-wrap .progress-line,.it-player-wrap .progress-line-inner { position: absolute; height: 6px; width: 100%; background: #DDECFF; border-radius: 8.5px; } .it-player-wrap .progress-line-inner { background: #4C83E5 !important; } .it-player-wrap .progress-button { position: absolute; width: 50px; height: 20px; background: #4C83E5; box-shadow: 0 2px 4px 0 #A0C2FF; border-radius: 10px; top: -10px; font-family: PingFang-SC-Regular; font-size: 12px; color: #FFFFFF; text-align: center; line-height: 20px; cursor: pointer; } </style> <style> .crumb{ padding: 10px; margin-bottom: 10px; border-bottom: 1px solid rgba(238,238,238,0.4); } .crumb p{ width: 1200px; margin: 0 auto; } .newul{ line-height: 25px; } .new-item{ padding: 5px; display: block; width: 250px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } #doc-content img{ margin:none; display:initial; } .syntaxhighlighter{ width:890px; } .syntaxhighlighter td.code .line{ white-space: nowrap; } .syntaxhighlighter td.code .container{ width:840px!important; } .syntaxhighlighter td.code{ overflow: scroll!important; } </style> <div class="crumb"> <p> <a href="http://blog.itpub.net/" rel="nofollow">首頁</a> > <a href="http://blog.itpub.net/appdevelop/" rel="nofollow">應用開發</a> > <a href="http://blog.itpub.net/itother/" rel="nofollow">IT綜合</a> > <a rel="nofollow">微前端(Micro Frontend ) 落地實施的一些具體例子</a> </p> </div> <!--main部分開始--> <div class="blog-main clearfix w1200"> <div class="preview-wrap"> <div class="preview-header"> <h1 class="preview-title ">微前端(Micro Frontend ) 落地實施的一些具體例子 </h1> <div class="mess"> <span class="label label-original">原創</span> <span style="margin: auto 10px auto 0px"><a href="http://blog.itpub.net/itother/" rel="nofollow">IT綜合</a></span> <span>作者：<a href="http://blog.itpub.net/24475491/" rel="nofollow">i042416</a></span> <span>時間：2021-07-29 15:10:49</span> <span class="dian"></span> <span class="icon-see"></span> <span class="dian"></span> <span class="icon-comment">0</span> <!--博主本人和管理員 顯示 開始--> <i class="superman"><a href="javascript:;" mid="2784083" onclick="blogObj.delDraft($(this))" rel="nofollow">刪除</a></i> <i class="superman"><a href="http://blog.itpub.net/blog/post/2784083/" rel="nofollow">編輯</a></i> <!--博主本人和管理員 顯示 結束--> </div> </div> <div class="preview-body windowH"> <div class="preview-main"> <div id="doc-content" style="padding: 0px;"> <textarea style="display: none">前文[微前端概述(Micro Frontends) 以及相比單體應用，微前端能帶來什麼好處](https://jerry.blog.csdn.net/article/details/119190124) 簡單介紹了微前端的概念，本文來看一個具體的應用例子。 [原文地址](https://martinfowler.com/articles/micro-frontends.html) 想象一個網站，客戶可以在其中訂購外賣食品。從表面上看，這是一個相當簡單的概念，但如果你想做得好，還有驚人的細節： * 應該有一個登陸頁面，客戶可以在其中瀏覽和搜尋餐館。 餐廳應該可以透過任意數量的屬性進行搜尋和過濾，包括價格、美食或客戶之前訂購的東西 * 每家餐廳都需要自己的頁面來顯示其選單項，並允許客戶選擇他們想吃的東西，包括折扣、餐飲優惠和特殊要求 * 客戶應該有一個個人資料頁面，他們可以在其中檢視他們的訂單歷史記錄、跟蹤交付和自定義他們的付款選項  每個頁面都有足夠的複雜性，我們可以輕鬆地證明每個頁面都有一個專門的團隊，並且每個團隊都應該能夠獨立於所有其他團隊在他們的頁面上工作。 他們應該能夠開發、測試、部署和維護他們的程式碼，而不必擔心與其他團隊發生衝突或協調。 但是，我們的客戶仍然應該看到一個無縫的網站。 在本文的其餘部分，我們將在需要示例程式碼或場景的任何地方使用此示例應用程式。 # Integration approaches 鑑於上面相當鬆散的定義，有許多方法可以合理地稱為微前端。 在本節中，我們將展示一些示例並討論它們的權衡。 所有這些方法都有一個相當自然的架構——通常應用程式中的每個頁面都有一個微前端，並且有一個容器應用程式，它： * 呈現常見的頁面元素，例如頁首和頁尾 * 解決跨領域問題，如身份驗證和導航 * 將各種微前端放在頁面上，並告訴每個微前端何時何地渲染自己  # Server-side template composition 我們從一種絕對不新穎的前端開發方法開始——用多個模板或片段在伺服器上渲染 HTML。 我們有一個 index.html ，它包含所有常見的頁面元素，然後使用伺服器端包含從片段 HTML 檔案中插入特定於頁面的內容： ```html <meta charset="utf-8"> <title>Feed me</title> <h1>Feed me</h1> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="renderer" content="webkit"> <title>微前端(Micro Frontend ) 落地實施的一些具體例子_ITPUB部落格</title> <meta name="keywords" content="應用開發,IT綜合"> <meta name="description" content="前文微前端概述(Micro Frontends) 以及相比單體應用，微前端能帶來什麼好處 簡單介紹了微前端的概念，本文來看一個具體的應用例子。 原文地址 想象一個網站，客戶可以在其中訂購外賣食品。從表面上看，這是一個相當簡單的概念，但如果你想做得好，還有驚人的細節： 應該有一個登陸頁面，客戶可以在其中瀏覽和搜尋餐館。 餐廳應該可以透過任意數量的屬性進行搜尋和過濾，包括價格、美食或客戶之前ITPUB部落格每天千篇餘篇博文新資訊，40多萬活躍博主，為IT技術人提供全面的IT資訊和交流互動的IT部落格平臺-中國專業的IT技術ITPUB部落格。"> <link rel="stylesheet" href="http://blog.itpub.net/layui/css/layui.css?v234"> <link rel="stylesheet" href="http://blog.itpub.net/css/base.css?v1.5"> <link rel="stylesheet" href="http://blog.itpub.net/css/zhuanlan.css?v=1.3"> <!--[if lt IE 9]> <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script> <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script> <![endif]--> <div></div> <div></div> <div></div> <div></div> <!--header部分開始--> <div class="blog-header"> <div class="w1200"> <a href="http://blog.itpub.net/" class="fl" rel="nofollow"><h1 class="logo">ITPub部落格</h1></a> <div class="nav fl"> <a href="http://www.itpub.net/" rel="nofollow">首頁</a> <a href="http://blog.itpub.net/" rel="nofollow">部落格</a> <a href="http://blog.itpub.net/column" rel="nofollow">專欄</a> <a href="http://edu.itpub.net/" rel="nofollow">學院</a> <a href="http://www.itpub.net/forum.php" rel="nofollow">社群</a> <a href="https://z.itpub.net/" rel="nofollow">技術棧</a> </div> <div class="fr"> <form action="http://blog.itpub.net/search/blog/" class="layui-form blog-search-wrap fl"> <input type="hidden" name="type" value="blog"> <input placeholder="搜尋" type="text" class="layui-input" name="keyword"> <button class="search-btn icon-blog"></button> </form> <a href="http://blog.itpub.net/blog/post/" class="layui-btn layui-btn-primary fl mlr30" target="_blank" rel="nofollow">發博</a> <!--登入前--> <div class="fl head-name" id="u_info"> </div> </div> </div> </div> <!--header部分結束--> <link rel="stylesheet" href="http://blog.itpub.net/markdown/css/editormd.css"> <link rel="stylesheet" href="http://blog.itpub.net/markdown/css/editormd.min.css"> <link rel="stylesheet" href="http://blog.itpub.net/markdown/css/editormd.preview.min.css"> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <link href="http://blog.itpub.net/ueditor/third-party/SyntaxHighlighter/shCoreDefault.css" rel="stylesheet" type="text/css"> <div></div> <link rel="stylesheet" href="http://g.alicdn.com/de/prismplayer/2.6.0/skins/default/aliplayer-min.css"> <div></div> <div></div> <div></div> <div></div> <div></div> <style> .code .container > textarea{ height:100%; } .translate{color: #9fa3a7 !important;font-size:12px !important;} .translate a{font-size:12px !important;color:#9fa3a7 !important;} .translate a:hover {font-size:12px !important;color:#f15142 !important;} .newslist{padding:10px 5px;height:20px !important;line-height:20px;overflow:hidden;text-overflow: ellipsis;white-space: nowrap;border-bottom:1px solid #eee} .fake-video-btn:hover{ cursor: pointer; border-style: solid; border-width: 2px; border-radius: 63px; border-color: #00c1de; } .it-player-wrap { display: flex; flex-direction: row; box-sizing: border-box; padding: 5px; margin-bottom: 20px; background: #FBFBFB; border: 1px solid #EFEFEF; border-radius: 4px; } .it-player-wrap .control { width: 50px; height: 50px; background-color: #57a5f2; margin-right: 15px; border-radius: 50%; } .it-player-wrap .control .play,.it-player-wrap .control .pause { background-size: 30px !important; color: #ffffff; width: 100%; height: 100%; } .it-player-wrap .control .play { background: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/PjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+PHN2ZyB0PSIxNTU5NjM3ODcxMTQ0IiBjbGFzcz0iaWNvbiIgc3R5bGU9IiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHAtaWQ9IjYwMjkiIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iMjAwIiBoZWlnaHQ9IjIwMCI+PGRlZnM+PHN0eWxlIHR5cGU9InRleHQvY3NzIj48L3N0eWxlPjwvZGVmcz48cGF0aCBkPSJNOTUzLjQ0NTA2NSA2MDguMjkwNzI0TDM1MC4yOTkyMSA5ODAuNjM0MjExQzI1Ni42NDExNTEgMTAzOC40NTUyNjMgMTgwLjY5MDc4OSA5OTcuNzk5ODM2IDE4MC42OTA3ODkgODkxLjkxNTAzM1YxMTUuNDg2NzExQzE4MC42OTA3ODkgOC42MzgyMjQgMjU2LjIxOTUzOS0zMS4yOTQ0NCAzNTAuMjM4OTggMjYuNzY3NTM0bDYwMy4yNjYzMTUgMzcyLjIyMzAyNmM5My42NTgwNTkgNTcuODIxMDUzIDk0LjA3OTY3MSAxNTEuMjM4MTkxIDAgMjA5LjMwMDE2NHoiIHAtaWQ9IjYwMzAiIGZpbGw9IiNmZmZmZmYiPjwvcGF0aD48L3N2Zz4=") no-repeat center; } .it-player-wrap .control .pause { background: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/PjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+PHN2ZyB0PSIxNTU5NjM3NzQ2MzAwIiBjbGFzcz0iaWNvbiIgc3R5bGU9IiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHAtaWQ9IjQ0NjciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iMjAwIiBoZWlnaHQ9IjIwMCI+PGRlZnM+PHN0eWxlIHR5cGU9InRleHQvY3NzIj48L3N0eWxlPjwvZGVmcz48cGF0aCBkPSJNNzM1LjkgNjQuOWMtNTEuMiAwLTk2IDQ0LjctOTYgOTUuOHY3MDIuNmMwIDUxLjEgNDQuOCA5NS44IDk2IDk1LjhzOTYtNDQuNyA5Ni05NS44VjE2MC43YzAtNTEuMS00NC44LTk1LjgtOTYtOTUuOHogbS00NDcuOCAwYy01MS4yIDAtOTYgNDQuNy05NiA5NS44djcwMi42YzAgNTEuMSA0NC44IDk1LjggOTYgOTUuOHM5Ni00NC43IDk2LTk1LjhWMTYwLjdjLTAuMS01MS4xLTQ0LjktOTUuOC05Ni05NS44eiIgcC1pZD0iNDQ2OCIgZmlsbD0iI2ZmZmZmZiI+PC9wYXRoPjwvc3ZnPg==") no-repeat center; } .it-player-wrap .box { flex: 1; } .it-player-wrap .box .info { font-family: PingFang-SC-Regular; font-size: 12px; color: #A8A8A8; text-align: left; line-height: 24px; margin: 0; } .it-player-wrap .box .info .size { display: inline-block; margin-right: 15px; } .it-player-wrap .progress-wrap { position: relative; margin-top: 15px; display: flex; flex-direction: row; align-items: center; } .it-player-wrap .progress-line,.it-player-wrap .progress-line-inner { position: absolute; height: 6px; width: 100%; background: #DDECFF; border-radius: 8.5px; } .it-player-wrap .progress-line-inner { background: #4C83E5 !important; } .it-player-wrap .progress-button { position: absolute; width: 50px; height: 20px; background: #4C83E5; box-shadow: 0 2px 4px 0 #A0C2FF; border-radius: 10px; top: -10px; font-family: PingFang-SC-Regular; font-size: 12px; color: #FFFFFF; text-align: center; line-height: 20px; cursor: pointer; } </style> <style> .crumb{ padding: 10px; margin-bottom: 10px; border-bottom: 1px solid rgba(238,238,238,0.4); } .crumb p{ width: 1200px; margin: 0 auto; } .newul{ line-height: 25px; } .new-item{ padding: 5px; display: block; width: 250px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } #doc-content img{ margin:none; display:initial; } .syntaxhighlighter{ width:890px; } .syntaxhighlighter td.code .line{ white-space: nowrap; } .syntaxhighlighter td.code .container{ width:840px!important; } .syntaxhighlighter td.code{ overflow: scroll!important; } </style> <div class="crumb"> <p> <a href="http://blog.itpub.net/" rel="nofollow">首頁</a> > <a href="http://blog.itpub.net/appdevelop/" rel="nofollow">應用開發</a> > <a href="http://blog.itpub.net/itother/" rel="nofollow">IT綜合</a> > <a rel="nofollow">微前端(Micro Frontend ) 落地實施的一些具體例子</a> </p> </div> <!--main部分開始--> <div class="blog-main clearfix w1200"> <div class="preview-wrap"> <div class="preview-header"> <h1 class="preview-title ">微前端(Micro Frontend ) 落地實施的一些具體例子 </h1> <div class="mess"> <span class="label label-original">原創</span> <span style="margin: auto 10px auto 0px"><a href="http://blog.itpub.net/itother/" rel="nofollow">IT綜合</a></span> <span>作者：<a href="http://blog.itpub.net/24475491/" rel="nofollow">i042416</a></span> <span>時間：2021-07-29 15:10:49</span> <span class="dian"></span> <span class="icon-see"></span> <span class="dian"></span> <span class="icon-comment">0</span> <!--博主本人和管理員 顯示 開始--> <i class="superman"><a href="javascript:;" mid="2784083" onclick="blogObj.delDraft($(this))" rel="nofollow">刪除</a></i> <i class="superman"><a href="http://blog.itpub.net/blog/post/2784083/" rel="nofollow">編輯</a></i> <!--博主本人和管理員 顯示 結束--> </div> </div> <div class="preview-body windowH"> <div class="preview-main"> <div id="doc-content" style="padding: 0px;"> <textarea style="display: none">前文[微前端概述(Micro Frontends) 以及相比單體應用，微前端能帶來什麼好處](https://jerry.blog.csdn.net/article/details/119190124) 簡單介紹了微前端的概念，本文來看一個具體的應用例子。 [原文地址](https://martinfowler.com/articles/micro-frontends.html) 想象一個網站，客戶可以在其中訂購外賣食品。從表面上看，這是一個相當簡單的概念，但如果你想做得好，還有驚人的細節： * 應該有一個登陸頁面，客戶可以在其中瀏覽和搜尋餐館。 餐廳應該可以透過任意數量的屬性進行搜尋和過濾，包括價格、美食或客戶之前訂購的東西 * 每家餐廳都需要自己的頁面來顯示其選單項，並允許客戶選擇他們想吃的東西，包括折扣、餐飲優惠和特殊要求 * 客戶應該有一個個人資料頁面，他們可以在其中檢視他們的訂單歷史記錄、跟蹤交付和自定義他們的付款選項  每個頁面都有足夠的複雜性，我們可以輕鬆地證明每個頁面都有一個專門的團隊，並且每個團隊都應該能夠獨立於所有其他團隊在他們的頁面上工作。 他們應該能夠開發、測試、部署和維護他們的程式碼，而不必擔心與其他團隊發生衝突或協調。 但是，我們的客戶仍然應該看到一個無縫的網站。 在本文的其餘部分，我們將在需要示例程式碼或場景的任何地方使用此示例應用程式。 # Integration approaches 鑑於上面相當鬆散的定義，有許多方法可以合理地稱為微前端。 在本節中，我們將展示一些示例並討論它們的權衡。 所有這些方法都有一個相當自然的架構——通常應用程式中的每個頁面都有一個微前端，並且有一個容器應用程式，它： * 呈現常見的頁面元素，例如頁首和頁尾 * 解決跨領域問題，如身份驗證和導航 * 將各種微前端放在頁面上，並告訴每個微前端何時何地渲染自己  # Server-side template composition 我們從一種絕對不新穎的前端開發方法開始——用多個模板或片段在伺服器上渲染 HTML。 我們有一個 index.html ，它包含所有常見的頁面元素，然後使用伺服器端包含從片段 HTML 檔案中插入特定於頁面的內容： ```html <meta charset="utf-8"> <title>Feed me</title> <h1>Feed me</h1> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="renderer" content="webkit"> <title>微前端(Micro Frontend ) 落地實施的一些具體例子_ITPUB部落格</title> <meta name="keywords" content="應用開發,IT綜合"> <meta name="description" content="前文微前端概述(Micro Frontends) 以及相比單體應用，微前端能帶來什麼好處 簡單介紹了微前端的概念，本文來看一個具體的應用例子。 原文地址 想象一個網站，客戶可以在其中訂購外賣食品。從表面上看，這是一個相當簡單的概念，但如果你想做得好，還有驚人的細節： 應該有一個登陸頁面，客戶可以在其中瀏覽和搜尋餐館。 餐廳應該可以透過任意數量的屬性進行搜尋和過濾，包括價格、美食或客戶之前ITPUB部落格每天千篇餘篇博文新資訊，40多萬活躍博主，為IT技術人提供全面的IT資訊和交流互動的IT部落格平臺-中國專業的IT技術ITPUB部落格。"> <link rel="stylesheet" href="http://blog.itpub.net/layui/css/layui.css?v234"> <link rel="stylesheet" href="http://blog.itpub.net/css/base.css?v1.5"> <link rel="stylesheet" href="http://blog.itpub.net/css/zhuanlan.css?v=1.3"> <!--[if lt IE 9]> <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script> <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script> <![endif]--> <div></div> <div></div> <div></div> <div></div> <!--header部分開始--> <div class="blog-header"> <div class="w1200"> <a href="http://blog.itpub.net/" class="fl" rel="nofollow"><h1 class="logo">ITPub部落格</h1></a> <div class="nav fl"> <a href="http://www.itpub.net/" rel="nofollow">首頁</a> <a href="http://blog.itpub.net/" rel="nofollow">部落格</a> <a href="http://blog.itpub.net/column" rel="nofollow">專欄</a> <a href="http://edu.itpub.net/" rel="nofollow">學院</a> <a href="http://www.itpub.net/forum.php" rel="nofollow">社群</a> <a href="https://z.itpub.net/" rel="nofollow">技術棧</a> </div> <div class="fr"> <form action="http://blog.itpub.net/search/blog/" class="layui-form blog-search-wrap fl"> <input type="hidden" name="type" value="blog"> <input placeholder="搜尋" type="text" class="layui-input" name="keyword"> <button class="search-btn icon-blog"></button> </form> <a href="http://blog.itpub.net/blog/post/" class="layui-btn layui-btn-primary fl mlr30" target="_blank" rel="nofollow">發博</a> <!--登入前--> <div class="fl head-name" id="u_info"> </div> </div> </div> </div> <!--header部分結束--> <link rel="stylesheet" href="http://blog.itpub.net/markdown/css/editormd.css"> <link rel="stylesheet" href="http://blog.itpub.net/markdown/css/editormd.min.css"> <link rel="stylesheet" href="http://blog.itpub.net/markdown/css/editormd.preview.min.css"> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <link href="http://blog.itpub.net/ueditor/third-party/SyntaxHighlighter/shCoreDefault.css" rel="stylesheet" type="text/css"> <div></div> <link rel="stylesheet" href="http://g.alicdn.com/de/prismplayer/2.6.0/skins/default/aliplayer-min.css"> <div></div> <div></div> <div></div> <div></div> <div></div> <style> .code .container > textarea{ height:100%; } .translate{color: #9fa3a7 !important;font-size:12px !important;} .translate a{font-size:12px !important;color:#9fa3a7 !important;} .translate a:hover {font-size:12px !important;color:#f15142 !important;} .newslist{padding:10px 5px;height:20px !important;line-height:20px;overflow:hidden;text-overflow: ellipsis;white-space: nowrap;border-bottom:1px solid #eee} .fake-video-btn:hover{ cursor: pointer; border-style: solid; border-width: 2px; border-radius: 63px; border-color: #00c1de; } .it-player-wrap { display: flex; flex-direction: row; box-sizing: border-box; padding: 5px; margin-bottom: 20px; background: #FBFBFB; border: 1px solid #EFEFEF; border-radius: 4px; } .it-player-wrap .control { width: 50px; height: 50px; background-color: #57a5f2; margin-right: 15px; border-radius: 50%; } .it-player-wrap .control .play,.it-player-wrap .control .pause { background-size: 30px !important; color: #ffffff; width: 100%; height: 100%; } .it-player-wrap .control .play { background: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/PjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+PHN2ZyB0PSIxNTU5NjM3ODcxMTQ0IiBjbGFzcz0iaWNvbiIgc3R5bGU9IiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHAtaWQ9IjYwMjkiIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iMjAwIiBoZWlnaHQ9IjIwMCI+PGRlZnM+PHN0eWxlIHR5cGU9InRleHQvY3NzIj48L3N0eWxlPjwvZGVmcz48cGF0aCBkPSJNOTUzLjQ0NTA2NSA2MDguMjkwNzI0TDM1MC4yOTkyMSA5ODAuNjM0MjExQzI1Ni42NDExNTEgMTAzOC40NTUyNjMgMTgwLjY5MDc4OSA5OTcuNzk5ODM2IDE4MC42OTA3ODkgODkxLjkxNTAzM1YxMTUuNDg2NzExQzE4MC42OTA3ODkgOC42MzgyMjQgMjU2LjIxOTUzOS0zMS4yOTQ0NCAzNTAuMjM4OTggMjYuNzY3NTM0bDYwMy4yNjYzMTUgMzcyLjIyMzAyNmM5My42NTgwNTkgNTcuODIxMDUzIDk0LjA3OTY3MSAxNTEuMjM4MTkxIDAgMjA5LjMwMDE2NHoiIHAtaWQ9IjYwMzAiIGZpbGw9IiNmZmZmZmYiPjwvcGF0aD48L3N2Zz4=") no-repeat center; } .it-player-wrap .control .pause { background: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/PjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+PHN2ZyB0PSIxNTU5NjM3NzQ2MzAwIiBjbGFzcz0iaWNvbiIgc3R5bGU9IiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHAtaWQ9IjQ0NjciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iMjAwIiBoZWlnaHQ9IjIwMCI+PGRlZnM+PHN0eWxlIHR5cGU9InRleHQvY3NzIj48L3N0eWxlPjwvZGVmcz48cGF0aCBkPSJNNzM1LjkgNjQuOWMtNTEuMiAwLTk2IDQ0LjctOTYgOTUuOHY3MDIuNmMwIDUxLjEgNDQuOCA5NS44IDk2IDk1LjhzOTYtNDQuNyA5Ni05NS44VjE2MC43YzAtNTEuMS00NC44LTk1LjgtOTYtOTUuOHogbS00NDcuOCAwYy01MS4yIDAtOTYgNDQuNy05NiA5NS44djcwMi42YzAgNTEuMSA0NC44IDk1LjggOTYgOTUuOHM5Ni00NC43IDk2LTk1LjhWMTYwLjdjLTAuMS01MS4xLTQ0LjktOTUuOC05Ni05NS44eiIgcC1pZD0iNDQ2OCIgZmlsbD0iI2ZmZmZmZiI+PC9wYXRoPjwvc3ZnPg==") no-repeat center; } .it-player-wrap .box { flex: 1; } .it-player-wrap .box .info { font-family: PingFang-SC-Regular; font-size: 12px; color: #A8A8A8; text-align: left; line-height: 24px; margin: 0; } .it-player-wrap .box .info .size { display: inline-block; margin-right: 15px; } .it-player-wrap .progress-wrap { position: relative; margin-top: 15px; display: flex; flex-direction: row; align-items: center; } .it-player-wrap .progress-line,.it-player-wrap .progress-line-inner { position: absolute; height: 6px; width: 100%; background: #DDECFF; border-radius: 8.5px; } .it-player-wrap .progress-line-inner { background: #4C83E5 !important; } .it-player-wrap .progress-button { position: absolute; width: 50px; height: 20px; background: #4C83E5; box-shadow: 0 2px 4px 0 #A0C2FF; border-radius: 10px; top: -10px; font-family: PingFang-SC-Regular; font-size: 12px; color: #FFFFFF; text-align: center; line-height: 20px; cursor: pointer; } </style> <style> .crumb{ padding: 10px; margin-bottom: 10px; border-bottom: 1px solid rgba(238,238,238,0.4); } .crumb p{ width: 1200px; margin: 0 auto; } .newul{ line-height: 25px; } .new-item{ padding: 5px; display: block; width: 250px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } #doc-content img{ margin:none; display:initial; } .syntaxhighlighter{ width:890px; } .syntaxhighlighter td.code .line{ white-space: nowrap; } .syntaxhighlighter td.code .container{ width:840px!important; } .syntaxhighlighter td.code{ overflow: scroll!important; } </style> <div class="crumb"> <p> <a href="http://blog.itpub.net/" rel="nofollow">首頁</a> > <a href="http://blog.itpub.net/appdevelop/" rel="nofollow">應用開發</a> > <a href="http://blog.itpub.net/itother/" rel="nofollow">IT綜合</a> > <a rel="nofollow">微前端(Micro Frontend ) 落地實施的一些具體例子</a> </p> </div> <!--main部分開始--> <div class="blog-main clearfix w1200"> <div class="preview-wrap"> <div class="preview-header"> <h1 class="preview-title ">微前端(Micro Frontend ) 落地實施的一些具體例子 </h1> <div class="mess"> <span class="label label-original">原創</span> <span style="margin: auto 10px auto 0px"><a href="http://blog.itpub.net/itother/" rel="nofollow">IT綜合</a></span> <span>作者：<a href="http://blog.itpub.net/24475491/" rel="nofollow">i042416</a></span> <span>時間：2021-07-29 15:10:49</span> <span class="dian"></span> <span class="icon-see"></span> <span class="dian"></span> <span class="icon-comment">0</span> <!--博主本人和管理員 顯示 開始--> <i class="superman"><a href="javascript:;" mid="2784083" onclick="blogObj.delDraft($(this))" rel="nofollow">刪除</a></i> <i class="superman"><a href="http://blog.itpub.net/blog/post/2784083/" rel="nofollow">編輯</a></i> <!--博主本人和管理員 顯示 結束--> </div> </div> <div class="preview-body windowH"> <div class="preview-main"> <div id="doc-content" style="padding: 0px;"> <textarea style="display: none">前文[微前端概述(Micro Frontends) 以及相比單體應用，微前端能帶來什麼好處](https://jerry.blog.csdn.net/article/details/119190124) 簡單介紹了微前端的概念，本文來看一個具體的應用例子。 [原文地址](https://martinfowler.com/articles/micro-frontends.html) 想象一個網站，客戶可以在其中訂購外賣食品。從表面上看，這是一個相當簡單的概念，但如果你想做得好，還有驚人的細節： * 應該有一個登陸頁面，客戶可以在其中瀏覽和搜尋餐館。 餐廳應該可以透過任意數量的屬性進行搜尋和過濾，包括價格、美食或客戶之前訂購的東西 * 每家餐廳都需要自己的頁面來顯示其選單項，並允許客戶選擇他們想吃的東西，包括折扣、餐飲優惠和特殊要求 * 客戶應該有一個個人資料頁面，他們可以在其中檢視他們的訂單歷史記錄、跟蹤交付和自定義他們的付款選項  每個頁面都有足夠的複雜性，我們可以輕鬆地證明每個頁面都有一個專門的團隊，並且每個團隊都應該能夠獨立於所有其他團隊在他們的頁面上工作。 他們應該能夠開發、測試、部署和維護他們的程式碼，而不必擔心與其他團隊發生衝突或協調。 但是，我們的客戶仍然應該看到一個無縫的網站。 在本文的其餘部分，我們將在需要示例程式碼或場景的任何地方使用此示例應用程式。 # Integration approaches 鑑於上面相當鬆散的定義，有許多方法可以合理地稱為微前端。 在本節中，我們將展示一些示例並討論它們的權衡。 所有這些方法都有一個相當自然的架構——通常應用程式中的每個頁面都有一個微前端，並且有一個容器應用程式，它： * 呈現常見的頁面元素，例如頁首和頁尾 * 解決跨領域問題，如身份驗證和導航 * 將各種微前端放在頁面上，並告訴每個微前端何時何地渲染自己  # Server-side template composition 我們從一種絕對不新穎的前端開發方法開始——用多個模板或片段在伺服器上渲染 HTML。 我們有一個 index.html ，它包含所有常見的頁面元素，然後使用伺服器端包含從片段 HTML 檔案中插入特定於頁面的內容： ```html <meta charset="utf-8"> <title>Feed me</title> <h1>Feed me</h1> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="renderer" content="webkit"> <title>微前端(Micro Frontend ) 落地實施的一些具體例子_ITPUB部落格</title> <meta name="keywords" content="應用開發,IT綜合"> <meta name="description" content="前文微前端概述(Micro Frontends) 以及相比單體應用，微前端能帶來什麼好處 簡單介紹了微前端的概念，本文來看一個具體的應用例子。 原文地址 想象一個網站，客戶可以在其中訂購外賣食品。從表面上看，這是一個相當簡單的概念，但如果你想做得好，還有驚人的細節： 應該有一個登陸頁面，客戶可以在其中瀏覽和搜尋餐館。 餐廳應該可以透過任意數量的屬性進行搜尋和過濾，包括價格、美食或客戶之前ITPUB部落格每天千篇餘篇博文新資訊，40多萬活躍博主，為IT技術人提供全面的IT資訊和交流互動的IT部落格平臺-中國專業的IT技術ITPUB部落格。"> <link rel="stylesheet" href="http://blog.itpub.net/layui/css/layui.css?v234"> <link rel="stylesheet" href="http://blog.itpub.net/css/base.css?v1.5"> <link rel="stylesheet" href="http://blog.itpub.net/css/zhuanlan.css?v=1.3"> <!--[if lt IE 9]> <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script> <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script> <![endif]--> <div></div> <div></div> <div></div> <div></div> <!--header部分開始--> <div class="blog-header"> <div class="w1200"> <a href="http://blog.itpub.net/" class="fl" rel="nofollow"><h1 class="logo">ITPub部落格</h1></a> <div class="nav fl"> <a href="http://www.itpub.net/" rel="nofollow">首頁</a> <a href="http://blog.itpub.net/" rel="nofollow">部落格</a> <a href="http://blog.itpub.net/column" rel="nofollow">專欄</a> <a href="http://edu.itpub.net/" rel="nofollow">學院</a> <a href="http://www.itpub.net/forum.php" rel="nofollow">社群</a> <a href="https://z.itpub.net/" rel="nofollow">技術棧</a> </div> <div class="fr"> <form action="http://blog.itpub.net/search/blog/" class="layui-form blog-search-wrap fl"> <input type="hidden" name="type" value="blog"> <input placeholder="搜尋" type="text" class="layui-input" name="keyword"> <button class="search-btn icon-blog"></button> </form> <a href="http://blog.itpub.net/blog/post/" class="layui-btn layui-btn-primary fl mlr30" target="_blank" rel="nofollow">發博</a> <!--登入前--> <div class="fl head-name" id="u_info"> </div> </div> </div> </div> <!--header部分結束--> <link rel="stylesheet" href="http://blog.itpub.net/markdown/css/editormd.css"> <link rel="stylesheet" href="http://blog.itpub.net/markdown/css/editormd.min.css"> <link rel="stylesheet" href="http://blog.itpub.net/markdown/css/editormd.preview.min.css"> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <link href="http://blog.itpub.net/ueditor/third-party/SyntaxHighlighter/shCoreDefault.css" rel="stylesheet" type="text/css"> <div></div> <link rel="stylesheet" href="http://g.alicdn.com/de/prismplayer/2.6.0/skins/default/aliplayer-min.css"> <div></div> <div></div> <div></div> <div></div> <div></div> <style> .code .container > textarea{ height:100%; } .translate{color: #9fa3a7 !important;font-size:12px !important;} .translate a{font-size:12px !important;color:#9fa3a7 !important;} .translate a:hover {font-size:12px !important;color:#f15142 !important;} .newslist{padding:10px 5px;height:20px !important;line-height:20px;overflow:hidden;text-overflow: ellipsis;white-space: nowrap;border-bottom:1px solid #eee} .fake-video-btn:hover{ cursor: pointer; border-style: solid; border-width: 2px; border-radius: 63px; border-color: #00c1de; } .it-player-wrap { display: flex; flex-direction: row; box-sizing: border-box; padding: 5px; margin-bottom: 20px; background: #FBFBFB; border: 1px solid #EFEFEF; border-radius: 4px; } .it-player-wrap .control { width: 50px; height: 50px; background-color: #57a5f2; margin-right: 15px; border-radius: 50%; } .it-player-wrap .control .play,.it-player-wrap .control .pause { background-size: 30px !important; color: #ffffff; width: 100%; height: 100%; } .it-player-wrap .control .play { background: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/PjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+PHN2ZyB0PSIxNTU5NjM3ODcxMTQ0IiBjbGFzcz0iaWNvbiIgc3R5bGU9IiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHAtaWQ9IjYwMjkiIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iMjAwIiBoZWlnaHQ9IjIwMCI+PGRlZnM+PHN0eWxlIHR5cGU9InRleHQvY3NzIj48L3N0eWxlPjwvZGVmcz48cGF0aCBkPSJNOTUzLjQ0NTA2NSA2MDguMjkwNzI0TDM1MC4yOTkyMSA5ODAuNjM0MjExQzI1Ni42NDExNTEgMTAzOC40NTUyNjMgMTgwLjY5MDc4OSA5OTcuNzk5ODM2IDE4MC42OTA3ODkgODkxLjkxNTAzM1YxMTUuNDg2NzExQzE4MC42OTA3ODkgOC42MzgyMjQgMjU2LjIxOTUzOS0zMS4yOTQ0NCAzNTAuMjM4OTggMjYuNzY3NTM0bDYwMy4yNjYzMTUgMzcyLjIyMzAyNmM5My42NTgwNTkgNTcuODIxMDUzIDk0LjA3OTY3MSAxNTEuMjM4MTkxIDAgMjA5LjMwMDE2NHoiIHAtaWQ9IjYwMzAiIGZpbGw9IiNmZmZmZmYiPjwvcGF0aD48L3N2Zz4=") no-repeat center; } .it-player-wrap .control .pause { background: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/PjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+PHN2ZyB0PSIxNTU5NjM3NzQ2MzAwIiBjbGFzcz0iaWNvbiIgc3R5bGU9IiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHAtaWQ9IjQ0NjciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iMjAwIiBoZWlnaHQ9IjIwMCI+PGRlZnM+PHN0eWxlIHR5cGU9InRleHQvY3NzIj48L3N0eWxlPjwvZGVmcz48cGF0aCBkPSJNNzM1LjkgNjQuOWMtNTEuMiAwLTk2IDQ0LjctOTYgOTUuOHY3MDIuNmMwIDUxLjEgNDQuOCA5NS44IDk2IDk1LjhzOTYtNDQuNyA5Ni05NS44VjE2MC43YzAtNTEuMS00NC44LTk1LjgtOTYtOTUuOHogbS00NDcuOCAwYy01MS4yIDAtOTYgNDQuNy05NiA5NS44djcwMi42YzAgNTEuMSA0NC44IDk1LjggOTYgOTUuOHM5Ni00NC43IDk2LTk1LjhWMTYwLjdjLTAuMS01MS4xLTQ0LjktOTUuOC05Ni05NS44eiIgcC1pZD0iNDQ2OCIgZmlsbD0iI2ZmZmZmZiI+PC9wYXRoPjwvc3ZnPg==") no-repeat center; } .it-player-wrap .box { flex: 1; } .it-player-wrap .box .info { font-family: PingFang-SC-Regular; font-size: 12px; color: #A8A8A8; text-align: left; line-height: 24px; margin: 0; } .it-player-wrap .box .info .size { display: inline-block; margin-right: 15px; } .it-player-wrap .progress-wrap { position: relative; margin-top: 15px; display: flex; flex-direction: row; align-items: center; } .it-player-wrap .progress-line,.it-player-wrap .progress-line-inner { position: absolute; height: 6px; width: 100%; background: #DDECFF; border-radius: 8.5px; } .it-player-wrap .progress-line-inner { background: #4C83E5 !important; } .it-player-wrap .progress-button { position: absolute; width: 50px; height: 20px; background: #4C83E5; box-shadow: 0 2px 4px 0 #A0C2FF; border-radius: 10px; top: -10px; font-family: PingFang-SC-Regular; font-size: 12px; color: #FFFFFF; text-align: center; line-height: 20px; cursor: pointer; } </style> <style> .crumb{ padding: 10px; margin-bottom: 10px; border-bottom: 1px solid rgba(238,238,238,0.4); } .crumb p{ width: 1200px; margin: 0 auto; } .newul{ line-height: 25px; } .new-item{ padding: 5px; display: block; width: 250px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } #doc-content img{ margin:none; display:initial; } .syntaxhighlighter{ width:890px; } .syntaxhighlighter td.code .line{ white-space: nowrap; } .syntaxhighlighter td.code .container{ width:840px!important; } .syntaxhighlighter td.code{ overflow: scroll!important; } </style> <div class="crumb"> <p> <a href="http://blog.itpub.net/" rel="nofollow">首頁</a> > <a href="http://blog.itpub.net/appdevelop/" rel="nofollow">應用開發</a> > <a href="http://blog.itpub.net/itother/" rel="nofollow">IT綜合</a> > <a rel="nofollow">微前端(Micro Frontend ) 落地實施的一些具體例子</a> </p> </div> <!--main部分開始--> <div class="blog-main clearfix w1200"> <div class="preview-wrap"> <div class="preview-header"> <h1 class="preview-title ">微前端(Micro Frontend ) 落地實施的一些具體例子 </h1> <div class="mess"> <span class="label label-original">原創</span> <span style="margin: auto 10px auto 0px"><a href="http://blog.itpub.net/itother/" rel="nofollow">IT綜合</a></span> <span>作者：<a href="http://blog.itpub.net/24475491/" rel="nofollow">i042416</a></span> <span>時間：2021-07-29 15:10:49</span> <span class="dian"></span> <span class="icon-see"></span> <span class="dian"></span> <span class="icon-comment">0</span> <!--博主本人和管理員 顯示 開始--> <i class="superman"><a href="javascript:;" mid="2784083" onclick="blogObj.delDraft($(this))" rel="nofollow">刪除</a></i> <i class="superman"><a href="http://blog.itpub.net/blog/post/2784083/" rel="nofollow">編輯</a></i> <!--博主本人和管理員 顯示 結束--> </div> </div> <div class="preview-body windowH"> <div class="preview-main"> <div id="doc-content" style="padding: 0px;"> <textarea style="display: none">前文[微前端概述(Micro Frontends) 以及相比單體應用，微前端能帶來什麼好處](https://jerry.blog.csdn.net/article/details/119190124) 簡單介紹了微前端的概念，本文來看一個具體的應用例子。 [原文地址](https://martinfowler.com/articles/micro-frontends.html) 想象一個網站，客戶可以在其中訂購外賣食品。從表面上看，這是一個相當簡單的概念，但如果你想做得好，還有驚人的細節： * 應該有一個登陸頁面，客戶可以在其中瀏覽和搜尋餐館。 餐廳應該可以透過任意數量的屬性進行搜尋和過濾，包括價格、美食或客戶之前訂購的東西 * 每家餐廳都需要自己的頁面來顯示其選單項，並允許客戶選擇他們想吃的東西，包括折扣、餐飲優惠和特殊要求 * 客戶應該有一個個人資料頁面，他們可以在其中檢視他們的訂單歷史記錄、跟蹤交付和自定義他們的付款選項  每個頁面都有足夠的複雜性，我們可以輕鬆地證明每個頁面都有一個專門的團隊，並且每個團隊都應該能夠獨立於所有其他團隊在他們的頁面上工作。 他們應該能夠開發、測試、部署和維護他們的程式碼，而不必擔心與其他團隊發生衝突或協調。 但是，我們的客戶仍然應該看到一個無縫的網站。 在本文的其餘部分，我們將在需要示例程式碼或場景的任何地方使用此示例應用程式。 # Integration approaches 鑑於上面相當鬆散的定義，有許多方法可以合理地稱為微前端。 在本節中，我們將展示一些示例並討論它們的權衡。 所有這些方法都有一個相當自然的架構——通常應用程式中的每個頁面都有一個微前端，並且有一個容器應用程式，它： * 呈現常見的頁面元素，例如頁首和頁尾 * 解決跨領域問題，如身份驗證和導航 * 將各種微前端放在頁面上，並告訴每個微前端何時何地渲染自己  # Server-side template composition 我們從一種絕對不新穎的前端開發方法開始——用多個模板或片段在伺服器上渲染 HTML。 我們有一個 index.html ，它包含所有常見的頁面元素，然後使用伺服器端包含從片段 HTML 檔案中插入特定於頁面的內容： ```html <meta charset="utf-8"> <title>Feed me</title> <h1>Feed me</h1> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="renderer" content="webkit"> <title>微前端(Micro Frontend ) 落地實施的一些具體例子_ITPUB部落格</title> <meta name="keywords" content="應用開發,IT綜合"> <meta name="description" content="前文微前端概述(Micro Frontends) 以及相比單體應用，微前端能帶來什麼好處 簡單介紹了微前端的概念，本文來看一個具體的應用例子。 原文地址 想象一個網站，客戶可以在其中訂購外賣食品。從表面上看，這是一個相當簡單的概念，但如果你想做得好，還有驚人的細節： 應該有一個登陸頁面，客戶可以在其中瀏覽和搜尋餐館。 餐廳應該可以透過任意數量的屬性進行搜尋和過濾，包括價格、美食或客戶之前ITPUB部落格每天千篇餘篇博文新資訊，40多萬活躍博主，為IT技術人提供全面的IT資訊和交流互動的IT部落格平臺-中國專業的IT技術ITPUB部落格。"> <link rel="stylesheet" href="http://blog.itpub.net/layui/css/layui.css?v234"> <link rel="stylesheet" href="http://blog.itpub.net/css/base.css?v1.5"> <link rel="stylesheet" href="http://blog.itpub.net/css/zhuanlan.css?v=1.3"> <!--[if lt IE 9]> <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script> <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script> <![endif]--> <div></div> <div></div> <div></div> <div></div> <!--header部分開始--> <div class="blog-header"> <div class="w1200"> <a href="http://blog.itpub.net/" class="fl" rel="nofollow"><h1 class="logo">ITPub部落格</h1></a> <div class="nav fl"> <a href="http://www.itpub.net/" rel="nofollow">首頁</a> <a href="http://blog.itpub.net/" rel="nofollow">部落格</a> <a href="http://blog.itpub.net/column" rel="nofollow">專欄</a> <a href="http://edu.itpub.net/" rel="nofollow">學院</a> <a href="http://www.itpub.net/forum.php" rel="nofollow">社群</a> <a href="https://z.itpub.net/" rel="nofollow">技術棧</a> </div> <div class="fr"> <form action="http://blog.itpub.net/search/blog/" class="layui-form blog-search-wrap fl"> <input type="hidden" name="type" value="blog"> <input placeholder="搜尋" type="text" class="layui-input" name="keyword"> <button class="search-btn icon-blog"></button> </form> <a href="http://blog.itpub.net/blog/post/" class="layui-btn layui-btn-primary fl mlr30" target="_blank" rel="nofollow">發博</a> <!--登入前--> <div class="fl head-name" id="u_info"> </div> </div> </div> </div> <!--header部分結束--> <link rel="stylesheet" href="http://blog.itpub.net/markdown/css/editormd.css"> <link rel="stylesheet" href="http://blog.itpub.net/markdown/css/editormd.min.css"> <link rel="stylesheet" href="http://blog.itpub.net/markdown/css/editormd.preview.min.css"> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <link href="http://blog.itpub.net/ueditor/third-party/SyntaxHighlighter/shCoreDefault.css" rel="stylesheet" type="text/css"> <div></div> <link rel="stylesheet" href="http://g.alicdn.com/de/prismplayer/2.6.0/skins/default/aliplayer-min.css"> <div></div> <div></div> <div></div> <div></div> <div></div> <style> .code .container > textarea{ height:100%; } .translate{color: #9fa3a7 !important;font-size:12px !important;} .translate a{font-size:12px !important;color:#9fa3a7 !important;} .translate a:hover {font-size:12px !important;color:#f15142 !important;} .newslist{padding:10px 5px;height:20px !important;line-height:20px;overflow:hidden;text-overflow: ellipsis;white-space: nowrap;border-bottom:1px solid #eee} .fake-video-btn:hover{ cursor: pointer; border-style: solid; border-width: 2px; border-radius: 63px; border-color: #00c1de; } .it-player-wrap { display: flex; flex-direction: row; box-sizing: border-box; padding: 5px; margin-bottom: 20px; background: #FBFBFB; border: 1px solid #EFEFEF; border-radius: 4px; } .it-player-wrap .control { width: 50px; height: 50px; background-color: #57a5f2; margin-right: 15px; border-radius: 50%; } .it-player-wrap .control .play,.it-player-wrap .control .pause { background-size: 30px !important; color: #ffffff; width: 100%; height: 100%; } .it-player-wrap .control .play { background: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/PjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+PHN2ZyB0PSIxNTU5NjM3ODcxMTQ0IiBjbGFzcz0iaWNvbiIgc3R5bGU9IiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHAtaWQ9IjYwMjkiIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iMjAwIiBoZWlnaHQ9IjIwMCI+PGRlZnM+PHN0eWxlIHR5cGU9InRleHQvY3NzIj48L3N0eWxlPjwvZGVmcz48cGF0aCBkPSJNOTUzLjQ0NTA2NSA2MDguMjkwNzI0TDM1MC4yOTkyMSA5ODAuNjM0MjExQzI1Ni42NDExNTEgMTAzOC40NTUyNjMgMTgwLjY5MDc4OSA5OTcuNzk5ODM2IDE4MC42OTA3ODkgODkxLjkxNTAzM1YxMTUuNDg2NzExQzE4MC42OTA3ODkgOC42MzgyMjQgMjU2LjIxOTUzOS0zMS4yOTQ0NCAzNTAuMjM4OTggMjYuNzY3NTM0bDYwMy4yNjYzMTUgMzcyLjIyMzAyNmM5My42NTgwNTkgNTcuODIxMDUzIDk0LjA3OTY3MSAxNTEuMjM4MTkxIDAgMjA5LjMwMDE2NHoiIHAtaWQ9IjYwMzAiIGZpbGw9IiNmZmZmZmYiPjwvcGF0aD48L3N2Zz4=") no-repeat center; } .it-player-wrap .control .pause { background: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/PjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+PHN2ZyB0PSIxNTU5NjM3NzQ2MzAwIiBjbGFzcz0iaWNvbiIgc3R5bGU9IiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHAtaWQ9IjQ0NjciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iMjAwIiBoZWlnaHQ9IjIwMCI+PGRlZnM+PHN0eWxlIHR5cGU9InRleHQvY3NzIj48L3N0eWxlPjwvZGVmcz48cGF0aCBkPSJNNzM1LjkgNjQuOWMtNTEuMiAwLTk2IDQ0LjctOTYgOTUuOHY3MDIuNmMwIDUxLjEgNDQuOCA5NS44IDk2IDk1LjhzOTYtNDQuNyA5Ni05NS44VjE2MC43YzAtNTEuMS00NC44LTk1LjgtOTYtOTUuOHogbS00NDcuOCAwYy01MS4yIDAtOTYgNDQuNy05NiA5NS44djcwMi42YzAgNTEuMSA0NC44IDk1LjggOTYgOTUuOHM5Ni00NC43IDk2LTk1LjhWMTYwLjdjLTAuMS01MS4xLTQ0LjktOTUuOC05Ni05NS44eiIgcC1pZD0iNDQ2OCIgZmlsbD0iI2ZmZmZmZiI+PC9wYXRoPjwvc3ZnPg==") no-repeat center; } .it-player-wrap .box { flex: 1; } .it-player-wrap .box .info { font-family: PingFang-SC-Regular; font-size: 12px; color: #A8A8A8; text-align: left; line-height: 24px; margin: 0; } .it-player-wrap .box .info .size { display: inline-block; margin-right: 15px; } .it-player-wrap .progress-wrap { position: relative; margin-top: 15px; display: flex; flex-direction: row; align-items: center; } .it-player-wrap .progress-line,.it-player-wrap .progress-line-inner { position: absolute; height: 6px; width: 100%; background: #DDECFF; border-radius: 8.5px; } .it-player-wrap .progress-line-inner { background: #4C83E5 !important; } .it-player-wrap .progress-button { position: absolute; width: 50px; height: 20px; background: #4C83E5; box-shadow: 0 2px 4px 0 #A0C2FF; border-radius: 10px; top: -10px; font-family: PingFang-SC-Regular; font-size: 12px; color: #FFFFFF; text-align: center; line-height: 20px; cursor: pointer; } </style> <style> .crumb{ padding: 10px; margin-bottom: 10px; border-bottom: 1px solid rgba(238,238,238,0.4); } .crumb p{ width: 1200px; margin: 0 auto; } .newul{ line-height: 25px; } .new-item{ padding: 5px; display: block; width: 250px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } #doc-content img{ margin:none; display:initial; } .syntaxhighlighter{ width:890px; } .syntaxhighlighter td.code .line{ white-space: nowrap; } .syntaxhighlighter td.code .container{ width:840px!important; } .syntaxhighlighter td.code{ overflow: scroll!important; } </style> <div class="crumb"> <p> <a href="http://blog.itpub.net/" rel="nofollow">首頁</a> > <a href="http://blog.itpub.net/appdevelop/" rel="nofollow">應用開發</a> > <a href="http://blog.itpub.net/itother/" rel="nofollow">IT綜合</a> > <a rel="nofollow">微前端(Micro Frontend ) 落地實施的一些具體例子</a> </p> </div> <!--main部分開始--> <div class="blog-main clearfix w1200"> <div class="preview-wrap"> <div class="preview-header"> <h1 class="preview-title ">微前端(Micro Frontend ) 落地實施的一些具體例子 </h1> <div class="mess"> <span class="label label-original">原創</span> <span style="margin: auto 10px auto 0px"><a href="http://blog.itpub.net/itother/" rel="nofollow">IT綜合</a></span> <span>作者：<a href="http://blog.itpub.net/24475491/" rel="nofollow">i042416</a></span> <span>時間：2021-07-29 15:10:49</span> <span class="dian"></span> <span class="icon-see"></span> <span class="dian"></span> <span class="icon-comment">0</span> <!--博主本人和管理員 顯示 開始--> <i class="superman"><a href="javascript:;" mid="2784083" onclick="blogObj.delDraft($(this))" rel="nofollow">刪除</a></i> <i class="superman"><a href="http://blog.itpub.net/blog/post/2784083/" rel="nofollow">編輯</a></i> <!--博主本人和管理員 顯示 結束--> </div> </div> <div class="preview-body windowH"> <div class="preview-main"> <div id="doc-content" style="padding: 0px;"> <textarea style="display: none">前文[微前端概述(Micro Frontends) 以及相比單體應用，微前端能帶來什麼好處](https://jerry.blog.csdn.net/article/details/119190124) 簡單介紹了微前端的概念，本文來看一個具體的應用例子。 [原文地址](https://martinfowler.com/articles/micro-frontends.html) 想象一個網站，客戶可以在其中訂購外賣食品。從表面上看，這是一個相當簡單的概念，但如果你想做得好，還有驚人的細節： * 應該有一個登陸頁面，客戶可以在其中瀏覽和搜尋餐館。 餐廳應該可以透過任意數量的屬性進行搜尋和過濾，包括價格、美食或客戶之前訂購的東西 * 每家餐廳都需要自己的頁面來顯示其選單項，並允許客戶選擇他們想吃的東西，包括折扣、餐飲優惠和特殊要求 * 客戶應該有一個個人資料頁面，他們可以在其中檢視他們的訂單歷史記錄、跟蹤交付和自定義他們的付款選項  每個頁面都有足夠的複雜性，我們可以輕鬆地證明每個頁面都有一個專門的團隊，並且每個團隊都應該能夠獨立於所有其他團隊在他們的頁面上工作。 他們應該能夠開發、測試、部署和維護他們的程式碼，而不必擔心與其他團隊發生衝突或協調。 但是，我們的客戶仍然應該看到一個無縫的網站。 在本文的其餘部分，我們將在需要示例程式碼或場景的任何地方使用此示例應用程式。 # Integration approaches 鑑於上面相當鬆散的定義，有許多方法可以合理地稱為微前端。 在本節中，我們將展示一些示例並討論它們的權衡。 所有這些方法都有一個相當自然的架構——通常應用程式中的每個頁面都有一個微前端，並且有一個容器應用程式，它： * 呈現常見的頁面元素，例如頁首和頁尾 * 解決跨領域問題，如身份驗證和導航 * 將各種微前端放在頁面上，並告訴每個微前端何時何地渲染自己  # Server-side template composition 我們從一種絕對不新穎的前端開發方法開始——用多個模板或片段在伺服器上渲染 HTML。 我們有一個 index.html ，它包含所有常見的頁面元素，然後使用伺服器端包含從片段 HTML 檔案中插入特定於頁面的內容： ```html <meta charset="utf-8"> <title>Feed me</title> <h1>Feed me</h1> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="renderer" content="webkit"> <title>微前端(Micro Frontend ) 落地實施的一些具體例子_ITPUB部落格</title> <meta name="keywords" content="應用開發,IT綜合"> <meta name="description" content="前文微前端概述(Micro Frontends) 以及相比單體應用，微前端能帶來什麼好處 簡單介紹了微前端的概念，本文來看一個具體的應用例子。 原文地址 想象一個網站，客戶可以在其中訂購外賣食品。從表面上看，這是一個相當簡單的概念，但如果你想做得好，還有驚人的細節： 應該有一個登陸頁面，客戶可以在其中瀏覽和搜尋餐館。 餐廳應該可以透過任意數量的屬性進行搜尋和過濾，包括價格、美食或客戶之前ITPUB部落格每天千篇餘篇博文新資訊，40多萬活躍博主，為IT技術人提供全面的IT資訊和交流互動的IT部落格平臺-中國專業的IT技術ITPUB部落格。"> <link rel="stylesheet" href="http://blog.itpub.net/layui/css/layui.css?v234"> <link rel="stylesheet" href="http://blog.itpub.net/css/base.css?v1.5"> <link rel="stylesheet" href="http://blog.itpub.net/css/zhuanlan.css?v=1.3"> <!--[if lt IE 9]> <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script> <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script> <![endif]--> <div></div> <div></div> <div></div> <div></div> <!--header部分開始--> <div class="blog-header"> <div class="w1200"> <a href="http://blog.itpub.net/" class="fl" rel="nofollow"><h1 class="logo">ITPub部落格</h1></a> <div class="nav fl"> <a href="http://www.itpub.net/" rel="nofollow">首頁</a> <a href="http://blog.itpub.net/" rel="nofollow">部落格</a> <a href="http://blog.itpub.net/column" rel="nofollow">專欄</a> <a href="http://edu.itpub.net/" rel="nofollow">學院</a> <a href="http://www.itpub.net/forum.php" rel="nofollow">社群</a> <a href="https://z.itpub.net/" rel="nofollow">技術棧</a> </div> <div class="fr"> <form action="http://blog.itpub.net/search/blog/" class="layui-form blog-search-wrap fl"> <input type="hidden" name="type" value="blog"> <input placeholder="搜尋" type="text" class="layui-input" name="keyword"> <button class="search-btn icon-blog"></button> </form> <a href="http://blog.itpub.net/blog/post/" class="layui-btn layui-btn-primary fl mlr30" target="_blank" rel="nofollow">發博</a> <!--登入前--> <div class="fl head-name" id="u_info"> </div> </div> </div> </div> <!--header部分結束--> <link rel="stylesheet" href="http://blog.itpub.net/markdown/css/editormd.css"> <link rel="stylesheet" href="http://blog.itpub.net/markdown/css/editormd.min.css"> <link rel="stylesheet" href="http://blog.itpub.net/markdown/css/editormd.preview.min.css"> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <link href="http://blog.itpub.net/ueditor/third-party/SyntaxHighlighter/shCoreDefault.css" rel="stylesheet" type="text/css"> <div></div> <link rel="stylesheet" href="http://g.alicdn.com/de/prismplayer/2.6.0/skins/default/aliplayer-min.css"> <div></div> <div></div> <div></div> <div></div> <div></div> <style> .code .container > textarea{ height:100%; } .translate{color: #9fa3a7 !important;font-size:12px !important;} .translate a{font-size:12px !important;color:#9fa3a7 !important;} .translate a:hover {font-size:12px !important;color:#f15142 !important;} .newslist{padding:10px 5px;height:20px !important;line-height:20px;overflow:hidden;text-overflow: ellipsis;white-space: nowrap;border-bottom:1px solid #eee} .fake-video-btn:hover{ cursor: pointer; border-style: solid; border-width: 2px; border-radius: 63px; border-color: #00c1de; } .it-player-wrap { display: flex; flex-direction: row; box-sizing: border-box; padding: 5px; margin-bottom: 20px; background: #FBFBFB; border: 1px solid #EFEFEF; border-radius: 4px; } .it-player-wrap .control { width: 50px; height: 50px; background-color: #57a5f2; margin-right: 15px; border-radius: 50%; } .it-player-wrap .control .play,.it-player-wrap .control .pause { background-size: 30px !important; color: #ffffff; width: 100%; height: 100%; } .it-player-wrap .control .play { background: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/PjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+PHN2ZyB0PSIxNTU5NjM3ODcxMTQ0IiBjbGFzcz0iaWNvbiIgc3R5bGU9IiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHAtaWQ9IjYwMjkiIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iMjAwIiBoZWlnaHQ9IjIwMCI+PGRlZnM+PHN0eWxlIHR5cGU9InRleHQvY3NzIj48L3N0eWxlPjwvZGVmcz48cGF0aCBkPSJNOTUzLjQ0NTA2NSA2MDguMjkwNzI0TDM1MC4yOTkyMSA5ODAuNjM0MjExQzI1Ni42NDExNTEgMTAzOC40NTUyNjMgMTgwLjY5MDc4OSA5OTcuNzk5ODM2IDE4MC42OTA3ODkgODkxLjkxNTAzM1YxMTUuNDg2NzExQzE4MC42OTA3ODkgOC42MzgyMjQgMjU2LjIxOTUzOS0zMS4yOTQ0NCAzNTAuMjM4OTggMjYuNzY3NTM0bDYwMy4yNjYzMTUgMzcyLjIyMzAyNmM5My42NTgwNTkgNTcuODIxMDUzIDk0LjA3OTY3MSAxNTEuMjM4MTkxIDAgMjA5LjMwMDE2NHoiIHAtaWQ9IjYwMzAiIGZpbGw9IiNmZmZmZmYiPjwvcGF0aD48L3N2Zz4=") no-repeat center; } .it-player-wrap .control .pause { background: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/PjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+PHN2ZyB0PSIxNTU5NjM3NzQ2MzAwIiBjbGFzcz0iaWNvbiIgc3R5bGU9IiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHAtaWQ9IjQ0NjciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iMjAwIiBoZWlnaHQ9IjIwMCI+PGRlZnM+PHN0eWxlIHR5cGU9InRleHQvY3NzIj48L3N0eWxlPjwvZGVmcz48cGF0aCBkPSJNNzM1LjkgNjQuOWMtNTEuMiAwLTk2IDQ0LjctOTYgOTUuOHY3MDIuNmMwIDUxLjEgNDQuOCA5NS44IDk2IDk1LjhzOTYtNDQuNyA5Ni05NS44VjE2MC43YzAtNTEuMS00NC44LTk1LjgtOTYtOTUuOHogbS00NDcuOCAwYy01MS4yIDAtOTYgNDQuNy05NiA5NS44djcwMi42YzAgNTEuMSA0NC44IDk1LjggOTYgOTUuOHM5Ni00NC43IDk2LTk1LjhWMTYwLjdjLTAuMS01MS4xLTQ0LjktOTUuOC05Ni05NS44eiIgcC1pZD0iNDQ2OCIgZmlsbD0iI2ZmZmZmZiI+PC9wYXRoPjwvc3ZnPg==") no-repeat center; } .it-player-wrap .box { flex: 1; } .it-player-wrap .box .info { font-family: PingFang-SC-Regular; font-size: 12px; color: #A8A8A8; text-align: left; line-height: 24px; margin: 0; } .it-player-wrap .box .info .size { display: inline-block; margin-right: 15px; } .it-player-wrap .progress-wrap { position: relative; margin-top: 15px; display: flex; flex-direction: row; align-items: center; } .it-player-wrap .progress-line,.it-player-wrap .progress-line-inner { position: absolute; height: 6px; width: 100%; background: #DDECFF; border-radius: 8.5px; } .it-player-wrap .progress-line-inner { background: #4C83E5 !important; } .it-player-wrap .progress-button { position: absolute; width: 50px; height: 20px; background: #4C83E5; box-shadow: 0 2px 4px 0 #A0C2FF; border-radius: 10px; top: -10px; font-family: PingFang-SC-Regular; font-size: 12px; color: #FFFFFF; text-align: center; line-height: 20px; cursor: pointer; } </style> <style> .crumb{ padding: 10px; margin-bottom: 10px; border-bottom: 1px solid rgba(238,238,238,0.4); } .crumb p{ width: 1200px; margin: 0 auto; } .newul{ line-height: 25px; } .new-item{ padding: 5px; display: block; width: 250px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } #doc-content img{ margin:none; display:initial; } .syntaxhighlighter{ width:890px; } .syntaxhighlighter td.code .line{ white-space: nowrap; } .syntaxhighlighter td.code .container{ width:840px!important; } .syntaxhighlighter td.code{ overflow: scroll!important; } </style> <div class="crumb"> <p> <a href="http://blog.itpub.net/" rel="nofollow">首頁</a> > <a href="http://blog.itpub.net/appdevelop/" rel="nofollow">應用開發</a> > <a href="http://blog.itpub.net/itother/" rel="nofollow">IT綜合</a> > <a rel="nofollow">微前端(Micro Frontend ) 落地實施的一些具體例子</a> </p> </div> <!--main部分開始--> <div class="blog-main clearfix w1200"> <div class="preview-wrap"> <div class="preview-header"> <h1 class="preview-title ">微前端(Micro Frontend ) 落地實施的一些具體例子 </h1> <div class="mess"> <span class="label label-original">原創</span> <span style="margin: auto 10px auto 0px"><a href="http://blog.itpub.net/itother/" rel="nofollow">IT綜合</a></span> <span>作者：<a href="http://blog.itpub.net/24475491/" rel="nofollow">i042416</a></span> <span>時間：2021-07-29 15:10:49</span> <span class="dian"></span> <span class="icon-see"></span> <span class="dian"></span> <span class="icon-comment">0</span> <!--博主本人和管理員 顯示 開始--> <i class="superman"><a href="javascript:;" mid="2784083" onclick="blogObj.delDraft($(this))" rel="nofollow">刪除</a></i> <i class="superman"><a href="http://blog.itpub.net/blog/post/2784083/" rel="nofollow">編輯</a></i> <!--博主本人和管理員 顯示 結束--> </div> </div> <div class="preview-body windowH"> <div class="preview-main"> <div id="doc-content" style="padding: 0px;"> <textarea style="display: none">前文[微前端概述(Micro Frontends) 以及相比單體應用，微前端能帶來什麼好處](https://jerry.blog.csdn.net/article/details/119190124) 簡單介紹了微前端的概念，本文來看一個具體的應用例子。 [原文地址](https://martinfowler.com/articles/micro-frontends.html) 想象一個網站，客戶可以在其中訂購外賣食品。從表面上看，這是一個相當簡單的概念，但如果你想做得好，還有驚人的細節： * 應該有一個登陸頁面，客戶可以在其中瀏覽和搜尋餐館。 餐廳應該可以透過任意數量的屬性進行搜尋和過濾，包括價格、美食或客戶之前訂購的東西 * 每家餐廳都需要自己的頁面來顯示其選單項，並允許客戶選擇他們想吃的東西，包括折扣、餐飲優惠和特殊要求 * 客戶應該有一個個人資料頁面，他們可以在其中檢視他們的訂單歷史記錄、跟蹤交付和自定義他們的付款選項  每個頁面都有足夠的複雜性，我們可以輕鬆地證明每個頁面都有一個專門的團隊，並且每個團隊都應該能夠獨立於所有其他團隊在他們的頁面上工作。 他們應該能夠開發、測試、部署和維護他們的程式碼，而不必擔心與其他團隊發生衝突或協調。 但是，我們的客戶仍然應該看到一個無縫的網站。 在本文的其餘部分，我們將在需要示例程式碼或場景的任何地方使用此示例應用程式。 # Integration approaches 鑑於上面相當鬆散的定義，有許多方法可以合理地稱為微前端。 在本節中，我們將展示一些示例並討論它們的權衡。 所有這些方法都有一個相當自然的架構——通常應用程式中的每個頁面都有一個微前端，並且有一個容器應用程式，它： * 呈現常見的頁面元素，例如頁首和頁尾 * 解決跨領域問題，如身份驗證和導航 * 將各種微前端放在頁面上，並告訴每個微前端何時何地渲染自己  # Server-side template composition 我們從一種絕對不新穎的前端開發方法開始——用多個模板或片段在伺服器上渲染 HTML。 我們有一個 index.html ，它包含所有常見的頁面元素，然後使用伺服器端包含從片段 HTML 檔案中插入特定於頁面的內容： ```html <meta charset="utf-8"> <title>Feed me</title> <h1>Feed me</h1> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="renderer" content="webkit"> <title>微前端(Micro Frontend ) 落地實施的一些具體例子_ITPUB部落格</title> <meta name="keywords" content="應用開發,IT綜合"> <meta name="description" content="前文微前端概述(Micro Frontends) 以及相比單體應用，微前端能帶來什麼好處 簡單介紹了微前端的概念，本文來看一個具體的應用例子。 原文地址 想象一個網站，客戶可以在其中訂購外賣食品。從表面上看，這是一個相當簡單的概念，但如果你想做得好，還有驚人的細節： 應該有一個登陸頁面，客戶可以在其中瀏覽和搜尋餐館。 餐廳應該可以透過任意數量的屬性進行搜尋和過濾，包括價格、美食或客戶之前ITPUB部落格每天千篇餘篇博文新資訊，40多萬活躍博主，為IT技術人提供全面的IT資訊和交流互動的IT部落格平臺-中國專業的IT技術ITPUB部落格。"> <link rel="stylesheet" href="http://blog.itpub.net/layui/css/layui.css?v234"> <link rel="stylesheet" href="http://blog.itpub.net/css/base.css?v1.5"> <link rel="stylesheet" href="http://blog.itpub.net/css/zhuanlan.css?v=1.3"> <!--[if lt IE 9]> <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script> <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script> <![endif]--> <div></div> <div></div> <div></div> <div></div> <!--header部分開始--> <div class="blog-header"> <div class="w1200"> <a href="http://blog.itpub.net/" class="fl" rel="nofollow"><h1 class="logo">ITPub部落格</h1></a> <div class="nav fl"> <a href="http://www.itpub.net/" rel="nofollow">首頁</a> <a href="http://blog.itpub.net/" rel="nofollow">部落格</a> <a href="http://blog.itpub.net/column" rel="nofollow">專欄</a> <a href="http://edu.itpub.net/" rel="nofollow">學院</a> <a href="http://www.itpub.net/forum.php" rel="nofollow">社群</a> <a href="https://z.itpub.net/" rel="nofollow">技術棧</a> </div> <div class="fr"> <form action="http://blog.itpub.net/search/blog/" class="layui-form blog-search-wrap fl"> <input type="hidden" name="type" value="blog"> <input placeholder="搜尋" type="text" class="layui-input" name="keyword"> <button class="search-btn icon-blog"></button> </form> <a href="http://blog.itpub.net/blog/post/" class="layui-btn layui-btn-primary fl mlr30" target="_blank" rel="nofollow">發博</a> <!--登入前--> <div class="fl head-name" id="u_info"> </div> </div> </div> </div> <!--header部分結束--> <link rel="stylesheet" href="http://blog.itpub.net/markdown/css/editormd.css"> <link rel="stylesheet" href="http://blog.itpub.net/markdown/css/editormd.min.css"> <link rel="stylesheet" href="http://blog.itpub.net/markdown/css/editormd.preview.min.css"> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <link href="http://blog.itpub.net/ueditor/third-party/SyntaxHighlighter/shCoreDefault.css" rel="stylesheet" type="text/css"> <div></div> <link rel="stylesheet" href="http://g.alicdn.com/de/prismplayer/2.6.0/skins/default/aliplayer-min.css"> <div></div> <div></div> <div></div> <div></div> <div></div> <style> .code .container > textarea{ height:100%; } .translate{color: #9fa3a7 !important;font-size:12px !important;} .translate a{font-size:12px !important;color:#9fa3a7 !important;} .translate a:hover {font-size:12px !important;color:#f15142 !important;} .newslist{padding:10px 5px;height:20px !important;line-height:20px;overflow:hidden;text-overflow: ellipsis;white-space: nowrap;border-bottom:1px solid #eee} .fake-video-btn:hover{ cursor: pointer; border-style: solid; border-width: 2px; border-radius: 63px; border-color: #00c1de; } .it-player-wrap { display: flex; flex-direction: row; box-sizing: border-box; padding: 5px; margin-bottom: 20px; background: #FBFBFB; border: 1px solid #EFEFEF; border-radius: 4px; } .it-player-wrap .control { width: 50px; height: 50px; background-color: #57a5f2; margin-right: 15px; border-radius: 50%; } .it-player-wrap .control .play,.it-player-wrap .control .pause { background-size: 30px !important; color: #ffffff; width: 100%; height: 100%; } .it-player-wrap .control .play { background: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/PjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+PHN2ZyB0PSIxNTU5NjM3ODcxMTQ0IiBjbGFzcz0iaWNvbiIgc3R5bGU9IiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHAtaWQ9IjYwMjkiIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iMjAwIiBoZWlnaHQ9IjIwMCI+PGRlZnM+PHN0eWxlIHR5cGU9InRleHQvY3NzIj48L3N0eWxlPjwvZGVmcz48cGF0aCBkPSJNOTUzLjQ0NTA2NSA2MDguMjkwNzI0TDM1MC4yOTkyMSA5ODAuNjM0MjExQzI1Ni42NDExNTEgMTAzOC40NTUyNjMgMTgwLjY5MDc4OSA5OTcuNzk5ODM2IDE4MC42OTA3ODkgODkxLjkxNTAzM1YxMTUuNDg2NzExQzE4MC42OTA3ODkgOC42MzgyMjQgMjU2LjIxOTUzOS0zMS4yOTQ0NCAzNTAuMjM4OTggMjYuNzY3NTM0bDYwMy4yNjYzMTUgMzcyLjIyMzAyNmM5My42NTgwNTkgNTcuODIxMDUzIDk0LjA3OTY3MSAxNTEuMjM4MTkxIDAgMjA5LjMwMDE2NHoiIHAtaWQ9IjYwMzAiIGZpbGw9IiNmZmZmZmYiPjwvcGF0aD48L3N2Zz4=") no-repeat center; } .it-player-wrap .control .pause { background: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/PjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+PHN2ZyB0PSIxNTU5NjM3NzQ2MzAwIiBjbGFzcz0iaWNvbiIgc3R5bGU9IiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHAtaWQ9IjQ0NjciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iMjAwIiBoZWlnaHQ9IjIwMCI+PGRlZnM+PHN0eWxlIHR5cGU9InRleHQvY3NzIj48L3N0eWxlPjwvZGVmcz48cGF0aCBkPSJNNzM1LjkgNjQuOWMtNTEuMiAwLTk2IDQ0LjctOTYgOTUuOHY3MDIuNmMwIDUxLjEgNDQuOCA5NS44IDk2IDk1LjhzOTYtNDQuNyA5Ni05NS44VjE2MC43YzAtNTEuMS00NC44LTk1LjgtOTYtOTUuOHogbS00NDcuOCAwYy01MS4yIDAtOTYgNDQuNy05NiA5NS44djcwMi42YzAgNTEuMSA0NC44IDk1LjggOTYgOTUuOHM5Ni00NC43IDk2LTk1LjhWMTYwLjdjLTAuMS01MS4xLTQ0LjktOTUuOC05Ni05NS44eiIgcC1pZD0iNDQ2OCIgZmlsbD0iI2ZmZmZmZiI+PC9wYXRoPjwvc3ZnPg==") no-repeat center; } .it-player-wrap .box { flex: 1; } .it-player-wrap .box .info { font-family: PingFang-SC-Regular; font-size: 12px; color: #A8A8A8; text-align: left; line-height: 24px; margin: 0; } .it-player-wrap .box .info .size { display: inline-block; margin-right: 15px; } .it-player-wrap .progress-wrap { position: relative; margin-top: 15px; display: flex; flex-direction: row; align-items: center; } .it-player-wrap .progress-line,.it-player-wrap .progress-line-inner { position: absolute; height: 6px; width: 100%; background: #DDECFF; border-radius: 8.5px; } .it-player-wrap .progress-line-inner { background: #4C83E5 !important; } .it-player-wrap .progress-button { position: absolute; width: 50px; height: 20px; background: #4C83E5; box-shadow: 0 2px 4px 0 #A0C2FF; border-radius: 10px; top: -10px; font-family: PingFang-SC-Regular; font-size: 12px; color: #FFFFFF; text-align: center; line-height: 20px; cursor: pointer; } </style> <style> .crumb{ padding: 10px; margin-bottom: 10px; border-bottom: 1px solid rgba(238,238,238,0.4); } .crumb p{ width: 1200px; margin: 0 auto; } .newul{ line-height: 25px; } .new-item{ padding: 5px; display: block; width: 250px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } #doc-content img{ margin:none; display:initial; } .syntaxhighlighter{ width:890px; } .syntaxhighlighter td.code .line{ white-space: nowrap; } .syntaxhighlighter td.code .container{ width:840px!important; } .syntaxhighlighter td.code{ overflow: scroll!important; } </style> <div class="crumb"> <p> <a href="http://blog.itpub.net/" rel="nofollow">首頁</a> > <a href="http://blog.itpub.net/appdevelop/" rel="nofollow">應用開發</a> > <a href="http://blog.itpub.net/itother/" rel="nofollow">IT綜合</a> > <a rel="nofollow">微前端(Micro Frontend ) 落地實施的一些具體例子</a> </p> </div> <!--main部分開始--> <div class="blog-main clearfix w1200"> <div class="preview-wrap"> <div class="preview-header"> <h1 class="preview-title ">微前端(Micro Frontend ) 落地實施的一些具體例子 </h1> <div class="mess"> <span class="label label-original">原創</span> <span style="margin: auto 10px auto 0px"><a href="http://blog.itpub.net/itother/" rel="nofollow">IT綜合</a></span> <span>作者：<a href="http://blog.itpub.net/24475491/" rel="nofollow">i042416</a></span> <span>時間：2021-07-29 15:10:49</span> <span class="dian"></span> <span class="icon-see"></span> <span class="dian"></span> <span class="icon-comment">0</span> <!--博主本人和管理員 顯示 開始--> <i class="superman"><a href="javascript:;" mid="2784083" onclick="blogObj.delDraft($(this))" rel="nofollow">刪除</a></i> <i class="superman"><a href="http://blog.itpub.net/blog/post/2784083/" rel="nofollow">編輯</a></i> <!--博主本人和管理員 顯示 結束--> </div> </div> <div class="preview-body windowH"> <div class="preview-main"> <div id="doc-content" style="padding: 0px;"> <textarea style="display: none">前文[微前端概述(Micro Frontends) 以及相比單體應用，微前端能帶來什麼好處](https://jerry.blog.csdn.net/article/details/119190124) 簡單介紹了微前端的概念，本文來看一個具體的應用例子。 [原文地址](https://martinfowler.com/articles/micro-frontends.html) 想象一個網站，客戶可以在其中訂購外賣食品。從表面上看，這是一個相當簡單的概念，但如果你想做得好，還有驚人的細節： * 應該有一個登陸頁面，客戶可以在其中瀏覽和搜尋餐館。 餐廳應該可以透過任意數量的屬性進行搜尋和過濾，包括價格、美食或客戶之前訂購的東西 * 每家餐廳都需要自己的頁面來顯示其選單項，並允許客戶選擇他們想吃的東西，包括折扣、餐飲優惠和特殊要求 * 客戶應該有一個個人資料頁面，他們可以在其中檢視他們的訂單歷史記錄、跟蹤交付和自定義他們的付款選項  每個頁面都有足夠的複雜性，我們可以輕鬆地證明每個頁面都有一個專門的團隊，並且每個團隊都應該能夠獨立於所有其他團隊在他們的頁面上工作。 他們應該能夠開發、測試、部署和維護他們的程式碼，而不必擔心與其他團隊發生衝突或協調。 但是，我們的客戶仍然應該看到一個無縫的網站。 在本文的其餘部分，我們將在需要示例程式碼或場景的任何地方使用此示例應用程式。 # Integration approaches 鑑於上面相當鬆散的定義，有許多方法可以合理地稱為微前端。 在本節中，我們將展示一些示例並討論它們的權衡。 所有這些方法都有一個相當自然的架構——通常應用程式中的每個頁面都有一個微前端，並且有一個容器應用程式，它： * 呈現常見的頁面元素，例如頁首和頁尾 * 解決跨領域問題，如身份驗證和導航 * 將各種微前端放在頁面上，並告訴每個微前端何時何地渲染自己  # Server-side template composition 我們從一種絕對不新穎的前端開發方法開始——用多個模板或片段在伺服器上渲染 HTML。 我們有一個 index.html ，它包含所有常見的頁面元素，然後使用伺服器端包含從片段 HTML 檔案中插入特定於頁面的內容： ```html <meta charset="utf-8"> <title>Feed me</title> <h1>Feed me</h1> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="renderer" content="webkit"> <title>微前端(Micro Frontend ) 落地實施的一些具體例子_ITPUB部落格</title> <meta name="keywords" content="應用開發,IT綜合"> <meta name="description" content="前文微前端概述(Micro Frontends) 以及相比單體應用，微前端能帶來什麼好處 簡單介紹了微前端的概念，本文來看一個具體的應用例子。 原文地址 想象一個網站，客戶可以在其中訂購外賣食品。從表面上看，這是一個相當簡單的概念，但如果你想做得好，還有驚人的細節： 應該有一個登陸頁面，客戶可以在其中瀏覽和搜尋餐館。 餐廳應該可以透過任意數量的屬性進行搜尋和過濾，包括價格、美食或客戶之前ITPUB部落格每天千篇餘篇博文新資訊，40多萬活躍博主，為IT技術人提供全面的IT資訊和交流互動的IT部落格平臺-中國專業的IT技術ITPUB部落格。"> <link rel="stylesheet" href="http://blog.itpub.net/layui/css/layui.css?v234"> <link rel="stylesheet" href="http://blog.itpub.net/css/base.css?v1.5"> <link rel="stylesheet" href="http://blog.itpub.net/css/zhuanlan.css?v=1.3"> <!--[if lt IE 9]> <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script> <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script> <![endif]--> <div></div> <div></div> <div></div> <div></div> <!--header部分開始--> <div class="blog-header"> <div class="w1200"> <a href="http://blog.itpub.net/" class="fl" rel="nofollow"><h1 class="logo">ITPub部落格</h1></a> <div class="nav fl"> <a href="http://www.itpub.net/" rel="nofollow">首頁</a> <a href="http://blog.itpub.net/" rel="nofollow">部落格</a> <a href="http://blog.itpub.net/column" rel="nofollow">專欄</a> <a href="http://edu.itpub.net/" rel="nofollow">學院</a> <a href="http://www.itpub.net/forum.php" rel="nofollow">社群</a> <a href="https://z.itpub.net/" rel="nofollow">技術棧</a> </div> <div class="fr"> <form action="http://blog.itpub.net/search/blog/" class="layui-form blog-search-wrap fl"> <input type="hidden" name="type" value="blog"> <input placeholder="搜尋" type="text" class="layui-input" name="keyword"> <button class="search-btn icon-blog"></button> </form> <a href="http://blog.itpub.net/blog/post/" class="layui-btn layui-btn-primary fl mlr30" target="_blank" rel="nofollow">發博</a> <!--登入前--> <div class="fl head-name" id="u_info"> </div> </div> </div> </div> <!--header部分結束--> <link rel="stylesheet" href="http://blog.itpub.net/markdown/css/editormd.css"> <link rel="stylesheet" href="http://blog.itpub.net/markdown/css/editormd.min.css"> <link rel="stylesheet" href="http://blog.itpub.net/markdown/css/editormd.preview.min.css"> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <link href="http://blog.itpub.net/ueditor/third-party/SyntaxHighlighter/shCoreDefault.css" rel="stylesheet" type="text/css"> <div></div> <link rel="stylesheet" href="http://g.alicdn.com/de/prismplayer/2.6.0/skins/default/aliplayer-min.css"> <div></div> <div></div> <div></div> <div></div> <div></div> <style> .code .container > textarea{ height:100%; } .translate{color: #9fa3a7 !important;font-size:12px !important;} .translate a{font-size:12px !important;color:#9fa3a7 !important;} .translate a:hover {font-size:12px !important;color:#f15142 !important;} .newslist{padding:10px 5px;height:20px !important;line-height:20px;overflow:hidden;text-overflow: ellipsis;white-space: nowrap;border-bottom:1px solid #eee} .fake-video-btn:hover{ cursor: pointer; border-style: solid; border-width: 2px; border-radius: 63px; border-color: #00c1de; } .it-player-wrap { display: flex; flex-direction: row; box-sizing: border-box; padding: 5px; margin-bottom: 20px; background: #FBFBFB; border: 1px solid #EFEFEF; border-radius: 4px; } .it-player-wrap .control { width: 50px; height: 50px; background-color: #57a5f2; margin-right: 15px; border-radius: 50%; } .it-player-wrap .control .play,.it-player-wrap .control .pause { background-size: 30px !important; color: #ffffff; width: 100%; height: 100%; } .it-player-wrap .control .play { background: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/PjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+PHN2ZyB0PSIxNTU5NjM3ODcxMTQ0IiBjbGFzcz0iaWNvbiIgc3R5bGU9IiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHAtaWQ9IjYwMjkiIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iMjAwIiBoZWlnaHQ9IjIwMCI+PGRlZnM+PHN0eWxlIHR5cGU9InRleHQvY3NzIj48L3N0eWxlPjwvZGVmcz48cGF0aCBkPSJNOTUzLjQ0NTA2NSA2MDguMjkwNzI0TDM1MC4yOTkyMSA5ODAuNjM0MjExQzI1Ni42NDExNTEgMTAzOC40NTUyNjMgMTgwLjY5MDc4OSA5OTcuNzk5ODM2IDE4MC42OTA3ODkgODkxLjkxNTAzM1YxMTUuNDg2NzExQzE4MC42OTA3ODkgOC42MzgyMjQgMjU2LjIxOTUzOS0zMS4yOTQ0NCAzNTAuMjM4OTggMjYuNzY3NTM0bDYwMy4yNjYzMTUgMzcyLjIyMzAyNmM5My42NTgwNTkgNTcuODIxMDUzIDk0LjA3OTY3MSAxNTEuMjM4MTkxIDAgMjA5LjMwMDE2NHoiIHAtaWQ9IjYwMzAiIGZpbGw9IiNmZmZmZmYiPjwvcGF0aD48L3N2Zz4=") no-repeat center; } .it-player-wrap .control .pause { background: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/PjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+PHN2ZyB0PSIxNTU5NjM3NzQ2MzAwIiBjbGFzcz0iaWNvbiIgc3R5bGU9IiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHAtaWQ9IjQ0NjciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iMjAwIiBoZWlnaHQ9IjIwMCI+PGRlZnM+PHN0eWxlIHR5cGU9InRleHQvY3NzIj48L3N0eWxlPjwvZGVmcz48cGF0aCBkPSJNNzM1LjkgNjQuOWMtNTEuMiAwLTk2IDQ0LjctOTYgOTUuOHY3MDIuNmMwIDUxLjEgNDQuOCA5NS44IDk2IDk1LjhzOTYtNDQuNyA5Ni05NS44VjE2MC43YzAtNTEuMS00NC44LTk1LjgtOTYtOTUuOHogbS00NDcuOCAwYy01MS4yIDAtOTYgNDQuNy05NiA5NS44djcwMi42YzAgNTEuMSA0NC44IDk1LjggOTYgOTUuOHM5Ni00NC43IDk2LTk1LjhWMTYwLjdjLTAuMS01MS4xLTQ0LjktOTUuOC05Ni05NS44eiIgcC1pZD0iNDQ2OCIgZmlsbD0iI2ZmZmZmZiI+PC9wYXRoPjwvc3ZnPg==") no-repeat center; } .it-player-wrap .box { flex: 1; } .it-player-wrap .box .info { font-family: PingFang-SC-Regular; font-size: 12px; color: #A8A8A8; text-align: left; line-height: 24px; margin: 0; } .it-player-wrap .box .info .size { display: inline-block; margin-right: 15px; } .it-player-wrap .progress-wrap { position: relative; margin-top: 15px; display: flex; flex-direction: row; align-items: center; } .it-player-wrap .progress-line,.it-player-wrap .progress-line-inner { position: absolute; height: 6px; width: 100%; background: #DDECFF; border-radius: 8.5px; } .it-player-wrap .progress-line-inner { background: #4C83E5 !important; } .it-player-wrap .progress-button { position: absolute; width: 50px; height: 20px; background: #4C83E5; box-shadow: 0 2px 4px 0 #A0C2FF; border-radius: 10px; top: -10px; font-family: PingFang-SC-Regular; font-size: 12px; color: #FFFFFF; text-align: center; line-height: 20px; cursor: pointer; } </style> <style> .crumb{ padding: 10px; margin-bottom: 10px; border-bottom: 1px solid rgba(238,238,238,0.4); } .crumb p{ width: 1200px; margin: 0 auto; } .newul{ line-height: 25px; } .new-item{ padding: 5px; display: block; width: 250px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } #doc-content img{ margin:none; display:initial; } .syntaxhighlighter{ width:890px; } .syntaxhighlighter td.code .line{ white-space: nowrap; } .syntaxhighlighter td.code .container{ width:840px!important; } .syntaxhighlighter td.code{ overflow: scroll!important; } </style> <div class="crumb"> <p> <a href="http://blog.itpub.net/" rel="nofollow">首頁</a> > <a href="http://blog.itpub.net/appdevelop/" rel="nofollow">應用開發</a> > <a href="http://blog.itpub.net/itother/" rel="nofollow">IT綜合</a> > <a rel="nofollow">微前端(Micro Frontend ) 落地實施的一些具體例子</a> </p> </div> <!--main部分開始--> <div class="blog-main clearfix w1200"> <div class="preview-wrap"> <div class="preview-header"> <h1 class="preview-title ">微前端(Micro Frontend ) 落地實施的一些具體例子 </h1> <div class="mess"> <span class="label label-original">原創</span> <span style="margin: auto 10px auto 0px"><a href="http://blog.itpub.net/itother/" rel="nofollow">IT綜合</a></span> <span>作者：<a href="http://blog.itpub.net/24475491/" rel="nofollow">i042416</a></span> <span>時間：2021-07-29 15:10:49</span> <span class="dian"></span> <span class="icon-see"></span> <span class="dian"></span> <span class="icon-comment">0</span> <!--博主本人和管理員 顯示 開始--> <i class="superman"><a href="javascript:;" mid="2784083" onclick="blogObj.delDraft($(this))" rel="nofollow">刪除</a></i> <i class="superman"><a href="http://blog.itpub.net/blog/post/2784083/" rel="nofollow">編輯</a></i> <!--博主本人和管理員 顯示 結束--> </div> </div> <div class="preview-body windowH"> <div class="preview-main"> <div id="doc-content" style="padding: 0px;"> <textarea style="display: none">前文[微前端概述(Micro Frontends) 以及相比單體應用，微前端能帶來什麼好處](https://jerry.blog.csdn.net/article/details/119190124) 簡單介紹了微前端的概念，本文來看一個具體的應用例子。 [原文地址](https://martinfowler.com/articles/micro-frontends.html) 想象一個網站，客戶可以在其中訂購外賣食品。從表面上看，這是一個相當簡單的概念，但如果你想做得好，還有驚人的細節： * 應該有一個登陸頁面，客戶可以在其中瀏覽和搜尋餐館。 餐廳應該可以透過任意數量的屬性進行搜尋和過濾，包括價格、美食或客戶之前訂購的東西 * 每家餐廳都需要自己的頁面來顯示其選單項，並允許客戶選擇他們想吃的東西，包括折扣、餐飲優惠和特殊要求 * 客戶應該有一個個人資料頁面，他們可以在其中檢視他們的訂單歷史記錄、跟蹤交付和自定義他們的付款選項  每個頁面都有足夠的複雜性，我們可以輕鬆地證明每個頁面都有一個專門的團隊，並且每個團隊都應該能夠獨立於所有其他團隊在他們的頁面上工作。 他們應該能夠開發、測試、部署和維護他們的程式碼，而不必擔心與其他團隊發生衝突或協調。 但是，我們的客戶仍然應該看到一個無縫的網站。 在本文的其餘部分，我們將在需要示例程式碼或場景的任何地方使用此示例應用程式。 # Integration approaches 鑑於上面相當鬆散的定義，有許多方法可以合理地稱為微前端。 在本節中，我們將展示一些示例並討論它們的權衡。 所有這些方法都有一個相當自然的架構——通常應用程式中的每個頁面都有一個微前端，並且有一個容器應用程式，它： * 呈現常見的頁面元素，例如頁首和頁尾 * 解決跨領域問題，如身份驗證和導航 * 將各種微前端放在頁面上，並告訴每個微前端何時何地渲染自己  # Server-side template composition 我們從一種絕對不新穎的前端開發方法開始——用多個模板或片段在伺服器上渲染 HTML。 我們有一個 index.html ，它包含所有常見的頁面元素，然後使用伺服器端包含從片段 HTML 檔案中插入特定於頁面的內容： ```html <meta charset="utf-8"> <title>Feed me</title> <h1>Feed me</h1> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="renderer" content="webkit"> <title>微前端(Micro Frontend ) 落地實施的一些具體例子_ITPUB部落格</title> <meta name="keywords" content="應用開發,IT綜合"> <meta name="description" content="前文微前端概述(Micro Frontends) 以及相比單體應用，微前端能帶來什麼好處 簡單介紹了微前端的概念，本文來看一個具體的應用例子。 原文地址 想象一個網站，客戶可以在其中訂購外賣食品。從表面上看，這是一個相當簡單的概念，但如果你想做得好，還有驚人的細節： 應該有一個登陸頁面，客戶可以在其中瀏覽和搜尋餐館。 餐廳應該可以透過任意數量的屬性進行搜尋和過濾，包括價格、美食或客戶之前ITPUB部落格每天千篇餘篇博文新資訊，40多萬活躍博主，為IT技術人提供全面的IT資訊和交流互動的IT部落格平臺-中國專業的IT技術ITPUB部落格。"> <link rel="stylesheet" href="http://blog.itpub.net/layui/css/layui.css?v234"> <link rel="stylesheet" href="http://blog.itpub.net/css/base.css?v1.5"> <link rel="stylesheet" href="http://blog.itpub.net/css/zhuanlan.css?v=1.3"> <!--[if lt IE 9]> <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script> <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script> <![endif]--> <div></div> <div></div> <div></div> <div></div> <!--header部分開始--> <div class="blog-header"> <div class="w1200"> <a href="http://blog.itpub.net/" class="fl" rel="nofollow"><h1 class="logo">ITPub部落格</h1></a> <div class="nav fl"> <a href="http://www.itpub.net/" rel="nofollow">首頁</a> <a href="http://blog.itpub.net/" rel="nofollow">部落格</a> <a href="http://blog.itpub.net/column" rel="nofollow">專欄</a> <a href="http://edu.itpub.net/" rel="nofollow">學院</a> <a href="http://www.itpub.net/forum.php" rel="nofollow">社群</a> <a href="https://z.itpub.net/" rel="nofollow">技術棧</a> </div> <div class="fr"> <form action="http://blog.itpub.net/search/blog/" class="layui-form blog-search-wrap fl"> <input type="hidden" name="type" value="blog"> <input placeholder="搜尋" type="text" class="layui-input" name="keyword"> <button class="search-btn icon-blog"></button> </form> <a href="http://blog.itpub.net/blog/post/" class="layui-btn layui-btn-primary fl mlr30" target="_blank" rel="nofollow">發博</a> <!--登入前--> <div class="fl head-name" id="u_info"> </div> </div> </div> </div> <!--header部分結束--> <link rel="stylesheet" href="http://blog.itpub.net/markdown/css/editormd.css"> <link rel="stylesheet" href="http://blog.itpub.net/markdown/css/editormd.min.css"> <link rel="stylesheet" href="http://blog.itpub.net/markdown/css/editormd.preview.min.css"> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <link href="http://blog.itpub.net/ueditor/third-party/SyntaxHighlighter/shCoreDefault.css" rel="stylesheet" type="text/css"> <div></div> <link rel="stylesheet" href="http://g.alicdn.com/de/prismplayer/2.6.0/skins/default/aliplayer-min.css"> <div></div> <div></div> <div></div> <div></div> <div></div> <style> .code .container > textarea{ height:100%; } .translate{color: #9fa3a7 !important;font-size:12px !important;} .translate a{font-size:12px !important;color:#9fa3a7 !important;} .translate a:hover {font-size:12px !important;color:#f15142 !important;} .newslist{padding:10px 5px;height:20px !important;line-height:20px;overflow:hidden;text-overflow: ellipsis;white-space: nowrap;border-bottom:1px solid #eee} .fake-video-btn:hover{ cursor: pointer; border-style: solid; border-width: 2px; border-radius: 63px; border-color: #00c1de; } .it-player-wrap { display: flex; flex-direction: row; box-sizing: border-box; padding: 5px; margin-bottom: 20px; background: #FBFBFB; border: 1px solid #EFEFEF; border-radius: 4px; } .it-player-wrap .control { width: 50px; height: 50px; background-color: #57a5f2; margin-right: 15px; border-radius: 50%; } .it-player-wrap .control .play,.it-player-wrap .control .pause { background-size: 30px !important; color: #ffffff; width: 100%; height: 100%; } .it-player-wrap .control .play { background: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/PjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+PHN2ZyB0PSIxNTU5NjM3ODcxMTQ0IiBjbGFzcz0iaWNvbiIgc3R5bGU9IiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHAtaWQ9IjYwMjkiIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iMjAwIiBoZWlnaHQ9IjIwMCI+PGRlZnM+PHN0eWxlIHR5cGU9InRleHQvY3NzIj48L3N0eWxlPjwvZGVmcz48cGF0aCBkPSJNOTUzLjQ0NTA2NSA2MDguMjkwNzI0TDM1MC4yOTkyMSA5ODAuNjM0MjExQzI1Ni42NDExNTEgMTAzOC40NTUyNjMgMTgwLjY5MDc4OSA5OTcuNzk5ODM2IDE4MC42OTA3ODkgODkxLjkxNTAzM1YxMTUuNDg2NzExQzE4MC42OTA3ODkgOC42MzgyMjQgMjU2LjIxOTUzOS0zMS4yOTQ0NCAzNTAuMjM4OTggMjYuNzY3NTM0bDYwMy4yNjYzMTUgMzcyLjIyMzAyNmM5My42NTgwNTkgNTcuODIxMDUzIDk0LjA3OTY3MSAxNTEuMjM4MTkxIDAgMjA5LjMwMDE2NHoiIHAtaWQ9IjYwMzAiIGZpbGw9IiNmZmZmZmYiPjwvcGF0aD48L3N2Zz4=") no-repeat center; } .it-player-wrap .control .pause { background: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/PjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+PHN2ZyB0PSIxNTU5NjM3NzQ2MzAwIiBjbGFzcz0iaWNvbiIgc3R5bGU9IiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHAtaWQ9IjQ0NjciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iMjAwIiBoZWlnaHQ9IjIwMCI+PGRlZnM+PHN0eWxlIHR5cGU9InRleHQvY3NzIj48L3N0eWxlPjwvZGVmcz48cGF0aCBkPSJNNzM1LjkgNjQuOWMtNTEuMiAwLTk2IDQ0LjctOTYgOTUuOHY3MDIuNmMwIDUxLjEgNDQuOCA5NS44IDk2IDk1LjhzOTYtNDQuNyA5Ni05NS44VjE2MC43YzAtNTEuMS00NC44LTk1LjgtOTYtOTUuOHogbS00NDcuOCAwYy01MS4yIDAtOTYgNDQuNy05NiA5NS44djcwMi42YzAgNTEuMSA0NC44IDk1LjggOTYgOTUuOHM5Ni00NC43IDk2LTk1LjhWMTYwLjdjLTAuMS01MS4xLTQ0LjktOTUuOC05Ni05NS44eiIgcC1pZD0iNDQ2OCIgZmlsbD0iI2ZmZmZmZiI+PC9wYXRoPjwvc3ZnPg==") no-repeat center; } .it-player-wrap .box { flex: 1; } .it-player-wrap .box .info { font-family: PingFang-SC-Regular; font-size: 12px; color: #A8A8A8; text-align: left; line-height: 24px; margin: 0; } .it-player-wrap .box .info .size { display: inline-block; margin-right: 15px; } .it-player-wrap .progress-wrap { position: relative; margin-top: 15px; display: flex; flex-direction: row; align-items: center; } .it-player-wrap .progress-line,.it-player-wrap .progress-line-inner { position: absolute; height: 6px; width: 100%; background: #DDECFF; border-radius: 8.5px; } .it-player-wrap .progress-line-inner { background: #4C83E5 !important; } .it-player-wrap .progress-button { position: absolute; width: 50px; height: 20px; background: #4C83E5; box-shadow: 0 2px 4px 0 #A0C2FF; border-radius: 10px; top: -10px; font-family: PingFang-SC-Regular; font-size: 12px; color: #FFFFFF; text-align: center; line-height: 20px; cursor: pointer; } </style> <style> .crumb{ padding: 10px; margin-bottom: 10px; border-bottom: 1px solid rgba(238,238,238,0.4); } .crumb p{ width: 1200px; margin: 0 auto; } .newul{ line-height: 25px; } .new-item{ padding: 5px; display: block; width: 250px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } #doc-content img{ margin:none; display:initial; } .syntaxhighlighter{ width:890px; } .syntaxhighlighter td.code .line{ white-space: nowrap; } .syntaxhighlighter td.code .container{ width:840px!important; } .syntaxhighlighter td.code{ overflow: scroll!important; } </style> <div class="crumb"> <p> <a href="http://blog.itpub.net/" rel="nofollow">首頁</a> > <a href="http://blog.itpub.net/appdevelop/" rel="nofollow">應用開發</a> > <a href="http://blog.itpub.net/itother/" rel="nofollow">IT綜合</a> > <a rel="nofollow">微前端(Micro Frontend ) 落地實施的一些具體例子</a> </p> </div> <!--main部分開始--> <div class="blog-main clearfix w1200"> <div class="preview-wrap"> <div class="preview-header"> <h1 class="preview-title ">微前端(Micro Frontend ) 落地實施的一些具體例子 </h1> <div class="mess"> <span class="label label-original">原創</span> <span style="margin: auto 10px auto 0px"><a href="http://blog.itpub.net/itother/" rel="nofollow">IT綜合</a></span> <span>作者：<a href="http://blog.itpub.net/24475491/" rel="nofollow">i042416</a></span> <span>時間：2021-07-29 15:10:49</span> <span class="dian"></span> <span class="icon-see"></span> <span class="dian"></span> <span class="icon-comment">0</span> <!--博主本人和管理員 顯示 開始--> <i class="superman"><a href="javascript:;" mid="2784083" onclick="blogObj.delDraft($(this))" rel="nofollow">刪除</a></i> <i class="superman"><a href="http://blog.itpub.net/blog/post/2784083/" rel="nofollow">編輯</a></i> <!--博主本人和管理員 顯示 結束--> </div> </div> <div class="preview-body windowH"> <div class="preview-main"> <div id="doc-content" style="padding: 0px;"> <textarea style="display: none">前文[微前端概述(Micro Frontends) 以及相比單體應用，微前端能帶來什麼好處](https://jerry.blog.csdn.net/article/details/119190124) 簡單介紹了微前端的概念，本文來看一個具體的應用例子。 [原文地址](https://martinfowler.com/articles/micro-frontends.html) 想象一個網站，客戶可以在其中訂購外賣食品。從表面上看，這是一個相當簡單的概念，但如果你想做得好，還有驚人的細節： * 應該有一個登陸頁面，客戶可以在其中瀏覽和搜尋餐館。 餐廳應該可以透過任意數量的屬性進行搜尋和過濾，包括價格、美食或客戶之前訂購的東西 * 每家餐廳都需要自己的頁面來顯示其選單項，並允許客戶選擇他們想吃的東西，包括折扣、餐飲優惠和特殊要求 * 客戶應該有一個個人資料頁面，他們可以在其中檢視他們的訂單歷史記錄、跟蹤交付和自定義他們的付款選項  每個頁面都有足夠的複雜性，我們可以輕鬆地證明每個頁面都有一個專門的團隊，並且每個團隊都應該能夠獨立於所有其他團隊在他們的頁面上工作。 他們應該能夠開發、測試、部署和維護他們的程式碼，而不必擔心與其他團隊發生衝突或協調。 但是，我們的客戶仍然應該看到一個無縫的網站。 在本文的其餘部分，我們將在需要示例程式碼或場景的任何地方使用此示例應用程式。 # Integration approaches 鑑於上面相當鬆散的定義，有許多方法可以合理地稱為微前端。 在本節中，我們將展示一些示例並討論它們的權衡。 所有這些方法都有一個相當自然的架構——通常應用程式中的每個頁面都有一個微前端，並且有一個容器應用程式，它： * 呈現常見的頁面元素，例如頁首和頁尾 * 解決跨領域問題，如身份驗證和導航 * 將各種微前端放在頁面上，並告訴每個微前端何時何地渲染自己  # Server-side template composition 我們從一種絕對不新穎的前端開發方法開始——用多個模板或片段在伺服器上渲染 HTML。 我們有一個 index.html ，它包含所有常見的頁面元素，然後使用伺服器端包含從片段 HTML 檔案中插入特定於頁面的內容： ```html <meta charset="utf-8"> <title>Feed me</title> <h1>Feed me</h1> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="renderer" content="webkit"> <title>微前端(Micro Frontend ) 落地實施的一些具體例子_ITPUB部落格</title> <meta name="keywords" content="應用開發,IT綜合"> <meta name="description" content="前文微前端概述(Micro Frontends) 以及相比單體應用，微前端能帶來什麼好處 簡單介紹了微前端的概念，本文來看一個具體的應用例子。 原文地址 想象一個網站，客戶可以在其中訂購外賣食品。從表面上看，這是一個相當簡單的概念，但如果你想做得好，還有驚人的細節： 應該有一個登陸頁面，客戶可以在其中瀏覽和搜尋餐館。 餐廳應該可以透過任意數量的屬性進行搜尋和過濾，包括價格、美食或客戶之前ITPUB部落格每天千篇餘篇博文新資訊，40多萬活躍博主，為IT技術人提供全面的IT資訊和交流互動的IT部落格平臺-中國專業的IT技術ITPUB部落格。"> <link rel="stylesheet" href="http://blog.itpub.net/layui/css/layui.css?v234"> <link rel="stylesheet" href="http://blog.itpub.net/css/base.css?v1.5"> <link rel="stylesheet" href="http://blog.itpub.net/css/zhuanlan.css?v=1.3"> <!--[if lt IE 9]> <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script> <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script> <![endif]--> <div></div> <div></div> <div></div> <div></div> <!--header部分開始--> <div class="blog-header"> <div class="w1200"> <a href="http://blog.itpub.net/" class="fl" rel="nofollow"><h1 class="logo">ITPub部落格</h1></a> <div class="nav fl"> <a href="http://www.itpub.net/" rel="nofollow">首頁</a> <a href="http://blog.itpub.net/" rel="nofollow">部落格</a> <a href="http://blog.itpub.net/column" rel="nofollow">專欄</a> <a href="http://edu.itpub.net/" rel="nofollow">學院</a> <a href="http://www.itpub.net/forum.php" rel="nofollow">社群</a> <a href="https://z.itpub.net/" rel="nofollow">技術棧</a> </div> <div class="fr"> <form action="http://blog.itpub.net/search/blog/" class="layui-form blog-search-wrap fl"> <input type="hidden" name="type" value="blog"> <input placeholder="搜尋" type="text" class="layui-input" name="keyword"> <button class="search-btn icon-blog"></button> </form> <a href="http://blog.itpub.net/blog/post/" class="layui-btn layui-btn-primary fl mlr30" target="_blank" rel="nofollow">發博</a> <!--登入前--> <div class="fl head-name" id="u_info"> </div> </div> </div> </div> <!--header部分結束--> <link rel="stylesheet" href="http://blog.itpub.net/markdown/css/editormd.css"> <link rel="stylesheet" href="http://blog.itpub.net/markdown/css/editormd.min.css"> <link rel="stylesheet" href="http://blog.itpub.net/markdown/css/editormd.preview.min.css"> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <link href="http://blog.itpub.net/ueditor/third-party/SyntaxHighlighter/shCoreDefault.css" rel="stylesheet" type="text/css"> <div></div> <link rel="stylesheet" href="http://g.alicdn.com/de/prismplayer/2.6.0/skins/default/aliplayer-min.css"> <div></div> <div></div> <div></div> <div></div> <div></div> <style> .code .container > textarea{ height:100%; } .translate{color: #9fa3a7 !important;font-size:12px !important;} .translate a{font-size:12px !important;color:#9fa3a7 !important;} .translate a:hover {font-size:12px !important;color:#f15142 !important;} .newslist{padding:10px 5px;height:20px !important;line-height:20px;overflow:hidden;text-overflow: ellipsis;white-space: nowrap;border-bottom:1px solid #eee} .fake-video-btn:hover{ cursor: pointer; border-style: solid; border-width: 2px; border-radius: 63px; border-color: #00c1de; } .it-player-wrap { display: flex; flex-direction: row; box-sizing: border-box; padding: 5px; margin-bottom: 20px; background: #FBFBFB; border: 1px solid #EFEFEF; border-radius: 4px; } .it-player-wrap .control { width: 50px; height: 50px; background-color: #57a5f2; margin-right: 15px; border-radius: 50%; } .it-player-wrap .control .play,.it-player-wrap .control .pause { background-size: 30px !important; color: #ffffff; width: 100%; height: 100%; } .it-player-wrap .control .play { background: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/PjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+PHN2ZyB0PSIxNTU5NjM3ODcxMTQ0IiBjbGFzcz0iaWNvbiIgc3R5bGU9IiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHAtaWQ9IjYwMjkiIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iMjAwIiBoZWlnaHQ9IjIwMCI+PGRlZnM+PHN0eWxlIHR5cGU9InRleHQvY3NzIj48L3N0eWxlPjwvZGVmcz48cGF0aCBkPSJNOTUzLjQ0NTA2NSA2MDguMjkwNzI0TDM1MC4yOTkyMSA5ODAuNjM0MjExQzI1Ni42NDExNTEgMTAzOC40NTUyNjMgMTgwLjY5MDc4OSA5OTcuNzk5ODM2IDE4MC42OTA3ODkgODkxLjkxNTAzM1YxMTUuNDg2NzExQzE4MC42OTA3ODkgOC42MzgyMjQgMjU2LjIxOTUzOS0zMS4yOTQ0NCAzNTAuMjM4OTggMjYuNzY3NTM0bDYwMy4yNjYzMTUgMzcyLjIyMzAyNmM5My42NTgwNTkgNTcuODIxMDUzIDk0LjA3OTY3MSAxNTEuMjM4MTkxIDAgMjA5LjMwMDE2NHoiIHAtaWQ9IjYwMzAiIGZpbGw9IiNmZmZmZmYiPjwvcGF0aD48L3N2Zz4=") no-repeat center; } .it-player-wrap .control .pause { background: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/PjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+PHN2ZyB0PSIxNTU5NjM3NzQ2MzAwIiBjbGFzcz0iaWNvbiIgc3R5bGU9IiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHAtaWQ9IjQ0NjciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iMjAwIiBoZWlnaHQ9IjIwMCI+PGRlZnM+PHN0eWxlIHR5cGU9InRleHQvY3NzIj48L3N0eWxlPjwvZGVmcz48cGF0aCBkPSJNNzM1LjkgNjQuOWMtNTEuMiAwLTk2IDQ0LjctOTYgOTUuOHY3MDIuNmMwIDUxLjEgNDQuOCA5NS44IDk2IDk1LjhzOTYtNDQuNyA5Ni05NS44VjE2MC43YzAtNTEuMS00NC44LTk1LjgtOTYtOTUuOHogbS00NDcuOCAwYy01MS4yIDAtOTYgNDQuNy05NiA5NS44djcwMi42YzAgNTEuMSA0NC44IDk1LjggOTYgOTUuOHM5Ni00NC43IDk2LTk1LjhWMTYwLjdjLTAuMS01MS4xLTQ0LjktOTUuOC05Ni05NS44eiIgcC1pZD0iNDQ2OCIgZmlsbD0iI2ZmZmZmZiI+PC9wYXRoPjwvc3ZnPg==") no-repeat center; } .it-player-wrap .box { flex: 1; } .it-player-wrap .box .info { font-family: PingFang-SC-Regular; font-size: 12px; color: #A8A8A8; text-align: left; line-height: 24px; margin: 0; } .it-player-wrap .box .info .size { display: inline-block; margin-right: 15px; } .it-player-wrap .progress-wrap { position: relative; margin-top: 15px; display: flex; flex-direction: row; align-items: center; } .it-player-wrap .progress-line,.it-player-wrap .progress-line-inner { position: absolute; height: 6px; width: 100%; background: #DDECFF; border-radius: 8.5px; } .it-player-wrap .progress-line-inner { background: #4C83E5 !important; } .it-player-wrap .progress-button { position: absolute; width: 50px; height: 20px; background: #4C83E5; box-shadow: 0 2px 4px 0 #A0C2FF; border-radius: 10px; top: -10px; font-family: PingFang-SC-Regular; font-size: 12px; color: #FFFFFF; text-align: center; line-height: 20px; cursor: pointer; } </style> <style> .crumb{ padding: 10px; margin-bottom: 10px; border-bottom: 1px solid rgba(238,238,238,0.4); } .crumb p{ width: 1200px; margin: 0 auto; } .newul{ line-height: 25px; } .new-item{ padding: 5px; display: block; width: 250px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } #doc-content img{ margin:none; display:initial; } .syntaxhighlighter{ width:890px; } .syntaxhighlighter td.code .line{ white-space: nowrap; } .syntaxhighlighter td.code .container{ width:840px!important; } .syntaxhighlighter td.code{ overflow: scroll!important; } </style> <div class="crumb"> <p> <a href="http://blog.itpub.net/" rel="nofollow">首頁</a> > <a href="http://blog.itpub.net/appdevelop/" rel="nofollow">應用開發</a> > <a href="http://blog.itpub.net/itother/" rel="nofollow">IT綜合</a> > <a rel="nofollow">微前端(Micro Frontend ) 落地實施的一些具體例子</a> </p> </div> <!--main部分開始--> <div class="blog-main clearfix w1200"> <div class="preview-wrap"> <div class="preview-header"> <h1 class="preview-title ">微前端(Micro Frontend ) 落地實施的一些具體例子 </h1> <div class="mess"> <span class="label label-original">原創</span> <span style="margin: auto 10px auto 0px"><a href="http://blog.itpub.net/itother/" rel="nofollow">IT綜合</a></span> <span>作者：<a href="http://blog.itpub.net/24475491/" rel="nofollow">i042416</a></span> <span>時間：2021-07-29 15:10:49</span> <span class="dian"></span> <span class="icon-see"></span> <span class="dian"></span> <span class="icon-comment">0</span> <!--博主本人和管理員 顯示 開始--> <i class="superman"><a href="javascript:;" mid="2784083" onclick="blogObj.delDraft($(this))" rel="nofollow">刪除</a></i> <i class="superman"><a href="http://blog.itpub.net/blog/post/2784083/" rel="nofollow">編輯</a></i> <!--博主本人和管理員 顯示 結束--> </div> </div> <div class="preview-body windowH"> <div class="preview-main"> <div id="doc-content" style="padding: 0px;"> <textarea style="display: none">前文[微前端概述(Micro Frontends) 以及相比單體應用，微前端能帶來什麼好處](https://jerry.blog.csdn.net/article/details/119190124) 簡單介紹了微前端的概念，本文來看一個具體的應用例子。 [原文地址](https://martinfowler.com/articles/micro-frontends.html) 想象一個網站，客戶可以在其中訂購外賣食品。從表面上看，這是一個相當簡單的概念，但如果你想做得好，還有驚人的細節： * 應該有一個登陸頁面，客戶可以在其中瀏覽和搜尋餐館。 餐廳應該可以透過任意數量的屬性進行搜尋和過濾，包括價格、美食或客戶之前訂購的東西 * 每家餐廳都需要自己的頁面來顯示其選單項，並允許客戶選擇他們想吃的東西，包括折扣、餐飲優惠和特殊要求 * 客戶應該有一個個人資料頁面，他們可以在其中檢視他們的訂單歷史記錄、跟蹤交付和自定義他們的付款選項  每個頁面都有足夠的複雜性，我們可以輕鬆地證明每個頁面都有一個專門的團隊，並且每個團隊都應該能夠獨立於所有其他團隊在他們的頁面上工作。 他們應該能夠開發、測試、部署和維護他們的程式碼，而不必擔心與其他團隊發生衝突或協調。 但是，我們的客戶仍然應該看到一個無縫的網站。 在本文的其餘部分，我們將在需要示例程式碼或場景的任何地方使用此示例應用程式。 # Integration approaches 鑑於上面相當鬆散的定義，有許多方法可以合理地稱為微前端。 在本節中，我們將展示一些示例並討論它們的權衡。 所有這些方法都有一個相當自然的架構——通常應用程式中的每個頁面都有一個微前端，並且有一個容器應用程式，它： * 呈現常見的頁面元素，例如頁首和頁尾 * 解決跨領域問題，如身份驗證和導航 * 將各種微前端放在頁面上，並告訴每個微前端何時何地渲染自己  # Server-side template composition 我們從一種絕對不新穎的前端開發方法開始——用多個模板或片段在伺服器上渲染 HTML。 我們有一個 index.html ，它包含所有常見的頁面元素，然後使用伺服器端包含從片段 HTML 檔案中插入特定於頁面的內容： ```html <meta charset="utf-8"> <title>Feed me</title> <h1>Feed me</h1> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="renderer" content="webkit"> <title>微前端(Micro Frontend ) 落地實施的一些具體例子_ITPUB部落格</title> <meta name="keywords" content="應用開發,IT綜合"> <meta name="description" content="前文微前端概述(Micro Frontends) 以及相比單體應用，微前端能帶來什麼好處 簡單介紹了微前端的概念，本文來看一個具體的應用例子。 原文地址 想象一個網站，客戶可以在其中訂購外賣食品。從表面上看，這是一個相當簡單的概念，但如果你想做得好，還有驚人的細節： 應該有一個登陸頁面，客戶可以在其中瀏覽和搜尋餐館。 餐廳應該可以透過任意數量的屬性進行搜尋和過濾，包括價格、美食或客戶之前ITPUB部落格每天千篇餘篇博文新資訊，40多萬活躍博主，為IT技術人提供全面的IT資訊和交流互動的IT部落格平臺-中國專業的IT技術ITPUB部落格。"> <link rel="stylesheet" href="http://blog.itpub.net/layui/css/layui.css?v234"> <link rel="stylesheet" href="http://blog.itpub.net/css/base.css?v1.5"> <link rel="stylesheet" href="http://blog.itpub.net/css/zhuanlan.css?v=1.3"> <!--[if lt IE 9]> <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script> <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script> <![endif]--> <div></div> <div></div> <div></div> <div></div> <!--header部分開始--> <div class="blog-header"> <div class="w1200"> <a href="http://blog.itpub.net/" class="fl" rel="nofollow"><h1 class="logo">ITPub部落格</h1></a> <div class="nav fl"> <a href="http://www.itpub.net/" rel="nofollow">首頁</a> <a href="http://blog.itpub.net/" rel="nofollow">部落格</a> <a href="http://blog.itpub.net/column" rel="nofollow">專欄</a> <a href="http://edu.itpub.net/" rel="nofollow">學院</a> <a href="http://www.itpub.net/forum.php" rel="nofollow">社群</a> <a href="https://z.itpub.net/" rel="nofollow">技術棧</a> </div> <div class="fr"> <form action="http://blog.itpub.net/search/blog/" class="layui-form blog-search-wrap fl"> <input type="hidden" name="type" value="blog"> <input placeholder="搜尋" type="text" class="layui-input" name="keyword"> <button class="search-btn icon-blog"></button> </form> <a href="http://blog.itpub.net/blog/post/" class="layui-btn layui-btn-primary fl mlr30" target="_blank" rel="nofollow">發博</a> <!--登入前--> <div class="fl head-name" id="u_info"> </div> </div> </div> </div> <!--header部分結束--> <link rel="stylesheet" href="http://blog.itpub.net/markdown/css/editormd.css"> <link rel="stylesheet" href="http://blog.itpub.net/markdown/css/editormd.min.css"> <link rel="stylesheet" href="http://blog.itpub.net/markdown/css/editormd.preview.min.css"> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <link href="http://blog.itpub.net/ueditor/third-party/SyntaxHighlighter/shCoreDefault.css" rel="stylesheet" type="text/css"> <div></div> <link rel="stylesheet" href="http://g.alicdn.com/de/prismplayer/2.6.0/skins/default/aliplayer-min.css"> <div></div> <div></div> <div></div> <div></div> <div></div> <style> .code .container > textarea{ height:100%; } .translate{color: #9fa3a7 !important;font-size:12px !important;} .translate a{font-size:12px !important;color:#9fa3a7 !important;} .translate a:hover {font-size:12px !important;color:#f15142 !important;} .newslist{padding:10px 5px;height:20px !important;line-height:20px;overflow:hidden;text-overflow: ellipsis;white-space: nowrap;border-bottom:1px solid #eee} .fake-video-btn:hover{ cursor: pointer; border-style: solid; border-width: 2px; border-radius: 63px; border-color: #00c1de; } .it-player-wrap { display: flex; flex-direction: row; box-sizing: border-box; padding: 5px; margin-bottom: 20px; background: #FBFBFB; border: 1px solid #EFEFEF; border-radius: 4px; } .it-player-wrap .control { width: 50px; height: 50px; background-color: #57a5f2; margin-right: 15px; border-radius: 50%; } .it-player-wrap .control .play,.it-player-wrap .control .pause { background-size: 30px !important; color: #ffffff; width: 100%; height: 100%; } .it-player-wrap .control .play { background: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/PjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+PHN2ZyB0PSIxNTU5NjM3ODcxMTQ0IiBjbGFzcz0iaWNvbiIgc3R5bGU9IiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHAtaWQ9IjYwMjkiIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iMjAwIiBoZWlnaHQ9IjIwMCI+PGRlZnM+PHN0eWxlIHR5cGU9InRleHQvY3NzIj48L3N0eWxlPjwvZGVmcz48cGF0aCBkPSJNOTUzLjQ0NTA2NSA2MDguMjkwNzI0TDM1MC4yOTkyMSA5ODAuNjM0MjExQzI1Ni42NDExNTEgMTAzOC40NTUyNjMgMTgwLjY5MDc4OSA5OTcuNzk5ODM2IDE4MC42OTA3ODkgODkxLjkxNTAzM1YxMTUuNDg2NzExQzE4MC42OTA3ODkgOC42MzgyMjQgMjU2LjIxOTUzOS0zMS4yOTQ0NCAzNTAuMjM4OTggMjYuNzY3NTM0bDYwMy4yNjYzMTUgMzcyLjIyMzAyNmM5My42NTgwNTkgNTcuODIxMDUzIDk0LjA3OTY3MSAxNTEuMjM4MTkxIDAgMjA5LjMwMDE2NHoiIHAtaWQ9IjYwMzAiIGZpbGw9IiNmZmZmZmYiPjwvcGF0aD48L3N2Zz4=") no-repeat center; } .it-player-wrap .control .pause { background: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/PjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+PHN2ZyB0PSIxNTU5NjM3NzQ2MzAwIiBjbGFzcz0iaWNvbiIgc3R5bGU9IiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHAtaWQ9IjQ0NjciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iMjAwIiBoZWlnaHQ9IjIwMCI+PGRlZnM+PHN0eWxlIHR5cGU9InRleHQvY3NzIj48L3N0eWxlPjwvZGVmcz48cGF0aCBkPSJNNzM1LjkgNjQuOWMtNTEuMiAwLTk2IDQ0LjctOTYgOTUuOHY3MDIuNmMwIDUxLjEgNDQuOCA5NS44IDk2IDk1LjhzOTYtNDQuNyA5Ni05NS44VjE2MC43YzAtNTEuMS00NC44LTk1LjgtOTYtOTUuOHogbS00NDcuOCAwYy01MS4yIDAtOTYgNDQuNy05NiA5NS44djcwMi42YzAgNTEuMSA0NC44IDk1LjggOTYgOTUuOHM5Ni00NC43IDk2LTk1LjhWMTYwLjdjLTAuMS01MS4xLTQ0LjktOTUuOC05Ni05NS44eiIgcC1pZD0iNDQ2OCIgZmlsbD0iI2ZmZmZmZiI+PC9wYXRoPjwvc3ZnPg==") no-repeat center; } .it-player-wrap .box { flex: 1; } .it-player-wrap .box .info { font-family: PingFang-SC-Regular; font-size: 12px; color: #A8A8A8; text-align: left; line-height: 24px; margin: 0; } .it-player-wrap .box .info .size { display: inline-block; margin-right: 15px; } .it-player-wrap .progress-wrap { position: relative; margin-top: 15px; display: flex; flex-direction: row; align-items: center; } .it-player-wrap .progress-line,.it-player-wrap .progress-line-inner { position: absolute; height: 6px; width: 100%; background: #DDECFF; border-radius: 8.5px; } .it-player-wrap .progress-line-inner { background: #4C83E5 !important; } .it-player-wrap .progress-button { position: absolute; width: 50px; height: 20px; background: #4C83E5; box-shadow: 0 2px 4px 0 #A0C2FF; border-radius: 10px; top: -10px; font-family: PingFang-SC-Regular; font-size: 12px; color: #FFFFFF; text-align: center; line-height: 20px; cursor: pointer; } </style> <style> .crumb{ padding: 10px; margin-bottom: 10px; border-bottom: 1px solid rgba(238,238,238,0.4); } .crumb p{ width: 1200px; margin: 0 auto; } .newul{ line-height: 25px; } .new-item{ padding: 5px; display: block; width: 250px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } #doc-content img{ margin:none; display:initial; } .syntaxhighlighter{ width:890px; } .syntaxhighlighter td.code .line{ white-space: nowrap; } .syntaxhighlighter td.code .container{ width:840px!important; } .syntaxhighlighter td.code{ overflow: scroll!important; } </style> <div class="crumb"> <p> <a href="http://blog.itpub.net/" rel="nofollow">首頁</a> > <a href="http://blog.itpub.net/appdevelop/" rel="nofollow">應用開發</a> > <a href="http://blog.itpub.net/itother/" rel="nofollow">IT綜合</a> > <a rel="nofollow">微前端(Micro Frontend ) 落地實施的一些具體例子</a> </p> </div> <!--main部分開始--> <div class="blog-main clearfix w1200"> <div class="preview-wrap"> <div class="preview-header"> <h1 class="preview-title ">微前端(Micro Frontend ) 落地實施的一些具體例子 </h1> <div class="mess"> <span class="label label-original">原創</span> <span style="margin: auto 10px auto 0px"><a href="http://blog.itpub.net/itother/" rel="nofollow">IT綜合</a></span> <span>作者：<a href="http://blog.itpub.net/24475491/" rel="nofollow">i042416</a></span> <span>時間：2021-07-29 15:10:49</span> <span class="dian"></span> <span class="icon-see"></span> <span class="dian"></span> <span class="icon-comment">0</span> <!--博主本人和管理員 顯示 開始--> <i class="superman"><a href="javascript:;" mid="2784083" onclick="blogObj.delDraft($(this))" rel="nofollow">刪除</a></i> <i class="superman"><a href="http://blog.itpub.net/blog/post/2784083/" rel="nofollow">編輯</a></i> <!--博主本人和管理員 顯示 結束--> </div> </div> <div class="preview-body windowH"> <div class="preview-main"> <div id="doc-content" style="padding: 0px;"> <textarea style="display: none">前文[微前端概述(Micro Frontends) 以及相比單體應用，微前端能帶來什麼好處](https://jerry.blog.csdn.net/article/details/119190124) 簡單介紹了微前端的概念，本文來看一個具體的應用例子。 [原文地址](https://martinfowler.com/articles/micro-frontends.html) 想象一個網站，客戶可以在其中訂購外賣食品。從表面上看，這是一個相當簡單的概念，但如果你想做得好，還有驚人的細節： * 應該有一個登陸頁面，客戶可以在其中瀏覽和搜尋餐館。 餐廳應該可以透過任意數量的屬性進行搜尋和過濾，包括價格、美食或客戶之前訂購的東西 * 每家餐廳都需要自己的頁面來顯示其選單項，並允許客戶選擇他們想吃的東西，包括折扣、餐飲優惠和特殊要求 * 客戶應該有一個個人資料頁面，他們可以在其中檢視他們的訂單歷史記錄、跟蹤交付和自定義他們的付款選項  每個頁面都有足夠的複雜性，我們可以輕鬆地證明每個頁面都有一個專門的團隊，並且每個團隊都應該能夠獨立於所有其他團隊在他們的頁面上工作。 他們應該能夠開發、測試、部署和維護他們的程式碼，而不必擔心與其他團隊發生衝突或協調。 但是，我們的客戶仍然應該看到一個無縫的網站。 在本文的其餘部分，我們將在需要示例程式碼或場景的任何地方使用此示例應用程式。 # Integration approaches 鑑於上面相當鬆散的定義，有許多方法可以合理地稱為微前端。 在本節中，我們將展示一些示例並討論它們的權衡。 所有這些方法都有一個相當自然的架構——通常應用程式中的每個頁面都有一個微前端，並且有一個容器應用程式，它： * 呈現常見的頁面元素，例如頁首和頁尾 * 解決跨領域問題，如身份驗證和導航 * 將各種微前端放在頁面上，並告訴每個微前端何時何地渲染自己  # Server-side template composition 我們從一種絕對不新穎的前端開發方法開始——用多個模板或片段在伺服器上渲染 HTML。 我們有一個 index.html ，它包含所有常見的頁面元素，然後使用伺服器端包含從片段 HTML 檔案中插入特定於頁面的內容： ```html <meta charset="utf-8"> <title>Feed me</title> <h1>Feed me</h1> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="renderer" content="webkit"> <title>微前端(Micro Frontend ) 落地實施的一些具體例子_ITPUB部落格</title> <meta name="keywords" content="應用開發,IT綜合"> <meta name="description" content="前文微前端概述(Micro Frontends) 以及相比單體應用，微前端能帶來什麼好處 簡單介紹了微前端的概念，本文來看一個具體的應用例子。 原文地址 想象一個網站，客戶可以在其中訂購外賣食品。從表面上看，這是一個相當簡單的概念，但如果你想做得好，還有驚人的細節： 應該有一個登陸頁面，客戶可以在其中瀏覽和搜尋餐館。 餐廳應該可以透過任意數量的屬性進行搜尋和過濾，包括價格、美食或客戶之前ITPUB部落格每天千篇餘篇博文新資訊，40多萬活躍博主，為IT技術人提供全面的IT資訊和交流互動的IT部落格平臺-中國專業的IT技術ITPUB部落格。"> <link rel="stylesheet" href="http://blog.itpub.net/layui/css/layui.css?v234"> <link rel="stylesheet" href="http://blog.itpub.net/css/base.css?v1.5"> <link rel="stylesheet" href="http://blog.itpub.net/css/zhuanlan.css?v=1.3"> <!--[if lt IE 9]> <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script> <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script> <![endif]--> <div></div> <div></div> <div></div> <div></div> <!--header部分開始--> <div class="blog-header"> <div class="w1200"> <a href="http://blog.itpub.net/" class="fl" rel="nofollow"><h1 class="logo">ITPub部落格</h1></a> <div class="nav fl"> <a href="http://www.itpub.net/" rel="nofollow">首頁</a> <a href="http://blog.itpub.net/" rel="nofollow">部落格</a> <a href="http://blog.itpub.net/column" rel="nofollow">專欄</a> <a href="http://edu.itpub.net/" rel="nofollow">學院</a> <a href="http://www.itpub.net/forum.php" rel="nofollow">社群</a> <a href="https://z.itpub.net/" rel="nofollow">技術棧</a> </div> <div class="fr"> <form action="http://blog.itpub.net/search/blog/" class="layui-form blog-search-wrap fl"> <input type="hidden" name="type" value="blog"> <input placeholder="搜尋" type="text" class="layui-input" name="keyword"> <button class="search-btn icon-blog"></button> </form> <a href="http://blog.itpub.net/blog/post/" class="layui-btn layui-btn-primary fl mlr30" target="_blank" rel="nofollow">發博</a> <!--登入前--> <div class="fl head-name" id="u_info"> </div> </div> </div> </div> <!--header部分結束--> <link rel="stylesheet" href="http://blog.itpub.net/markdown/css/editormd.css"> <link rel="stylesheet" href="http://blog.itpub.net/markdown/css/editormd.min.css"> <link rel="stylesheet" href="http://blog.itpub.net/markdown/css/editormd.preview.min.css"> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <link href="http://blog.itpub.net/ueditor/third-party/SyntaxHighlighter/shCoreDefault.css" rel="stylesheet" type="text/css"> <div></div> <link rel="stylesheet" href="http://g.alicdn.com/de/prismplayer/2.6.0/skins/default/aliplayer-min.css"> <div></div> <div></div> <div></div> <div></div> <div></div> <style> .code .container > textarea{ height:100%; } .translate{color: #9fa3a7 !important;font-size:12px !important;} .translate a{font-size:12px !important;color:#9fa3a7 !important;} .translate a:hover {font-size:12px !important;color:#f15142 !important;} .newslist{padding:10px 5px;height:20px !important;line-height:20px;overflow:hidden;text-overflow: ellipsis;white-space: nowrap;border-bottom:1px solid #eee} .fake-video-btn:hover{ cursor: pointer; border-style: solid; border-width: 2px; border-radius: 63px; border-color: #00c1de; } .it-player-wrap { display: flex; flex-direction: row; box-sizing: border-box; padding: 5px; margin-bottom: 20px; background: #FBFBFB; border: 1px solid #EFEFEF; border-radius: 4px; } .it-player-wrap .control { width: 50px; height: 50px; background-color: #57a5f2; margin-right: 15px; border-radius: 50%; } .it-player-wrap .control .play,.it-player-wrap .control .pause { background-size: 30px !important; color: #ffffff; width: 100%; height: 100%; } .it-player-wrap .control .play { background: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/PjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+PHN2ZyB0PSIxNTU5NjM3ODcxMTQ0IiBjbGFzcz0iaWNvbiIgc3R5bGU9IiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHAtaWQ9IjYwMjkiIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iMjAwIiBoZWlnaHQ9IjIwMCI+PGRlZnM+PHN0eWxlIHR5cGU9InRleHQvY3NzIj48L3N0eWxlPjwvZGVmcz48cGF0aCBkPSJNOTUzLjQ0NTA2NSA2MDguMjkwNzI0TDM1MC4yOTkyMSA5ODAuNjM0MjExQzI1Ni42NDExNTEgMTAzOC40NTUyNjMgMTgwLjY5MDc4OSA5OTcuNzk5ODM2IDE4MC42OTA3ODkgODkxLjkxNTAzM1YxMTUuNDg2NzExQzE4MC42OTA3ODkgOC42MzgyMjQgMjU2LjIxOTUzOS0zMS4yOTQ0NCAzNTAuMjM4OTggMjYuNzY3NTM0bDYwMy4yNjYzMTUgMzcyLjIyMzAyNmM5My42NTgwNTkgNTcuODIxMDUzIDk0LjA3OTY3MSAxNTEuMjM4MTkxIDAgMjA5LjMwMDE2NHoiIHAtaWQ9IjYwMzAiIGZpbGw9IiNmZmZmZmYiPjwvcGF0aD48L3N2Zz4=") no-repeat center; } .it-player-wrap .control .pause { background: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/PjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+PHN2ZyB0PSIxNTU5NjM3NzQ2MzAwIiBjbGFzcz0iaWNvbiIgc3R5bGU9IiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHAtaWQ9IjQ0NjciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iMjAwIiBoZWlnaHQ9IjIwMCI+PGRlZnM+PHN0eWxlIHR5cGU9InRleHQvY3NzIj48L3N0eWxlPjwvZGVmcz48cGF0aCBkPSJNNzM1LjkgNjQuOWMtNTEuMiAwLTk2IDQ0LjctOTYgOTUuOHY3MDIuNmMwIDUxLjEgNDQuOCA5NS44IDk2IDk1LjhzOTYtNDQuNyA5Ni05NS44VjE2MC43YzAtNTEuMS00NC44LTk1LjgtOTYtOTUuOHogbS00NDcuOCAwYy01MS4yIDAtOTYgNDQuNy05NiA5NS44djcwMi42YzAgNTEuMSA0NC44IDk1LjggOTYgOTUuOHM5Ni00NC43IDk2LTk1LjhWMTYwLjdjLTAuMS01MS4xLTQ0LjktOTUuOC05Ni05NS44eiIgcC1pZD0iNDQ2OCIgZmlsbD0iI2ZmZmZmZiI+PC9wYXRoPjwvc3ZnPg==") no-repeat center; } .it-player-wrap .box { flex: 1; } .it-player-wrap .box .info { font-family: PingFang-SC-Regular; font-size: 12px; color: #A8A8A8; text-align: left; line-height: 24px; margin: 0; } .it-player-wrap .box .info .size { display: inline-block; margin-right: 15px; } .it-player-wrap .progress-wrap { position: relative; margin-top: 15px; display: flex; flex-direction: row; align-items: center; } .it-player-wrap .progress-line,.it-player-wrap .progress-line-inner { position: absolute; height: 6px; width: 100%; background: #DDECFF; border-radius: 8.5px; } .it-player-wrap .progress-line-inner { background: #4C83E5 !important; } .it-player-wrap .progress-button { position: absolute; width: 50px; height: 20px; background: #4C83E5; box-shadow: 0 2px 4px 0 #A0C2FF; border-radius: 10px; top: -10px; font-family: PingFang-SC-Regular; font-size: 12px; color: #FFFFFF; text-align: center; line-height: 20px; cursor: pointer; } </style> <style> .crumb{ padding: 10px; margin-bottom: 10px; border-bottom: 1px solid rgba(238,238,238,0.4); } .crumb p{ width: 1200px; margin: 0 auto; } .newul{ line-height: 25px; } .new-item{ padding: 5px; display: block; width: 250px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } #doc-content img{ margin:none; display:initial; } .syntaxhighlighter{ width:890px; } .syntaxhighlighter td.code .line{ white-space: nowrap; } .syntaxhighlighter td.code .container{ width:840px!important; } .syntaxhighlighter td.code{ overflow: scroll!important; } </style> <div class="crumb"> <p> <a href="http://blog.itpub.net/" rel="nofollow">首頁</a> > <a href="http://blog.itpub.net/appdevelop/" rel="nofollow">應用開發</a> > <a href="http://blog.itpub.net/itother/" rel="nofollow">IT綜合</a> > <a rel="nofollow">微前端(Micro Frontend ) 落地實施的一些具體例子</a> </p> </div> <!--main部分開始--> <div class="blog-main clearfix w1200"> <div class="preview-wrap"> <div class="preview-header"> <h1 class="preview-title ">微前端(Micro Frontend ) 落地實施的一些具體例子 </h1> <div class="mess"> <span class="label label-original">原創</span> <span style="margin: auto 10px auto 0px"><a href="http://blog.itpub.net/itother/" rel="nofollow">IT綜合</a></span> <span>作者：<a href="http://blog.itpub.net/24475491/" rel="nofollow">i042416</a></span> <span>時間：2021-07-29 15:10:49</span> <span class="dian"></span> <span class="icon-see"></span> <span class="dian"></span> <span class="icon-comment">0</span> <!--博主本人和管理員 顯示 開始--> <i class="superman"><a href="javascript:;" mid="2784083" onclick="blogObj.delDraft($(this))" rel="nofollow">刪除</a></i> <i class="superman"><a href="http://blog.itpub.net/blog/post/2784083/" rel="nofollow">編輯</a></i> <!--博主本人和管理員 顯示 結束--> </div> </div> <div class="preview-body windowH"> <div class="preview-main"> <div id="doc-content" style="padding: 0px;"> <textarea style="display: none">前文[微前端概述(Micro Frontends) 以及相比單體應用，微前端能帶來什麼好處](https://jerry.blog.csdn.net/article/details/119190124) 簡單介紹了微前端的概念，本文來看一個具體的應用例子。 [原文地址](https://martinfowler.com/articles/micro-frontends.html) 想象一個網站，客戶可以在其中訂購外賣食品。從表面上看，這是一個相當簡單的概念，但如果你想做得好，還有驚人的細節： * 應該有一個登陸頁面，客戶可以在其中瀏覽和搜尋餐館。 餐廳應該可以透過任意數量的屬性進行搜尋和過濾，包括價格、美食或客戶之前訂購的東西 * 每家餐廳都需要自己的頁面來顯示其選單項，並允許客戶選擇他們想吃的東西，包括折扣、餐飲優惠和特殊要求 * 客戶應該有一個個人資料頁面，他們可以在其中檢視他們的訂單歷史記錄、跟蹤交付和自定義他們的付款選項  每個頁面都有足夠的複雜性，我們可以輕鬆地證明每個頁面都有一個專門的團隊，並且每個團隊都應該能夠獨立於所有其他團隊在他們的頁面上工作。 他們應該能夠開發、測試、部署和維護他們的程式碼，而不必擔心與其他團隊發生衝突或協調。 但是，我們的客戶仍然應該看到一個無縫的網站。 在本文的其餘部分，我們將在需要示例程式碼或場景的任何地方使用此示例應用程式。 # Integration approaches 鑑於上面相當鬆散的定義，有許多方法可以合理地稱為微前端。 在本節中，我們將展示一些示例並討論它們的權衡。 所有這些方法都有一個相當自然的架構——通常應用程式中的每個頁面都有一個微前端，並且有一個容器應用程式，它： * 呈現常見的頁面元素，例如頁首和頁尾 * 解決跨領域問題，如身份驗證和導航 * 將各種微前端放在頁面上，並告訴每個微前端何時何地渲染自己  # Server-side template composition 我們從一種絕對不新穎的前端開發方法開始——用多個模板或片段在伺服器上渲染 HTML。 我們有一個 index.html ，它包含所有常見的頁面元素，然後使用伺服器端包含從片段 HTML 檔案中插入特定於頁面的內容： ```html <meta charset="utf-8"> <title>Feed me</title> <h1>Feed me</h1> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="renderer" content="webkit"> <title>微前端(Micro Frontend ) 落地實施的一些具體例子_ITPUB部落格</title> <meta name="keywords" content="應用開發,IT綜合"> <meta name="description" content="前文微前端概述(Micro Frontends) 以及相比單體應用，微前端能帶來什麼好處 簡單介紹了微前端的概念，本文來看一個具體的應用例子。 原文地址 想象一個網站，客戶可以在其中訂購外賣食品。從表面上看，這是一個相當簡單的概念，但如果你想做得好，還有驚人的細節： 應該有一個登陸頁面，客戶可以在其中瀏覽和搜尋餐館。 餐廳應該可以透過任意數量的屬性進行搜尋和過濾，包括價格、美食或客戶之前ITPUB部落格每天千篇餘篇博文新資訊，40多萬活躍博主，為IT技術人提供全面的IT資訊和交流互動的IT部落格平臺-中國專業的IT技術ITPUB部落格。"> <link rel="stylesheet" href="http://blog.itpub.net/layui/css/layui.css?v234"> <link rel="stylesheet" href="http://blog.itpub.net/css/base.css?v1.5"> <link rel="stylesheet" href="http://blog.itpub.net/css/zhuanlan.css?v=1.3"> <!--[if lt IE 9]> <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script> <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script> <![endif]--> <div></div> <div></div> <div></div> <div></div> <!--header部分開始--> <div class="blog-header"> <div class="w1200"> <a href="http://blog.itpub.net/" class="fl" rel="nofollow"><h1 class="logo">ITPub部落格</h1></a> <div class="nav fl"> <a href="http://www.itpub.net/" rel="nofollow">首頁</a> <a href="http://blog.itpub.net/" rel="nofollow">部落格</a> <a href="http://blog.itpub.net/column" rel="nofollow">專欄</a> <a href="http://edu.itpub.net/" rel="nofollow">學院</a> <a href="http://www.itpub.net/forum.php" rel="nofollow">社群</a> <a href="https://z.itpub.net/" rel="nofollow">技術棧</a> </div> <div class="fr"> <form action="http://blog.itpub.net/search/blog/" class="layui-form blog-search-wrap fl"> <input type="hidden" name="type" value="blog"> <input placeholder="搜尋" type="text" class="layui-input" name="keyword"> <button class="search-btn icon-blog"></button> </form> <a href="http://blog.itpub.net/blog/post/" class="layui-btn layui-btn-primary fl mlr30" target="_blank" rel="nofollow">發博</a> <!--登入前--> <div class="fl head-name" id="u_info"> </div> </div> </div> </div> <!--header部分結束--> <link rel="stylesheet" href="http://blog.itpub.net/markdown/css/editormd.css"> <link rel="stylesheet" href="http://blog.itpub.net/markdown/css/editormd.min.css"> <link rel="stylesheet" href="http://blog.itpub.net/markdown/css/editormd.preview.min.css"> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <link href="http://blog.itpub.net/ueditor/third-party/SyntaxHighlighter/shCoreDefault.css" rel="stylesheet" type="text/css"> <div></div> <link rel="stylesheet" href="http://g.alicdn.com/de/prismplayer/2.6.0/skins/default/aliplayer-min.css"> <div></div> <div></div> <div></div> <div></div> <div></div> <style> .code .container > textarea{ height:100%; } .translate{color: #9fa3a7 !important;font-size:12px !important;} .translate a{font-size:12px !important;color:#9fa3a7 !important;} .translate a:hover {font-size:12px !important;color:#f15142 !important;} .newslist{padding:10px 5px;height:20px !important;line-height:20px;overflow:hidden;text-overflow: ellipsis;white-space: nowrap;border-bottom:1px solid #eee} .fake-video-btn:hover{ cursor: pointer; border-style: solid; border-width: 2px; border-radius: 63px; border-color: #00c1de; } .it-player-wrap { display: flex; flex-direction: row; box-sizing: border-box; padding: 5px; margin-bottom: 20px; background: #FBFBFB; border: 1px solid #EFEFEF; border-radius: 4px; } .it-player-wrap .control { width: 50px; height: 50px; background-color: #57a5f2; margin-right: 15px; border-radius: 50%; } .it-player-wrap .control .play,.it-player-wrap .control .pause { background-size: 30px !important; color: #ffffff; width: 100%; height: 100%; } .it-player-wrap .control .play { background: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/PjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+PHN2ZyB0PSIxNTU5NjM3ODcxMTQ0IiBjbGFzcz0iaWNvbiIgc3R5bGU9IiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHAtaWQ9IjYwMjkiIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iMjAwIiBoZWlnaHQ9IjIwMCI+PGRlZnM+PHN0eWxlIHR5cGU9InRleHQvY3NzIj48L3N0eWxlPjwvZGVmcz48cGF0aCBkPSJNOTUzLjQ0NTA2NSA2MDguMjkwNzI0TDM1MC4yOTkyMSA5ODAuNjM0MjExQzI1Ni42NDExNTEgMTAzOC40NTUyNjMgMTgwLjY5MDc4OSA5OTcuNzk5ODM2IDE4MC42OTA3ODkgODkxLjkxNTAzM1YxMTUuNDg2NzExQzE4MC42OTA3ODkgOC42MzgyMjQgMjU2LjIxOTUzOS0zMS4yOTQ0NCAzNTAuMjM4OTggMjYuNzY3NTM0bDYwMy4yNjYzMTUgMzcyLjIyMzAyNmM5My42NTgwNTkgNTcuODIxMDUzIDk0LjA3OTY3MSAxNTEuMjM4MTkxIDAgMjA5LjMwMDE2NHoiIHAtaWQ9IjYwMzAiIGZpbGw9IiNmZmZmZmYiPjwvcGF0aD48L3N2Zz4=") no-repeat center; } .it-player-wrap .control .pause { background: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/PjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+PHN2ZyB0PSIxNTU5NjM3NzQ2MzAwIiBjbGFzcz0iaWNvbiIgc3R5bGU9IiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHAtaWQ9IjQ0NjciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iMjAwIiBoZWlnaHQ9IjIwMCI+PGRlZnM+PHN0eWxlIHR5cGU9InRleHQvY3NzIj48L3N0eWxlPjwvZGVmcz48cGF0aCBkPSJNNzM1LjkgNjQuOWMtNTEuMiAwLTk2IDQ0LjctOTYgOTUuOHY3MDIuNmMwIDUxLjEgNDQuOCA5NS44IDk2IDk1LjhzOTYtNDQuNyA5Ni05NS44VjE2MC43YzAtNTEuMS00NC44LTk1LjgtOTYtOTUuOHogbS00NDcuOCAwYy01MS4yIDAtOTYgNDQuNy05NiA5NS44djcwMi42YzAgNTEuMSA0NC44IDk1LjggOTYgOTUuOHM5Ni00NC43IDk2LTk1LjhWMTYwLjdjLTAuMS01MS4xLTQ0LjktOTUuOC05Ni05NS44eiIgcC1pZD0iNDQ2OCIgZmlsbD0iI2ZmZmZmZiI+PC9wYXRoPjwvc3ZnPg==") no-repeat center; } .it-player-wrap .box { flex: 1; } .it-player-wrap .box .info { font-family: PingFang-SC-Regular; font-size: 12px; color: #A8A8A8; text-align: left; line-height: 24px; margin: 0; } .it-player-wrap .box .info .size { display: inline-block; margin-right: 15px; } .it-player-wrap .progress-wrap { position: relative; margin-top: 15px; display: flex; flex-direction: row; align-items: center; } .it-player-wrap .progress-line,.it-player-wrap .progress-line-inner { position: absolute; height: 6px; width: 100%; background: #DDECFF; border-radius: 8.5px; } .it-player-wrap .progress-line-inner { background: #4C83E5 !important; } .it-player-wrap .progress-button { position: absolute; width: 50px; height: 20px; background: #4C83E5; box-shadow: 0 2px 4px 0 #A0C2FF; border-radius: 10px; top: -10px; font-family: PingFang-SC-Regular; font-size: 12px; color: #FFFFFF; text-align: center; line-height: 20px; cursor: pointer; } </style> <style> .crumb{ padding: 10px; margin-bottom: 10px; border-bottom: 1px solid rgba(238,238,238,0.4); } .crumb p{ width: 1200px; margin: 0 auto; } .newul{ line-height: 25px; } .new-item{ padding: 5px; display: block; width: 250px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } #doc-content img{ margin:none; display:initial; } .syntaxhighlighter{ width:890px; } .syntaxhighlighter td.code .line{ white-space: nowrap; } .syntaxhighlighter td.code .container{ width:840px!important; } .syntaxhighlighter td.code{ overflow: scroll!important; } </style> <div class="crumb"> <p> <a href="http://blog.itpub.net/" rel="nofollow">首頁</a> > <a href="http://blog.itpub.net/appdevelop/" rel="nofollow">應用開發</a> > <a href="http://blog.itpub.net/itother/" rel="nofollow">IT綜合</a> > <a rel="nofollow">微前端(Micro Frontend ) 落地實施的一些具體例子</a> </p> </div> <!--main部分開始--> <div class="blog-main clearfix w1200"> <div class="preview-wrap"> <div class="preview-header"> <h1 class="preview-title ">微前端(Micro Frontend ) 落地實施的一些具體例子 </h1> <div class="mess"> <span class="label label-original">原創</span> <span style="margin: auto 10px auto 0px"><a href="http://blog.itpub.net/itother/" rel="nofollow">IT綜合</a></span> <span>作者：<a href="http://blog.itpub.net/24475491/" rel="nofollow">i042416</a></span> <span>時間：2021-07-29 15:10:49</span> <span class="dian"></span> <span class="icon-see"></span> <span class="dian"></span> <span class="icon-comment">0</span> <!--博主本人和管理員 顯示 開始--> <i class="superman"><a href="javascript:;" mid="2784083" onclick="blogObj.delDraft($(this))" rel="nofollow">刪除</a></i> <i class="superman"><a href="http://blog.itpub.net/blog/post/2784083/" rel="nofollow">編輯</a></i> <!--博主本人和管理員 顯示 結束--> </div> </div> <div class="preview-body windowH"> <div class="preview-main"> <div id="doc-content" style="padding: 0px;"> <textarea style="display: none">前文[微前端概述(Micro Frontends) 以及相比單體應用，微前端能帶來什麼好處](https://jerry.blog.csdn.net/article/details/119190124) 簡單介紹了微前端的概念，本文來看一個具體的應用例子。 [原文地址](https://martinfowler.com/articles/micro-frontends.html) 想象一個網站，客戶可以在其中訂購外賣食品。從表面上看，這是一個相當簡單的概念，但如果你想做得好，還有驚人的細節： * 應該有一個登陸頁面，客戶可以在其中瀏覽和搜尋餐館。 餐廳應該可以透過任意數量的屬性進行搜尋和過濾，包括價格、美食或客戶之前訂購的東西 * 每家餐廳都需要自己的頁面來顯示其選單項，並允許客戶選擇他們想吃的東西，包括折扣、餐飲優惠和特殊要求 * 客戶應該有一個個人資料頁面，他們可以在其中檢視他們的訂單歷史記錄、跟蹤交付和自定義他們的付款選項  每個頁面都有足夠的複雜性，我們可以輕鬆地證明每個頁面都有一個專門的團隊，並且每個團隊都應該能夠獨立於所有其他團隊在他們的頁面上工作。 他們應該能夠開發、測試、部署和維護他們的程式碼，而不必擔心與其他團隊發生衝突或協調。 但是，我們的客戶仍然應該看到一個無縫的網站。 在本文的其餘部分，我們將在需要示例程式碼或場景的任何地方使用此示例應用程式。 # Integration approaches 鑑於上面相當鬆散的定義，有許多方法可以合理地稱為微前端。 在本節中，我們將展示一些示例並討論它們的權衡。 所有這些方法都有一個相當自然的架構——通常應用程式中的每個頁面都有一個微前端，並且有一個容器應用程式，它： * 呈現常見的頁面元素，例如頁首和頁尾 * 解決跨領域問題，如身份驗證和導航 * 將各種微前端放在頁面上，並告訴每個微前端何時何地渲染自己  # Server-side template composition 我們從一種絕對不新穎的前端開發方法開始——用多個模板或片段在伺服器上渲染 HTML。 我們有一個 index.html ，它包含所有常見的頁面元素，然後使用伺服器端包含從片段 HTML 檔案中插入特定於頁面的內容： ```html <meta charset="utf-8"> <title>Feed me</title> <h1>Feed me</h1> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="renderer" content="webkit"> <title>微前端(Micro Frontend ) 落地實施的一些具體例子_ITPUB部落格</title> <meta name="keywords" content="應用開發,IT綜合"> <meta name="description" content="前文微前端概述(Micro Frontends) 以及相比單體應用，微前端能帶來什麼好處 簡單介紹了微前端的概念，本文來看一個具體的應用例子。 原文地址 想象一個網站，客戶可以在其中訂購外賣食品。從表面上看，這是一個相當簡單的概念，但如果你想做得好，還有驚人的細節： 應該有一個登陸頁面，客戶可以在其中瀏覽和搜尋餐館。 餐廳應該可以透過任意數量的屬性進行搜尋和過濾，包括價格、美食或客戶之前ITPUB部落格每天千篇餘篇博文新資訊，40多萬活躍博主，為IT技術人提供全面的IT資訊和交流互動的IT部落格平臺-中國專業的IT技術ITPUB部落格。"> <link rel="stylesheet" href="http://blog.itpub.net/layui/css/layui.css?v234"> <link rel="stylesheet" href="http://blog.itpub.net/css/base.css?v1.5"> <link rel="stylesheet" href="http://blog.itpub.net/css/zhuanlan.css?v=1.3"> <!--[if lt IE 9]> <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script> <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script> <![endif]--> <div></div> <div></div> <div></div> <div></div> <!--header部分開始--> <div class="blog-header"> <div class="w1200"> <a href="http://blog.itpub.net/" class="fl" rel="nofollow"><h1 class="logo">ITPub部落格</h1></a> <div class="nav fl"> <a href="http://www.itpub.net/" rel="nofollow">首頁</a> <a href="http://blog.itpub.net/" rel="nofollow">部落格</a> <a href="http://blog.itpub.net/column" rel="nofollow">專欄</a> <a href="http://edu.itpub.net/" rel="nofollow">學院</a> <a href="http://www.itpub.net/forum.php" rel="nofollow">社群</a> <a href="https://z.itpub.net/" rel="nofollow">技術棧</a> </div> <div class="fr"> <form action="http://blog.itpub.net/search/blog/" class="layui-form blog-search-wrap fl"> <input type="hidden" name="type" value="blog"> <input placeholder="搜尋" type="text" class="layui-input" name="keyword"> <button class="search-btn icon-blog"></button> </form> <a href="http://blog.itpub.net/blog/post/" class="layui-btn layui-btn-primary fl mlr30" target="_blank" rel="nofollow">發博</a> <!--登入前--> <div class="fl head-name" id="u_info"> </div> </div> </div> </div> <!--header部分結束--> <link rel="stylesheet" href="http://blog.itpub.net/markdown/css/editormd.css"> <link rel="stylesheet" href="http://blog.itpub.net/markdown/css/editormd.min.css"> <link rel="stylesheet" href="http://blog.itpub.net/markdown/css/editormd.preview.min.css"> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <link href="http://blog.itpub.net/ueditor/third-party/SyntaxHighlighter/shCoreDefault.css" rel="stylesheet" type="text/css"> <div></div> <link rel="stylesheet" href="http://g.alicdn.com/de/prismplayer/2.6.0/skins/default/aliplayer-min.css"> <div></div> <div></div> <div></div> <div></div> <div></div> <style> .code .container > textarea{ height:100%; } .translate{color: #9fa3a7 !important;font-size:12px !important;} .translate a{font-size:12px !important;color:#9fa3a7 !important;} .translate a:hover {font-size:12px !important;color:#f15142 !important;} .newslist{padding:10px 5px;height:20px !important;line-height:20px;overflow:hidden;text-overflow: ellipsis;white-space: nowrap;border-bottom:1px solid #eee} .fake-video-btn:hover{ cursor: pointer; border-style: solid; border-width: 2px; border-radius: 63px; border-color: #00c1de; } .it-player-wrap { display: flex; flex-direction: row; box-sizing: border-box; padding: 5px; margin-bottom: 20px; background: #FBFBFB; border: 1px solid #EFEFEF; border-radius: 4px; } .it-player-wrap .control { width: 50px; height: 50px; background-color: #57a5f2; margin-right: 15px; border-radius: 50%; } .it-player-wrap .control .play,.it-player-wrap .control .pause { background-size: 30px !important; color: #ffffff; width: 100%; height: 100%; } .it-player-wrap .control .play { background: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/PjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+PHN2ZyB0PSIxNTU5NjM3ODcxMTQ0IiBjbGFzcz0iaWNvbiIgc3R5bGU9IiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHAtaWQ9IjYwMjkiIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iMjAwIiBoZWlnaHQ9IjIwMCI+PGRlZnM+PHN0eWxlIHR5cGU9InRleHQvY3NzIj48L3N0eWxlPjwvZGVmcz48cGF0aCBkPSJNOTUzLjQ0NTA2NSA2MDguMjkwNzI0TDM1MC4yOTkyMSA5ODAuNjM0MjExQzI1Ni42NDExNTEgMTAzOC40NTUyNjMgMTgwLjY5MDc4OSA5OTcuNzk5ODM2IDE4MC42OTA3ODkgODkxLjkxNTAzM1YxMTUuNDg2NzExQzE4MC42OTA3ODkgOC42MzgyMjQgMjU2LjIxOTUzOS0zMS4yOTQ0NCAzNTAuMjM4OTggMjYuNzY3NTM0bDYwMy4yNjYzMTUgMzcyLjIyMzAyNmM5My42NTgwNTkgNTcuODIxMDUzIDk0LjA3OTY3MSAxNTEuMjM4MTkxIDAgMjA5LjMwMDE2NHoiIHAtaWQ9IjYwMzAiIGZpbGw9IiNmZmZmZmYiPjwvcGF0aD48L3N2Zz4=") no-repeat center; } .it-player-wrap .control .pause { background: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/PjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+PHN2ZyB0PSIxNTU5NjM3NzQ2MzAwIiBjbGFzcz0iaWNvbiIgc3R5bGU9IiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHAtaWQ9IjQ0NjciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iMjAwIiBoZWlnaHQ9IjIwMCI+PGRlZnM+PHN0eWxlIHR5cGU9InRleHQvY3NzIj48L3N0eWxlPjwvZGVmcz48cGF0aCBkPSJNNzM1LjkgNjQuOWMtNTEuMiAwLTk2IDQ0LjctOTYgOTUuOHY3MDIuNmMwIDUxLjEgNDQuOCA5NS44IDk2IDk1LjhzOTYtNDQuNyA5Ni05NS44VjE2MC43YzAtNTEuMS00NC44LTk1LjgtOTYtOTUuOHogbS00NDcuOCAwYy01MS4yIDAtOTYgNDQuNy05NiA5NS44djcwMi42YzAgNTEuMSA0NC44IDk1LjggOTYgOTUuOHM5Ni00NC43IDk2LTk1LjhWMTYwLjdjLTAuMS01MS4xLTQ0LjktOTUuOC05Ni05NS44eiIgcC1pZD0iNDQ2OCIgZmlsbD0iI2ZmZmZmZiI+PC9wYXRoPjwvc3ZnPg==") no-repeat center; } .it-player-wrap .box { flex: 1; } .it-player-wrap .box .info { font-family: PingFang-SC-Regular; font-size: 12px; color: #A8A8A8; text-align: left; line-height: 24px; margin: 0; } .it-player-wrap .box .info .size { display: inline-block; margin-right: 15px; } .it-player-wrap .progress-wrap { position: relative; margin-top: 15px; display: flex; flex-direction: row; align-items: center; } .it-player-wrap .progress-line,.it-player-wrap .progress-line-inner { position: absolute; height: 6px; width: 100%; background: #DDECFF; border-radius: 8.5px; } .it-player-wrap .progress-line-inner { background: #4C83E5 !important; } .it-player-wrap .progress-button { position: absolute; width: 50px; height: 20px; background: #4C83E5; box-shadow: 0 2px 4px 0 #A0C2FF; border-radius: 10px; top: -10px; font-family: PingFang-SC-Regular; font-size: 12px; color: #FFFFFF; text-align: center; line-height: 20px; cursor: pointer; } </style> <style> .crumb{ padding: 10px; margin-bottom: 10px; border-bottom: 1px solid rgba(238,238,238,0.4); } .crumb p{ width: 1200px; margin: 0 auto; } .newul{ line-height: 25px; } .new-item{ padding: 5px; display: block; width: 250px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } #doc-content img{ margin:none; display:initial; } .syntaxhighlighter{ width:890px; } .syntaxhighlighter td.code .line{ white-space: nowrap; } .syntaxhighlighter td.code .container{ width:840px!important; } .syntaxhighlighter td.code{ overflow: scroll!important; } </style> <div class="crumb"> <p> <a href="http://blog.itpub.net/" rel="nofollow">首頁</a> > <a href="http://blog.itpub.net/appdevelop/" rel="nofollow">應用開發</a> > <a href="http://blog.itpub.net/itother/" rel="nofollow">IT綜合</a> > <a rel="nofollow">微前端(Micro Frontend ) 落地實施的一些具體例子</a> </p> </div> <!--main部分開始--> <div class="blog-main clearfix w1200"> <div class="preview-wrap"> <div class="preview-header"> <h1 class="preview-title ">微前端(Micro Frontend ) 落地實施的一些具體例子 </h1> <div class="mess"> <span class="label label-original">原創</span> <span style="margin: auto 10px auto 0px"><a href="http://blog.itpub.net/itother/" rel="nofollow">IT綜合</a></span> <span>作者：<a href="http://blog.itpub.net/24475491/" rel="nofollow">i042416</a></span> <span>時間：2021-07-29 15:10:49</span> <span class="dian"></span> <span class="icon-see"></span> <span class="dian"></span> <span class="icon-comment">0</span> <!--博主本人和管理員 顯示 開始--> <i class="superman"><a href="javascript:;" mid="2784083" onclick="blogObj.delDraft($(this))" rel="nofollow">刪除</a></i> <i class="superman"><a href="http://blog.itpub.net/blog/post/2784083/" rel="nofollow">編輯</a></i> <!--博主本人和管理員 顯示 結束--> </div> </div> <div class="preview-body windowH"> <div class="preview-main"> <div id="doc-content" style="padding: 0px;"> <textarea style="display: none">前文[微前端概述(Micro Frontends) 以及相比單體應用，微前端能帶來什麼好處](https://jerry.blog.csdn.net/article/details/119190124) 簡單介紹了微前端的概念，本文來看一個具體的應用例子。 [原文地址](https://martinfowler.com/articles/micro-frontends.html) 想象一個網站，客戶可以在其中訂購外賣食品。從表面上看，這是一個相當簡單的概念，但如果你想做得好，還有驚人的細節： * 應該有一個登陸頁面，客戶可以在其中瀏覽和搜尋餐館。 餐廳應該可以透過任意數量的屬性進行搜尋和過濾，包括價格、美食或客戶之前訂購的東西 * 每家餐廳都需要自己的頁面來顯示其選單項，並允許客戶選擇他們想吃的東西，包括折扣、餐飲優惠和特殊要求 * 客戶應該有一個個人資料頁面，他們可以在其中檢視他們的訂單歷史記錄、跟蹤交付和自定義他們的付款選項  每個頁面都有足夠的複雜性，我們可以輕鬆地證明每個頁面都有一個專門的團隊，並且每個團隊都應該能夠獨立於所有其他團隊在他們的頁面上工作。 他們應該能夠開發、測試、部署和維護他們的程式碼，而不必擔心與其他團隊發生衝突或協調。 但是，我們的客戶仍然應該看到一個無縫的網站。 在本文的其餘部分，我們將在需要示例程式碼或場景的任何地方使用此示例應用程式。 # Integration approaches 鑑於上面相當鬆散的定義，有許多方法可以合理地稱為微前端。 在本節中，我們將展示一些示例並討論它們的權衡。 所有這些方法都有一個相當自然的架構——通常應用程式中的每個頁面都有一個微前端，並且有一個容器應用程式，它： * 呈現常見的頁面元素，例如頁首和頁尾 * 解決跨領域問題，如身份驗證和導航 * 將各種微前端放在頁面上，並告訴每個微前端何時何地渲染自己  # Server-side template composition 我們從一種絕對不新穎的前端開發方法開始——用多個模板或片段在伺服器上渲染 HTML。 我們有一個 index.html ，它包含所有常見的頁面元素，然後使用伺服器端包含從片段 HTML 檔案中插入特定於頁面的內容： ```html <meta charset="utf-8"> <title>Feed me</title> <h1>Feed me</h1> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="renderer" content="webkit"> <title>微前端(Micro Frontend ) 落地實施的一些具體例子_ITPUB部落格</title> <meta name="keywords" content="應用開發,IT綜合"> <meta name="description" content="前文微前端概述(Micro Frontends) 以及相比單體應用，微前端能帶來什麼好處 簡單介紹了微前端的概念，本文來看一個具體的應用例子。 原文地址 想象一個網站，客戶可以在其中訂購外賣食品。從表面上看，這是一個相當簡單的概念，但如果你想做得好，還有驚人的細節： 應該有一個登陸頁面，客戶可以在其中瀏覽和搜尋餐館。 餐廳應該可以透過任意數量的屬性進行搜尋和過濾，包括價格、美食或客戶之前ITPUB部落格每天千篇餘篇博文新資訊，40多萬活躍博主，為IT技術人提供全面的IT資訊和交流互動的IT部落格平臺-中國專業的IT技術ITPUB部落格。"> <link rel="stylesheet" href="http://blog.itpub.net/layui/css/layui.css?v234"> <link rel="stylesheet" href="http://blog.itpub.net/css/base.css?v1.5"> <link rel="stylesheet" href="http://blog.itpub.net/css/zhuanlan.css?v=1.3"> <!--[if lt IE 9]> <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script> <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script> <![endif]--> <div></div> <div></div> <div></div> <div></div> <!--header部分開始--> <div class="blog-header"> <div class="w1200"> <a href="http://blog.itpub.net/" class="fl" rel="nofollow"><h1 class="logo">ITPub部落格</h1></a> <div class="nav fl"> <a href="http://www.itpub.net/" rel="nofollow">首頁</a> <a href="http://blog.itpub.net/" rel="nofollow">部落格</a> <a href="http://blog.itpub.net/column" rel="nofollow">專欄</a> <a href="http://edu.itpub.net/" rel="nofollow">學院</a> <a href="http://www.itpub.net/forum.php" rel="nofollow">社群</a> <a href="https://z.itpub.net/" rel="nofollow">技術棧</a> </div> <div class="fr"> <form action="http://blog.itpub.net/search/blog/" class="layui-form blog-search-wrap fl"> <input type="hidden" name="type" value="blog"> <input placeholder="搜尋" type="text" class="layui-input" name="keyword"> <button class="search-btn icon-blog"></button> </form> <a href="http://blog.itpub.net/blog/post/" class="layui-btn layui-btn-primary fl mlr30" target="_blank" rel="nofollow">發博</a> <!--登入前--> <div class="fl head-name" id="u_info"> </div> </div> </div> </div> <!--header部分結束--> <link rel="stylesheet" href="http://blog.itpub.net/markdown/css/editormd.css"> <link rel="stylesheet" href="http://blog.itpub.net/markdown/css/editormd.min.css"> <link rel="stylesheet" href="http://blog.itpub.net/markdown/css/editormd.preview.min.css"> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <link href="http://blog.itpub.net/ueditor/third-party/SyntaxHighlighter/shCoreDefault.css" rel="stylesheet" type="text/css"> <div></div> <link rel="stylesheet" href="http://g.alicdn.com/de/prismplayer/2.6.0/skins/default/aliplayer-min.css"> <div></div> <div></div> <div></div> <div></div> <div></div> <style> .code .container > textarea{ height:100%; } .translate{color: #9fa3a7 !important;font-size:12px !important;} .translate a{font-size:12px !important;color:#9fa3a7 !important;} .translate a:hover {font-size:12px !important;color:#f15142 !important;} .newslist{padding:10px 5px;height:20px !important;line-height:20px;overflow:hidden;text-overflow: ellipsis;white-space: nowrap;border-bottom:1px solid #eee} .fake-video-btn:hover{ cursor: pointer; border-style: solid; border-width: 2px; border-radius: 63px; border-color: #00c1de; } .it-player-wrap { display: flex; flex-direction: row; box-sizing: border-box; padding: 5px; margin-bottom: 20px; background: #FBFBFB; border: 1px solid #EFEFEF; border-radius: 4px; } .it-player-wrap .control { width: 50px; height: 50px; background-color: #57a5f2; margin-right: 15px; border-radius: 50%; } .it-player-wrap .control .play,.it-player-wrap .control .pause { background-size: 30px !important; color: #ffffff; width: 100%; height: 100%; } .it-player-wrap .control .play { background: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/PjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+PHN2ZyB0PSIxNTU5NjM3ODcxMTQ0IiBjbGFzcz0iaWNvbiIgc3R5bGU9IiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHAtaWQ9IjYwMjkiIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iMjAwIiBoZWlnaHQ9IjIwMCI+PGRlZnM+PHN0eWxlIHR5cGU9InRleHQvY3NzIj48L3N0eWxlPjwvZGVmcz48cGF0aCBkPSJNOTUzLjQ0NTA2NSA2MDguMjkwNzI0TDM1MC4yOTkyMSA5ODAuNjM0MjExQzI1Ni42NDExNTEgMTAzOC40NTUyNjMgMTgwLjY5MDc4OSA5OTcuNzk5ODM2IDE4MC42OTA3ODkgODkxLjkxNTAzM1YxMTUuNDg2NzExQzE4MC42OTA3ODkgOC42MzgyMjQgMjU2LjIxOTUzOS0zMS4yOTQ0NCAzNTAuMjM4OTggMjYuNzY3NTM0bDYwMy4yNjYzMTUgMzcyLjIyMzAyNmM5My42NTgwNTkgNTcuODIxMDUzIDk0LjA3OTY3MSAxNTEuMjM4MTkxIDAgMjA5LjMwMDE2NHoiIHAtaWQ9IjYwMzAiIGZpbGw9IiNmZmZmZmYiPjwvcGF0aD48L3N2Zz4=") no-repeat center; } .it-player-wrap .control .pause { background: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/PjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+PHN2ZyB0PSIxNTU5NjM3NzQ2MzAwIiBjbGFzcz0iaWNvbiIgc3R5bGU9IiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHAtaWQ9IjQ0NjciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iMjAwIiBoZWlnaHQ9IjIwMCI+PGRlZnM+PHN0eWxlIHR5cGU9InRleHQvY3NzIj48L3N0eWxlPjwvZGVmcz48cGF0aCBkPSJNNzM1LjkgNjQuOWMtNTEuMiAwLTk2IDQ0LjctOTYgOTUuOHY3MDIuNmMwIDUxLjEgNDQuOCA5NS44IDk2IDk1LjhzOTYtNDQuNyA5Ni05NS44VjE2MC43YzAtNTEuMS00NC44LTk1LjgtOTYtOTUuOHogbS00NDcuOCAwYy01MS4yIDAtOTYgNDQuNy05NiA5NS44djcwMi42YzAgNTEuMSA0NC44IDk1LjggOTYgOTUuOHM5Ni00NC43IDk2LTk1LjhWMTYwLjdjLTAuMS01MS4xLTQ0LjktOTUuOC05Ni05NS44eiIgcC1pZD0iNDQ2OCIgZmlsbD0iI2ZmZmZmZiI+PC9wYXRoPjwvc3ZnPg==") no-repeat center; } .it-player-wrap .box { flex: 1; } .it-player-wrap .box .info { font-family: PingFang-SC-Regular; font-size: 12px; color: #A8A8A8; text-align: left; line-height: 24px; margin: 0; } .it-player-wrap .box .info .size { display: inline-block; margin-right: 15px; } .it-player-wrap .progress-wrap { position: relative; margin-top: 15px; display: flex; flex-direction: row; align-items: center; } .it-player-wrap .progress-line,.it-player-wrap .progress-line-inner { position: absolute; height: 6px; width: 100%; background: #DDECFF; border-radius: 8.5px; } .it-player-wrap .progress-line-inner { background: #4C83E5 !important; } .it-player-wrap .progress-button { position: absolute; width: 50px; height: 20px; background: #4C83E5; box-shadow: 0 2px 4px 0 #A0C2FF; border-radius: 10px; top: -10px; font-family: PingFang-SC-Regular; font-size: 12px; color: #FFFFFF; text-align: center; line-height: 20px; cursor: pointer; } </style> <style> .crumb{ padding: 10px; margin-bottom: 10px; border-bottom: 1px solid rgba(238,238,238,0.4); } .crumb p{ width: 1200px; margin: 0 auto; } .newul{ line-height: 25px; } .new-item{ padding: 5px; display: block; width: 250px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } #doc-content img{ margin:none; display:initial; } .syntaxhighlighter{ width:890px; } .syntaxhighlighter td.code .line{ white-space: nowrap; } .syntaxhighlighter td.code .container{ width:840px!important; } .syntaxhighlighter td.code{ overflow: scroll!important; } </style> <div class="crumb"> <p> <a href="http://blog.itpub.net/" rel="nofollow">首頁</a> > <a href="http://blog.itpub.net/appdevelop/" rel="nofollow">應用開發</a> > <a href="http://blog.itpub.net/itother/" rel="nofollow">IT綜合</a> > <a rel="nofollow">微前端(Micro Frontend ) 落地實施的一些具體例子</a> </p> </div> <!--main部分開始--> <div class="blog-main clearfix w1200"> <div class="preview-wrap"> <div class="preview-header"> <h1 class="preview-title ">微前端(Micro Frontend ) 落地實施的一些具體例子 </h1> <div class="mess"> <span class="label label-original">原創</span> <span style="margin: auto 10px auto 0px"><a href="http://blog.itpub.net/itother/" rel="nofollow">IT綜合</a></span> <span>作者：<a href="http://blog.itpub.net/24475491/" rel="nofollow">i042416</a></span> <span>時間：2021-07-29 15:10:49</span> <span class="dian"></span> <span class="icon-see"></span> <span class="dian"></span> <span class="icon-comment">0</span> <!--博主本人和管理員 顯示 開始--> <i class="superman"><a href="javascript:;" mid="2784083" onclick="blogObj.delDraft($(this))" rel="nofollow">刪除</a></i> <i class="superman"><a href="http://blog.itpub.net/blog/post/2784083/" rel="nofollow">編輯</a></i> <!--博主本人和管理員 顯示 結束--> </div> </div> <div class="preview-body windowH"> <div class="preview-main"> <div id="doc-content" style="padding: 0px;"> <textarea style="display: none">前文[微前端概述(Micro Frontends) 以及相比單體應用，微前端能帶來什麼好處](https://jerry.blog.csdn.net/article/details/119190124) 簡單介紹了微前端的概念，本文來看一個具體的應用例子。 [原文地址](https://martinfowler.com/articles/micro-frontends.html) 想象一個網站，客戶可以在其中訂購外賣食品。從表面上看，這是一個相當簡單的概念，但如果你想做得好，還有驚人的細節： * 應該有一個登陸頁面，客戶可以在其中瀏覽和搜尋餐館。 餐廳應該可以透過任意數量的屬性進行搜尋和過濾，包括價格、美食或客戶之前訂購的東西 * 每家餐廳都需要自己的頁面來顯示其選單項，並允許客戶選擇他們想吃的東西，包括折扣、餐飲優惠和特殊要求 * 客戶應該有一個個人資料頁面，他們可以在其中檢視他們的訂單歷史記錄、跟蹤交付和自定義他們的付款選項  每個頁面都有足夠的複雜性，我們可以輕鬆地證明每個頁面都有一個專門的團隊，並且每個團隊都應該能夠獨立於所有其他團隊在他們的頁面上工作。 他們應該能夠開發、測試、部署和維護他們的程式碼，而不必擔心與其他團隊發生衝突或協調。 但是，我們的客戶仍然應該看到一個無縫的網站。 在本文的其餘部分，我們將在需要示例程式碼或場景的任何地方使用此示例應用程式。 # Integration approaches 鑑於上面相當鬆散的定義，有許多方法可以合理地稱為微前端。 在本節中，我們將展示一些示例並討論它們的權衡。 所有這些方法都有一個相當自然的架構——通常應用程式中的每個頁面都有一個微前端，並且有一個容器應用程式，它： * 呈現常見的頁面元素，例如頁首和頁尾 * 解決跨領域問題，如身份驗證和導航 * 將各種微前端放在頁面上，並告訴每個微前端何時何地渲染自己  # Server-side template composition 我們從一種絕對不新穎的前端開發方法開始——用多個模板或片段在伺服器上渲染 HTML。 我們有一個 index.html ，它包含所有常見的頁面元素，然後使用伺服器端包含從片段 HTML 檔案中插入特定於頁面的內容： ```html <meta charset="utf-8"> <title>Feed me</title> <h1>Feed me</h1> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="renderer" content="webkit"> <title>微前端(Micro Frontend ) 落地實施的一些具體例子_ITPUB部落格</title> <meta name="keywords" content="應用開發,IT綜合"> <meta name="description" content="前文微前端概述(Micro Frontends) 以及相比單體應用，微前端能帶來什麼好處 簡單介紹了微前端的概念，本文來看一個具體的應用例子。 原文地址 想象一個網站，客戶可以在其中訂購外賣食品。從表面上看，這是一個相當簡單的概念，但如果你想做得好，還有驚人的細節： 應該有一個登陸頁面，客戶可以在其中瀏覽和搜尋餐館。 餐廳應該可以透過任意數量的屬性進行搜尋和過濾，包括價格、美食或客戶之前ITPUB部落格每天千篇餘篇博文新資訊，40多萬活躍博主，為IT技術人提供全面的IT資訊和交流互動的IT部落格平臺-中國專業的IT技術ITPUB部落格。"> <link rel="stylesheet" href="http://blog.itpub.net/layui/css/layui.css?v234"> <link rel="stylesheet" href="http://blog.itpub.net/css/base.css?v1.5"> <link rel="stylesheet" href="http://blog.itpub.net/css/zhuanlan.css?v=1.3"> <!--[if lt IE 9]> <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script> <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script> <![endif]--> <div></div> <div></div> <div></div> <div></div> <!--header部分開始--> <div class="blog-header"> <div class="w1200"> <a href="http://blog.itpub.net/" class="fl" rel="nofollow"><h1 class="logo">ITPub部落格</h1></a> <div class="nav fl"> <a href="http://www.itpub.net/" rel="nofollow">首頁</a> <a href="http://blog.itpub.net/" rel="nofollow">部落格</a> <a href="http://blog.itpub.net/column" rel="nofollow">專欄</a> <a href="http://edu.itpub.net/" rel="nofollow">學院</a> <a href="http://www.itpub.net/forum.php" rel="nofollow">社群</a> <a href="https://z.itpub.net/" rel="nofollow">技術棧</a> </div> <div class="fr"> <form action="http://blog.itpub.net/search/blog/" class="layui-form blog-search-wrap fl"> <input type="hidden" name="type" value="blog"> <input placeholder="搜尋" type="text" class="layui-input" name="keyword"> <button class="search-btn icon-blog"></button> </form> <a href="http://blog.itpub.net/blog/post/" class="layui-btn layui-btn-primary fl mlr30" target="_blank" rel="nofollow">發博</a> <!--登入前--> <div class="fl head-name" id="u_info"> </div> </div> </div> </div> <!--header部分結束--> <link rel="stylesheet" href="http://blog.itpub.net/markdown/css/editormd.css"> <link rel="stylesheet" href="http://blog.itpub.net/markdown/css/editormd.min.css"> <link rel="stylesheet" href="http://blog.itpub.net/markdown/css/editormd.preview.min.css"> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <link href="http://blog.itpub.net/ueditor/third-party/SyntaxHighlighter/shCoreDefault.css" rel="stylesheet" type="text/css"> <div></div> <link rel="stylesheet" href="http://g.alicdn.com/de/prismplayer/2.6.0/skins/default/aliplayer-min.css"> <div></div> <div></div> <div></div> <div></div> <div></div> <style> .code .container > textarea{ height:100%; } .translate{color: #9fa3a7 !important;font-size:12px !important;} .translate a{font-size:12px !important;color:#9fa3a7 !important;} .translate a:hover {font-size:12px !important;color:#f15142 !important;} .newslist{padding:10px 5px;height:20px !important;line-height:20px;overflow:hidden;text-overflow: ellipsis;white-space: nowrap;border-bottom:1px solid #eee} .fake-video-btn:hover{ cursor: pointer; border-style: solid; border-width: 2px; border-radius: 63px; border-color: #00c1de; } .it-player-wrap { display: flex; flex-direction: row; box-sizing: border-box; padding: 5px; margin-bottom: 20px; background: #FBFBFB; border: 1px solid #EFEFEF; border-radius: 4px; } .it-player-wrap .control { width: 50px; height: 50px; background-color: #57a5f2; margin-right: 15px; border-radius: 50%; } .it-player-wrap .control .play,.it-player-wrap .control .pause { background-size: 30px !important; color: #ffffff; width: 100%; height: 100%; } .it-player-wrap .control .play { background: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/PjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+PHN2ZyB0PSIxNTU5NjM3ODcxMTQ0IiBjbGFzcz0iaWNvbiIgc3R5bGU9IiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHAtaWQ9IjYwMjkiIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iMjAwIiBoZWlnaHQ9IjIwMCI+PGRlZnM+PHN0eWxlIHR5cGU9InRleHQvY3NzIj48L3N0eWxlPjwvZGVmcz48cGF0aCBkPSJNOTUzLjQ0NTA2NSA2MDguMjkwNzI0TDM1MC4yOTkyMSA5ODAuNjM0MjExQzI1Ni42NDExNTEgMTAzOC40NTUyNjMgMTgwLjY5MDc4OSA5OTcuNzk5ODM2IDE4MC42OTA3ODkgODkxLjkxNTAzM1YxMTUuNDg2NzExQzE4MC42OTA3ODkgOC42MzgyMjQgMjU2LjIxOTUzOS0zMS4yOTQ0NCAzNTAuMjM4OTggMjYuNzY3NTM0bDYwMy4yNjYzMTUgMzcyLjIyMzAyNmM5My42NTgwNTkgNTcuODIxMDUzIDk0LjA3OTY3MSAxNTEuMjM4MTkxIDAgMjA5LjMwMDE2NHoiIHAtaWQ9IjYwMzAiIGZpbGw9IiNmZmZmZmYiPjwvcGF0aD48L3N2Zz4=") no-repeat center; } .it-player-wrap .control .pause { background: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/PjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+PHN2ZyB0PSIxNTU5NjM3NzQ2MzAwIiBjbGFzcz0iaWNvbiIgc3R5bGU9IiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHAtaWQ9IjQ0NjciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iMjAwIiBoZWlnaHQ9IjIwMCI+PGRlZnM+PHN0eWxlIHR5cGU9InRleHQvY3NzIj48L3N0eWxlPjwvZGVmcz48cGF0aCBkPSJNNzM1LjkgNjQuOWMtNTEuMiAwLTk2IDQ0LjctOTYgOTUuOHY3MDIuNmMwIDUxLjEgNDQuOCA5NS44IDk2IDk1LjhzOTYtNDQuNyA5Ni05NS44VjE2MC43YzAtNTEuMS00NC44LTk1LjgtOTYtOTUuOHogbS00NDcuOCAwYy01MS4yIDAtOTYgNDQuNy05NiA5NS44djcwMi42YzAgNTEuMSA0NC44IDk1LjggOTYgOTUuOHM5Ni00NC43IDk2LTk1LjhWMTYwLjdjLTAuMS01MS4xLTQ0LjktOTUuOC05Ni05NS44eiIgcC1pZD0iNDQ2OCIgZmlsbD0iI2ZmZmZmZiI+PC9wYXRoPjwvc3ZnPg==") no-repeat center; } .it-player-wrap .box { flex: 1; } .it-player-wrap .box .info { font-family: PingFang-SC-Regular; font-size: 12px; color: #A8A8A8; text-align: left; line-height: 24px; margin: 0; } .it-player-wrap .box .info .size { display: inline-block; margin-right: 15px; } .it-player-wrap .progress-wrap { position: relative; margin-top: 15px; display: flex; flex-direction: row; align-items: center; } .it-player-wrap .progress-line,.it-player-wrap .progress-line-inner { position: absolute; height: 6px; width: 100%; background: #DDECFF; border-radius: 8.5px; } .it-player-wrap .progress-line-inner { background: #4C83E5 !important; } .it-player-wrap .progress-button { position: absolute; width: 50px; height: 20px; background: #4C83E5; box-shadow: 0 2px 4px 0 #A0C2FF; border-radius: 10px; top: -10px; font-family: PingFang-SC-Regular; font-size: 12px; color: #FFFFFF; text-align: center; line-height: 20px; cursor: pointer; } </style> <style> .crumb{ padding: 10px; margin-bottom: 10px; border-bottom: 1px solid rgba(238,238,238,0.4); } .crumb p{ width: 1200px; margin: 0 auto; } .newul{ line-height: 25px; } .new-item{ padding: 5px; display: block; width: 250px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } #doc-content img{ margin:none; display:initial; } .syntaxhighlighter{ width:890px; } .syntaxhighlighter td.code .line{ white-space: nowrap; } .syntaxhighlighter td.code .container{ width:840px!important; } .syntaxhighlighter td.code{ overflow: scroll!important; } </style> <div class="crumb"> <p> <a href="http://blog.itpub.net/" rel="nofollow">首頁</a> > <a href="http://blog.itpub.net/appdevelop/" rel="nofollow">應用開發</a> > <a href="http://blog.itpub.net/itother/" rel="nofollow">IT綜合</a> > <a rel="nofollow">微前端(Micro Frontend ) 落地實施的一些具體例子</a> </p> </div> <!--main部分開始--> <div class="blog-main clearfix w1200"> <div class="preview-wrap"> <div class="preview-header"> <h1 class="preview-title ">微前端(Micro Frontend ) 落地實施的一些具體例子 </h1> <div class="mess"> <span class="label label-original">原創</span> <span style="margin: auto 10px auto 0px"><a href="http://blog.itpub.net/itother/" rel="nofollow">IT綜合</a></span> <span>作者：<a href="http://blog.itpub.net/24475491/" rel="nofollow">i042416</a></span> <span>時間：2021-07-29 15:10:49</span> <span class="dian"></span> <span class="icon-see"></span> <span class="dian"></span> <span class="icon-comment">0</span> <!--博主本人和管理員 顯示 開始--> <i class="superman"><a href="javascript:;" mid="2784083" onclick="blogObj.delDraft($(this))" rel="nofollow">刪除</a></i> <i class="superman"><a href="http://blog.itpub.net/blog/post/2784083/" rel="nofollow">編輯</a></i> <!--博主本人和管理員 顯示 結束--> </div> </div> <div class="preview-body windowH"> <div class="preview-main"> <div id="doc-content" style="padding: 0px;"> <textarea style="display: none">前文[微前端概述(Micro Frontends) 以及相比單體應用，微前端能帶來什麼好處](https://jerry.blog.csdn.net/article/details/119190124) 簡單介紹了微前端的概念，本文來看一個具體的應用例子。 [原文地址](https://martinfowler.com/articles/micro-frontends.html) 想象一個網站，客戶可以在其中訂購外賣食品。從表面上看，這是一個相當簡單的概念，但如果你想做得好，還有驚人的細節： * 應該有一個登陸頁面，客戶可以在其中瀏覽和搜尋餐館。 餐廳應該可以透過任意數量的屬性進行搜尋和過濾，包括價格、美食或客戶之前訂購的東西 * 每家餐廳都需要自己的頁面來顯示其選單項，並允許客戶選擇他們想吃的東西，包括折扣、餐飲優惠和特殊要求 * 客戶應該有一個個人資料頁面，他們可以在其中檢視他們的訂單歷史記錄、跟蹤交付和自定義他們的付款選項  每個頁面都有足夠的複雜性，我們可以輕鬆地證明每個頁面都有一個專門的團隊，並且每個團隊都應該能夠獨立於所有其他團隊在他們的頁面上工作。 他們應該能夠開發、測試、部署和維護他們的程式碼，而不必擔心與其他團隊發生衝突或協調。 但是，我們的客戶仍然應該看到一個無縫的網站。 在本文的其餘部分，我們將在需要示例程式碼或場景的任何地方使用此示例應用程式。 # Integration approaches 鑑於上面相當鬆散的定義，有許多方法可以合理地稱為微前端。 在本節中，我們將展示一些示例並討論它們的權衡。 所有這些方法都有一個相當自然的架構——通常應用程式中的每個頁面都有一個微前端，並且有一個容器應用程式，它： * 呈現常見的頁面元素，例如頁首和頁尾 * 解決跨領域問題，如身份驗證和導航 * 將各種微前端放在頁面上，並告訴每個微前端何時何地渲染自己  # Server-side template composition 我們從一種絕對不新穎的前端開發方法開始——用多個模板或片段在伺服器上渲染 HTML。 我們有一個 index.html ，它包含所有常見的頁面元素，然後使用伺服器端包含從片段 HTML 檔案中插入特定於頁面的內容： ```html <meta charset="utf-8"> <title>Feed me</title> <h1>Feed me</h1> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="renderer" content="webkit"> <title>微前端(Micro Frontend ) 落地實施的一些具體例子_ITPUB部落格</title> <meta name="keywords" content="應用開發,IT綜合"> <meta name="description" content="前文微前端概述(Micro Frontends) 以及相比單體應用，微前端能帶來什麼好處 簡單介紹了微前端的概念，本文來看一個具體的應用例子。 原文地址 想象一個網站，客戶可以在其中訂購外賣食品。從表面上看，這是一個相當簡單的概念，但如果你想做得好，還有驚人的細節： 應該有一個登陸頁面，客戶可以在其中瀏覽和搜尋餐館。 餐廳應該可以透過任意數量的屬性進行搜尋和過濾，包括價格、美食或客戶之前ITPUB部落格每天千篇餘篇博文新資訊，40多萬活躍博主，為IT技術人提供全面的IT資訊和交流互動的IT部落格平臺-中國專業的IT技術ITPUB部落格。"> <link rel="stylesheet" href="http://blog.itpub.net/layui/css/layui.css?v234"> <link rel="stylesheet" href="http://blog.itpub.net/css/base.css?v1.5"> <link rel="stylesheet" href="http://blog.itpub.net/css/zhuanlan.css?v=1.3"> <!--[if lt IE 9]> <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script> <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script> <![endif]--> <div></div> <div></div> <div></div> <div></div> <!--header部分開始--> <div class="blog-header"> <div class="w1200"> <a href="http://blog.itpub.net/" class="fl" rel="nofollow"><h1 class="logo">ITPub部落格</h1></a> <div class="nav fl"> <a href="http://www.itpub.net/" rel="nofollow">首頁</a> <a href="http://blog.itpub.net/" rel="nofollow">部落格</a> <a href="http://blog.itpub.net/column" rel="nofollow">專欄</a> <a href="http://edu.itpub.net/" rel="nofollow">學院</a> <a href="http://www.itpub.net/forum.php" rel="nofollow">社群</a> <a href="https://z.itpub.net/" rel="nofollow">技術棧</a> </div> <div class="fr"> <form action="http://blog.itpub.net/search/blog/" class="layui-form blog-search-wrap fl"> <input type="hidden" name="type" value="blog"> <input placeholder="搜尋" type="text" class="layui-input" name="keyword"> <button class="search-btn icon-blog"></button> </form> <a href="http://blog.itpub.net/blog/post/" class="layui-btn layui-btn-primary fl mlr30" target="_blank" rel="nofollow">發博</a> <!--登入前--> <div class="fl head-name" id="u_info"> </div> </div> </div> </div> <!--header部分結束--> <link rel="stylesheet" href="http://blog.itpub.net/markdown/css/editormd.css"> <link rel="stylesheet" href="http://blog.itpub.net/markdown/css/editormd.min.css"> <link rel="stylesheet" href="http://blog.itpub.net/markdown/css/editormd.preview.min.css"> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <link href="http://blog.itpub.net/ueditor/third-party/SyntaxHighlighter/shCoreDefault.css" rel="stylesheet" type="text/css"> <div></div> <link rel="stylesheet" href="http://g.alicdn.com/de/prismplayer/2.6.0/skins/default/aliplayer-min.css"> <div></div> <div></div> <div></div> <div></div> <div></div> <style> .code .container > textarea{ height:100%; } .translate{color: #9fa3a7 !important;font-size:12px !important;} .translate a{font-size:12px !important;color:#9fa3a7 !important;} .translate a:hover {font-size:12px !important;color:#f15142 !important;} .newslist{padding:10px 5px;height:20px !important;line-height:20px;overflow:hidden;text-overflow: ellipsis;white-space: nowrap;border-bottom:1px solid #eee} .fake-video-btn:hover{ cursor: pointer; border-style: solid; border-width: 2px; border-radius: 63px; border-color: #00c1de; } .it-player-wrap { display: flex; flex-direction: row; box-sizing: border-box; padding: 5px; margin-bottom: 20px; background: #FBFBFB; border: 1px solid #EFEFEF; border-radius: 4px; } .it-player-wrap .control { width: 50px; height: 50px; background-color: #57a5f2; margin-right: 15px; border-radius: 50%; } .it-player-wrap .control .play,.it-player-wrap .control .pause { background-size: 30px !important; color: #ffffff; width: 100%; height: 100%; } .it-player-wrap .control .play { background: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/PjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+PHN2ZyB0PSIxNTU5NjM3ODcxMTQ0IiBjbGFzcz0iaWNvbiIgc3R5bGU9IiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHAtaWQ9IjYwMjkiIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iMjAwIiBoZWlnaHQ9IjIwMCI+PGRlZnM+PHN0eWxlIHR5cGU9InRleHQvY3NzIj48L3N0eWxlPjwvZGVmcz48cGF0aCBkPSJNOTUzLjQ0NTA2NSA2MDguMjkwNzI0TDM1MC4yOTkyMSA5ODAuNjM0MjExQzI1Ni42NDExNTEgMTAzOC40NTUyNjMgMTgwLjY5MDc4OSA5OTcuNzk5ODM2IDE4MC42OTA3ODkgODkxLjkxNTAzM1YxMTUuNDg2NzExQzE4MC42OTA3ODkgOC42MzgyMjQgMjU2LjIxOTUzOS0zMS4yOTQ0NCAzNTAuMjM4OTggMjYuNzY3NTM0bDYwMy4yNjYzMTUgMzcyLjIyMzAyNmM5My42NTgwNTkgNTcuODIxMDUzIDk0LjA3OTY3MSAxNTEuMjM4MTkxIDAgMjA5LjMwMDE2NHoiIHAtaWQ9IjYwMzAiIGZpbGw9IiNmZmZmZmYiPjwvcGF0aD48L3N2Zz4=") no-repeat center; } .it-player-wrap .control .pause { background: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/PjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+PHN2ZyB0PSIxNTU5NjM3NzQ2MzAwIiBjbGFzcz0iaWNvbiIgc3R5bGU9IiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHAtaWQ9IjQ0NjciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iMjAwIiBoZWlnaHQ9IjIwMCI+PGRlZnM+PHN0eWxlIHR5cGU9InRleHQvY3NzIj48L3N0eWxlPjwvZGVmcz48cGF0aCBkPSJNNzM1LjkgNjQuOWMtNTEuMiAwLTk2IDQ0LjctOTYgOTUuOHY3MDIuNmMwIDUxLjEgNDQuOCA5NS44IDk2IDk1LjhzOTYtNDQuNyA5Ni05NS44VjE2MC43YzAtNTEuMS00NC44LTk1LjgtOTYtOTUuOHogbS00NDcuOCAwYy01MS4yIDAtOTYgNDQuNy05NiA5NS44djcwMi42YzAgNTEuMSA0NC44IDk1LjggOTYgOTUuOHM5Ni00NC43IDk2LTk1LjhWMTYwLjdjLTAuMS01MS4xLTQ0LjktOTUuOC05Ni05NS44eiIgcC1pZD0iNDQ2OCIgZmlsbD0iI2ZmZmZmZiI+PC9wYXRoPjwvc3ZnPg==") no-repeat center; } .it-player-wrap .box { flex: 1; } .it-player-wrap .box .info { font-family: PingFang-SC-Regular; font-size: 12px; color: #A8A8A8; text-align: left; line-height: 24px; margin: 0; } .it-player-wrap .box .info .size { display: inline-block; margin-right: 15px; } .it-player-wrap .progress-wrap { position: relative; margin-top: 15px; display: flex; flex-direction: row; align-items: center; } .it-player-wrap .progress-line,.it-player-wrap .progress-line-inner { position: absolute; height: 6px; width: 100%; background: #DDECFF; border-radius: 8.5px; } .it-player-wrap .progress-line-inner { background: #4C83E5 !important; } .it-player-wrap .progress-button { position: absolute; width: 50px; height: 20px; background: #4C83E5; box-shadow: 0 2px 4px 0 #A0C2FF; border-radius: 10px; top: -10px; font-family: PingFang-SC-Regular; font-size: 12px; color: #FFFFFF; text-align: center; line-height: 20px; cursor: pointer; } </style> <style> .crumb{ padding: 10px; margin-bottom: 10px; border-bottom: 1px solid rgba(238,238,238,0.4); } .crumb p{ width: 1200px; margin: 0 auto; } .newul{ line-height: 25px; } .new-item{ padding: 5px; display: block; width: 250px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } #doc-content img{ margin:none; display:initial; } .syntaxhighlighter{ width:890px; } .syntaxhighlighter td.code .line{ white-space: nowrap; } .syntaxhighlighter td.code .container{ width:840px!important; } .syntaxhighlighter td.code{ overflow: scroll!important; } </style> <div class="crumb"> <p> <a href="http://blog.itpub.net/" rel="nofollow">首頁</a> > <a href="http://blog.itpub.net/appdevelop/" rel="nofollow">應用開發</a> > <a href="http://blog.itpub.net/itother/" rel="nofollow">IT綜合</a> > <a rel="nofollow">微前端(Micro Frontend ) 落地實施的一些具體例子</a> </p> </div> <!--main部分開始--> <div class="blog-main clearfix w1200"> <div class="preview-wrap"> <div class="preview-header"> <h1 class="preview-title ">微前端(Micro Frontend ) 落地實施的一些具體例子 </h1> <div class="mess"> <span class="label label-original">原創</span> <span style="margin: auto 10px auto 0px"><a href="http://blog.itpub.net/itother/" rel="nofollow">IT綜合</a></span> <span>作者：<a href="http://blog.itpub.net/24475491/" rel="nofollow">i042416</a></span> <span>時間：2021-07-29 15:10:49</span> <span class="dian"></span> <span class="icon-see"></span> <span class="dian"></span> <span class="icon-comment">0</span> <!--博主本人和管理員 顯示 開始--> <i class="superman"><a href="javascript:;" mid="2784083" onclick="blogObj.delDraft($(this))" rel="nofollow">刪除</a></i> <i class="superman"><a href="http://blog.itpub.net/blog/post/2784083/" rel="nofollow">編輯</a></i> <!--博主本人和管理員 顯示 結束--> </div> </div> <div class="preview-body windowH"> <div class="preview-main"> <div id="doc-content" style="padding: 0px;"> <textarea style="display: none">前文[微前端概述(Micro Frontends) 以及相比單體應用，微前端能帶來什麼好處](https://jerry.blog.csdn.net/article/details/119190124) 簡單介紹了微前端的概念，本文來看一個具體的應用例子。 [原文地址](https://martinfowler.com/articles/micro-frontends.html) 想象一個網站，客戶可以在其中訂購外賣食品。從表面上看，這是一個相當簡單的概念，但如果你想做得好，還有驚人的細節： * 應該有一個登陸頁面，客戶可以在其中瀏覽和搜尋餐館。 餐廳應該可以透過任意數量的屬性進行搜尋和過濾，包括價格、美食或客戶之前訂購的東西 * 每家餐廳都需要自己的頁面來顯示其選單項，並允許客戶選擇他們想吃的東西，包括折扣、餐飲優惠和特殊要求 * 客戶應該有一個個人資料頁面，他們可以在其中檢視他們的訂單歷史記錄、跟蹤交付和自定義他們的付款選項  每個頁面都有足夠的複雜性，我們可以輕鬆地證明每個頁面都有一個專門的團隊，並且每個團隊都應該能夠獨立於所有其他團隊在他們的頁面上工作。 他們應該能夠開發、測試、部署和維護他們的程式碼，而不必擔心與其他團隊發生衝突或協調。 但是，我們的客戶仍然應該看到一個無縫的網站。 在本文的其餘部分，我們將在需要示例程式碼或場景的任何地方使用此示例應用程式。 # Integration approaches 鑑於上面相當鬆散的定義，有許多方法可以合理地稱為微前端。 在本節中，我們將展示一些示例並討論它們的權衡。 所有這些方法都有一個相當自然的架構——通常應用程式中的每個頁面都有一個微前端，並且有一個容器應用程式，它： * 呈現常見的頁面元素，例如頁首和頁尾 * 解決跨領域問題，如身份驗證和導航 * 將各種微前端放在頁面上，並告訴每個微前端何時何地渲染自己  # Server-side template composition 我們從一種絕對不新穎的前端開發方法開始——用多個模板或片段在伺服器上渲染 HTML。 我們有一個 index.html ，它包含所有常見的頁面元素，然後使用伺服器端包含從片段 HTML 檔案中插入特定於頁面的內容： ```html <meta charset="utf-8"> <title>Feed me</title> <h1>Feed me</h1> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="renderer" content="webkit"> <title>微前端(Micro Frontend ) 落地實施的一些具體例子_ITPUB部落格</title> <meta name="keywords" content="應用開發,IT綜合"> <meta name="description" content="前文微前端概述(Micro Frontends) 以及相比單體應用，微前端能帶來什麼好處 簡單介紹了微前端的概念，本文來看一個具體的應用例子。 原文地址 想象一個網站，客戶可以在其中訂購外賣食品。從表面上看，這是一個相當簡單的概念，但如果你想做得好，還有驚人的細節： 應該有一個登陸頁面，客戶可以在其中瀏覽和搜尋餐館。 餐廳應該可以透過任意數量的屬性進行搜尋和過濾，包括價格、美食或客戶之前ITPUB部落格每天千篇餘篇博文新資訊，40多萬活躍博主，為IT技術人提供全面的IT資訊和交流互動的IT部落格平臺-中國專業的IT技術ITPUB部落格。"> <link rel="stylesheet" href="http://blog.itpub.net/layui/css/layui.css?v234"> <link rel="stylesheet" href="http://blog.itpub.net/css/base.css?v1.5"> <link rel="stylesheet" href="http://blog.itpub.net/css/zhuanlan.css?v=1.3"> <!--[if lt IE 9]> <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script> <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script> <![endif]--> <div></div> <div></div> <div></div> <div></div> <!--header部分開始--> <div class="blog-header"> <div class="w1200"> <a href="http://blog.itpub.net/" class="fl" rel="nofollow"><h1 class="logo">ITPub部落格</h1></a> <div class="nav fl"> <a href="http://www.itpub.net/" rel="nofollow">首頁</a> <a href="http://blog.itpub.net/" rel="nofollow">部落格</a> <a href="http://blog.itpub.net/column" rel="nofollow">專欄</a> <a href="http://edu.itpub.net/" rel="nofollow">學院</a> <a href="http://www.itpub.net/forum.php" rel="nofollow">社群</a> <a href="https://z.itpub.net/" rel="nofollow">技術棧</a> </div> <div class="fr"> <form action="http://blog.itpub.net/search/blog/" class="layui-form blog-search-wrap fl"> <input type="hidden" name="type" value="blog"> <input placeholder="搜尋" type="text" class="layui-input" name="keyword"> <button class="search-btn icon-blog"></button> </form> <a href="http://blog.itpub.net/blog/post/" class="layui-btn layui-btn-primary fl mlr30" target="_blank" rel="nofollow">發博</a> <!--登入前--> <div class="fl head-name" id="u_info"> </div> </div> </div> </div> <!--header部分結束--> <link rel="stylesheet" href="http://blog.itpub.net/markdown/css/editormd.css"> <link rel="stylesheet" href="http://blog.itpub.net/markdown/css/editormd.min.css"> <link rel="stylesheet" href="http://blog.itpub.net/markdown/css/editormd.preview.min.css"> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <link href="http://blog.itpub.net/ueditor/third-party/SyntaxHighlighter/shCoreDefault.css" rel="stylesheet" type="text/css"> <div></div> <link rel="stylesheet" href="http://g.alicdn.com/de/prismplayer/2.6.0/skins/default/aliplayer-min.css"> <div></div> <div></div> <div></div> <div></div> <div></div> <style> .code .container > textarea{ height:100%; } .translate{color: #9fa3a7 !important;font-size:12px !important;} .translate a{font-size:12px !important;color:#9fa3a7 !important;} .translate a:hover {font-size:12px !important;color:#f15142 !important;} .newslist{padding:10px 5px;height:20px !important;line-height:20px;overflow:hidden;text-overflow: ellipsis;white-space: nowrap;border-bottom:1px solid #eee} .fake-video-btn:hover{ cursor: pointer; border-style: solid; border-width: 2px; border-radius: 63px; border-color: #00c1de; } .it-player-wrap { display: flex; flex-direction: row; box-sizing: border-box; padding: 5px; margin-bottom: 20px; background: #FBFBFB; border: 1px solid #EFEFEF; border-radius: 4px; } .it-player-wrap .control { width: 50px; height: 50px; background-color: #57a5f2; margin-right: 15px; border-radius: 50%; } .it-player-wrap .control .play,.it-player-wrap .control .pause { background-size: 30px !important; color: #ffffff; width: 100%; height: 100%; } .it-player-wrap .control .play { background: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/PjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+PHN2ZyB0PSIxNTU5NjM3ODcxMTQ0IiBjbGFzcz0iaWNvbiIgc3R5bGU9IiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHAtaWQ9IjYwMjkiIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iMjAwIiBoZWlnaHQ9IjIwMCI+PGRlZnM+PHN0eWxlIHR5cGU9InRleHQvY3NzIj48L3N0eWxlPjwvZGVmcz48cGF0aCBkPSJNOTUzLjQ0NTA2NSA2MDguMjkwNzI0TDM1MC4yOTkyMSA5ODAuNjM0MjExQzI1Ni42NDExNTEgMTAzOC40NTUyNjMgMTgwLjY5MDc4OSA5OTcuNzk5ODM2IDE4MC42OTA3ODkgODkxLjkxNTAzM1YxMTUuNDg2NzExQzE4MC42OTA3ODkgOC42MzgyMjQgMjU2LjIxOTUzOS0zMS4yOTQ0NCAzNTAuMjM4OTggMjYuNzY3NTM0bDYwMy4yNjYzMTUgMzcyLjIyMzAyNmM5My42NTgwNTkgNTcuODIxMDUzIDk0LjA3OTY3MSAxNTEuMjM4MTkxIDAgMjA5LjMwMDE2NHoiIHAtaWQ9IjYwMzAiIGZpbGw9IiNmZmZmZmYiPjwvcGF0aD48L3N2Zz4=") no-repeat center; } .it-player-wrap .control .pause { background: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/PjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+PHN2ZyB0PSIxNTU5NjM3NzQ2MzAwIiBjbGFzcz0iaWNvbiIgc3R5bGU9IiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHAtaWQ9IjQ0NjciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iMjAwIiBoZWlnaHQ9IjIwMCI+PGRlZnM+PHN0eWxlIHR5cGU9InRleHQvY3NzIj48L3N0eWxlPjwvZGVmcz48cGF0aCBkPSJNNzM1LjkgNjQuOWMtNTEuMiAwLTk2IDQ0LjctOTYgOTUuOHY3MDIuNmMwIDUxLjEgNDQuOCA5NS44IDk2IDk1LjhzOTYtNDQuNyA5Ni05NS44VjE2MC43YzAtNTEuMS00NC44LTk1LjgtOTYtOTUuOHogbS00NDcuOCAwYy01MS4yIDAtOTYgNDQuNy05NiA5NS44djcwMi42YzAgNTEuMSA0NC44IDk1LjggOTYgOTUuOHM5Ni00NC43IDk2LTk1LjhWMTYwLjdjLTAuMS01MS4xLTQ0LjktOTUuOC05Ni05NS44eiIgcC1pZD0iNDQ2OCIgZmlsbD0iI2ZmZmZmZiI+PC9wYXRoPjwvc3ZnPg==") no-repeat center; } .it-player-wrap .box { flex: 1; } .it-player-wrap .box .info { font-family: PingFang-SC-Regular; font-size: 12px; color: #A8A8A8; text-align: left; line-height: 24px; margin: 0; } .it-player-wrap .box .info .size { display: inline-block; margin-right: 15px; } .it-player-wrap .progress-wrap { position: relative; margin-top: 15px; display: flex; flex-direction: row; align-items: center; } .it-player-wrap .progress-line,.it-player-wrap .progress-line-inner { position: absolute; height: 6px; width: 100%; background: #DDECFF; border-radius: 8.5px; } .it-player-wrap .progress-line-inner { background: #4C83E5 !important; } .it-player-wrap .progress-button { position: absolute; width: 50px; height: 20px; background: #4C83E5; box-shadow: 0 2px 4px 0 #A0C2FF; border-radius: 10px; top: -10px; font-family: PingFang-SC-Regular; font-size: 12px; color: #FFFFFF; text-align: center; line-height: 20px; cursor: pointer; } </style> <style> .crumb{ padding: 10px; margin-bottom: 10px; border-bottom: 1px solid rgba(238,238,238,0.4); } .crumb p{ width: 1200px; margin: 0 auto; } .newul{ line-height: 25px; } .new-item{ padding: 5px; display: block; width: 250px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } #doc-content img{ margin:none; display:initial; } .syntaxhighlighter{ width:890px; } .syntaxhighlighter td.code .line{ white-space: nowrap; } .syntaxhighlighter td.code .container{ width:840px!important; } .syntaxhighlighter td.code{ overflow: scroll!important; } </style> <div class="crumb"> <p> <a href="http://blog.itpub.net/" rel="nofollow">首頁</a> > <a href="http://blog.itpub.net/appdevelop/" rel="nofollow">應用開發</a> > <a href="http://blog.itpub.net/itother/" rel="nofollow">IT綜合</a> > <a rel="nofollow">微前端(Micro Frontend ) 落地實施的一些具體例子</a> </p> </div> <!--main部分開始--> <div class="blog-main clearfix w1200"> <div class="preview-wrap"> <div class="preview-header"> <h1 class="preview-title ">微前端(Micro Frontend ) 落地實施的一些具體例子 </h1> <div class="mess"> <span class="label label-original">原創</span> <span style="margin: auto 10px auto 0px"><a href="http://blog.itpub.net/itother/" rel="nofollow">IT綜合</a></span> <span>作者：<a href="http://blog.itpub.net/24475491/" rel="nofollow">i042416</a></span> <span>時間：2021-07-29 15:10:49</span> <span class="dian"></span> <span class="icon-see"></span> <span class="dian"></span> <span class="icon-comment">0</span> <!--博主本人和管理員 顯示 開始--> <i class="superman"><a href="javascript:;" mid="2784083" onclick="blogObj.delDraft($(this))" rel="nofollow">刪除</a></i> <i class="superman"><a href="http://blog.itpub.net/blog/post/2784083/" rel="nofollow">編輯</a></i> <!--博主本人和管理員 顯示 結束--> </div> </div> <div class="preview-body windowH"> <div class="preview-main"> <div id="doc-content" style="padding: 0px;"> <textarea style="display: none">前文[微前端概述(Micro Frontends) 以及相比單體應用，微前端能帶來什麼好處](https://jerry.blog.csdn.net/article/details/119190124) 簡單介紹了微前端的概念，本文來看一個具體的應用例子。 [原文地址](https://martinfowler.com/articles/micro-frontends.html) 想象一個網站，客戶可以在其中訂購外賣食品。從表面上看，這是一個相當簡單的概念，但如果你想做得好，還有驚人的細節： * 應該有一個登陸頁面，客戶可以在其中瀏覽和搜尋餐館。 餐廳應該可以透過任意數量的屬性進行搜尋和過濾，包括價格、美食或客戶之前訂購的東西 * 每家餐廳都需要自己的頁面來顯示其選單項，並允許客戶選擇他們想吃的東西，包括折扣、餐飲優惠和特殊要求 * 客戶應該有一個個人資料頁面，他們可以在其中檢視他們的訂單歷史記錄、跟蹤交付和自定義他們的付款選項  每個頁面都有足夠的複雜性，我們可以輕鬆地證明每個頁面都有一個專門的團隊，並且每個團隊都應該能夠獨立於所有其他團隊在他們的頁面上工作。 他們應該能夠開發、測試、部署和維護他們的程式碼，而不必擔心與其他團隊發生衝突或協調。 但是，我們的客戶仍然應該看到一個無縫的網站。 在本文的其餘部分，我們將在需要示例程式碼或場景的任何地方使用此示例應用程式。 # Integration approaches 鑑於上面相當鬆散的定義，有許多方法可以合理地稱為微前端。 在本節中，我們將展示一些示例並討論它們的權衡。 所有這些方法都有一個相當自然的架構——通常應用程式中的每個頁面都有一個微前端，並且有一個容器應用程式，它： * 呈現常見的頁面元素，例如頁首和頁尾 * 解決跨領域問題，如身份驗證和導航 * 將各種微前端放在頁面上，並告訴每個微前端何時何地渲染自己  # Server-side template composition 我們從一種絕對不新穎的前端開發方法開始——用多個模板或片段在伺服器上渲染 HTML。 我們有一個 index.html ，它包含所有常見的頁面元素，然後使用伺服器端包含從片段 HTML 檔案中插入特定於頁面的內容： ```html <meta charset="utf-8"> <title>Feed me</title> <h1>Feed me</h1> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="renderer" content="webkit"> <title>微前端(Micro Frontend ) 落地實施的一些具體例子_ITPUB部落格</title> <meta name="keywords" content="應用開發,IT綜合"> <meta name="description" content="前文微前端概述(Micro Frontends) 以及相比單體應用，微前端能帶來什麼好處 簡單介紹了微前端的概念，本文來看一個具體的應用例子。 原文地址 想象一個網站，客戶可以在其中訂購外賣食品。從表面上看，這是一個相當簡單的概念，但如果你想做得好，還有驚人的細節： 應該有一個登陸頁面，客戶可以在其中瀏覽和搜尋餐館。 餐廳應該可以透過任意數量的屬性進行搜尋和過濾，包括價格、美食或客戶之前ITPUB部落格每天千篇餘篇博文新資訊，40多萬活躍博主，為IT技術人提供全面的IT資訊和交流互動的IT部落格平臺-中國專業的IT技術ITPUB部落格。"> <link rel="stylesheet" href="http://blog.itpub.net/layui/css/layui.css?v234"> <link rel="stylesheet" href="http://blog.itpub.net/css/base.css?v1.5"> <link rel="stylesheet" href="http://blog.itpub.net/css/zhuanlan.css?v=1.3"> <!--[if lt IE 9]> <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script> <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script> <![endif]--> <div></div> <div></div> <div></div> <div></div> <!--header部分開始--> <div class="blog-header"> <div class="w1200"> <a href="http://blog.itpub.net/" class="fl" rel="nofollow"><h1 class="logo">ITPub部落格</h1></a> <div class="nav fl"> <a href="http://www.itpub.net/" rel="nofollow">首頁</a> <a href="http://blog.itpub.net/" rel="nofollow">部落格</a> <a href="http://blog.itpub.net/column" rel="nofollow">專欄</a> <a href="http://edu.itpub.net/" rel="nofollow">學院</a> <a href="http://www.itpub.net/forum.php" rel="nofollow">社群</a> <a href="https://z.itpub.net/" rel="nofollow">技術棧</a> </div> <div class="fr"> <form action="http://blog.itpub.net/search/blog/" class="layui-form blog-search-wrap fl"> <input type="hidden" name="type" value="blog"> <input placeholder="搜尋" type="text" class="layui-input" name="keyword"> <button class="search-btn icon-blog"></button> </form> <a href="http://blog.itpub.net/blog/post/" class="layui-btn layui-btn-primary fl mlr30" target="_blank" rel="nofollow">發博</a> <!--登入前--> <div class="fl head-name" id="u_info"> </div> </div> </div> </div> <!--header部分結束--> <link rel="stylesheet" href="http://blog.itpub.net/markdown/css/editormd.css"> <link rel="stylesheet" href="http://blog.itpub.net/markdown/css/editormd.min.css"> <link rel="stylesheet" href="http://blog.itpub.net/markdown/css/editormd.preview.min.css"> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <link href="http://blog.itpub.net/ueditor/third-party/SyntaxHighlighter/shCoreDefault.css" rel="stylesheet" type="text/css"> <div></div> <link rel="stylesheet" href="http://g.alicdn.com/de/prismplayer/2.6.0/skins/default/aliplayer-min.css"> <div></div> <div></div> <div></div> <div></div> <div></div> <style> .code .container > textarea{ height:100%; } .translate{color: #9fa3a7 !important;font-size:12px !important;} .translate a{font-size:12px !important;color:#9fa3a7 !important;} .translate a:hover {font-size:12px !important;color:#f15142 !important;} .newslist{padding:10px 5px;height:20px !important;line-height:20px;overflow:hidden;text-overflow: ellipsis;white-space: nowrap;border-bottom:1px solid #eee} .fake-video-btn:hover{ cursor: pointer; border-style: solid; border-width: 2px; border-radius: 63px; border-color: #00c1de; } .it-player-wrap { display: flex; flex-direction: row; box-sizing: border-box; padding: 5px; margin-bottom: 20px; background: #FBFBFB; border: 1px solid #EFEFEF; border-radius: 4px; } .it-player-wrap .control { width: 50px; height: 50px; background-color: #57a5f2; margin-right: 15px; border-radius: 50%; } .it-player-wrap .control .play,.it-player-wrap .control .pause { background-size: 30px !important; color: #ffffff; width: 100%; height: 100%; } .it-player-wrap .control .play { background: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/PjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+PHN2ZyB0PSIxNTU5NjM3ODcxMTQ0IiBjbGFzcz0iaWNvbiIgc3R5bGU9IiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHAtaWQ9IjYwMjkiIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iMjAwIiBoZWlnaHQ9IjIwMCI+PGRlZnM+PHN0eWxlIHR5cGU9InRleHQvY3NzIj48L3N0eWxlPjwvZGVmcz48cGF0aCBkPSJNOTUzLjQ0NTA2NSA2MDguMjkwNzI0TDM1MC4yOTkyMSA5ODAuNjM0MjExQzI1Ni42NDExNTEgMTAzOC40NTUyNjMgMTgwLjY5MDc4OSA5OTcuNzk5ODM2IDE4MC42OTA3ODkgODkxLjkxNTAzM1YxMTUuNDg2NzExQzE4MC42OTA3ODkgOC42MzgyMjQgMjU2LjIxOTUzOS0zMS4yOTQ0NCAzNTAuMjM4OTggMjYuNzY3NTM0bDYwMy4yNjYzMTUgMzcyLjIyMzAyNmM5My42NTgwNTkgNTcuODIxMDUzIDk0LjA3OTY3MSAxNTEuMjM4MTkxIDAgMjA5LjMwMDE2NHoiIHAtaWQ9IjYwMzAiIGZpbGw9IiNmZmZmZmYiPjwvcGF0aD48L3N2Zz4=") no-repeat center; } .it-player-wrap .control .pause { background: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/PjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+PHN2ZyB0PSIxNTU5NjM3NzQ2MzAwIiBjbGFzcz0iaWNvbiIgc3R5bGU9IiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHAtaWQ9IjQ0NjciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iMjAwIiBoZWlnaHQ9IjIwMCI+PGRlZnM+PHN0eWxlIHR5cGU9InRleHQvY3NzIj48L3N0eWxlPjwvZGVmcz48cGF0aCBkPSJNNzM1LjkgNjQuOWMtNTEuMiAwLTk2IDQ0LjctOTYgOTUuOHY3MDIuNmMwIDUxLjEgNDQuOCA5NS44IDk2IDk1LjhzOTYtNDQuNyA5Ni05NS44VjE2MC43YzAtNTEuMS00NC44LTk1LjgtOTYtOTUuOHogbS00NDcuOCAwYy01MS4yIDAtOTYgNDQuNy05NiA5NS44djcwMi42YzAgNTEuMSA0NC44IDk1LjggOTYgOTUuOHM5Ni00NC43IDk2LTk1LjhWMTYwLjdjLTAuMS01MS4xLTQ0LjktOTUuOC05Ni05NS44eiIgcC1pZD0iNDQ2OCIgZmlsbD0iI2ZmZmZmZiI+PC9wYXRoPjwvc3ZnPg==") no-repeat center; } .it-player-wrap .box { flex: 1; } .it-player-wrap .box .info { font-family: PingFang-SC-Regular; font-size: 12px; color: #A8A8A8; text-align: left; line-height: 24px; margin: 0; } .it-player-wrap .box .info .size { display: inline-block; margin-right: 15px; } .it-player-wrap .progress-wrap { position: relative; margin-top: 15px; display: flex; flex-direction: row; align-items: center; } .it-player-wrap .progress-line,.it-player-wrap .progress-line-inner { position: absolute; height: 6px; width: 100%; background: #DDECFF; border-radius: 8.5px; } .it-player-wrap .progress-line-inner { background: #4C83E5 !important; } .it-player-wrap .progress-button { position: absolute; width: 50px; height: 20px; background: #4C83E5; box-shadow: 0 2px 4px 0 #A0C2FF; border-radius: 10px; top: -10px; font-family: PingFang-SC-Regular; font-size: 12px; color: #FFFFFF; text-align: center; line-height: 20px; cursor: pointer; } </style> <style> .crumb{ padding: 10px; margin-bottom: 10px; border-bottom: 1px solid rgba(238,238,238,0.4); } .crumb p{ width: 1200px; margin: 0 auto; } .newul{ line-height: 25px; } .new-item{ padding: 5px; display: block; width: 250px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } #doc-content img{ margin:none; display:initial; } .syntaxhighlighter{ width:890px; } .syntaxhighlighter td.code .line{ white-space: nowrap; } .syntaxhighlighter td.code .container{ width:840px!important; } .syntaxhighlighter td.code{ overflow: scroll!important; } </style> <div class="crumb"> <p> <a href="http://blog.itpub.net/" rel="nofollow">首頁</a> > <a href="http://blog.itpub.net/appdevelop/" rel="nofollow">應用開發</a> > <a href="http://blog.itpub.net/itother/" rel="nofollow">IT綜合</a> > <a rel="nofollow">微前端(Micro Frontend ) 落地實施的一些具體例子</a> </p> </div> <!--main部分開始--> <div class="blog-main clearfix w1200"> <div class="preview-wrap"> <div class="preview-header"> <h1 class="preview-title ">微前端(Micro Frontend ) 落地實施的一些具體例子 </h1> <div class="mess"> <span class="label label-original">原創</span> <span style="margin: auto 10px auto 0px"><a href="http://blog.itpub.net/itother/" rel="nofollow">IT綜合</a></span> <span>作者：<a href="http://blog.itpub.net/24475491/" rel="nofollow">i042416</a></span> <span>時間：2021-07-29 15:10:49</span> <span class="dian"></span> <span class="icon-see"></span> <span class="dian"></span> <span class="icon-comment">0</span> <!--博主本人和管理員 顯示 開始--> <i class="superman"><a href="javascript:;" mid="2784083" onclick="blogObj.delDraft($(this))" rel="nofollow">刪除</a></i> <i class="superman"><a href="http://blog.itpub.net/blog/post/2784083/" rel="nofollow">編輯</a></i> <!--博主本人和管理員 顯示 結束--> </div> </div> <div class="preview-body windowH"> <div class="preview-main"> <div id="doc-content" style="padding: 0px;"> <textarea style="display: none">前文[微前端概述(Micro Frontends) 以及相比單體應用，微前端能帶來什麼好處](https://jerry.blog.csdn.net/article/details/119190124) 簡單介紹了微前端的概念，本文來看一個具體的應用例子。 [原文地址](https://martinfowler.com/articles/micro-frontends.html) 想象一個網站，客戶可以在其中訂購外賣食品。從表面上看，這是一個相當簡單的概念，但如果你想做得好，還有驚人的細節： * 應該有一個登陸頁面，客戶可以在其中瀏覽和搜尋餐館。 餐廳應該可以透過任意數量的屬性進行搜尋和過濾，包括價格、美食或客戶之前訂購的東西 * 每家餐廳都需要自己的頁面來顯示其選單項，並允許客戶選擇他們想吃的東西，包括折扣、餐飲優惠和特殊要求 * 客戶應該有一個個人資料頁面，他們可以在其中檢視他們的訂單歷史記錄、跟蹤交付和自定義他們的付款選項  每個頁面都有足夠的複雜性，我們可以輕鬆地證明每個頁面都有一個專門的團隊，並且每個團隊都應該能夠獨立於所有其他團隊在他們的頁面上工作。 他們應該能夠開發、測試、部署和維護他們的程式碼，而不必擔心與其他團隊發生衝突或協調。 但是，我們的客戶仍然應該看到一個無縫的網站。 在本文的其餘部分，我們將在需要示例程式碼或場景的任何地方使用此示例應用程式。 # Integration approaches 鑑於上面相當鬆散的定義，有許多方法可以合理地稱為微前端。 在本節中，我們將展示一些示例並討論它們的權衡。 所有這些方法都有一個相當自然的架構——通常應用程式中的每個頁面都有一個微前端，並且有一個容器應用程式，它： * 呈現常見的頁面元素，例如頁首和頁尾 * 解決跨領域問題，如身份驗證和導航 * 將各種微前端放在頁面上，並告訴每個微前端何時何地渲染自己  # Server-side template composition 我們從一種絕對不新穎的前端開發方法開始——用多個模板或片段在伺服器上渲染 HTML。 我們有一個 index.html ，它包含所有常見的頁面元素，然後使用伺服器端包含從片段 HTML 檔案中插入特定於頁面的內容： ```html <meta charset="utf-8"> <title>Feed me</title> <h1>Feed me</h1> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="renderer" content="webkit"> <title>微前端(Micro Frontend ) 落地實施的一些具體例子_ITPUB部落格</title> <meta name="keywords" content="應用開發,IT綜合"> <meta name="description" content="前文微前端概述(Micro Frontends) 以及相比單體應用，微前端能帶來什麼好處 簡單介紹了微前端的概念，本文來看一個具體的應用例子。 原文地址 想象一個網站，客戶可以在其中訂購外賣食品。從表面上看，這是一個相當簡單的概念，但如果你想做得好，還有驚人的細節： 應該有一個登陸頁面，客戶可以在其中瀏覽和搜尋餐館。 餐廳應該可以透過任意數量的屬性進行搜尋和過濾，包括價格、美食或客戶之前ITPUB部落格每天千篇餘篇博文新資訊，40多萬活躍博主，為IT技術人提供全面的IT資訊和交流互動的IT部落格平臺-中國專業的IT技術ITPUB部落格。"> <link rel="stylesheet" href="http://blog.itpub.net/layui/css/layui.css?v234"> <link rel="stylesheet" href="http://blog.itpub.net/css/base.css?v1.5"> <link rel="stylesheet" href="http://blog.itpub.net/css/zhuanlan.css?v=1.3"> <!--[if lt IE 9]> <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script> <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script> <![endif]--> <div></div> <div></div> <div></div> <div></div> <!--header部分開始--> <div class="blog-header"> <div class="w1200"> <a href="http://blog.itpub.net/" class="fl" rel="nofollow"><h1 class="logo">ITPub部落格</h1></a> <div class="nav fl"> <a href="http://www.itpub.net/" rel="nofollow">首頁</a> <a href="http://blog.itpub.net/" rel="nofollow">部落格</a> <a href="http://blog.itpub.net/column" rel="nofollow">專欄</a> <a href="http://edu.itpub.net/" rel="nofollow">學院</a> <a href="http://www.itpub.net/forum.php" rel="nofollow">社群</a> <a href="https://z.itpub.net/" rel="nofollow">技術棧</a> </div> <div class="fr"> <form action="http://blog.itpub.net/search/blog/" class="layui-form blog-search-wrap fl"> <input type="hidden" name="type" value="blog"> <input placeholder="搜尋" type="text" class="layui-input" name="keyword"> <button class="search-btn icon-blog"></button> </form> <a href="http://blog.itpub.net/blog/post/" class="layui-btn layui-btn-primary fl mlr30" target="_blank" rel="nofollow">發博</a> <!--登入前--> <div class="fl head-name" id="u_info"> </div> </div> </div> </div> <!--header部分結束--> <link rel="stylesheet" href="http://blog.itpub.net/markdown/css/editormd.css"> <link rel="stylesheet" href="http://blog.itpub.net/markdown/css/editormd.min.css"> <link rel="stylesheet" href="http://blog.itpub.net/markdown/css/editormd.preview.min.css"> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <link href="http://blog.itpub.net/ueditor/third-party/SyntaxHighlighter/shCoreDefault.css" rel="stylesheet" type="text/css"> <div></div> <link rel="stylesheet" href="http://g.alicdn.com/de/prismplayer/2.6.0/skins/default/aliplayer-min.css"> <div></div> <div></div> <div></div> <div></div> <div></div> <style> .code .container > textarea{ height:100%; } .translate{color: #9fa3a7 !important;font-size:12px !important;} .translate a{font-size:12px !important;color:#9fa3a7 !important;} .translate a:hover {font-size:12px !important;color:#f15142 !important;} .newslist{padding:10px 5px;height:20px !important;line-height:20px;overflow:hidden;text-overflow: ellipsis;white-space: nowrap;border-bottom:1px solid #eee} .fake-video-btn:hover{ cursor: pointer; border-style: solid; border-width: 2px; border-radius: 63px; border-color: #00c1de; } .it-player-wrap { display: flex; flex-direction: row; box-sizing: border-box; padding: 5px; margin-bottom: 20px; background: #FBFBFB; border: 1px solid #EFEFEF; border-radius: 4px; } .it-player-wrap .control { width: 50px; height: 50px; background-color: #57a5f2; margin-right: 15px; border-radius: 50%; } .it-player-wrap .control .play,.it-player-wrap .control .pause { background-size: 30px !important; color: #ffffff; width: 100%; height: 100%; } .it-player-wrap .control .play { background: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/PjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+PHN2ZyB0PSIxNTU5NjM3ODcxMTQ0IiBjbGFzcz0iaWNvbiIgc3R5bGU9IiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHAtaWQ9IjYwMjkiIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iMjAwIiBoZWlnaHQ9IjIwMCI+PGRlZnM+PHN0eWxlIHR5cGU9InRleHQvY3NzIj48L3N0eWxlPjwvZGVmcz48cGF0aCBkPSJNOTUzLjQ0NTA2NSA2MDguMjkwNzI0TDM1MC4yOTkyMSA5ODAuNjM0MjExQzI1Ni42NDExNTEgMTAzOC40NTUyNjMgMTgwLjY5MDc4OSA5OTcuNzk5ODM2IDE4MC42OTA3ODkgODkxLjkxNTAzM1YxMTUuNDg2NzExQzE4MC42OTA3ODkgOC42MzgyMjQgMjU2LjIxOTUzOS0zMS4yOTQ0NCAzNTAuMjM4OTggMjYuNzY3NTM0bDYwMy4yNjYzMTUgMzcyLjIyMzAyNmM5My42NTgwNTkgNTcuODIxMDUzIDk0LjA3OTY3MSAxNTEuMjM4MTkxIDAgMjA5LjMwMDE2NHoiIHAtaWQ9IjYwMzAiIGZpbGw9IiNmZmZmZmYiPjwvcGF0aD48L3N2Zz4=") no-repeat center; } .it-player-wrap .control .pause { background: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/PjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+PHN2ZyB0PSIxNTU5NjM3NzQ2MzAwIiBjbGFzcz0iaWNvbiIgc3R5bGU9IiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHAtaWQ9IjQ0NjciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iMjAwIiBoZWlnaHQ9IjIwMCI+PGRlZnM+PHN0eWxlIHR5cGU9InRleHQvY3NzIj48L3N0eWxlPjwvZGVmcz48cGF0aCBkPSJNNzM1LjkgNjQuOWMtNTEuMiAwLTk2IDQ0LjctOTYgOTUuOHY3MDIuNmMwIDUxLjEgNDQuOCA5NS44IDk2IDk1LjhzOTYtNDQuNyA5Ni05NS44VjE2MC43YzAtNTEuMS00NC44LTk1LjgtOTYtOTUuOHogbS00NDcuOCAwYy01MS4yIDAtOTYgNDQuNy05NiA5NS44djcwMi42YzAgNTEuMSA0NC44IDk1LjggOTYgOTUuOHM5Ni00NC43IDk2LTk1LjhWMTYwLjdjLTAuMS01MS4xLTQ0LjktOTUuOC05Ni05NS44eiIgcC1pZD0iNDQ2OCIgZmlsbD0iI2ZmZmZmZiI+PC9wYXRoPjwvc3ZnPg==") no-repeat center; } .it-player-wrap .box { flex: 1; } .it-player-wrap .box .info { font-family: PingFang-SC-Regular; font-size: 12px; color: #A8A8A8; text-align: left; line-height: 24px; margin: 0; } .it-player-wrap .box .info .size { display: inline-block; margin-right: 15px; } .it-player-wrap .progress-wrap { position: relative; margin-top: 15px; display: flex; flex-direction: row; align-items: center; } .it-player-wrap .progress-line,.it-player-wrap .progress-line-inner { position: absolute; height: 6px; width: 100%; background: #DDECFF; border-radius: 8.5px; } .it-player-wrap .progress-line-inner { background: #4C83E5 !important; } .it-player-wrap .progress-button { position: absolute; width: 50px; height: 20px; background: #4C83E5; box-shadow: 0 2px 4px 0 #A0C2FF; border-radius: 10px; top: -10px; font-family: PingFang-SC-Regular; font-size: 12px; color: #FFFFFF; text-align: center; line-height: 20px; cursor: pointer; } </style> <style> .crumb{ padding: 10px; margin-bottom: 10px; border-bottom: 1px solid rgba(238,238,238,0.4); } .crumb p{ width: 1200px; margin: 0 auto; } .newul{ line-height: 25px; } .new-item{ padding: 5px; display: block; width: 250px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } #doc-content img{ margin:none; display:initial; } .syntaxhighlighter{ width:890px; } .syntaxhighlighter td.code .line{ white-space: nowrap; } .syntaxhighlighter td.code .container{ width:840px!important; } .syntaxhighlighter td.code{ overflow: scroll!important; } </style> <div class="crumb"> <p> <a href="http://blog.itpub.net/" rel="nofollow">首頁</a> > <a href="http://blog.itpub.net/appdevelop/" rel="nofollow">應用開發</a> > <a href="http://blog.itpub.net/itother/" rel="nofollow">IT綜合</a> > <a rel="nofollow">微前端(Micro Frontend ) 落地實施的一些具體例子</a> </p> </div> <!--main部分開始--> <div class="blog-main clearfix w1200"> <div class="preview-wrap"> <div class="preview-header"> <h1 class="preview-title ">微前端(Micro Frontend ) 落地實施的一些具體例子 </h1> <div class="mess"> <span class="label label-original">原創</span> <span style="margin: auto 10px auto 0px"><a href="http://blog.itpub.net/itother/" rel="nofollow">IT綜合</a></span> <span>作者：<a href="http://blog.itpub.net/24475491/" rel="nofollow">i042416</a></span> <span>時間：2021-07-29 15:10:49</span> <span class="dian"></span> <span class="icon-see"></span> <span class="dian"></span> <span class="icon-comment">0</span> <!--博主本人和管理員 顯示 開始--> <i class="superman"><a href="javascript:;" mid="2784083" onclick="blogObj.delDraft($(this))" rel="nofollow">刪除</a></i> <i class="superman"><a href="http://blog.itpub.net/blog/post/2784083/" rel="nofollow">編輯</a></i> <!--博主本人和管理員 顯示 結束--> </div> </div> <div class="preview-body windowH"> <div class="preview-main"> <div id="doc-content" style="padding: 0px;"> <textarea style="display: none">前文[微前端概述(Micro Frontends) 以及相比單體應用，微前端能帶來什麼好處](https://jerry.blog.csdn.net/article/details/119190124) 簡單介紹了微前端的概念，本文來看一個具體的應用例子。 [原文地址](https://martinfowler.com/articles/micro-frontends.html) 想象一個網站，客戶可以在其中訂購外賣食品。從表面上看，這是一個相當簡單的概念，但如果你想做得好，還有驚人的細節： * 應該有一個登陸頁面，客戶可以在其中瀏覽和搜尋餐館。 餐廳應該可以透過任意數量的屬性進行搜尋和過濾，包括價格、美食或客戶之前訂購的東西 * 每家餐廳都需要自己的頁面來顯示其選單項，並允許客戶選擇他們想吃的東西，包括折扣、餐飲優惠和特殊要求 * 客戶應該有一個個人資料頁面，他們可以在其中檢視他們的訂單歷史記錄、跟蹤交付和自定義他們的付款選項  每個頁面都有足夠的複雜性，我們可以輕鬆地證明每個頁面都有一個專門的團隊，並且每個團隊都應該能夠獨立於所有其他團隊在他們的頁面上工作。 他們應該能夠開發、測試、部署和維護他們的程式碼，而不必擔心與其他團隊發生衝突或協調。 但是，我們的客戶仍然應該看到一個無縫的網站。 在本文的其餘部分，我們將在需要示例程式碼或場景的任何地方使用此示例應用程式。 # Integration approaches 鑑於上面相當鬆散的定義，有許多方法可以合理地稱為微前端。 在本節中，我們將展示一些示例並討論它們的權衡。 所有這些方法都有一個相當自然的架構——通常應用程式中的每個頁面都有一個微前端，並且有一個容器應用程式，它： * 呈現常見的頁面元素，例如頁首和頁尾 * 解決跨領域問題，如身份驗證和導航 * 將各種微前端放在頁面上，並告訴每個微前端何時何地渲染自己  # Server-side template composition 我們從一種絕對不新穎的前端開發方法開始——用多個模板或片段在伺服器上渲染 HTML。 我們有一個 index.html ，它包含所有常見的頁面元素，然後使用伺服器端包含從片段 HTML 檔案中插入特定於頁面的內容： ```html <meta charset="utf-8"> <title>Feed me</title> <h1>Feed me</h1> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="renderer" content="webkit"> <title>微前端(Micro Frontend ) 落地實施的一些具體例子_ITPUB部落格</title> <meta name="keywords" content="應用開發,IT綜合"> <meta name="description" content="前文微前端概述(Micro Frontends) 以及相比單體應用，微前端能帶來什麼好處 簡單介紹了微前端的概念，本文來看一個具體的應用例子。 原文地址 想象一個網站，客戶可以在其中訂購外賣食品。從表面上看，這是一個相當簡單的概念，但如果你想做得好，還有驚人的細節： 應該有一個登陸頁面，客戶可以在其中瀏覽和搜尋餐館。 餐廳應該可以透過任意數量的屬性進行搜尋和過濾，包括價格、美食或客戶之前ITPUB部落格每天千篇餘篇博文新資訊，40多萬活躍博主，為IT技術人提供全面的IT資訊和交流互動的IT部落格平臺-中國專業的IT技術ITPUB部落格。"> <link rel="stylesheet" href="http://blog.itpub.net/layui/css/layui.css?v234"> <link rel="stylesheet" href="http://blog.itpub.net/css/base.css?v1.5"> <link rel="stylesheet" href="http://blog.itpub.net/css/zhuanlan.css?v=1.3"> <!--[if lt IE 9]> <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script> <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script> <![endif]--> <div></div> <div></div> <div></div> <div></div> <!--header部分開始--> <div class="blog-header"> <div class="w1200"> <a href="http://blog.itpub.net/" class="fl" rel="nofollow"><h1 class="logo">ITPub部落格</h1></a> <div class="nav fl"> <a href="http://www.itpub.net/" rel="nofollow">首頁</a> <a href="http://blog.itpub.net/" rel="nofollow">部落格</a> <a href="http://blog.itpub.net/column" rel="nofollow">專欄</a> <a href="http://edu.itpub.net/" rel="nofollow">學院</a> <a href="http://www.itpub.net/forum.php" rel="nofollow">社群</a> <a href="https://z.itpub.net/" rel="nofollow">技術棧</a> </div> <div class="fr"> <form action="http://blog.itpub.net/search/blog/" class="layui-form blog-search-wrap fl"> <input type="hidden" name="type" value="blog"> <input placeholder="搜尋" type="text" class="layui-input" name="keyword"> <button class="search-btn icon-blog"></button> </form> <a href="http://blog.itpub.net/blog/post/" class="layui-btn layui-btn-primary fl mlr30" target="_blank" rel="nofollow">發博</a> <!--登入前--> <div class="fl head-name" id="u_info"> </div> </div> </div> </div> <!--header部分結束--> <link rel="stylesheet" href="http://blog.itpub.net/markdown/css/editormd.css"> <link rel="stylesheet" href="http://blog.itpub.net/markdown/css/editormd.min.css"> <link rel="stylesheet" href="http://blog.itpub.net/markdown/css/editormd.preview.min.css"> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <link href="http://blog.itpub.net/ueditor/third-party/SyntaxHighlighter/shCoreDefault.css" rel="stylesheet" type="text/css"> <div></div> <link rel="stylesheet" href="http://g.alicdn.com/de/prismplayer/2.6.0/skins/default/aliplayer-min.css"> <div></div> <div></div> <div></div> <div></div> <div></div> <style> .code .container > textarea{ height:100%; } .translate{color: #9fa3a7 !important;font-size:12px !important;} .translate a{font-size:12px !important;color:#9fa3a7 !important;} .translate a:hover {font-size:12px !important;color:#f15142 !important;} .newslist{padding:10px 5px;height:20px !important;line-height:20px;overflow:hidden;text-overflow: ellipsis;white-space: nowrap;border-bottom:1px solid #eee} .fake-video-btn:hover{ cursor: pointer; border-style: solid; border-width: 2px; border-radius: 63px; border-color: #00c1de; } .it-player-wrap { display: flex; flex-direction: row; box-sizing: border-box; padding: 5px; margin-bottom: 20px; background: #FBFBFB; border: 1px solid #EFEFEF; border-radius: 4px; } .it-player-wrap .control { width: 50px; height: 50px; background-color: #57a5f2; margin-right: 15px; border-radius: 50%; } .it-player-wrap .control .play,.it-player-wrap .control .pause { background-size: 30px !important; color: #ffffff; width: 100%; height: 100%; } .it-player-wrap .control .play { background: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/PjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+PHN2ZyB0PSIxNTU5NjM3ODcxMTQ0IiBjbGFzcz0iaWNvbiIgc3R5bGU9IiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHAtaWQ9IjYwMjkiIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iMjAwIiBoZWlnaHQ9IjIwMCI+PGRlZnM+PHN0eWxlIHR5cGU9InRleHQvY3NzIj48L3N0eWxlPjwvZGVmcz48cGF0aCBkPSJNOTUzLjQ0NTA2NSA2MDguMjkwNzI0TDM1MC4yOTkyMSA5ODAuNjM0MjExQzI1Ni42NDExNTEgMTAzOC40NTUyNjMgMTgwLjY5MDc4OSA5OTcuNzk5ODM2IDE4MC42OTA3ODkgODkxLjkxNTAzM1YxMTUuNDg2NzExQzE4MC42OTA3ODkgOC42MzgyMjQgMjU2LjIxOTUzOS0zMS4yOTQ0NCAzNTAuMjM4OTggMjYuNzY3NTM0bDYwMy4yNjYzMTUgMzcyLjIyMzAyNmM5My42NTgwNTkgNTcuODIxMDUzIDk0LjA3OTY3MSAxNTEuMjM4MTkxIDAgMjA5LjMwMDE2NHoiIHAtaWQ9IjYwMzAiIGZpbGw9IiNmZmZmZmYiPjwvcGF0aD48L3N2Zz4=") no-repeat center; } .it-player-wrap .control .pause { background: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/PjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+PHN2ZyB0PSIxNTU5NjM3NzQ2MzAwIiBjbGFzcz0iaWNvbiIgc3R5bGU9IiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHAtaWQ9IjQ0NjciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iMjAwIiBoZWlnaHQ9IjIwMCI+PGRlZnM+PHN0eWxlIHR5cGU9InRleHQvY3NzIj48L3N0eWxlPjwvZGVmcz48cGF0aCBkPSJNNzM1LjkgNjQuOWMtNTEuMiAwLTk2IDQ0LjctOTYgOTUuOHY3MDIuNmMwIDUxLjEgNDQuOCA5NS44IDk2IDk1LjhzOTYtNDQuNyA5Ni05NS44VjE2MC43YzAtNTEuMS00NC44LTk1LjgtOTYtOTUuOHogbS00NDcuOCAwYy01MS4yIDAtOTYgNDQuNy05NiA5NS44djcwMi42YzAgNTEuMSA0NC44IDk1LjggOTYgOTUuOHM5Ni00NC43IDk2LTk1LjhWMTYwLjdjLTAuMS01MS4xLTQ0LjktOTUuOC05Ni05NS44eiIgcC1pZD0iNDQ2OCIgZmlsbD0iI2ZmZmZmZiI+PC9wYXRoPjwvc3ZnPg==") no-repeat center; } .it-player-wrap .box { flex: 1; } .it-player-wrap .box .info { font-family: PingFang-SC-Regular; font-size: 12px; color: #A8A8A8; text-align: left; line-height: 24px; margin: 0; } .it-player-wrap .box .info .size { display: inline-block; margin-right: 15px; } .it-player-wrap .progress-wrap { position: relative; margin-top: 15px; display: flex; flex-direction: row; align-items: center; } .it-player-wrap .progress-line,.it-player-wrap .progress-line-inner { position: absolute; height: 6px; width: 100%; background: #DDECFF; border-radius: 8.5px; } .it-player-wrap .progress-line-inner { background: #4C83E5 !important; } .it-player-wrap .progress-button { position: absolute; width: 50px; height: 20px; background: #4C83E5; box-shadow: 0 2px 4px 0 #A0C2FF; border-radius: 10px; top: -10px; font-family: PingFang-SC-Regular; font-size: 12px; color: #FFFFFF; text-align: center; line-height: 20px; cursor: pointer; } </style> <style> .crumb{ padding: 10px; margin-bottom: 10px; border-bottom: 1px solid rgba(238,238,238,0.4); } .crumb p{ width: 1200px; margin: 0 auto; } .newul{ line-height: 25px; } .new-item{ padding: 5px; display: block; width: 250px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } #doc-content img{ margin:none; display:initial; } .syntaxhighlighter{ width:890px; } .syntaxhighlighter td.code .line{ white-space: nowrap; } .syntaxhighlighter td.code .container{ width:840px!important; } .syntaxhighlighter td.code{ overflow: scroll!important; } </style> <div class="crumb"> <p> <a href="http://blog.itpub.net/" rel="nofollow">首頁</a> > <a href="http://blog.itpub.net/appdevelop/" rel="nofollow">應用開發</a> > <a href="http://blog.itpub.net/itother/" rel="nofollow">IT綜合</a> > <a rel="nofollow">微前端(Micro Frontend ) 落地實施的一些具體例子</a> </p> </div> <!--main部分開始--> <div class="blog-main clearfix w1200"> <div class="preview-wrap"> <div class="preview-header"> <h1 class="preview-title ">微前端(Micro Frontend ) 落地實施的一些具體例子 </h1> <div class="mess"> <span class="label label-original">原創</span> <span style="margin: auto 10px auto 0px"><a href="http://blog.itpub.net/itother/" rel="nofollow">IT綜合</a></span> <span>作者：<a href="http://blog.itpub.net/24475491/" rel="nofollow">i042416</a></span> <span>時間：2021-07-29 15:10:49</span> <span class="dian"></span> <span class="icon-see"></span> <span class="dian"></span> <span class="icon-comment">0</span> <!--博主本人和管理員 顯示 開始--> <i class="superman"><a href="javascript:;" mid="2784083" onclick="blogObj.delDraft($(this))" rel="nofollow">刪除</a></i> <i class="superman"><a href="http://blog.itpub.net/blog/post/2784083/" rel="nofollow">編輯</a></i> <!--博主本人和管理員 顯示 結束--> </div> </div> <div class="preview-body windowH"> <div class="preview-main"> <div id="doc-content" style="padding: 0px;"> <textarea style="display: none">前文[微前端概述(Micro Frontends) 以及相比單體應用，微前端能帶來什麼好處](https://jerry.blog.csdn.net/article/details/119190124) 簡單介紹了微前端的概念，本文來看一個具體的應用例子。 [原文地址](https://martinfowler.com/articles/micro-frontends.html) 想象一個網站，客戶可以在其中訂購外賣食品。從表面上看，這是一個相當簡單的概念，但如果你想做得好，還有驚人的細節： * 應該有一個登陸頁面，客戶可以在其中瀏覽和搜尋餐館。 餐廳應該可以透過任意數量的屬性進行搜尋和過濾，包括價格、美食或客戶之前訂購的東西 * 每家餐廳都需要自己的頁面來顯示其選單項，並允許客戶選擇他們想吃的東西，包括折扣、餐飲優惠和特殊要求 * 客戶應該有一個個人資料頁面，他們可以在其中檢視他們的訂單歷史記錄、跟蹤交付和自定義他們的付款選項  每個頁面都有足夠的複雜性，我們可以輕鬆地證明每個頁面都有一個專門的團隊，並且每個團隊都應該能夠獨立於所有其他團隊在他們的頁面上工作。 他們應該能夠開發、測試、部署和維護他們的程式碼，而不必擔心與其他團隊發生衝突或協調。 但是，我們的客戶仍然應該看到一個無縫的網站。 在本文的其餘部分，我們將在需要示例程式碼或場景的任何地方使用此示例應用程式。 # Integration approaches 鑑於上面相當鬆散的定義，有許多方法可以合理地稱為微前端。 在本節中，我們將展示一些示例並討論它們的權衡。 所有這些方法都有一個相當自然的架構——通常應用程式中的每個頁面都有一個微前端，並且有一個容器應用程式，它： * 呈現常見的頁面元素，例如頁首和頁尾 * 解決跨領域問題，如身份驗證和導航 * 將各種微前端放在頁面上，並告訴每個微前端何時何地渲染自己  # Server-side template composition 我們從一種絕對不新穎的前端開發方法開始——用多個模板或片段在伺服器上渲染 HTML。 我們有一個 index.html ，它包含所有常見的頁面元素，然後使用伺服器端包含從片段 HTML 檔案中插入特定於頁面的內容： ```html <meta charset="utf-8"> <title>Feed me</title> <h1>Feed me</h1> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="renderer" content="webkit"> <title>微前端(Micro Frontend ) 落地實施的一些具體例子_ITPUB部落格</title> <meta name="keywords" content="應用開發,IT綜合"> <meta name="description" content="前文微前端概述(Micro Frontends) 以及相比單體應用，微前端能帶來什麼好處 簡單介紹了微前端的概念，本文來看一個具體的應用例子。 原文地址 想象一個網站，客戶可以在其中訂購外賣食品。從表面上看，這是一個相當簡單的概念，但如果你想做得好，還有驚人的細節： 應該有一個登陸頁面，客戶可以在其中瀏覽和搜尋餐館。 餐廳應該可以透過任意數量的屬性進行搜尋和過濾，包括價格、美食或客戶之前ITPUB部落格每天千篇餘篇博文新資訊，40多萬活躍博主，為IT技術人提供全面的IT資訊和交流互動的IT部落格平臺-中國專業的IT技術ITPUB部落格。"> <link rel="stylesheet" href="http://blog.itpub.net/layui/css/layui.css?v234"> <link rel="stylesheet" href="http://blog.itpub.net/css/base.css?v1.5"> <link rel="stylesheet" href="http://blog.itpub.net/css/zhuanlan.css?v=1.3"> <!--[if lt IE 9]> <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script> <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script> <![endif]--> <div></div> <div></div> <div></div> <div></div> <!--header部分開始--> <div class="blog-header"> <div class="w1200"> <a href="http://blog.itpub.net/" class="fl" rel="nofollow"><h1 class="logo">ITPub部落格</h1></a> <div class="nav fl"> <a href="http://www.itpub.net/" rel="nofollow">首頁</a> <a href="http://blog.itpub.net/" rel="nofollow">部落格</a> <a href="http://blog.itpub.net/column" rel="nofollow">專欄</a> <a href="http://edu.itpub.net/" rel="nofollow">學院</a> <a href="http://www.itpub.net/forum.php" rel="nofollow">社群</a> <a href="https://z.itpub.net/" rel="nofollow">技術棧</a> </div> <div class="fr"> <form action="http://blog.itpub.net/search/blog/" class="layui-form blog-search-wrap fl"> <input type="hidden" name="type" value="blog"> <input placeholder="搜尋" type="text" class="layui-input" name="keyword"> <button class="search-btn icon-blog"></button> </form> <a href="http://blog.itpub.net/blog/post/" class="layui-btn layui-btn-primary fl mlr30" target="_blank" rel="nofollow">發博</a> <!--登入前--> <div class="fl head-name" id="u_info"> </div> </div> </div> </div> <!--header部分結束--> <link rel="stylesheet" href="http://blog.itpub.net/markdown/css/editormd.css"> <link rel="stylesheet" href="http://blog.itpub.net/markdown/css/editormd.min.css"> <link rel="stylesheet" href="http://blog.itpub.net/markdown/css/editormd.preview.min.css"> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <link href="http://blog.itpub.net/ueditor/third-party/SyntaxHighlighter/shCoreDefault.css" rel="stylesheet" type="text/css"> <div></div> <link rel="stylesheet" href="http://g.alicdn.com/de/prismplayer/2.6.0/skins/default/aliplayer-min.css"> <div></div> <div></div> <div></div> <div></div> <div></div> <style> .code .container > textarea{ height:100%; } .translate{color: #9fa3a7 !important;font-size:12px !important;} .translate a{font-size:12px !important;color:#9fa3a7 !important;} .translate a:hover {font-size:12px !important;color:#f15142 !important;} .newslist{padding:10px 5px;height:20px !important;line-height:20px;overflow:hidden;text-overflow: ellipsis;white-space: nowrap;border-bottom:1px solid #eee} .fake-video-btn:hover{ cursor: pointer; border-style: solid; border-width: 2px; border-radius: 63px; border-color: #00c1de; } .it-player-wrap { display: flex; flex-direction: row; box-sizing: border-box; padding: 5px; margin-bottom: 20px; background: #FBFBFB; border: 1px solid #EFEFEF; border-radius: 4px; } .it-player-wrap .control { width: 50px; height: 50px; background-color: #57a5f2; margin-right: 15px; border-radius: 50%; } .it-player-wrap .control .play,.it-player-wrap .control .pause { background-size: 30px !important; color: #ffffff; width: 100%; height: 100%; } .it-player-wrap .control .play { background: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/PjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+PHN2ZyB0PSIxNTU5NjM3ODcxMTQ0IiBjbGFzcz0iaWNvbiIgc3R5bGU9IiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHAtaWQ9IjYwMjkiIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iMjAwIiBoZWlnaHQ9IjIwMCI+PGRlZnM+PHN0eWxlIHR5cGU9InRleHQvY3NzIj48L3N0eWxlPjwvZGVmcz48cGF0aCBkPSJNOTUzLjQ0NTA2NSA2MDguMjkwNzI0TDM1MC4yOTkyMSA5ODAuNjM0MjExQzI1Ni42NDExNTEgMTAzOC40NTUyNjMgMTgwLjY5MDc4OSA5OTcuNzk5ODM2IDE4MC42OTA3ODkgODkxLjkxNTAzM1YxMTUuNDg2NzExQzE4MC42OTA3ODkgOC42MzgyMjQgMjU2LjIxOTUzOS0zMS4yOTQ0NCAzNTAuMjM4OTggMjYuNzY3NTM0bDYwMy4yNjYzMTUgMzcyLjIyMzAyNmM5My42NTgwNTkgNTcuODIxMDUzIDk0LjA3OTY3MSAxNTEuMjM4MTkxIDAgMjA5LjMwMDE2NHoiIHAtaWQ9IjYwMzAiIGZpbGw9IiNmZmZmZmYiPjwvcGF0aD48L3N2Zz4=") no-repeat center; } .it-player-wrap .control .pause { background: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/PjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+PHN2ZyB0PSIxNTU5NjM3NzQ2MzAwIiBjbGFzcz0iaWNvbiIgc3R5bGU9IiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHAtaWQ9IjQ0NjciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iMjAwIiBoZWlnaHQ9IjIwMCI+PGRlZnM+PHN0eWxlIHR5cGU9InRleHQvY3NzIj48L3N0eWxlPjwvZGVmcz48cGF0aCBkPSJNNzM1LjkgNjQuOWMtNTEuMiAwLTk2IDQ0LjctOTYgOTUuOHY3MDIuNmMwIDUxLjEgNDQuOCA5NS44IDk2IDk1LjhzOTYtNDQuNyA5Ni05NS44VjE2MC43YzAtNTEuMS00NC44LTk1LjgtOTYtOTUuOHogbS00NDcuOCAwYy01MS4yIDAtOTYgNDQuNy05NiA5NS44djcwMi42YzAgNTEuMSA0NC44IDk1LjggOTYgOTUuOHM5Ni00NC43IDk2LTk1LjhWMTYwLjdjLTAuMS01MS4xLTQ0LjktOTUuOC05Ni05NS44eiIgcC1pZD0iNDQ2OCIgZmlsbD0iI2ZmZmZmZiI+PC9wYXRoPjwvc3ZnPg==") no-repeat center; } .it-player-wrap .box { flex: 1; } .it-player-wrap .box .info { font-family: PingFang-SC-Regular; font-size: 12px; color: #A8A8A8; text-align: left; line-height: 24px; margin: 0; } .it-player-wrap .box .info .size { display: inline-block; margin-right: 15px; } .it-player-wrap .progress-wrap { position: relative; margin-top: 15px; display: flex; flex-direction: row; align-items: center; } .it-player-wrap .progress-line,.it-player-wrap .progress-line-inner { position: absolute; height: 6px; width: 100%; background: #DDECFF; border-radius: 8.5px; } .it-player-wrap .progress-line-inner { background: #4C83E5 !important; } .it-player-wrap .progress-button { position: absolute; width: 50px; height: 20px; background: #4C83E5; box-shadow: 0 2px 4px 0 #A0C2FF; border-radius: 10px; top: -10px; font-family: PingFang-SC-Regular; font-size: 12px; color: #FFFFFF; text-align: center; line-height: 20px; cursor: pointer; } </style> <style> .crumb{ padding: 10px; margin-bottom: 10px; border-bottom: 1px solid rgba(238,238,238,0.4); } .crumb p{ width: 1200px; margin: 0 auto; } .newul{ line-height: 25px; } .new-item{ padding: 5px; display: block; width: 250px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } #doc-content img{ margin:none; display:initial; } .syntaxhighlighter{ width:890px; } .syntaxhighlighter td.code .line{ white-space: nowrap; } .syntaxhighlighter td.code .container{ width:840px!important; } .syntaxhighlighter td.code{ overflow: scroll!important; } </style> <div class="crumb"> <p> <a href="http://blog.itpub.net/" rel="nofollow">首頁</a> > <a href="http://blog.itpub.net/appdevelop/" rel="nofollow">應用開發</a> > <a href="http://blog.itpub.net/itother/" rel="nofollow">IT綜合</a> > <a rel="nofollow">微前端(Micro Frontend ) 落地實施的一些具體例子</a> </p> </div> <!--main部分開始--> <div class="blog-main clearfix w1200"> <div class="preview-wrap"> <div class="preview-header"> <h1 class="preview-title ">微前端(Micro Frontend ) 落地實施的一些具體例子 </h1> <div class="mess"> <span class="label label-original">原創</span> <span style="margin: auto 10px auto 0px"><a href="http://blog.itpub.net/itother/" rel="nofollow">IT綜合</a></span> <span>作者：<a href="http://blog.itpub.net/24475491/" rel="nofollow">i042416</a></span> <span>時間：2021-07-29 15:10:49</span> <span class="dian"></span> <span class="icon-see"></span> <span class="dian"></span> <span class="icon-comment">0</span> <!--博主本人和管理員 顯示 開始--> <i class="superman"><a href="javascript:;" mid="2784083" onclick="blogObj.delDraft($(this))" rel="nofollow">刪除</a></i> <i class="superman"><a href="http://blog.itpub.net/blog/post/2784083/" rel="nofollow">編輯</a></i> <!--博主本人和管理員 顯示 結束--> </div> </div> <div class="preview-body windowH"> <div class="preview-main"> <div id="doc-content" style="padding: 0px;"> <textarea style="display: none">前文[微前端概述(Micro Frontends) 以及相比單體應用，微前端能帶來什麼好處](https://jerry.blog.csdn.net/article/details/119190124) 簡單介紹了微前端的概念，本文來看一個具體的應用例子。 [原文地址](https://martinfowler.com/articles/micro-frontends.html) 想象一個網站，客戶可以在其中訂購外賣食品。從表面上看，這是一個相當簡單的概念，但如果你想做得好，還有驚人的細節： * 應該有一個登陸頁面，客戶可以在其中瀏覽和搜尋餐館。 餐廳應該可以透過任意數量的屬性進行搜尋和過濾，包括價格、美食或客戶之前訂購的東西 * 每家餐廳都需要自己的頁面來顯示其選單項，並允許客戶選擇他們想吃的東西，包括折扣、餐飲優惠和特殊要求 * 客戶應該有一個個人資料頁面，他們可以在其中檢視他們的訂單歷史記錄、跟蹤交付和自定義他們的付款選項  每個頁面都有足夠的複雜性，我們可以輕鬆地證明每個頁面都有一個專門的團隊，並且每個團隊都應該能夠獨立於所有其他團隊在他們的頁面上工作。 他們應該能夠開發、測試、部署和維護他們的程式碼，而不必擔心與其他團隊發生衝突或協調。 但是，我們的客戶仍然應該看到一個無縫的網站。 在本文的其餘部分，我們將在需要示例程式碼或場景的任何地方使用此示例應用程式。 # Integration approaches 鑑於上面相當鬆散的定義，有許多方法可以合理地稱為微前端。 在本節中，我們將展示一些示例並討論它們的權衡。 所有這些方法都有一個相當自然的架構——通常應用程式中的每個頁面都有一個微前端，並且有一個容器應用程式，它： * 呈現常見的頁面元素，例如頁首和頁尾 * 解決跨領域問題，如身份驗證和導航 * 將各種微前端放在頁面上，並告訴每個微前端何時何地渲染自己  # Server-side template composition 我們從一種絕對不新穎的前端開發方法開始——用多個模板或片段在伺服器上渲染 HTML。 我們有一個 index.html ，它包含所有常見的頁面元素，然後使用伺服器端包含從片段 HTML 檔案中插入特定於頁面的內容： ```html <meta charset="utf-8"> <title>Feed me</title> <h1>Feed me</h1> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="renderer" content="webkit"> <title>微前端(Micro Frontend ) 落地實施的一些具體例子_ITPUB部落格</title> <meta name="keywords" content="應用開發,IT綜合"> <meta name="description" content="前文微前端概述(Micro Frontends) 以及相比單體應用，微前端能帶來什麼好處 簡單介紹了微前端的概念，本文來看一個具體的應用例子。 原文地址 想象一個網站，客戶可以在其中訂購外賣食品。從表面上看，這是一個相當簡單的概念，但如果你想做得好，還有驚人的細節： 應該有一個登陸頁面，客戶可以在其中瀏覽和搜尋餐館。 餐廳應該可以透過任意數量的屬性進行搜尋和過濾，包括價格、美食或客戶之前ITPUB部落格每天千篇餘篇博文新資訊，40多萬活躍博主，為IT技術人提供全面的IT資訊和交流互動的IT部落格平臺-中國專業的IT技術ITPUB部落格。"> <link rel="stylesheet" href="http://blog.itpub.net/layui/css/layui.css?v234"> <link rel="stylesheet" href="http://blog.itpub.net/css/base.css?v1.5"> <link rel="stylesheet" href="http://blog.itpub.net/css/zhuanlan.css?v=1.3"> <!--[if lt IE 9]> <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script> <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script> <![endif]--> <div></div> <div></div> <div></div> <div></div> <!--header部分開始--> <div class="blog-header"> <div class="w1200"> <a href="http://blog.itpub.net/" class="fl" rel="nofollow"><h1 class="logo">ITPub部落格</h1></a> <div class="nav fl"> <a href="http://www.itpub.net/" rel="nofollow">首頁</a> <a href="http://blog.itpub.net/" rel="nofollow">部落格</a> <a href="http://blog.itpub.net/column" rel="nofollow">專欄</a> <a href="http://edu.itpub.net/" rel="nofollow">學院</a> <a href="http://www.itpub.net/forum.php" rel="nofollow">社群</a> <a href="https://z.itpub.net/" rel="nofollow">技術棧</a> </div> <div class="fr"> <form action="http://blog.itpub.net/search/blog/" class="layui-form blog-search-wrap fl"> <input type="hidden" name="type" value="blog"> <input placeholder="搜尋" type="text" class="layui-input" name="keyword"> <button class="search-btn icon-blog"></button> </form> <a href="http://blog.itpub.net/blog/post/" class="layui-btn layui-btn-primary fl mlr30" target="_blank" rel="nofollow">發博</a> <!--登入前--> <div class="fl head-name" id="u_info"> </div> </div> </div> </div> <!--header部分結束--> <link rel="stylesheet" href="http://blog.itpub.net/markdown/css/editormd.css"> <link rel="stylesheet" href="http://blog.itpub.net/markdown/css/editormd.min.css"> <link rel="stylesheet" href="http://blog.itpub.net/markdown/css/editormd.preview.min.css"> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <link href="http://blog.itpub.net/ueditor/third-party/SyntaxHighlighter/shCoreDefault.css" rel="stylesheet" type="text/css"> <div></div> <link rel="stylesheet" href="http://g.alicdn.com/de/prismplayer/2.6.0/skins/default/aliplayer-min.css"> <div></div> <div></div> <div></div> <div></div> <div></div> <style> .code .container > textarea{ height:100%; } .translate{color: #9fa3a7 !important;font-size:12px !important;} .translate a{font-size:12px !important;color:#9fa3a7 !important;} .translate a:hover {font-size:12px !important;color:#f15142 !important;} .newslist{padding:10px 5px;height:20px !important;line-height:20px;overflow:hidden;text-overflow: ellipsis;white-space: nowrap;border-bottom:1px solid #eee} .fake-video-btn:hover{ cursor: pointer; border-style: solid; border-width: 2px; border-radius: 63px; border-color: #00c1de; } .it-player-wrap { display: flex; flex-direction: row; box-sizing: border-box; padding: 5px; margin-bottom: 20px; background: #FBFBFB; border: 1px solid #EFEFEF; border-radius: 4px; } .it-player-wrap .control { width: 50px; height: 50px; background-color: #57a5f2; margin-right: 15px; border-radius: 50%; } .it-player-wrap .control .play,.it-player-wrap .control .pause { background-size: 30px !important; color: #ffffff; width: 100%; height: 100%; } .it-player-wrap .control .play { background: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/PjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+PHN2ZyB0PSIxNTU5NjM3ODcxMTQ0IiBjbGFzcz0iaWNvbiIgc3R5bGU9IiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHAtaWQ9IjYwMjkiIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iMjAwIiBoZWlnaHQ9IjIwMCI+PGRlZnM+PHN0eWxlIHR5cGU9InRleHQvY3NzIj48L3N0eWxlPjwvZGVmcz48cGF0aCBkPSJNOTUzLjQ0NTA2NSA2MDguMjkwNzI0TDM1MC4yOTkyMSA5ODAuNjM0MjExQzI1Ni42NDExNTEgMTAzOC40NTUyNjMgMTgwLjY5MDc4OSA5OTcuNzk5ODM2IDE4MC42OTA3ODkgODkxLjkxNTAzM1YxMTUuNDg2NzExQzE4MC42OTA3ODkgOC42MzgyMjQgMjU2LjIxOTUzOS0zMS4yOTQ0NCAzNTAuMjM4OTggMjYuNzY3NTM0bDYwMy4yNjYzMTUgMzcyLjIyMzAyNmM5My42NTgwNTkgNTcuODIxMDUzIDk0LjA3OTY3MSAxNTEuMjM4MTkxIDAgMjA5LjMwMDE2NHoiIHAtaWQ9IjYwMzAiIGZpbGw9IiNmZmZmZmYiPjwvcGF0aD48L3N2Zz4=") no-repeat center; } .it-player-wrap .control .pause { background: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/PjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+PHN2ZyB0PSIxNTU5NjM3NzQ2MzAwIiBjbGFzcz0iaWNvbiIgc3R5bGU9IiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHAtaWQ9IjQ0NjciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iMjAwIiBoZWlnaHQ9IjIwMCI+PGRlZnM+PHN0eWxlIHR5cGU9InRleHQvY3NzIj48L3N0eWxlPjwvZGVmcz48cGF0aCBkPSJNNzM1LjkgNjQuOWMtNTEuMiAwLTk2IDQ0LjctOTYgOTUuOHY3MDIuNmMwIDUxLjEgNDQuOCA5NS44IDk2IDk1LjhzOTYtNDQuNyA5Ni05NS44VjE2MC43YzAtNTEuMS00NC44LTk1LjgtOTYtOTUuOHogbS00NDcuOCAwYy01MS4yIDAtOTYgNDQuNy05NiA5NS44djcwMi42YzAgNTEuMSA0NC44IDk1LjggOTYgOTUuOHM5Ni00NC43IDk2LTk1LjhWMTYwLjdjLTAuMS01MS4xLTQ0LjktOTUuOC05Ni05NS44eiIgcC1pZD0iNDQ2OCIgZmlsbD0iI2ZmZmZmZiI+PC9wYXRoPjwvc3ZnPg==") no-repeat center; } .it-player-wrap .box { flex: 1; } .it-player-wrap .box .info { font-family: PingFang-SC-Regular; font-size: 12px; color: #A8A8A8; text-align: left; line-height: 24px; margin: 0; } .it-player-wrap .box .info .size { display: inline-block; margin-right: 15px; } .it-player-wrap .progress-wrap { position: relative; margin-top: 15px; display: flex; flex-direction: row; align-items: center; } .it-player-wrap .progress-line,.it-player-wrap .progress-line-inner { position: absolute; height: 6px; width: 100%; background: #DDECFF; border-radius: 8.5px; } .it-player-wrap .progress-line-inner { background: #4C83E5 !important; } .it-player-wrap .progress-button { position: absolute; width: 50px; height: 20px; background: #4C83E5; box-shadow: 0 2px 4px 0 #A0C2FF; border-radius: 10px; top: -10px; font-family: PingFang-SC-Regular; font-size: 12px; color: #FFFFFF; text-align: center; line-height: 20px; cursor: pointer; } </style> <style> .crumb{ padding: 10px; margin-bottom: 10px; border-bottom: 1px solid rgba(238,238,238,0.4); } .crumb p{ width: 1200px; margin: 0 auto; } .newul{ line-height: 25px; } .new-item{ padding: 5px; display: block; width: 250px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } #doc-content img{ margin:none; display:initial; } .syntaxhighlighter{ width:890px; } .syntaxhighlighter td.code .line{ white-space: nowrap; } .syntaxhighlighter td.code .container{ width:840px!important; } .syntaxhighlighter td.code{ overflow: scroll!important; } </style> <div class="crumb"> <p> <a href="http://blog.itpub.net/" rel="nofollow">首頁</a> > <a href="http://blog.itpub.net/appdevelop/" rel="nofollow">應用開發</a> > <a href="http://blog.itpub.net/itother/" rel="nofollow">IT綜合</a> > <a rel="nofollow">微前端(Micro Frontend ) 落地實施的一些具體例子</a> </p> </div> <!--main部分開始--> <div class="blog-main clearfix w1200"> <div class="preview-wrap"> <div class="preview-header"> <h1 class="preview-title ">微前端(Micro Frontend ) 落地實施的一些具體例子 </h1> <div class="mess"> <span class="label label-original">原創</span> <span style="margin: auto 10px auto 0px"><a href="http://blog.itpub.net/itother/" rel="nofollow">IT綜合</a></span> <span>作者：<a href="http://blog.itpub.net/24475491/" rel="nofollow">i042416</a></span> <span>時間：2021-07-29 15:10:49</span> <span class="dian"></span> <span class="icon-see"></span> <span class="dian"></span> <span class="icon-comment">0</span> <!--博主本人和管理員 顯示 開始--> <i class="superman"><a href="javascript:;" mid="2784083" onclick="blogObj.delDraft($(this))" rel="nofollow">刪除</a></i> <i class="superman"><a href="http://blog.itpub.net/blog/post/2784083/" rel="nofollow">編輯</a></i> <!--博主本人和管理員 顯示 結束--> </div> </div> <div class="preview-body windowH"> <div class="preview-main"> <div id="doc-content" style="padding: 0px;"> <textarea style="display: none">前文[微前端概述(Micro Frontends) 以及相比單體應用，微前端能帶來什麼好處](https://jerry.blog.csdn.net/article/details/119190124) 簡單介紹了微前端的概念，本文來看一個具體的應用例子。 [原文地址](https://martinfowler.com/articles/micro-frontends.html) 想象一個網站，客戶可以在其中訂購外賣食品。從表面上看，這是一個相當簡單的概念，但如果你想做得好，還有驚人的細節： * 應該有一個登陸頁面，客戶可以在其中瀏覽和搜尋餐館。 餐廳應該可以透過任意數量的屬性進行搜尋和過濾，包括價格、美食或客戶之前訂購的東西 * 每家餐廳都需要自己的頁面來顯示其選單項，並允許客戶選擇他們想吃的東西，包括折扣、餐飲優惠和特殊要求 * 客戶應該有一個個人資料頁面，他們可以在其中檢視他們的訂單歷史記錄、跟蹤交付和自定義他們的付款選項  每個頁面都有足夠的複雜性，我們可以輕鬆地證明每個頁面都有一個專門的團隊，並且每個團隊都應該能夠獨立於所有其他團隊在他們的頁面上工作。 他們應該能夠開發、測試、部署和維護他們的程式碼，而不必擔心與其他團隊發生衝突或協調。 但是，我們的客戶仍然應該看到一個無縫的網站。 在本文的其餘部分，我們將在需要示例程式碼或場景的任何地方使用此示例應用程式。 # Integration approaches 鑑於上面相當鬆散的定義，有許多方法可以合理地稱為微前端。 在本節中，我們將展示一些示例並討論它們的權衡。 所有這些方法都有一個相當自然的架構——通常應用程式中的每個頁面都有一個微前端，並且有一個容器應用程式，它： * 呈現常見的頁面元素，例如頁首和頁尾 * 解決跨領域問題，如身份驗證和導航 * 將各種微前端放在頁面上，並告訴每個微前端何時何地渲染自己  # Server-side template composition 我們從一種絕對不新穎的前端開發方法開始——用多個模板或片段在伺服器上渲染 HTML。 我們有一個 index.html ，它包含所有常見的頁面元素，然後使用伺服器端包含從片段 HTML 檔案中插入特定於頁面的內容： ```html <meta charset="utf-8"> <title>Feed me</title> <h1>Feed me</h1> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="renderer" content="webkit"> <title>微前端(Micro Frontend ) 落地實施的一些具體例子_ITPUB部落格</title> <meta name="keywords" content="應用開發,IT綜合"> <meta name="description" content="前文微前端概述(Micro Frontends) 以及相比單體應用，微前端能帶來什麼好處 簡單介紹了微前端的概念，本文來看一個具體的應用例子。 原文地址 想象一個網站，客戶可以在其中訂購外賣食品。從表面上看，這是一個相當簡單的概念，但如果你想做得好，還有驚人的細節： 應該有一個登陸頁面，客戶可以在其中瀏覽和搜尋餐館。 餐廳應該可以透過任意數量的屬性進行搜尋和過濾，包括價格、美食或客戶之前ITPUB部落格每天千篇餘篇博文新資訊，40多萬活躍博主，為IT技術人提供全面的IT資訊和交流互動的IT部落格平臺-中國專業的IT技術ITPUB部落格。"> <link rel="stylesheet" href="http://blog.itpub.net/layui/css/layui.css?v234"> <link rel="stylesheet" href="http://blog.itpub.net/css/base.css?v1.5"> <link rel="stylesheet" href="http://blog.itpub.net/css/zhuanlan.css?v=1.3"> <!--[if lt IE 9]> <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script> <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script> <![endif]--> <div></div> <div></div> <div></div> <div></div> <!--header部分開始--> <div class="blog-header"> <div class="w1200"> <a href="http://blog.itpub.net/" class="fl" rel="nofollow"><h1 class="logo">ITPub部落格</h1></a> <div class="nav fl"> <a href="http://www.itpub.net/" rel="nofollow">首頁</a> <a href="http://blog.itpub.net/" rel="nofollow">部落格</a> <a href="http://blog.itpub.net/column" rel="nofollow">專欄</a> <a href="http://edu.itpub.net/" rel="nofollow">學院</a> <a href="http://www.itpub.net/forum.php" rel="nofollow">社群</a> <a href="https://z.itpub.net/" rel="nofollow">技術棧</a> </div> <div class="fr"> <form action="http://blog.itpub.net/search/blog/" class="layui-form blog-search-wrap fl"> <input type="hidden" name="type" value="blog"> <input placeholder="搜尋" type="text" class="layui-input" name="keyword"> <button class="search-btn icon-blog"></button> </form> <a href="http://blog.itpub.net/blog/post/" class="layui-btn layui-btn-primary fl mlr30" target="_blank" rel="nofollow">發博</a> <!--登入前--> <div class="fl head-name" id="u_info"> </div> </div> </div> </div> <!--header部分結束--> <link rel="stylesheet" href="http://blog.itpub.net/markdown/css/editormd.css"> <link rel="stylesheet" href="http://blog.itpub.net/markdown/css/editormd.min.css"> <link rel="stylesheet" href="http://blog.itpub.net/markdown/css/editormd.preview.min.css"> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <link href="http://blog.itpub.net/ueditor/third-party/SyntaxHighlighter/shCoreDefault.css" rel="stylesheet" type="text/css"> <div></div> <link rel="stylesheet" href="http://g.alicdn.com/de/prismplayer/2.6.0/skins/default/aliplayer-min.css"> <div></div> <div></div> <div></div> <div></div> <div></div> <style> .code .container > textarea{ height:100%; } .translate{color: #9fa3a7 !important;font-size:12px !important;} .translate a{font-size:12px !important;color:#9fa3a7 !important;} .translate a:hover {font-size:12px !important;color:#f15142 !important;} .newslist{padding:10px 5px;height:20px !important;line-height:20px;overflow:hidden;text-overflow: ellipsis;white-space: nowrap;border-bottom:1px solid #eee} .fake-video-btn:hover{ cursor: pointer; border-style: solid; border-width: 2px; border-radius: 63px; border-color: #00c1de; } .it-player-wrap { display: flex; flex-direction: row; box-sizing: border-box; padding: 5px; margin-bottom: 20px; background: #FBFBFB; border: 1px solid #EFEFEF; border-radius: 4px; } .it-player-wrap .control { width: 50px; height: 50px; background-color: #57a5f2; margin-right: 15px; border-radius: 50%; } .it-player-wrap .control .play,.it-player-wrap .control .pause { background-size: 30px !important; color: #ffffff; width: 100%; height: 100%; } .it-player-wrap .control .play { background: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/PjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+PHN2ZyB0PSIxNTU5NjM3ODcxMTQ0IiBjbGFzcz0iaWNvbiIgc3R5bGU9IiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHAtaWQ9IjYwMjkiIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iMjAwIiBoZWlnaHQ9IjIwMCI+PGRlZnM+PHN0eWxlIHR5cGU9InRleHQvY3NzIj48L3N0eWxlPjwvZGVmcz48cGF0aCBkPSJNOTUzLjQ0NTA2NSA2MDguMjkwNzI0TDM1MC4yOTkyMSA5ODAuNjM0MjExQzI1Ni42NDExNTEgMTAzOC40NTUyNjMgMTgwLjY5MDc4OSA5OTcuNzk5ODM2IDE4MC42OTA3ODkgODkxLjkxNTAzM1YxMTUuNDg2NzExQzE4MC42OTA3ODkgOC42MzgyMjQgMjU2LjIxOTUzOS0zMS4yOTQ0NCAzNTAuMjM4OTggMjYuNzY3NTM0bDYwMy4yNjYzMTUgMzcyLjIyMzAyNmM5My42NTgwNTkgNTcuODIxMDUzIDk0LjA3OTY3MSAxNTEuMjM4MTkxIDAgMjA5LjMwMDE2NHoiIHAtaWQ9IjYwMzAiIGZpbGw9IiNmZmZmZmYiPjwvcGF0aD48L3N2Zz4=") no-repeat center; } .it-player-wrap .control .pause { background: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/PjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+PHN2ZyB0PSIxNTU5NjM3NzQ2MzAwIiBjbGFzcz0iaWNvbiIgc3R5bGU9IiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHAtaWQ9IjQ0NjciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iMjAwIiBoZWlnaHQ9IjIwMCI+PGRlZnM+PHN0eWxlIHR5cGU9InRleHQvY3NzIj48L3N0eWxlPjwvZGVmcz48cGF0aCBkPSJNNzM1LjkgNjQuOWMtNTEuMiAwLTk2IDQ0LjctOTYgOTUuOHY3MDIuNmMwIDUxLjEgNDQuOCA5NS44IDk2IDk1LjhzOTYtNDQuNyA5Ni05NS44VjE2MC43YzAtNTEuMS00NC44LTk1LjgtOTYtOTUuOHogbS00NDcuOCAwYy01MS4yIDAtOTYgNDQuNy05NiA5NS44djcwMi42YzAgNTEuMSA0NC44IDk1LjggOTYgOTUuOHM5Ni00NC43IDk2LTk1LjhWMTYwLjdjLTAuMS01MS4xLTQ0LjktOTUuOC05Ni05NS44eiIgcC1pZD0iNDQ2OCIgZmlsbD0iI2ZmZmZmZiI+PC9wYXRoPjwvc3ZnPg==") no-repeat center; } .it-player-wrap .box { flex: 1; } .it-player-wrap .box .info { font-family: PingFang-SC-Regular; font-size: 12px; color: #A8A8A8; text-align: left; line-height: 24px; margin: 0; } .it-player-wrap .box .info .size { display: inline-block; margin-right: 15px; } .it-player-wrap .progress-wrap { position: relative; margin-top: 15px; display: flex; flex-direction: row; align-items: center; } .it-player-wrap .progress-line,.it-player-wrap .progress-line-inner { position: absolute; height: 6px; width: 100%; background: #DDECFF; border-radius: 8.5px; } .it-player-wrap .progress-line-inner { background: #4C83E5 !important; } .it-player-wrap .progress-button { position: absolute; width: 50px; height: 20px; background: #4C83E5; box-shadow: 0 2px 4px 0 #A0C2FF; border-radius: 10px; top: -10px; font-family: PingFang-SC-Regular; font-size: 12px; color: #FFFFFF; text-align: center; line-height: 20px; cursor: pointer; } </style> <style> .crumb{ padding: 10px; margin-bottom: 10px; border-bottom: 1px solid rgba(238,238,238,0.4); } .crumb p{ width: 1200px; margin: 0 auto; } .newul{ line-height: 25px; } .new-item{ padding: 5px; display: block; width: 250px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } #doc-content img{ margin:none; display:initial; } .syntaxhighlighter{ width:890px; } .syntaxhighlighter td.code .line{ white-space: nowrap; } .syntaxhighlighter td.code .container{ width:840px!important; } .syntaxhighlighter td.code{ overflow: scroll!important; } </style> <div class="crumb"> <p> <a href="http://blog.itpub.net/" rel="nofollow">首頁</a> > <a href="http://blog.itpub.net/appdevelop/" rel="nofollow">應用開發</a> > <a href="http://blog.itpub.net/itother/" rel="nofollow">IT綜合</a> > <a rel="nofollow">微前端(Micro Frontend ) 落地實施的一些具體例子</a> </p> </div> <!--main部分開始--> <div class="blog-main clearfix w1200"> <div class="preview-wrap"> <div class="preview-header"> <h1 class="preview-title ">微前端(Micro Frontend ) 落地實施的一些具體例子 </h1> <div class="mess"> <span class="label label-original">原創</span> <span style="margin: auto 10px auto 0px"><a href="http://blog.itpub.net/itother/" rel="nofollow">IT綜合</a></span> <span>作者：<a href="http://blog.itpub.net/24475491/" rel="nofollow">i042416</a></span> <span>時間：2021-07-29 15:10:49</span> <span class="dian"></span> <span class="icon-see"></span> <span class="dian"></span> <span class="icon-comment">0</span> <!--博主本人和管理員 顯示 開始--> <i class="superman"><a href="javascript:;" mid="2784083" onclick="blogObj.delDraft($(this))" rel="nofollow">刪除</a></i> <i class="superman"><a href="http://blog.itpub.net/blog/post/2784083/" rel="nofollow">編輯</a></i> <!--博主本人和管理員 顯示 結束--> </div> </div> <div class="preview-body windowH"> <div class="preview-main"> <div id="doc-content" style="padding: 0px;"> <textarea style="display: none">前文[微前端概述(Micro Frontends) 以及相比單體應用，微前端能帶來什麼好處](https://jerry.blog.csdn.net/article/details/119190124) 簡單介紹了微前端的概念，本文來看一個具體的應用例子。 [原文地址](https://martinfowler.com/articles/micro-frontends.html) 想象一個網站，客戶可以在其中訂購外賣食品。從表面上看，這是一個相當簡單的概念，但如果你想做得好，還有驚人的細節： * 應該有一個登陸頁面，客戶可以在其中瀏覽和搜尋餐館。 餐廳應該可以透過任意數量的屬性進行搜尋和過濾，包括價格、美食或客戶之前訂購的東西 * 每家餐廳都需要自己的頁面來顯示其選單項，並允許客戶選擇他們想吃的東西，包括折扣、餐飲優惠和特殊要求 * 客戶應該有一個個人資料頁面，他們可以在其中檢視他們的訂單歷史記錄、跟蹤交付和自定義他們的付款選項  每個頁面都有足夠的複雜性，我們可以輕鬆地證明每個頁面都有一個專門的團隊，並且每個團隊都應該能夠獨立於所有其他團隊在他們的頁面上工作。 他們應該能夠開發、測試、部署和維護他們的程式碼，而不必擔心與其他團隊發生衝突或協調。 但是，我們的客戶仍然應該看到一個無縫的網站。 在本文的其餘部分，我們將在需要示例程式碼或場景的任何地方使用此示例應用程式。 # Integration approaches 鑑於上面相當鬆散的定義，有許多方法可以合理地稱為微前端。 在本節中，我們將展示一些示例並討論它們的權衡。 所有這些方法都有一個相當自然的架構——通常應用程式中的每個頁面都有一個微前端，並且有一個容器應用程式，它： * 呈現常見的頁面元素，例如頁首和頁尾 * 解決跨領域問題，如身份驗證和導航 * 將各種微前端放在頁面上，並告訴每個微前端何時何地渲染自己  # Server-side template composition 我們從一種絕對不新穎的前端開發方法開始——用多個模板或片段在伺服器上渲染 HTML。 我們有一個 index.html ，它包含所有常見的頁面元素，然後使用伺服器端包含從片段 HTML 檔案中插入特定於頁面的內容： ```html <meta charset="utf-8"> <title>Feed me</title> <h1>Feed me</h1> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="renderer" content="webkit"> <title>微前端(Micro Frontend ) 落地實施的一些具體例子_ITPUB部落格</title> <meta name="keywords" content="應用開發,IT綜合"> <meta name="description" content="前文微前端概述(Micro Frontends) 以及相比單體應用，微前端能帶來什麼好處 簡單介紹了微前端的概念，本文來看一個具體的應用例子。 原文地址 想象一個網站，客戶可以在其中訂購外賣食品。從表面上看，這是一個相當簡單的概念，但如果你想做得好，還有驚人的細節： 應該有一個登陸頁面，客戶可以在其中瀏覽和搜尋餐館。 餐廳應該可以透過任意數量的屬性進行搜尋和過濾，包括價格、美食或客戶之前ITPUB部落格每天千篇餘篇博文新資訊，40多萬活躍博主，為IT技術人提供全面的IT資訊和交流互動的IT部落格平臺-中國專業的IT技術ITPUB部落格。"> <link rel="stylesheet" href="http://blog.itpub.net/layui/css/layui.css?v234"> <link rel="stylesheet" href="http://blog.itpub.net/css/base.css?v1.5"> <link rel="stylesheet" href="http://blog.itpub.net/css/zhuanlan.css?v=1.3"> <!--[if lt IE 9]> <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script> <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script> <![endif]--> <div></div> <div></div> <div></div> <div></div> <!--header部分開始--> <div class="blog-header"> <div class="w1200"> <a href="http://blog.itpub.net/" class="fl" rel="nofollow"><h1 class="logo">ITPub部落格</h1></a> <div class="nav fl"> <a href="http://www.itpub.net/" rel="nofollow">首頁</a> <a href="http://blog.itpub.net/" rel="nofollow">部落格</a> <a href="http://blog.itpub.net/column" rel="nofollow">專欄</a> <a href="http://edu.itpub.net/" rel="nofollow">學院</a> <a href="http://www.itpub.net/forum.php" rel="nofollow">社群</a> <a href="https://z.itpub.net/" rel="nofollow">技術棧</a> </div> <div class="fr"> <form action="http://blog.itpub.net/search/blog/" class="layui-form blog-search-wrap fl"> <input type="hidden" name="type" value="blog"> <input placeholder="搜尋" type="text" class="layui-input" name="keyword"> <button class="search-btn icon-blog"></button> </form> <a href="http://blog.itpub.net/blog/post/" class="layui-btn layui-btn-primary fl mlr30" target="_blank" rel="nofollow">發博</a> <!--登入前--> <div class="fl head-name" id="u_info"> </div> </div> </div> </div> <!--header部分結束--> <link rel="stylesheet" href="http://blog.itpub.net/markdown/css/editormd.css"> <link rel="stylesheet" href="http://blog.itpub.net/markdown/css/editormd.min.css"> <link rel="stylesheet" href="http://blog.itpub.net/markdown/css/editormd.preview.min.css"> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <link href="http://blog.itpub.net/ueditor/third-party/SyntaxHighlighter/shCoreDefault.css" rel="stylesheet" type="text/css"> <div></div> <link rel="stylesheet" href="http://g.alicdn.com/de/prismplayer/2.6.0/skins/default/aliplayer-min.css"> <div></div> <div></div> <div></div> <div></div> <div></div> <style> .code .container > textarea{ height:100%; } .translate{color: #9fa3a7 !important;font-size:12px !important;} .translate a{font-size:12px !important;color:#9fa3a7 !important;} .translate a:hover {font-size:12px !important;color:#f15142 !important;} .newslist{padding:10px 5px;height:20px !important;line-height:20px;overflow:hidden;text-overflow: ellipsis;white-space: nowrap;border-bottom:1px solid #eee} .fake-video-btn:hover{ cursor: pointer; border-style: solid; border-width: 2px; border-radius: 63px; border-color: #00c1de; } .it-player-wrap { display: flex; flex-direction: row; box-sizing: border-box; padding: 5px; margin-bottom: 20px; background: #FBFBFB; border: 1px solid #EFEFEF; border-radius: 4px; } .it-player-wrap .control { width: 50px; height: 50px; background-color: #57a5f2; margin-right: 15px; border-radius: 50%; } .it-player-wrap .control .play,.it-player-wrap .control .pause { background-size: 30px !important; color: #ffffff; width: 100%; height: 100%; } .it-player-wrap .control .play { background: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/PjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+PHN2ZyB0PSIxNTU5NjM3ODcxMTQ0IiBjbGFzcz0iaWNvbiIgc3R5bGU9IiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHAtaWQ9IjYwMjkiIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iMjAwIiBoZWlnaHQ9IjIwMCI+PGRlZnM+PHN0eWxlIHR5cGU9InRleHQvY3NzIj48L3N0eWxlPjwvZGVmcz48cGF0aCBkPSJNOTUzLjQ0NTA2NSA2MDguMjkwNzI0TDM1MC4yOTkyMSA5ODAuNjM0MjExQzI1Ni42NDExNTEgMTAzOC40NTUyNjMgMTgwLjY5MDc4OSA5OTcuNzk5ODM2IDE4MC42OTA3ODkgODkxLjkxNTAzM1YxMTUuNDg2NzExQzE4MC42OTA3ODkgOC42MzgyMjQgMjU2LjIxOTUzOS0zMS4yOTQ0NCAzNTAuMjM4OTggMjYuNzY3NTM0bDYwMy4yNjYzMTUgMzcyLjIyMzAyNmM5My42NTgwNTkgNTcuODIxMDUzIDk0LjA3OTY3MSAxNTEuMjM4MTkxIDAgMjA5LjMwMDE2NHoiIHAtaWQ9IjYwMzAiIGZpbGw9IiNmZmZmZmYiPjwvcGF0aD48L3N2Zz4=") no-repeat center; } .it-player-wrap .control .pause { background: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/PjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+PHN2ZyB0PSIxNTU5NjM3NzQ2MzAwIiBjbGFzcz0iaWNvbiIgc3R5bGU9IiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHAtaWQ9IjQ0NjciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iMjAwIiBoZWlnaHQ9IjIwMCI+PGRlZnM+PHN0eWxlIHR5cGU9InRleHQvY3NzIj48L3N0eWxlPjwvZGVmcz48cGF0aCBkPSJNNzM1LjkgNjQuOWMtNTEuMiAwLTk2IDQ0LjctOTYgOTUuOHY3MDIuNmMwIDUxLjEgNDQuOCA5NS44IDk2IDk1LjhzOTYtNDQuNyA5Ni05NS44VjE2MC43YzAtNTEuMS00NC44LTk1LjgtOTYtOTUuOHogbS00NDcuOCAwYy01MS4yIDAtOTYgNDQuNy05NiA5NS44djcwMi42YzAgNTEuMSA0NC44IDk1LjggOTYgOTUuOHM5Ni00NC43IDk2LTk1LjhWMTYwLjdjLTAuMS01MS4xLTQ0LjktOTUuOC05Ni05NS44eiIgcC1pZD0iNDQ2OCIgZmlsbD0iI2ZmZmZmZiI+PC9wYXRoPjwvc3ZnPg==") no-repeat center; } .it-player-wrap .box { flex: 1; } .it-player-wrap .box .info { font-family: PingFang-SC-Regular; font-size: 12px; color: #A8A8A8; text-align: left; line-height: 24px; margin: 0; } .it-player-wrap .box .info .size { display: inline-block; margin-right: 15px; } .it-player-wrap .progress-wrap { position: relative; margin-top: 15px; display: flex; flex-direction: row; align-items: center; } .it-player-wrap .progress-line,.it-player-wrap .progress-line-inner { position: absolute; height: 6px; width: 100%; background: #DDECFF; border-radius: 8.5px; } .it-player-wrap .progress-line-inner { background: #4C83E5 !important; } .it-player-wrap .progress-button { position: absolute; width: 50px; height: 20px; background: #4C83E5; box-shadow: 0 2px 4px 0 #A0C2FF; border-radius: 10px; top: -10px; font-family: PingFang-SC-Regular; font-size: 12px; color: #FFFFFF; text-align: center; line-height: 20px; cursor: pointer; } </style> <style> .crumb{ padding: 10px; margin-bottom: 10px; border-bottom: 1px solid rgba(238,238,238,0.4); } .crumb p{ width: 1200px; margin: 0 auto; } .newul{ line-height: 25px; } .new-item{ padding: 5px; display: block; width: 250px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } #doc-content img{ margin:none; display:initial; } .syntaxhighlighter{ width:890px; } .syntaxhighlighter td.code .line{ white-space: nowrap; } .syntaxhighlighter td.code .container{ width:840px!important; } .syntaxhighlighter td.code{ overflow: scroll!important; } </style> <div class="crumb"> <p> <a href="http://blog.itpub.net/" rel="nofollow">首頁</a> > <a href="http://blog.itpub.net/appdevelop/" rel="nofollow">應用開發</a> > <a href="http://blog.itpub.net/itother/" rel="nofollow">IT綜合</a> > <a rel="nofollow">微前端(Micro Frontend ) 落地實施的一些具體例子</a> </p> </div> <!--main部分開始--> <div class="blog-main clearfix w1200"> <div class="preview-wrap"> <div class="preview-header"> <h1 class="preview-title ">微前端(Micro Frontend ) 落地實施的一些具體例子 </h1> <div class="mess"> <span class="label label-original">原創</span> <span style="margin: auto 10px auto 0px"><a href="http://blog.itpub.net/itother/" rel="nofollow">IT綜合</a></span> <span>作者：<a href="http://blog.itpub.net/24475491/" rel="nofollow">i042416</a></span> <span>時間：2021-07-29 15:10:49</span> <span class="dian"></span> <span class="icon-see"></span> <span class="dian"></span> <span class="icon-comment">0</span> <!--博主本人和管理員 顯示 開始--> <i class="superman"><a href="javascript:;" mid="2784083" onclick="blogObj.delDraft($(this))" rel="nofollow">刪除</a></i> <i class="superman"><a href="http://blog.itpub.net/blog/post/2784083/" rel="nofollow">編輯</a></i> <!--博主本人和管理員 顯示 結束--> </div> </div> <div class="preview-body windowH"> <div class="preview-main"> <div id="doc-content" style="padding: 0px;"> <textarea style="display: none">前文[微前端概述(Micro Frontends) 以及相比單體應用，微前端能帶來什麼好處](https://jerry.blog.csdn.net/article/details/119190124) 簡單介紹了微前端的概念，本文來看一個具體的應用例子。 [原文地址](https://martinfowler.com/articles/micro-frontends.html) 想象一個網站，客戶可以在其中訂購外賣食品。從表面上看，這是一個相當簡單的概念，但如果你想做得好，還有驚人的細節： * 應該有一個登陸頁面，客戶可以在其中瀏覽和搜尋餐館。 餐廳應該可以透過任意數量的屬性進行搜尋和過濾，包括價格、美食或客戶之前訂購的東西 * 每家餐廳都需要自己的頁面來顯示其選單項，並允許客戶選擇他們想吃的東西，包括折扣、餐飲優惠和特殊要求 * 客戶應該有一個個人資料頁面，他們可以在其中檢視他們的訂單歷史記錄、跟蹤交付和自定義他們的付款選項  每個頁面都有足夠的複雜性，我們可以輕鬆地證明每個頁面都有一個專門的團隊，並且每個團隊都應該能夠獨立於所有其他團隊在他們的頁面上工作。 他們應該能夠開發、測試、部署和維護他們的程式碼，而不必擔心與其他團隊發生衝突或協調。 但是，我們的客戶仍然應該看到一個無縫的網站。 在本文的其餘部分，我們將在需要示例程式碼或場景的任何地方使用此示例應用程式。 # Integration approaches 鑑於上面相當鬆散的定義，有許多方法可以合理地稱為微前端。 在本節中，我們將展示一些示例並討論它們的權衡。 所有這些方法都有一個相當自然的架構——通常應用程式中的每個頁面都有一個微前端，並且有一個容器應用程式，它： * 呈現常見的頁面元素，例如頁首和頁尾 * 解決跨領域問題，如身份驗證和導航 * 將各種微前端放在頁面上，並告訴每個微前端何時何地渲染自己  # Server-side template composition 我們從一種絕對不新穎的前端開發方法開始——用多個模板或片段在伺服器上渲染 HTML。 我們有一個 index.html ，它包含所有常見的頁面元素，然後使用伺服器端包含從片段 HTML 檔案中插入特定於頁面的內容： ```html <meta charset="utf-8"> <title>Feed me</title> <h1>Feed me</h1> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="renderer" content="webkit"> <title>微前端(Micro Frontend ) 落地實施的一些具體例子_ITPUB部落格</title> <meta name="keywords" content="應用開發,IT綜合"> <meta name="description" content="前文微前端概述(Micro Frontends) 以及相比單體應用，微前端能帶來什麼好處 簡單介紹了微前端的概念，本文來看一個具體的應用例子。 原文地址 想象一個網站，客戶可以在其中訂購外賣食品。從表面上看，這是一個相當簡單的概念，但如果你想做得好，還有驚人的細節： 應該有一個登陸頁面，客戶可以在其中瀏覽和搜尋餐館。 餐廳應該可以透過任意數量的屬性進行搜尋和過濾，包括價格、美食或客戶之前ITPUB部落格每天千篇餘篇博文新資訊，40多萬活躍博主，為IT技術人提供全面的IT資訊和交流互動的IT部落格平臺-中國專業的IT技術ITPUB部落格。"> <link rel="stylesheet" href="http://blog.itpub.net/layui/css/layui.css?v234"> <link rel="stylesheet" href="http://blog.itpub.net/css/base.css?v1.5"> <link rel="stylesheet" href="http://blog.itpub.net/css/zhuanlan.css?v=1.3"> <!--[if lt IE 9]> <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script> <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script> <![endif]--> <div></div> <div></div> <div></div> <div></div> <!--header部分開始--> <div class="blog-header"> <div class="w1200"> <a href="http://blog.itpub.net/" class="fl" rel="nofollow"></a></div></div>
相關文章
微前端 Micro-Frontends - 概念
2020-11-07
前端
實施微前端的六種方式
2018-07-11
前端
微前端如何落地？
2019-08-14
前端
微前端概述(Micro Frontends) 以及相比單體應用，微前端能帶來什麼好處
2021-07-29
前端
微前端 Micro-Frontends - Single-SPA
2020-11-07
前端
微前端與專案實施方案研究
2020-06-09
前端
微前端框架還有比micro-app更好的嗎 ？
2024-05-20
前端
框架
APP
微前端 Micro-Frontnds - Single-SPA Application API
2020-11-07
前端
APP
API
網路綜合佈線的具體實施步驟
2016-07-14
MySQL備份和恢復具體實施(上)
2012-11-30
MySql
Angular Reactive Form 的一個具體使用例子
2021-06-05
Angular
React
ORM
使用 Angular Transfer State 的一個具體例子
2021-12-13
Angular
Remoting的事件機制（帶具體例子）
2006-05-14
REM
事件
使用React，Vue和Single-spa構建微前端Micro Frontends
2019-06-19
React
Vue
前端
Frontend Engineer Booklist 前端書單
2017-10-28
前端
微前端實踐
2019-04-10
前端
微服務對前端的衝擊：微前端終於落地了 - thecamjackson
2019-06-11
微服務
前端
如何讓線上錄製回放落地的具體思路
2020-10-16
透過一個具體的例子理解 npm 的 peerDependency
2022-08-19
NPM
使用 ViroReact 開發增強實現應用的一個具體例子
2022-06-06
React
DevOps落地實施要有哪些支柱？
2022-10-31
dev
SAP Spartacus SplitViewComponent Migration 的一個具體例子
2021-05-09
View
Media Query 在 CSS 中使用的一個具體例子
2023-03-30
CSS
SNP乾貨分享：SAP資料脫敏的具體實施步驟
2024-01-29
熱點微前端Microfrontend的討論：谷歌AdWords是真實的微前端
2019-06-15
前端
谷歌
RxJS CombineLatest operator 的一個具體使用例子
2021-06-16
JS
聊聊微前端的原理和實踐
2020-07-27
前端
qiankun微前端實踐
2023-09-20
前端
實體“微地址”的遐想
2011-07-20
實施DDD的幽默：DDD落地需要專門的框架嗎？
2019-06-18
框架
一個具體的例子學習Java volatile關鍵字
2018-08-27
Java
一個不錯的JDBC連線池教程（帶具體例子）
2006-05-11
JDBC
中俄原油管道前期工作順利 接近具體實施階段
2007-08-20
前端微架構實踐(Vue)
2019-10-10
前端
架構
Vue
一套大而全的系統架構體系與具體落地方案
2018-01-10
架構
promise時效架構升級方案的實施及落地
2023-11-16
Promise
架構
介面 做具體的實現
2024-11-05
SAP CRM WebClient UI cross component跳轉的一個具體例子
2020-02-27
Web
client
UI
ROS