前言

这个是内部基于 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/ 注意：目前项目还在完善文档的阶段，欢迎试用！