詳解ant-design-pro使用qiankun微服務(wù)
微服務(wù)現(xiàn)在挺火的,優(yōu)點(diǎn)也很明顯如果有多個(gè)應(yīng)用都有相同頁(yè)面時(shí),就可以使用微服務(wù),可以避免重復(fù)寫(xiě)代碼
在網(wǎng)上搜了下,很多例子都是基于官方文檔的例子,官方文檔:https://umijs.org/zh-CN/plugins/plugin-qiankun.比較簡(jiǎn)單,實(shí)際使用場(chǎng)景會(huì)有特殊情況我根據(jù)自己項(xiàng)目的情況總結(jié)了一下使用方法
我們兩個(gè)項(xiàng)目都是ant-design-pro的,我這里的例子也用的ant-design-pro項(xiàng)目生成的, githup地址:https://github.com/ant-design/ant-design-pro
微服務(wù)需要有主應(yīng)用和子應(yīng)用 一個(gè)子應(yīng)用可以配置多個(gè)相關(guān)聯(lián)的主應(yīng)用,配置方法都是一樣的
這是我的項(xiàng)目,一個(gè)主應(yīng)用,一個(gè)子應(yīng)用

首先,主應(yīng)用和子應(yīng)用都要安裝yarn add @umijs/plugin-qiankun -D
主應(yīng)用配置
1. config.ts配置

2. app.tsx配置,這個(gè)entry,就是子應(yīng)用的地址,可以寫(xiě)成變量形式,區(qū)分本地和線上環(huán)境

3. 修改document.ejs文件,可以解決頁(yè)面一直加載問(wèn)題

4. 修改routes文件

5. 配置proxy.tx接口代理.因?yàn)樵谥鲬?yīng)用,請(qǐng)求的地址是主應(yīng)用的,要代理回子應(yīng)用的請(qǐng)求地址,如果已經(jīng)有類似/api這種前綴,要注意主應(yīng)用和子應(yīng)用區(qū)分,不要用相同的前綴

子應(yīng)用配置
1. config.ts配置
qiankun: {
slave: {},
}2. app.tsx配置.子應(yīng)用可以通過(guò)生命周期函數(shù)拿到主應(yīng)用傳遞的參數(shù).如果子應(yīng)用本身是有菜單,面包屑等,應(yīng)該要區(qū)別,在主應(yīng)用不顯示,否則會(huì)重復(fù)
let isMenu = true // 設(shè)置一個(gè)變量,判斷是否需要展示layout
// ProLayout 支持的api https://procomponents.ant.design/components/layout
export const layout: RunTimeLayoutConfig = ({ initialState }) => {
console.log(initialState)
const prop = {}
if (!isMenu) { // 如果是加載在主應(yīng)用中,不展示菜單和頭部
prop.menuRender = false
prop.headerRender = false
prop.contentStyle = { margin: 0 }
}
return {
rightContentRender: () => <RightContent />,
disableContentMargin: false,
waterMarkProps: {
content: initialState?.currentUser?.name,
},
footerRender: () => <Footer />,
headerContentRender: () => <ProBreadcrumb />,
breadcrumbRender: (routers = []) => [
{
path: '/',
breadcrumbName: '主頁(yè)',
},
...routers,
],
onPageChange: () => {
const { location } = history;
// 如果沒(méi)有登錄,重定向到 login
if (!initialState?.currentUser && location.pathname !== loginPath) {
history.push(loginPath);
}
},
links: isDev
? [
<Link to="/umi/plugin/openapi" target="_blank">
<LinkOutlined />
<span>OpenAPI 文檔</span>
</Link>,
<Link to="/~docs">
<BookOutlined />
<span>業(yè)務(wù)組件文檔</span>
</Link>,
]
: [],
menuHeaderRender: undefined,
// 自定義 403 頁(yè)面
// unAccessible: <div>unAccessible</div>,
...prop,
...initialState?.settings,
};
};
export const qiankun = {
// 應(yīng)用加載之前
async bootstrap(props: any) {
console.log('app1 bootstrap', props);
if (props) {
isMenu = props.isMenu
const logins = async() => {
await login({ ...props.accountInfo })
}
logins()
}
},
// 應(yīng)用 render 之前觸發(fā)
async mount(props: any) {
console.log('app1 mount', props);
},
// 應(yīng)用卸載之后觸發(fā)
async unmount(props: any) {
console.log('app1 unmount', props);
},
}3.routes.ts文件,正常配置路由就可以了
...
{
name: 'Form表單',
icon: 'form',
path: '/form',
routes: [
{
path: '/form',
redirect: '/form/add'
},
{
name: 'form表單',
icon: 'table',
path: '/form/add',
component: './product/addProduct',
},
{
name: 'debonceselect',
icon: 'table',
path: '/form/debonceselect',
component: './form/debounce',
},
{
name: 'upload上傳',
icon: 'table',
path: '/form/upload',
component: './form/upload',
},
{
name: 'child詳情頁(yè)',
icon: 'table',
path: '/form/detail', // 主應(yīng)用配置時(shí)路由要和子應(yīng)用一致
component: './form/detail',
},
{
name: 'child詳情頁(yè)2',
icon: 'table',
path: '/form/detail2',
component: './form/detail2',
}
],
},4. proxy.ts文件
export default {
dev: {
'/childapi/api/': {
target: 'http://localhost:8091',
changeOrigin: true,
pathRewrite: { '^/childapi': '' },
},
},
test: {
'/api/': {
target: 'https://preview.pro.ant.design',
changeOrigin: true,
pathRewrite: { '^': '' },
},
},
pre: {
'/api/': {
target: 'your pre url',
changeOrigin: true,
pathRewrite: { '^': '' },
},
},
};運(yùn)行效果主應(yīng)用頁(yè)面:

