前言

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

厉害