詳解ant-design-pro使用qiankun微服務(wù)
微服務(wù)現(xiàn)在挺火的,優(yōu)點(diǎn)也很明顯如果有多個應(yīng)用都有相同頁面時,就可以使用微服務(wù),可以避免重復(fù)寫代碼
在網(wǎng)上搜了下,很多例子都是基于官方文檔的例子,官方文檔:https://umijs.org/zh-CN/plugins/plugin-qiankun.比較簡單,實(shí)際使用場景會有特殊情況我根據(jù)自己項(xiàng)目的情況總結(jié)了一下使用方法
我們兩個項(xiàng)目都是ant-design-pro的,我這里的例子也用的ant-design-pro項(xiàng)目生成的, githup地址:https://github.com/ant-design/ant-design-pro
微服務(wù)需要有主應(yīng)用和子應(yīng)用 一個子應(yīng)用可以配置多個相關(guān)聯(lián)的主應(yīng)用,配置方法都是一樣的
這是我的項(xiàng)目,一個主應(yīng)用,一個子應(yīng)用
首先,主應(yīng)用和子應(yīng)用都要安裝yarn add @umijs/plugin-qiankun -D
主應(yīng)用配置
1. config.ts配置
2. app.tsx配置,這個entry,就是子應(yīng)用的地址,可以寫成變量形式,區(qū)分本地和線上環(huán)境
3. 修改document.ejs文件,可以解決頁面一直加載問題
4. 修改routes文件
5. 配置proxy.tx接口代理.因?yàn)樵谥鲬?yīng)用,請求的地址是主應(yīng)用的,要代理回子應(yīng)用的請求地址,如果已經(jīng)有類似/api這種前綴,要注意主應(yīng)用和子應(yīng)用區(qū)分,不要用相同的前綴
子應(yīng)用配置
1. config.ts配置
qiankun: { slave: {}, }
2. app.tsx配置.子應(yīng)用可以通過生命周期函數(shù)拿到主應(yīng)用傳遞的參數(shù).如果子應(yīng)用本身是有菜單,面包屑等,應(yīng)該要區(qū)別,在主應(yīng)用不顯示,否則會重復(fù)
let isMenu = true // 設(shè)置一個變量,判斷是否需要展示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: '主頁', }, ...routers, ], onPageChange: () => { const { location } = history; // 如果沒有登錄,重定向到 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 頁面 // 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詳情頁', icon: 'table', path: '/form/detail', // 主應(yīng)用配置時路由要和子應(yīng)用一致 component: './form/detail', }, { name: 'child詳情頁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īng)用頁面:
幾個項(xiàng)目實(shí)際要解決的問題
1. 子應(yīng)用登錄態(tài)問題如果子應(yīng)用不需要登錄,只是查看可以忽略這個問題如果主應(yīng)用和子應(yīng)用都有自己的登錄態(tài).如果不做任何處理,想要在主應(yīng)用運(yùn)行子應(yīng)用,必須要同時運(yùn)行子應(yīng)用,并且子應(yīng)用要登錄,這樣不太合理一般處理,主應(yīng)用傳遞token,在子應(yīng)用請求時加上這個token
let token = '' const middleware: OnionMiddleware = async (ctx, next) => { const { req: { url }, } = ctx ctx.req.options.headers = { // 在請求頭加入傳遞的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,
我這個例子因?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 }) // 傳遞賬戶信息過來 } 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); }, }
這樣不用打開子應(yīng)用也能加載子應(yīng)用頁面了
2. 子應(yīng)用運(yùn)行時,會自動添加前綴因?yàn)閝iankun框架的代碼切割,子應(yīng)用運(yùn)行時會根據(jù)package.json里的name加入一個前綴.如果不想要可以在config.ts里配置base: '/'.我這里是換了一個前綴名稱
3. 子應(yīng)用路由匹配問題.為了主應(yīng)用的路由地址和子應(yīng)用一致,配置路由時microAppProps的base傳了''這樣會導(dǎo)致子應(yīng)用頁面加載錯誤或登錄態(tài)失效時,頁面顯示404頁面.因?yàn)楝F(xiàn)在是精確的路由匹配,沒有登錄會重定向到登錄頁,這樣就會找不到頁面.一般設(shè)置好登錄態(tài)不會有這個問題,不過想要完善點(diǎn),可以寫上錯誤路由跳轉(zhuǎn)到登錄頁面,或者提示刷新頁面等
githup代碼地址,
主應(yīng)用:https://github.com/shengbid/antpro-parent
子應(yīng)用:https://github.com/shengbid/antpro-child
如果遇到跟著文檔配置,項(xiàng)目啟動報(bào)錯問題,可能是項(xiàng)目運(yùn)行問題,可以嘗試重啟,刪包重裝.在加入qiankun組件前,可以備份代碼,配置運(yùn)行好后再加入代碼中, 以免出現(xiàn)代碼運(yùn)行不了,恢復(fù)不了情況o(╯□╰)o
微服務(wù)其實(shí)有很多功能,不過目前也只用了些簡單的功能.如果有其他業(yè)務(wù)場景,可以留言,共同學(xué)習(xí)進(jìn)步呀(*^▽^*)
最近新寫了一篇關(guān)于子應(yīng)用動態(tài)配置成主應(yīng)用主題色的方法,有需要可以看看 http://www.dbjr.com.cn/article/239884.htm
到此這篇關(guān)于ant-design-pro使用qiankun微服務(wù)詳解的文章就介紹到這了,更多相關(guān)ant-design-pro微服務(wù)內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
Vue elementUI實(shí)現(xiàn)免密登陸與號碼綁定功能
這篇文章主要介紹了Vue elementUI實(shí)現(xiàn)免密登陸與號碼綁定功能,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)吧2022-11-11JS判斷來路是否是百度等搜索索引進(jìn)行彈窗或自動跳轉(zhuǎn)的實(shí)現(xiàn)代碼
這篇文章主要介紹了JS判斷來路是否是百度等搜索索引進(jìn)行彈窗或自動跳轉(zhuǎn)的實(shí)現(xiàn)代碼的相關(guān)資料,需要的朋友可以參考下2016-10-10js通過指定下標(biāo)或指定元素進(jìn)行刪除數(shù)組的實(shí)例
下面小編就為大家?guī)硪黄猨s通過指定下標(biāo)或指定元素進(jìn)行刪除數(shù)組的實(shí)例。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2017-01-01layui 上傳插件 帶預(yù)覽 非自動上傳功能的實(shí)例(非常實(shí)用)
今天小編就為大家分享一篇layui 上傳插件 帶預(yù)覽 非自動上傳功能的實(shí)例(非常實(shí)用),具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2019-09-09短視頻(douyin)去水印工具的實(shí)現(xiàn)代碼
這篇文章主要介紹了市面上短視頻(douyin)"去水印"的工具原來是這樣實(shí)現(xiàn)的,本文給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下2021-03-03基于JavaScript實(shí)現(xiàn)瀑布流布局(二)
這篇文章主要介紹了原生JavaScript實(shí)現(xiàn)瀑布流布局的相關(guān)資料,實(shí)現(xiàn)鼠標(biāo)下拉圖片自動加載效果,和百度圖片效果類似,需要的朋友可以參考下2016-01-01JS面向?qū)ο缶幊袒A(chǔ)篇(二) 封裝操作實(shí)例詳解
這篇文章主要介紹了JS面向?qū)ο缶幊谭庋b操作,結(jié)合實(shí)例形式詳細(xì)分析了JS面向?qū)ο蠓庋b操作的相關(guān)概念、原理、使用方法與操作注意事項(xiàng),需要的朋友可以參考下2020-03-03JS關(guān)閉窗口與JS關(guān)閉頁面的幾種方法小結(jié)
本篇文章要是對JS關(guān)閉窗口與JS關(guān)閉頁面的幾種方法進(jìn)行了總結(jié)介紹,需要的朋友可以過來參考下,希望對大家有所幫助2013-12-12