詳解ant-design-pro使用qiankun微服務
微服務現(xiàn)在挺火的,優(yōu)點也很明顯如果有多個應用都有相同頁面時,就可以使用微服務,可以避免重復寫代碼
在網上搜了下,很多例子都是基于官方文檔的例子,官方文檔:https://umijs.org/zh-CN/plugins/plugin-qiankun.比較簡單,實際使用場景會有特殊情況我根據自己項目的情況總結了一下使用方法
我們兩個項目都是ant-design-pro的,我這里的例子也用的ant-design-pro項目生成的, githup地址:https://github.com/ant-design/ant-design-pro
微服務需要有主應用和子應用 一個子應用可以配置多個相關聯(lián)的主應用,配置方法都是一樣的
這是我的項目,一個主應用,一個子應用
首先,主應用和子應用都要安裝yarn add @umijs/plugin-qiankun -D
主應用配置
1. config.ts配置
2. app.tsx配置,這個entry,就是子應用的地址,可以寫成變量形式,區(qū)分本地和線上環(huán)境
3. 修改document.ejs文件,可以解決頁面一直加載問題
4. 修改routes文件
5. 配置proxy.tx接口代理.因為在主應用,請求的地址是主應用的,要代理回子應用的請求地址,如果已經有類似/api這種前綴,要注意主應用和子應用區(qū)分,不要用相同的前綴
子應用配置
1. config.ts配置
qiankun: {
slave: {},
}2. app.tsx配置.子應用可以通過生命周期函數(shù)拿到主應用傳遞的參數(shù).如果子應用本身是有菜單,面包屑等,應該要區(qū)別,在主應用不顯示,否則會重復
let isMenu = true // 設置一個變量,判斷是否需要展示layout
// ProLayout 支持的api https://procomponents.ant.design/components/layout
export const layout: RunTimeLayoutConfig = ({ initialState }) => {
console.log(initialState)
const prop = {}
if (!isMenu) { // 如果是加載在主應用中,不展示菜單和頭部
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è)務組件文檔</span>
</Link>,
]
: [],
menuHeaderRender: undefined,
// 自定義 403 頁面
// unAccessible: <div>unAccessible</div>,
...prop,
...initialState?.settings,
};
};
export const qiankun = {
// 應用加載之前
async bootstrap(props: any) {
console.log('app1 bootstrap', props);
if (props) {
isMenu = props.isMenu
const logins = async() => {
await login({ ...props.accountInfo })
}
logins()
}
},
// 應用 render 之前觸發(fā)
async mount(props: any) {
console.log('app1 mount', props);
},
// 應用卸載之后觸發(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', // 主應用配置時路由要和子應用一致
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: { '^': '' },
},
},
};運行效果主應用頁面:
子應用頁面:
幾個項目實際要解決的問題
1. 子應用登錄態(tài)問題如果子應用不需要登錄,只是查看可以忽略這個問題如果主應用和子應用都有自己的登錄態(tài).如果不做任何處理,想要在主應用運行子應用,必須要同時運行子應用,并且子應用要登錄,這樣不太合理一般處理,主應用傳遞token,在子應用請求時加上這個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 = {
// 應用加載之前
async bootstrap(props: any) {
if (props) {
token = props.token
}
},
// 應用 render 之前觸發(fā)
async mount(props: any) {
console.log('app1 mount', props)
// 應用卸載之后觸發(fā)
async unmount(props: any) {
console.log('app1 unmount', props)
export const request: RequestConfig = {
prefix: URL_PREFIX,
method: 'POST',
middlewares: [middleware],
credentials: 'include',
errorHandler,我這個例子因為用的官方的項目,直接模擬了下,調用了子應用的登錄接口
export const qiankun = {
// 應用加載之前
async bootstrap(props: any) {
console.log('app1 bootstrap', props);
if (props) {
isMenu = props.isMenu
const logins = async() => { // 調用登錄接口
await login({ ...props.accountInfo }) // 傳遞賬戶信息過來
}
logins()
}
},
// 應用 render 之前觸發(fā)
async mount(props: any) {
console.log('app1 mount', props);
},
// 應用卸載之后觸發(fā)
async unmount(props: any) {
console.log('app1 unmount', props);
},
}這樣不用打開子應用也能加載子應用頁面了
2. 子應用運行時,會自動添加前綴因為qiankun框架的代碼切割,子應用運行時會根據package.json里的name加入一個前綴.如果不想要可以在config.ts里配置base: '/'.我這里是換了一個前綴名稱
3. 子應用路由匹配問題.為了主應用的路由地址和子應用一致,配置路由時microAppProps的base傳了''這樣會導致子應用頁面加載錯誤或登錄態(tài)失效時,頁面顯示404頁面.因為現(xiàn)在是精確的路由匹配,沒有登錄會重定向到登錄頁,這樣就會找不到頁面.一般設置好登錄態(tài)不會有這個問題,不過想要完善點,可以寫上錯誤路由跳轉到登錄頁面,或者提示刷新頁面等
githup代碼地址,
主應用:https://github.com/shengbid/antpro-parent
子應用:https://github.com/shengbid/antpro-child
如果遇到跟著文檔配置,項目啟動報錯問題,可能是項目運行問題,可以嘗試重啟,刪包重裝.在加入qiankun組件前,可以備份代碼,配置運行好后再加入代碼中, 以免出現(xiàn)代碼運行不了,恢復不了情況o(╯□╰)o
微服務其實有很多功能,不過目前也只用了些簡單的功能.如果有其他業(yè)務場景,可以留言,共同學習進步呀(*^▽^*)
最近新寫了一篇關于子應用動態(tài)配置成主應用主題色的方法,有需要可以看看 http://chabaoo.cn/article/239884.htm
到此這篇關于ant-design-pro使用qiankun微服務詳解的文章就介紹到這了,更多相關ant-design-pro微服務內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
Vue elementUI實現(xiàn)免密登陸與號碼綁定功能
這篇文章主要介紹了Vue elementUI實現(xiàn)免密登陸與號碼綁定功能，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習吧2022-11-11
JS判斷來路是否是百度等搜索索引進行彈窗或自動跳轉的實現(xiàn)代碼
這篇文章主要介紹了JS判斷來路是否是百度等搜索索引進行彈窗或自動跳轉的實現(xiàn)代碼的相關資料,需要的朋友可以參考下2016-10-10
JS等比例縮小圖片尺寸的實例，需要的朋友可以參考一下2013-02-02
下面小編就為大家?guī)硪黄猨s通過指定下標或指定元素進行刪除數(shù)組的實例。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-01-01
layui 上傳插件 帶預覽 非自動上傳功能的實例(非常實用)
今天小編就為大家分享一篇layui 上傳插件 帶預覽 非自動上傳功能的實例(非常實用)，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-09-09
這篇文章主要介紹了市面上短視頻(douyin)"去水印"的工具原來是這樣實現(xiàn)的,本文給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2021-03-03
這篇文章主要介紹了Javascript對象按照屬性排序方法示例探究,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2024-01-01
這篇文章主要介紹了原生JavaScript實現(xiàn)瀑布流布局的相關資料,實現(xiàn)鼠標下拉圖片自動加載效果，和百度圖片效果類似，需要的朋友可以參考下2016-01-01
這篇文章主要介紹了JS面向對象編程封裝操作,結合實例形式詳細分析了JS面向對象封裝操作的相關概念、原理、使用方法與操作注意事項,需要的朋友可以參考下2020-03-03
本篇文章要是對JS關閉窗口與JS關閉頁面的幾種方法進行了總結介紹，需要的朋友可以過來參考下，希望對大家有所幫助2013-12-12