2020年很火的微前端基于 Genesis 的一种实现
发布于 4 年前 作者 1340641314 4696 次浏览 来自 分享

前言

这个是内部基于 Genesis 上线的第一个项目,五一过后我们还会上线 新版的 Followme 5.0 首页,包含两个新的,完全基于 Genesis 开发的服务,以及一个老项目上迁移到 Genesis 的服务。Genesis 的定位是一个 Vue 的 SSR插件,它提供了可以拓展出微前端的基础能力。

在5.0中,我们的页面布局和推特的类似,都是左导航,右边是内容区域。下面简单的来几张我们的代码截图,可以让大家感受一下。

5.0 项目的基本例子

页面布局

<template>
    <div class="page-container">
        <div class="page-render">
            <div class="sidebar-render">
                <!-- 左导航 -->
                <Sidebar />
            </div>
            <div :data-url="remoteUrl" class="content-render">
                <!-- 内容区域,远程调用其它服务的组件 -->
                <remote-view
                    :key="ssrname"
                    :clientFetch="clientFetch"
                    :serverFetch="serverFetch"
                ></remote-view>
            </div>
        </div>
    </div>
</template>
import { Component, Vue } from 'vue-property-decorator';
import RemoteView from '@fmfe/genesis-remote';
import Sidebar from './sidebar.vue';

Vue.use(RemoteView);

@Component<PageRender>({
    components: {
        Sidebar
    }
})
export default class PageRender extends Vue {
    public serverAxios?: any;
    public get config() {
        return this.$square.config;
    }

    public get signin() {
        return this.$square.signin;
    }

    public async serverPrefetch() {
        this.serverAxios = this.$square.config.request.get<any>(this.remoteUrl);
        return Promise.all([this.signin.getUserCacheFirst()]);
    }

    // 获取当前地址对应的服务名称
    public get ssrname() {
        return this.$route.meta.ssrname;
    }

    public get remoteUrl() {
        const { config } = this;
        const fullPath = encodeURIComponent(this.$route.fullPath);
        return `${config.BASE_API}/api/v1/${this.ssrname}/render?_routerMode=history&_renderUrl=${fullPath}&_renderType=json`;
    }

    // 服务器端调用
    public async serverFetch() {
        const res = await this.serverAxios;
        if (res.code === 0) {
            return res.data;
        }
        return null;
    }

    // 客户端调用
    public async clientFetch() {
        const res = await this.$square.config.request.get<any>(this.remoteUrl);
        if (res.code === 0) {
            return res.data;
        }
        return null;
    }
}


路由配置

export const routes: RouteConfig[] = [
    {
        path: '/',
        name: 'home',
        meta: {
            ssrname: 'ssr-home' // 对应的服务名称
        },
        component: PageRender
    },
    {
        path: '/signal/(.*)?',
        name: 'signal',
        meta: {
            ssrname: 'ssr-signal' // 对应的服务名称
        },
        component: PageRender
    },
    ...navbarRoutes
];

上面的基本架构就是由一个基础服务,根据不同的url去请求对应服务的展示内容。整个过程可以是SSR的渲染模式,也可以是CSR的渲染模式。 我们内部称之为远程组件,你可以写接口一样写出一个页面,提供给其它的页面使用。

上线项目例子

下面这是我们第一个基于 Genesis 上线的项目,它提供了实现微前端的基础能力

SSR 渲染 html https://www.followstar.com/invite/register-email?vcode=252339&_renderType=html&_renderMode=ss

CSR 渲染HTML https://www.followstar.com/invite/register-email?vcode=252339&_renderType=html&_renderMode=csr

SSR 渲染json https://www.followstar.com/invite/register-email?vcode=252339&_renderType=json&_renderMode=ssr

CSR 渲染json https://www.followstar.com/invite/register-email?vcode=252339&_renderType=json&_renderMode=csr

Github

仓库地址:https://github.com/fmfe/genesis 文档地址:https://fmfe.github.io/genesis-docs/ 注意:目前项目还在完善文档的阶段,欢迎试用!

1 回复
回到顶部