## 快速开始
```bash
# 拉取代码
git clone git@github.com:fmfe/vue-genesis-micro.git
# 进入项目目录
cd vue-genesis-micro
# 安装依赖
npm install
# 开发环境启动
npm run dev
# 打包生产环境代码
npm run build
# 生产环境运行
npm run start
```
## 微服务是什么?
微服务是一个新兴的软件架构,就是把一个大型的单个应用程序和服务拆分为数十个的支持微服务。
## 为什么需要微服务?
随着业务的发展,项目规模越来越大,给编译打包、合并的代码冲突带来了巨大的挑战,而服务的拆分可以获得更快的编译打包,独立部署、增量更新、不同的团队只需要负责自己的服务、更好的支持多端,在大型的项目中,使用微服务架构可以获得极大的收益。
## 微服务和微前端的区别
目前社区的微前端解决方案,基本上都是基于客户端去进行聚合的思路,而本项目却是完全基于后端微服务的概念而诞生的,页面的聚合既可以在服务端完成,也可以在客户端完成,一切取决于需求。
## 项目介绍
本项目基于 Vue 的[Genesis](https://github.com/fmfe/genesis)开发,一个编写了三个例子:
- `ssr-common` 公共的页面导航
- `ssr-home` 首页
- `ssr-about` 关于我们
在学习完成本项目后,你可以搭建属于自己的微服务架构,并且深入的了解到[远程组件](https://fmfe.github.io/genesis-docs/remote/)它是怎么工作的。至此,你可以做到一个大型应用的微服务拆分下。
## 关于 Genesis
[Genesis](https://github.com/fmfe/genesis)是在[FOLLOWME5.0](https://www.followme.com/)升级而诞生的一个项目,它解决了以往架构的很多弊端,例如:
- 公共组件库更新,导致同时十几个项目要编译发布更新
- 页面和页面之间的切换,需要刷新整页,无法做到无刷新跳转
- 数百个页面,如果全部写到一个大的项目中做SSR渲染,只要其中一个地方出现BUG,就有可能导致整个服务挂掉或者不稳定,发生内存泄漏的问题时,也更加难以排查
- 大量的项目是基于CSR渲染,在国际化和SEO方面,导致 index.html 页面的标题、关键词和描述比较难做到国际化
- 不同的团队,互相交叉开发一个项目,合并代码时,很容易产生各种冲突,服务的拆分后,大大的减少了代码冲突
## 渲染接口
服务的拆分后,那么服务和服务之间的调用是必不可少的,这里提出了一个渲染接口的概念,它可能是这样子的
```ts
// 下面的接口,你可能需要做Nginx反向代理,来做到下面的接口
// /api/ssr-服务名称/render?url=渲染地址&mode=渲染模式&routerMode=路由模式
const renderModes = ['ssr-html', 'ssr-json', 'csr-html', 'csr-json'];
/**
* 提供一个API允许外部渲染
*/
app.use('/api/render', (req, res, next) => {
// 获取渲染的地址
const url = decodeURIComponent(String(req.query.renderUrl));
// 获取路由渲染的模式
const routerMode =
['abstract', 'history'].indexOf(String(req.query.routerMode)) > -1
? req.query.routerMode
: 'history';
// 渲染默认
const mode: any =
renderModes.indexOf(String(req.query.renderMode)) > -1
? String(req.query.renderMode)
: 'ssr-json';
renderer
.render({
url,
mode,
state: {
routerMode
}
})
.then((r) => {
res.send(r.data);
})
.catch(next);
});
```
这样第三方的服务,就可以随意的调用这个服务的渲染结果,传递需要渲染的地方渲染,比如Vue、React、或者其它的EJS模板引擎等等。本项目会使用渲染接口,来传递给远程组件进行渲染。
## 远程组件
当你需要调用其它服务的页面渲染时,你请求渲染接口,拿到渲染的结果,传递给远程组件,它就会负责帮你渲染该服务的内容。
```vue
<template>
<div>
<remote-view
v-if="ssrname"
:key="ssrname"
:clientFetch="() => clientFetch(ssrname)"
:serverFetch="() => serverFetch(ssrname)"
/>
</div>
</template>
<script lang="ts">
import Vue from 'vue';
import { RemoteView } from '@fmfe/genesis-remote';
import axios from 'axios';
interface Methods {
clientFetch: (ssrname: string) => Promise<void>;
serverFetch: (ssrname: string) => Promise<void>;
}
interface Computed {
ssrname: string;
}
export default Vue.extend<any, Methods, Computed>({
name: 'container',
components: {
RemoteView
},
computed: {
ssrname() {
return this.$route.meta.ssrname;
}
},
methods: {
/**
* 客户端远程调用时,走 CSR 渲染
*/
async clientFetch(ssrname: string) {
const renderUrl = encodeURIComponent(this.$route.fullPath);
const res = await axios.get(
`http://localhost:3000/api/${ssrname}/render`,
{
params: {
routerMode: 'history',
renderMode: 'csr-json',
renderUrl
}
}
);
if (res.status === 200) {
return res.data;
}
return null;
},
/**
* 服务端远程调用时,走 SSR渲染
*/
async serverFetch(ssrname: string) {
const renderUrl = encodeURIComponent(this.$route.fullPath);
const res = await axios.get(
`http://localhost:3000/api/${ssrname}/render`,
{
params: {
routerMode: 'history',
renderMode: 'ssr-json',
renderUrl
}
}
);
if (res.status === 200) {
return res.data;
}
return null;
}
}
});
</script>
```
## 目录说明
```
.
├── .vscode
│ ├── settings.json vscode的配置
├── examples 服务拆分的例子
│ ├── ssr-about 关于我们服务
│ | ├── src Vue源码目录
│ | | ├── views 页面目录
│ | | | ├── about-help.vue 帮助中心页面
│ | | | └── about-us.vue 关于我们页面
│ | | ├── app.vue 页面入口文件,公共导航
│ | | ├── entry-client.ts 客户端入口文件
│ | | ├── entry-server.ts 服务端入口文件
│ | | ├── router.ts 路由配置文件
│ | | └── shims-vue.d.ts .vue文件的TS声明
│ | ├── genesis.build.ts 当前服务生产环境构建入口
│ | ├── genesis.dev.ts 当前服务开发环境入口
│ | ├── genesis.prod.ts 当前服务生产环境入口
│ | └── genesis.ts 当前服务通用的服务端逻辑
│ ├── ssr-common 基础的页面聚合服务,包含公共导航
│ | ├── src Vue源码目录
│ | | ├── views 页面目录
│ | | | ├── about-help.vue 帮助中心页面
│ | | | └── about-us.vue 关于我们页面
│ | | ├── app.vue 页面入口文件,公共导航
│ | | ├── container
没有合适的资源?快使用搜索试试~ 我知道了~
资源推荐
资源详情
资源评论
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![rar](https://img-home.csdnimg.cn/images/20210720083606.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
收起资源包目录
![package](https://csdnimg.cn/release/downloadcmsfe/public/img/package.f3fc750b.png)
![folder](https://csdnimg.cn/release/downloadcmsfe/public/img/folder.005fa2e5.png)
![folder](https://csdnimg.cn/release/downloadcmsfe/public/img/folder.005fa2e5.png)
![file-type](https://csdnimg.cn/release/download/static_files/pc/images/minetype/UNKNOWN.png)
![folder](https://csdnimg.cn/release/downloadcmsfe/public/img/folder.005fa2e5.png)
![file-type](https://csdnimg.cn/release/download/static_files/pc/images/minetype/UNKNOWN.png)
![file-type](https://csdnimg.cn/release/download/static_files/pc/images/minetype/UNKNOWN.png)
![file-type](https://csdnimg.cn/release/download/static_files/pc/images/minetype/UNKNOWN.png)
![folder](https://csdnimg.cn/release/downloadcmsfe/public/img/folder.005fa2e5.png)
![folder](https://csdnimg.cn/release/downloadcmsfe/public/img/folder.005fa2e5.png)
![folder](https://csdnimg.cn/release/downloadcmsfe/public/img/folder.005fa2e5.png)
![file-type](https://csdnimg.cn/release/download/static_files/pc/images/minetype/UNKNOWN.png)
![file-type](https://csdnimg.cn/release/download/static_files/pc/images/minetype/UNKNOWN.png)
![file-type](https://csdnimg.cn/release/download/static_files/pc/images/minetype/UNKNOWN.png)
![file-type](https://csdnimg.cn/release/download/static_files/pc/images/minetype/UNKNOWN.png)
![folder](https://csdnimg.cn/release/downloadcmsfe/public/img/folder.005fa2e5.png)
![file-type](https://csdnimg.cn/release/download/static_files/pc/images/minetype/UNKNOWN.png)
![file-type](https://csdnimg.cn/release/download/static_files/pc/images/minetype/UNKNOWN.png)
![file-type](https://csdnimg.cn/release/download/static_files/pc/images/minetype/UNKNOWN.png)
![file-type](https://csdnimg.cn/release/download/static_files/pc/images/minetype/UNKNOWN.png)
![file-type](https://csdnimg.cn/release/download/static_files/pc/images/minetype/UNKNOWN.png)
![file-type](https://csdnimg.cn/release/download/static_files/pc/images/minetype/UNKNOWN.png)
![folder](https://csdnimg.cn/release/downloadcmsfe/public/img/folder.005fa2e5.png)
![folder](https://csdnimg.cn/release/downloadcmsfe/public/img/folder.005fa2e5.png)
![file-type](https://csdnimg.cn/release/download/static_files/pc/images/minetype/UNKNOWN.png)
![file-type](https://csdnimg.cn/release/download/static_files/pc/images/minetype/UNKNOWN.png)
![file-type](https://csdnimg.cn/release/download/static_files/pc/images/minetype/UNKNOWN.png)
![file-type](https://csdnimg.cn/release/download/static_files/pc/images/minetype/UNKNOWN.png)
![folder](https://csdnimg.cn/release/downloadcmsfe/public/img/folder.005fa2e5.png)
![file-type](https://csdnimg.cn/release/download/static_files/pc/images/minetype/UNKNOWN.png)
![file-type](https://csdnimg.cn/release/download/static_files/pc/images/minetype/UNKNOWN.png)
![file-type](https://csdnimg.cn/release/download/static_files/pc/images/minetype/UNKNOWN.png)
![file-type](https://csdnimg.cn/release/download/static_files/pc/images/minetype/UNKNOWN.png)
![file-type](https://csdnimg.cn/release/download/static_files/pc/images/minetype/UNKNOWN.png)
![file-type](https://csdnimg.cn/release/download/static_files/pc/images/minetype/UNKNOWN.png)
![file-type](https://csdnimg.cn/release/download/static_files/pc/images/minetype/UNKNOWN.png)
![folder](https://csdnimg.cn/release/downloadcmsfe/public/img/folder.005fa2e5.png)
![folder](https://csdnimg.cn/release/downloadcmsfe/public/img/folder.005fa2e5.png)
![file-type](https://csdnimg.cn/release/download/static_files/pc/images/minetype/UNKNOWN.png)
![file-type](https://csdnimg.cn/release/download/static_files/pc/images/minetype/UNKNOWN.png)
![file-type](https://csdnimg.cn/release/download/static_files/pc/images/minetype/UNKNOWN.png)
![file-type](https://csdnimg.cn/release/download/static_files/pc/images/minetype/UNKNOWN.png)
![file-type](https://csdnimg.cn/release/download/static_files/pc/images/minetype/UNKNOWN.png)
![file-type](https://csdnimg.cn/release/download/static_files/pc/images/minetype/UNKNOWN.png)
![file-type](https://csdnimg.cn/release/download/static_files/pc/images/minetype/UNKNOWN.png)
![file-type](https://csdnimg.cn/release/download/static_files/pc/images/minetype/UNKNOWN.png)
![file-type](https://csdnimg.cn/release/download/static_files/pc/images/minetype/UNKNOWN.png)
![file-type](https://csdnimg.cn/release/download/static_files/pc/images/minetype/UNKNOWN.png)
![folder](https://csdnimg.cn/release/downloadcmsfe/public/img/folder.005fa2e5.png)
![file-type](https://csdnimg.cn/release/download/static_files/pc/images/minetype/UNKNOWN.png)
![file-type](https://csdnimg.cn/release/download/static_files/pc/images/minetype/UNKNOWN.png)
![folder](https://csdnimg.cn/release/downloadcmsfe/public/img/folder.005fa2e5.png)
![folder](https://csdnimg.cn/release/downloadcmsfe/public/img/folder.005fa2e5.png)
![file-type](https://csdnimg.cn/release/download/static_files/pc/images/minetype/UNKNOWN.png)
![folder](https://csdnimg.cn/release/downloadcmsfe/public/img/folder.005fa2e5.png)
![folder](https://csdnimg.cn/release/downloadcmsfe/public/img/folder.005fa2e5.png)
![folder](https://csdnimg.cn/release/downloadcmsfe/public/img/folder.005fa2e5.png)
![file-type](https://csdnimg.cn/release/download/static_files/pc/images/minetype/UNKNOWN.png)
![file-type](https://csdnimg.cn/release/download/static_files/pc/images/minetype/UNKNOWN.png)
![folder](https://csdnimg.cn/release/downloadcmsfe/public/img/folder.005fa2e5.png)
![file-type](https://csdnimg.cn/release/download/static_files/pc/images/minetype/UNKNOWN.png)
![file-type](https://csdnimg.cn/release/download/static_files/pc/images/minetype/UNKNOWN.png)
![folder](https://csdnimg.cn/release/downloadcmsfe/public/img/folder.005fa2e5.png)
![file-type](https://csdnimg.cn/release/download/static_files/pc/images/minetype/UNKNOWN.png)
![folder](https://csdnimg.cn/release/downloadcmsfe/public/img/folder.005fa2e5.png)
![folder](https://csdnimg.cn/release/downloadcmsfe/public/img/folder.005fa2e5.png)
![file-type](https://csdnimg.cn/release/download/static_files/pc/images/minetype/UNKNOWN.png)
![folder](https://csdnimg.cn/release/downloadcmsfe/public/img/folder.005fa2e5.png)
![folder](https://csdnimg.cn/release/downloadcmsfe/public/img/folder.005fa2e5.png)
![file-type](https://csdnimg.cn/release/download/static_files/pc/images/minetype/UNKNOWN.png)
![file-type](https://csdnimg.cn/release/download/static_files/pc/images/minetype/UNKNOWN.png)
![folder](https://csdnimg.cn/release/downloadcmsfe/public/img/folder.005fa2e5.png)
![file-type](https://csdnimg.cn/release/download/static_files/pc/images/minetype/UNKNOWN.png)
![folder](https://csdnimg.cn/release/downloadcmsfe/public/img/folder.005fa2e5.png)
![file-type](https://csdnimg.cn/release/download/static_files/pc/images/minetype/UNKNOWN.png)
![file-type](https://csdnimg.cn/release/download/static_files/pc/images/minetype/UNKNOWN.png)
![file-type](https://csdnimg.cn/release/download/static_files/pc/images/minetype/UNKNOWN.png)
![file-type](https://csdnimg.cn/release/download/static_files/pc/images/minetype/UNKNOWN.png)
![file-type](https://csdnimg.cn/release/download/static_files/pc/images/minetype/UNKNOWN.png)
![file-type](https://csdnimg.cn/release/download/static_files/pc/images/minetype/UNKNOWN.png)
![file-type](https://csdnimg.cn/release/download/static_files/pc/images/minetype/UNKNOWN.png)
![file-type](https://csdnimg.cn/release/download/static_files/pc/images/minetype/UNKNOWN.png)
![file-type](https://csdnimg.cn/release/download/static_files/pc/images/minetype/UNKNOWN.png)
共 56 条
- 1
资源评论
![avatar-default](https://csdnimg.cn/release/downloadcmsfe/public/img/lazyLogo2.1882d7f4.png)
![avatar](https://profile-avatar.csdnimg.cn/bc3c40a1700d40bc91a04af0dc7133fa_weixin_41883161.jpg!1)
九转成圣
- 粉丝: 3627
- 资源: 2956
![benefits](https://csdnimg.cn/release/downloadcmsfe/public/img/vip-rights-1.c8e153b4.png)
下载权益
![privilege](https://csdnimg.cn/release/downloadcmsfe/public/img/vip-rights-2.ec46750a.png)
C知道特权
![article](https://csdnimg.cn/release/downloadcmsfe/public/img/vip-rights-3.fc5e5fb6.png)
VIP文章
![course-privilege](https://csdnimg.cn/release/downloadcmsfe/public/img/vip-rights-4.320a6894.png)
课程特权
![rights](https://csdnimg.cn/release/downloadcmsfe/public/img/vip-rights-icon.fe0226a8.png)
开通VIP
上传资源 快速赚钱
我的内容管理 展开
我的资源 快来上传第一个资源
我的收益
登录查看自己的收益我的积分 登录查看自己的积分
我的C币 登录后查看C币余额
我的收藏
我的下载
下载帮助
![voice](https://csdnimg.cn/release/downloadcmsfe/public/img/voice.245cc511.png)
![center-task](https://csdnimg.cn/release/downloadcmsfe/public/img/center-task.c2eda91a.png)
最新资源
资源上传下载、课程学习等过程中有任何疑问或建议,欢迎提出宝贵意见哦~我们会及时处理!
点击此处反馈
![feedback](https://img-home.csdnimg.cn/images/20220527035711.png)
![feedback](https://img-home.csdnimg.cn/images/20220527035711.png)
![feedback-tip](https://img-home.csdnimg.cn/images/20220527035111.png)
安全验证
文档复制为VIP权益,开通VIP直接复制
![dialog-icon](https://csdnimg.cn/release/downloadcmsfe/public/img/green-success.6a4acb44.png)