子應(yīng)用頁(yè)面:

幾個(gè)項(xiàng)目實(shí)際要解決的問(wèn)題
1. 子應(yīng)用登錄態(tài)問(wèn)題如果子應(yīng)用不需要登錄,只是查看可以忽略這個(gè)問(wèn)題如果主應(yīng)用和子應(yīng)用都有自己的登錄態(tài).如果不做任何處理,想要在主應(yīng)用運(yùn)行子應(yīng)用,必須要同時(shí)運(yùn)行子應(yīng)用,并且子應(yīng)用要登錄,這樣不太合理一般處理,主應(yīng)用傳遞token,在子應(yīng)用請(qǐng)求時(shí)加上這個(gè)token
let token = ''
const middleware: OnionMiddleware = async (ctx, next) => {
const {
req: { url },
} = ctx
ctx.req.options.headers = { // 在請(qǐng)求頭加入傳遞的token
token,
}
await next()
if (ctx.res.responseCode !== '000000') {
if (!(ctx.res && ctx.res.size)) throw { ...ctx.res, url }
}
export const qiankun = {
// 應(yīng)用加載之前
async bootstrap(props: any) {
if (props) {
token = props.token
}
},
// 應(yīng)用 render 之前觸發(fā)
async mount(props: any) {
console.log('app1 mount', props)
// 應(yīng)用卸載之后觸發(fā)
async unmount(props: any) {
console.log('app1 unmount', props)
export const request: RequestConfig = {
prefix: URL_PREFIX,
method: 'POST',
middlewares: [middleware],
credentials: 'include',
errorHandler,我這個(gè)例子因?yàn)橛玫墓俜降捻?xiàng)目,直接模擬了下,調(diào)用了子應(yīng)用的登錄接口
export const qiankun = {
// 應(yīng)用加載之前
async bootstrap(props: any) {
console.log('app1 bootstrap', props);
if (props) {
isMenu = props.isMenu
const logins = async() => { // 調(diào)用登錄接口
await login({ ...props.accountInfo }) // 傳遞賬戶信息過(guò)來(lái)
}
logins()
}
},
// 應(yīng)用 render 之前觸發(fā)
async mount(props: any) {
console.log('app1 mount', props);
},
// 應(yīng)用卸載之后觸發(fā)
async unmount(props: any) {
console.log('app1 unmount', props);
},
}這樣不用打開(kāi)子應(yīng)用也能加載子應(yīng)用頁(yè)面了

2. 子應(yīng)用運(yùn)行時(shí),會(huì)自動(dòng)添加前綴因?yàn)閝iankun框架的代碼切割,子應(yīng)用運(yùn)行時(shí)會(huì)根據(jù)package.json里的name加入一個(gè)前綴.如果不想要可以在config.ts里配置base: '/'.我這里是換了一個(gè)前綴名稱


3. 子應(yīng)用路由匹配問(wèn)題.為了主應(yīng)用的路由地址和子應(yīng)用一致,配置路由時(shí)microAppProps的base傳了''這樣會(huì)導(dǎo)致子應(yīng)用頁(yè)面加載錯(cuò)誤或登錄態(tài)失效時(shí),頁(yè)面顯示404頁(yè)面.因?yàn)楝F(xiàn)在是精確的路由匹配,沒(méi)有登錄會(huì)重定向到登錄頁(yè),這樣就會(huì)找不到頁(yè)面.一般設(shè)置好登錄態(tài)不會(huì)有這個(gè)問(wèn)題,不過(guò)想要完善點(diǎn),可以寫(xiě)上錯(cuò)誤路由跳轉(zhuǎn)到登錄頁(yè)面,或者提示刷新頁(yè)面等
githup代碼地址,
主應(yīng)用:https://github.com/shengbid/antpro-parent
子應(yīng)用:https://github.com/shengbid/antpro-child
如果遇到跟著文檔配置,項(xiàng)目啟動(dòng)報(bào)錯(cuò)問(wèn)題,可能是項(xiàng)目運(yùn)行問(wèn)題,可以嘗試重啟,刪包重裝.在加入qiankun組件前,可以備份代碼,配置運(yùn)行好后再加入代碼中, 以免出現(xiàn)代碼運(yùn)行不了,恢復(fù)不了情況o(╯□╰)o
微服務(wù)其實(shí)有很多功能,不過(guò)目前也只用了些簡(jiǎn)單的功能.如果有其他業(yè)務(wù)場(chǎng)景,可以留言,共同學(xué)習(xí)進(jìn)步呀(*^▽^*)
最近新寫(xiě)了一篇關(guān)于子應(yīng)用動(dòng)態(tài)配置成主應(yīng)用主題色的方法,有需要可以看看 http://www.dhdzp.com/article/239884.htm
到此這篇關(guān)于ant-design-pro使用qiankun微服務(wù)詳解的文章就介紹到這了,更多相關(guān)ant-design-pro微服務(wù)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
基于bootstrap實(shí)現(xiàn)bootstrap中文網(wǎng)巨幕效果
這篇文章主要介紹了基于bootstrap實(shí)現(xiàn)bootstrap中文網(wǎng)巨幕效果,非常不錯(cuò),具有參考借鑒價(jià)值,需要的朋友可以參考下2017-05-05
如何解決webpack-dev-server代理常切換問(wèn)題
通常我們有一份webpack.dev.config.js使用webpack-dev-server的proxy,代理到開(kāi)發(fā)服務(wù)器,來(lái)解決本地跨域問(wèn)題。假如項(xiàng)目變大,可能需要proxy到不同環(huán)境,那么如何解決webpack-dev-server代理常切換問(wèn)題,下面就一起來(lái)了解一下2019-01-01
uniapp開(kāi)發(fā)小程序?qū)崿F(xiàn)滑動(dòng)頁(yè)面控制元素的顯示和隱藏效果
這篇文章主要介紹了uniapp開(kāi)發(fā)小程序?qū)崿F(xiàn)滑動(dòng)頁(yè)面控制元素的顯示和隱藏效果,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-12-12
js自動(dòng)下載文件到本地的實(shí)現(xiàn)代碼
其實(shí)就是利用了Microsoft.XMLHTTP實(shí)現(xiàn)遠(yuǎn)程文件的保存,不過(guò)需要修改下才可以運(yùn)行,地址傳參問(wèn)題2013-04-04
javascript學(xué)習(xí)筆記--數(shù)字格式類型
很多人也許只知道 123,123.456,0xff 之類的數(shù)字格式。 其實(shí) js 格式還有很多數(shù)字格式類型,比如 1., .1 這樣的,也有 .1e2 這樣的。2014-05-05
前端實(shí)現(xiàn)各種類型文件保存的方案總結(jié)
在Web開(kāi)發(fā)中,文件下載是常見(jiàn)的交互需求,本文將系統(tǒng)總結(jié)前端實(shí)現(xiàn)文件保存的三大核心場(chǎng)景(圖片、文本、網(wǎng)頁(yè))及對(duì)應(yīng)技術(shù)方案,幫助開(kāi)發(fā)者根據(jù)具體需求選擇最優(yōu)解,需要的朋友可以參考下2025-04-04
event.keyCode鍵碼值表 附只能輸入特定的字符串代碼
非常不錯(cuò)的應(yīng)用,讓文本框里只能輸入money大家看下具體的實(shí)現(xiàn)代碼,真是只有想到,原理很簡(jiǎn)單。2009-05-05

