基于qiankun的微服务落地实践

基于qiankun的微服务落地实践_第1张图片

前言

  近些年,前端发展火热, 百家争鸣, 各种技术层出不穷,如今的前端已经不再像以前一样就是简单的写页面、调样式、处理DOM等，现在的前端工作内容越来越复杂，技术点也越来越丰富。
  当前，基于 Vue、React、Angular 的单页应用开发模式已经成为业界主流, 基本上成为近几年前端项目必备技术, 其前端生态也逐渐完善, 我们可以利用这些技术与生态快速构建一个新的应用, 这也大大缩短了项目的研发周期.
  但是随着公司业务的不断发展，前端业务越来越复杂，SPA模式势必会导致项目文件越来越多, 构建速度越来越慢, 代码和业务逻辑也越来越难以维护,应用开始变得庞大臃肿，逐渐成为一个巨石应用
面对一个庞大,具有悠久历史的项目, 在日常开发、上线时都需要花费不少的时间来构建项目，这样的现象对开发人员的开发效率和体验都造成了极不好的影响, 因此解决巨石问题, 迫在眉睫, 势在必行.
  因此我们需要选择一个合适的方案，能不影响现有项目的继续迭代, 能兼容新的的技术栈，能支持老项目的增量升级, 新技术的加入不影响线上的稳定运行,
  如果有这样一个应用, 每个独立模块都有一个独立仓库，独立开发、独立部署、独立访问、独立维护，还可以根据团队的特点自主选择适合自己的技术栈，这样就能够解决我们所面临的问题, 还能极大的提升开发人员的效率和体验.

业务背景

  运营平台是我们内部使用的一套管理系统, 并一直跟随业务保持着两周一个版本的迭代工作, 后期的需求也很多.

  因历史原因框架选型采用Angular8.x开发，并且累计超过 10+ 位开发者参与业务开发，是一个页面数量多、逻辑关系混乱、注释信息不够完整、技术规范不统一、代码量的庞大，构建、部署的低效等问题的“巨石应用”。

  考虑到组件复用以及降低维护成本，在想怎么可以做到及时止损，,控制住项目指数级的野蛮生长,并把 Vue 技术运用到项目中同时使用。

  因此统一技术栈、工程拆分、规范化开发提上了工作日程，并期望各工程原有访问地址维持不变，使用户感知不到变化。
​
  系统是采用传统的布局结构，头部导航展示一级菜单, 左侧展示一级菜单下的二级菜单, 所有页面内容都呈现在中间白色区域。

基于qiankun的微服务落地实践_第2张图片

项目文件统计
基于qiankun的微服务落地实践_第3张图片
页面与组件总数已经超过1000个, 代码总量超过17万行.

Jenkins构建一次时间
基于qiankun的微服务落地实践_第4张图片
单次构建时间达到12min之久,在遇到多项目并发构建时时间甚至会更久,严重影响开发/测试/生产的部署效率.
​

面临问题

从可行性、成本、技术方案、事故、回归验证等方面考虑以下问题
1.需要将现有项目按照业务或其它一定的规则进行拆分
2.现有项目的迭代计划不受影响
3.不能影响线上用户使用
4.框架需要支持原有的Angular技术与新接入的Vue2/Vue3技术
5.总体项目性能不能牺牲过大,会影响使用.
6.对于拆分改造,能否输出文档
7.全盘改造的成本评估是否合理
8.改动的影响范围是否可控
9.团队成员是否需要提前进行相关技术学习培训
10.首次上线是否存在突发事故风险与应对方案
11.如何进行回归测试.
12.微服务化后团队合作需要做出哪些改变.

目标

1、能够实现增量升级,尽可能减少对现有迭代开发的进度影响
2、保持原有访问地址不变，让用户无感知变化，不带来任何多余麻烦
3、大型模块可以分开开发、独立部署，实现工程拆分
4、删除无用代码，精简代码以及实现前端代码的规范化,易于后期维护
5、整理出组件库,实现内网部署,实现公共组件复用目的
6、提高页面加载性能以及预期达到整体项目性能的提高
7、增加监控体系,能有效收集到线上遗留异常问题
8、清晰梳理各模块业务,提高团队成员对项目、业务等的认识

方案对比

基于qiankun的微服务落地实践_第5张图片

qiankun介绍

  _qiankun 是一个基于 single-spa 的_微前端实现库，旨在帮助大家能更简单、无痛的构建一个生产可用微前端架构系统。

  _qiankun 孵化自蚂蚁金融科技基于微前端架构的云产品统一接入平台，在经过一批线上应用的充分检验及打磨后，我们将其微前端内核抽取出来并开源，希望能同时帮助社区有类似需求的系统更方便的构建自己的微前端系统，同时也希望通过社区的帮助将 qiankun 打磨的更加成熟完善。_
目前 qiankun 已在蚂蚁内部服务了超过 200+ 线上应用，在易用性及完备性上，绝对是值得信赖的。 ------摘自qiankun官网介绍

Single-SPA的简要介绍

  2018年 Single-SPA诞生了，single-spa是一个用于前端微服务化的JavaScript前端解决方案（本身没有处理样式隔离，js执行隔离）实现了路由劫持和应用加载；目前已经发展到5.x版本.官网:https://single-spa.js.org/

qiankun的简要介绍

很多人可能会好奇 qiankun 这个名字是怎么来的。实际上源自于这句话：小世界有大乾坤。我们希望在微前端这个小世界里面，通过 qiankun 这个框架鼓捣一个大乾坤。

                                                               方涣  ––  蚂蚁金服体验技术部前端工程师

​

  在 qiankun 里直接选用了社区成熟的方案 Single-SPA。 Single-SPA 已经具有劫持路由的功能，并完成了应用加载功能，也支持路由切换的操作，所以在开源的基础上进行设计与开发可以节省很多成本, 不需要重复造轮了。正是因为基于Single-SPA这样强大的开源支持,qiankun最早在2019年就已问世, 它提供了更加开箱即用的 API （single-spa + sandbox + import-html-entry） 做到了技术栈无关，并且接入简单（有多简单呢，像iframe一样简单）。
​

  • 什么样的一个应用能够成为子应用，能够接入到qiankun的框架应用里？
    由于对接qiankun的子应用与技术栈无关，所以qiankun框架在设计上也考虑协议接入的方式。也就是说只要你的应用实现了 bootstrap 、mount 和 unmount 三个生命周期钩子，有这三个函数导出，负责外层的框架应用就可以知道如何加载这个子应用.这三个钩子也正好是子应用的生命周期钩子。当子应用第一次挂载的时候，会执行 bootstrap 做一些初始化，然后执行 mount 将它挂载。如果是一个 React 技术栈的子应用，可能就在 mount 里面写 ReactDOM.render ，把项目的 ReactNode 挂载到真实的节点上，把应用渲染出来。当应用切换走的时候，会执行 unmount 把应用卸载掉，当它再次回来的时候（典型场景：你从应用 A 跳到应用 B，过了一会儿又跳回了应用 A），这个时候是不需要重新执行一次所有的生命周期钩子的，也就是说不需要从 bootstrap 开始，而是会直接从 mount 阶段继续，这就也做到了应用的缓存。
  • 子应用的入口又如何选择？
    qiankun 在这里选择的是 HTML，就是以 HTML 作为入口。借用了 Single-SPA 能力之后，qiankun已经基本解决了应用的加载与切换。我们接下来要解决的另一块事情是应用的隔离和通信。

最佳实践

  基于qiankun微服务的前端框架, 其架构基本可以概括为: 基座应用 + 子应用 + 公共依赖方式。
基座应用可以理解为一个用于承载子应用的运行容器,所有的子应用都在这个容器内完成一系列初始化、挂载等生命周期。子应用即拆分出来个的一些子系统做成的应用。
  公共依赖就是抽离出在主应用与子应用中都会存在的公共依赖, 抽离出来后只需要在加载主应用时初始化, 其它子应用只需使用即可，无需重复加载。
  我们这里采用的技术栈是主应用Vue3，原系统拆分为四个子应用(Angular框架)，新增一个子应用(Vue3框架). 新增的子应用用于承载后续的业务需求开发。
基于qiankun的微服务落地实践_第6张图片

初始化基座项目, 通过vue/cli快速创建一个vue项目

vue create appbase

安装完成后，运行如下，vue的默认首页，只要保证能够正常运行就好。
基于qiankun的微服务落地实践_第7张图片

构建主应用基座， 开始进行改造 , 首先安装qiankun。​
基于qiankun的微服务落地实践_第8张图片
​

安装完qiankun后，先对main.ts进行改造，针对主应用进行配置, 这里我们需要定义并注册微服务应用, 并添加全局状态管理与消息通知机制
apps.ts文件用于统一存放微应用的信息
微应用配置信息中的container是用于设定微应用挂载节点的，要与自己设定的节点

中的id保持一致

// src/core/apps.ts

import { RegistrableApp } from "qiankun";
const container = '#subapp';
const props = {};

export const apps: Partial>[] = [
    {
        name: 'app1',
        entry: 'http://localhost:8081',
        activeRule: `/portal/app1`,
        container,
        props
    }
];
// src/main.ts

import {
    addGlobalUncaughtErrorHandler,
    FrameworkLifeCycles,
    registerMicroApps,
    RegistrableApp,
    runAfterFirstMounted
} from "qiankun";
import '@/plugins/polyfills';
import { createApp, App as AppType } from "vue";
import App from './App';
import { setupComponents } from './components';
import { setupDirectives } from './directives';
// import { setupHooks } from './hooks';
import { setupI18n } from './locales';
import { setupAntd, /**setupEcharts,*/ setupMitt, setupVxe } from './plugins';
import router, { setupRouter } from './router';
import { setupStore } from './store';
import { getApp, setApp, updateApp } from './useApp';
import { mockXHR } from '@/mock/index';
import { isDevMode, isMockMode } from './utils/env';
// import 'css-doodle';
import './style.less';
// Tailwind
// import "@/assets/css/styles.css";
import { setupEcharts } from "./plugins/echarts";
import { AppPager as pager } from "./core/app.pager";
import { apps } from "./core/apps";

// 主应用
let app: AppType | any;

// 生产模式覆盖console方法为空函数
function disableConsole() {

    // @ts-ignore
    Object.keys(window.console).forEach(v => window.console[v] = function () { });
}
!isDevMode() && disableConsole();


// 判断是否为mock模式
isMockMode() && mockXHR();


// 封装渲染函数
const loader = (loading: boolean) => render({ loading });
const render = (props: any) => {
    const { appContent, loading } = props;
    if (!app) {

        app = createApp(App);

        // app
        setApp(app);

        // ui
        setupAntd(app);

        // store
        setupStore(app);

        // router
        setupRouter(app);

        // components
        setupComponents(app);

        // directives
        setupDirectives(app);

        // i18n
        setupI18n(app);

        // report
        setupEcharts(app);

        // EventBus
        setupMitt(app);

        // DataTable
        setupVxe(app);

        // mount
        router.isReady().then(() => {

            app.mount('#app', true);
        });
    } else {
        // console.log(app);
        console.log('loading : ', loading);
        app.content = appContent;
        app.loading = loading;
        updateApp(app);
    }
}

// 主应用渲染
render({ loading: true });


// 注册子应用
const microApps: RegistrableApp[] = [
    ...apps.map(mapp => {
        return {
            ...mapp,
            props: {
                ...mapp.props,
                app,
                pager
            }
        } as RegistrableApp;
    })
];
const lifeCycles: FrameworkLifeCycles = {
    // beforeLoad: app => new Promise(resolve => {

    //     console.log("app beforeLoad", app);
    //     resolve(true);
    // }),
    // afterUnmount: app => new Promise(resolve => {

    //     console.log("app afterUnmount", app);
    //     resolve(true);
    // })
};
registerMicroApps(microApps, lifeCycles);

// 启动微服务
const opts: FrameworkConfiguration = { prefetch: false };
start(opts);

运行起来 看下页面效果
基于qiankun的微服务落地实践_第9张图片
是的，没有错，还是Vue项目最开始的默认效果，因为我们只对main.ts进行了改造，在没有接入子应用时候，主营用作为一个独立应用仍然是可以运行的。
总结一下main.ts的改造过程:

  1. 初始化基座应用 vue create appbase
  2. 安装乾坤 yarn add qiankun或 npm i qiankun -S
  3. 设置微服务应用挂载的DOM节点
    ,注意这个id需要在注册子应用时使用
  4. 定义子应用 appbase\src\core\apps.ts
  5. 改造main.ts, 注册子应用并添加相关工具类函数.

到此一个基座应用的开发先告一段落, 接下来就是需要定义子应用,并确保定义的子应用能在当前基座应用下成功运行.

​

创建微应用容器

我们在实践项目中使用的是Vue3作为基座应用, 原有的Angular项目拆分为多个子应用, 并新增加了一个Vue的子应用. 为了增加对qiankun的理解, 本文特意在实例中增加了不同版本的Angular框架以及React框架的微应用演示.
​

接入Vue子应用app1(vue3)

1.创建子应用app1, 方式同上，仍然使用vue/cli创建

vue create app1

2.对子应用进行改造。
添加vue.config.js, 有两点需要注意:

  1. output需要设置为umd格式的library, 这样主应用就可以加载当前lib并运行.

  2. devServe端口需要设置与注册该子应用时的端口一致, 并设置cors, 因为子应用与主应用不同域.

    // vue.config.js

const {
 name
} = require('./package.json');

module.exports = {
 filenameHashing: true,
 productionSourceMap: false,
 css: {
     extract: true,
     sourceMap: false,
     requireModuleExtension: true,
     loaderOptions: {
         less: {
             lessOptions: {
                 modifyVars: {
                     'primary-color': '#00cd96',
                     'link-color': '#00cd96',
                     'border-radius-base': '4px',
                 },
                 javascriptEnabled: true,
             },
         },
     }
 },

 configureWebpack: {
     output: {
         library: `app1-[name]`,
         libraryTarget: 'umd',
         jsonpFunction: `webpackJsonp_${name}`,
     },
     resolve: {
         extensions: [".js", ".vue", ".json", ".ts", ".tsx"]
     },
     module: {
         rules: []
     },
     plugins: [
         // ...plugins
     ],
     externals: {
         // 'vue': 'Vue',
         // 'vue-router': 'VueRouter',
         // 'axios': 'axios'
     },
     // 开启分离js
     optimization: {
         runtimeChunk: 'single',
         splitChunks: {
             chunks: 'all',
             maxInitialRequests: Infinity,
             minSize: 20000,
             cacheGroups: {
                 vendor: {
                     test: /[\\/]node_modules[\\/]/,
                     name(module) {
                         // get the name. E.g. node_modules/packageName/not/this/part.js
                         // or node_modules/packageName
                         const packageName = module.context.match(/[\\/]node_modules[\\/](.*?)([\\/]|$)/)[1];
                         // npm package names are URL-safe, but some servers don't like @ symbols
                         return `app1.${packageName.replace('@', '')}`
                     }
                 }
             }
         }
     },
     // 取消webpack警告的性能提示
     performance: {
         hints: 'warning',
         // 入口起点的最大体积
         maxEntrypointSize: 50000000,
         // 生成文件的最大体积
         maxAssetSize: 30000000,
         // 只给出 js 文件的性能提示
         assetFilter: function (assetFilename) {

             return assetFilename.endsWith('.js');
         }
     }
 },
 devServer: {
     hot: true,
     disableHostCheck: true,
     port: 8081,
     overlay: {
         warnings: false,
         errors: true,
     },
     headers: {
         'Access-Control-Allow-Origin': '*'
     }
 }
}


3.改造子应用的main.ts

  1. 子应用的接入需要符合qiankun的接入协议

    微应用需要在自己的入口 js (通常就是你配置的 webpack 的 entry js) 导出 bootstrap、mount、unmount 三个生命周期钩子，以供主应用在适当的时机调用。

  2. 子应用不需要额外安装任何其它依赖即可接入主应用

    // app1\src\main.ts

import { mockXHR } from '@/mock/index';
import '@/plugins/polyfills';
import { App as AppType, createApp } from "vue";
import App from './App';
import { setupComponents } from './components';
import { setPager } from './core/app.pager';
import { setupDirectives } from './directives';
// import { setupHooks } from './hooks';
import { setupI18n } from './locales';
import { setupAntd, /**setupEcharts,*/ setupMitt, setupVxe } from './plugins';
// Tailwind
// import "@/assets/css/styles.css";
import { setupEcharts } from "./plugins/echarts";
import router, { setupRouter } from './router';
import { setupStore } from './store';
// import 'css-doodle';
import './style.less';
import { setApp } from './useApp';
import { isDevMode, isMockMode } from './utils/env';

// 主应用
let app: AppType | any;

// 生产模式覆盖console方法为空函数
function disableConsole() {

 // @ts-ignore
 Object.keys(window.console).forEach(v => window.console[v] = function () { });
}
!isDevMode() && disableConsole();

// 判断是否为mock模式
isMockMode() && mockXHR();

// 封装渲染函数
// const loader = (loading: boolean) => render({ loading });
const render = (props: any) => {
 const {
     appContent,
     loading,
     container,
     pager
 } = props;
 if (!app) {

     app = createApp(App);

     // app
     setApp(app);

     // ui
     setupAntd(app);

     // store
     setupStore(app);

     // router
     setupRouter(app);

     // components
     setupComponents(app);

     // directives
     setupDirectives(app);

     // i18n
     setupI18n(app);

     // report
     setupEcharts(app);

     // EventBus
     setupMitt(app);

     // DataTable
     setupVxe(app);

     // registe pager
     setPager(pager);

     // mount
     router.isReady().then(() => {

         app.mount(container ? container.querySelector('#app') : '#app', true);
     });
 } else {
     app.content = appContent;
     app.loading = loading;
 }
}

// 是否运行在微服务环境中
const isMicroApp: boolean = (window as any).__POWERED_BY_QIANKUN__;

// 允许独立运行 方便调试
isMicroApp || render({});

if (isMicroApp) __webpack_public_path__ = (window as any).__INJECTED_PUBLIC_PATH_BY_QIANKUN__;

// 微服务接入协议
export async function bootstrap() {

}

export async function mount(props: any) {

 // 订阅主应用全局状态变更通知事件
 props.onGlobalStateChange((state, prev) => {
     // state: 变更后的状态; prev 变更前的状态
     console.log(state, prev);
 });

 render(props);
}

export async function unmount() {
 if (app) {
     app.unmount();
     app._container.innerHTML = '';
     app = null;
 }
}

接入Angular子应用app2(Angular12)

1.创建子应用App2, Angular子应用, app2采用了Angular12版本,
ng new app2


2.注册微应用
appbase\src\core\apps.ts

import { RegistrableApp } from "qiankun";
const container = '#subapp';
const props = {};

export const apps: Partial>[] = [
    {
        name: 'app1',
        entry: 'http://localhost:8081',
        activeRule: `/portal/app1`,
        container,
        props
    },
    {
        name: 'app2',
        entry: 'http://localhost:8082',
        activeRule: `/portal/app2`,
        container,
        props
    },
    {
        name: 'app3',
        entry: 'http://localhost:8083',
        activeRule: `/portal/app3`,
        container,
        props
    }
];

3.配置微应用
ng add single-spa
ng add single-spa-angular
​

在生成 single-spa 配置后，我们需要进行一些 qiankun 的接入配置。我们在 Angular 微应用的入口文件 main.single-spa.ts 中，导出 qiankun 主应用所需要的三个生命周期钩子函数，代码实现如下：
​

app2\src\main.single-spa.ts

import { enableProdMode, NgZone } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { NavigationStart, Router } from '@angular/router';
import { getSingleSpaExtraProviders, singleSpaAngular } from 'single-spa-angular';
import { AppModule } from './app/app.module';
import { environment } from './environments/environment';
import { singleSpaPropsSubject } from './single-spa/single-spa-props';

if (environment.production) {
  enableProdMode();
}
const __qiankun__ = (window).__POWERED_BY_QIANKUN__;

if (!__qiankun__) {
  platformBrowserDynamic().bootstrapModule(AppModule)
    .catch(err => console.error(err));
}

const lifecycles = singleSpaAngular({
  bootstrapFunction: singleSpaProps => {
    singleSpaPropsSubject.next(singleSpaProps);
    return platformBrowserDynamic(getSingleSpaExtraProviders()).bootstrapModule(AppModule);
  },
  template: '',
  Router,
  NavigationStart,
  NgZone
});

export const bootstrap = lifecycles.bootstrap;
export const mount = lifecycles.mount;
export const unmount = lifecycles.unmount;

​

添加启动命令
app2:
"serve:single-spa": "ng s --project app2 --disable-host-check --port 8082 --live-reload false"
​

​

接入Angular子应用app3(Angular13)

创建子应用app3, Angular子应用, app3采用了最新版Angular13,
ng new app3
​

配置微应用
app3\src\main.ts

import { enableProdMode,NgModuleRef} from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { Subject } from 'rxjs';
import { setPager } from './app/@core/pager';
import { AppModule } from './app/app.module';
import { environment } from './environments/environment';
import './public-path'; 

if (environment.production) {
  enableProdMode();
}

let app: void | NgModuleRef;

async function render() {
  app = await platformBrowserDynamic()
    .bootstrapModule(AppModule)
    .catch((err) => console.error(err));
}
if (!(window as any).__POWERED_BY_QIANKUN__) {
  render();
}

export async function bootstrap(props: Object) {
}

export async function mount(props: any) {

  const pager: Subject = props.pager as Subject;
  setPager(pager);
  
  await render();
}

export async function unmount(props: Object) {
  // @ts-ignore
  await app.destroy();
}

​

添加启动命令
"serve:single-spa": "ng s --project app3 --disable-host-check --port 8083 --live-reload false"
​

接入React子应用app4(React17 craco)

1.创建子应用app4,React子应用
npx create-react-app app4 --template typescript
​

2.子应用改造
app4\craco.config.js

const path = require('path');
const resolve = dir => path.resolve(__dirname, dir);
const CracoLessPlugin = require("craco-less");
const SimpleProgressWebpackPlugin = require('simple-progress-webpack-plugin');
const WebpackBar = require('webpackbar');

module.exports = {
    webpack: {
        alias: {
            '@': path.resolve('./src')
        },
        configure: (webpackConfig, {
            env,
            paths
        }) => {
            paths.appBuild = 'dist';

            webpackConfig.output = {
                ...webpackConfig.output,
                library: 'app4',
                libraryTarget: 'umd',
                path: path.resolve(__dirname, 'dist'),
                publicPath: 'http://localhost:8084/'
            };

            webpackConfig.plugins = [
                ...webpackConfig.plugins,
                new WebpackBar({
                    profile: true
                }),
            ];

            return webpackConfig
        }
    },
    plugins: [{
        plugin: CracoLessPlugin,
        // 自定义主题配置
        options: {
            lessLoaderOptions: {
                lessOptions: {
                    modifyVars: {
                        '@primary-color': '#1DA57A'
                    },
                    javascriptEnabled: true
                }
            }
        }
    }],
    //抽离公用模块
    optimization: {
        splitChunks: {
            cacheGroups: {
                commons: {
                    chunks: 'initial',
                    minChunks: 2,
                    maxInitialRequests: 5,
                    minSize: 0
                },
                vendor: {
                    test: /node_modules/,
                    chunks: 'initial',
                    name: 'vendor',
                    priority: 10,
                    enforce: true
                }
            }
        }
    },
    devServer: {
        port: 8084,
        headers: {
            'Access-Control-Allow-Origin': '*'
        },
        proxy: {
            '/api': {
                target: 'https://placeholder.com/',
                changeOrigin: true,
                secure: false,
                xfwd: false,
            }
        }
    }
}

app4\src\index.tsx

import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter as Router } from "react-router-dom";
import './index.css';
import App from './App';
import { setPager } from './core/app.pager';
import './public_path';

function render(props: any) {
  const { container, pager } = props;
  setPager(pager);

  ReactDOM.render(
    ,
    getSubRootContainer(container)
  );
}

function getSubRootContainer(container: any) {

  return container ? container.querySelector('#root') : document.querySelector('#root');
}

if (!window.__POWERED_BY_QIANKUN__) {
  render({})
}

export async function bootstrap() {

}
export async function mount(props: any) {

  render(props)
}
export async function unmount(props: any) {
  const { container } = props;
  ReactDOM.unmountComponentAtNode(getSubRootContainer(container));
}

添加启动命令
"serve:single-spa": "set PORT=8084 && craco start FAST_REFRESH=true"
​

接入React子应用app5(React17 react-scripts)

1.创建子应用app5,React子应用
npx create-react-app app4 --template typescript
​

2.子应用改造
app5\config-overrides.js

module.exports = {
    webpack: (config) => {
        config.output.library = 'app5';
        config.output.libraryTarget = 'umd';
        config.output.publicPath = 'http://localhost:8085/';
        return config;
    },
    devServer: (configFunction) => {
        return function (proxy, allowedHost) {
            const config = configFunction(proxy, allowedHost);
            config.headers = {
                "Access-Control-Allow-Origin": '*'
            }
            return config
        }
    }
}

app5\src\index.tsx

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import './public_path';
import { setPager } from './core/app.pager';

function render(props: any) {
  const { container,pager } = props;
  setPager(pager);
  
  ReactDOM.render(
    
      
    ,
    getSubRootContainer(container)
  );
}

function getSubRootContainer(container: any) {

  return container ? container.querySelector('#root') : document.querySelector('#root');
}

if (!window.__POWERED_BY_QIANKUN__) {
  render({})
}

export async function bootstrap() {

}
export async function mount(props: any) {

  render(props)
}
export async function unmount(props: any) {
  const { container } = props;
  ReactDOM.unmountComponentAtNode(getSubRootContainer(container));
}


添加启动命令
"serve:single-spa": "react-app-rewired start"

​

通过二级路由初始化

在实际项目开发中,我们所需要展示的页面通常不是一级路由直接呈现的, 可能会存在多母版页, 多级嵌套场景, 这种情况下可能需要在主应用导航到某个页面之后再呈现子应用的内容.我们可以在某个二级路由进行微应用的初始化.
首先我们需要创建一个二级路由/potal/._(在以Angular, React技术为主应用时,实现原理也是一样的.)_
appbase\src\views\portal

import { getApp } from '@/useApp';
import { isDevMode } from '@/utils/env';
import { FrameworkConfiguration, initGlobalState, MicroAppStateActions, start } from 'qiankun';
import { defineComponent, onMounted, Ref, ref } from 'vue';
import { useRouter } from 'vue-router';
import DevPage from '../dev';
import Style from './style.module.less';

export default defineComponent({
    name: 'portal',
    setup() {
        const router = useRouter();
        const app: any = getApp();

        // 页面loaindg
        const appLoading: Ref = ref(true);
        const timer: NodeJS.Timer = setInterval(() => {
            console.log('wathing')
            if (appLoading.value) {
                appLoading.value = app.loading;
            } else {
                clearInterval(timer);
            }
        }, 500)


        // 初始化 state
        const state: Record = {
            'main.version': 'v0.0.1'
        };
        const actions: MicroAppStateActions = initGlobalState(state);
        // actions.onGlobalStateChange((state, prev) => {
        //     // state: 变更后的状态; prev 变更前的状态
        //     console.log(state, prev);
        // });
        actions.setGlobalState(state);
        // actions.offGlobalStateChange();


        // 启动微服务
        onMounted(() => {
            if (!(window as any).qiankunStarted) {
                (window as any).qiankunStarted = true;

                // 启用微服务
                const isPrefetch = !isDevMode();
                const opts: FrameworkConfiguration = {
                    // 在生产模式下开启预加载
                    prefetch: isPrefetch,
                    // 此处禁用沙箱 以提高部分性能
                    sandbox: false
                };
                start(opts);
            }
        });

        // 改变全局状态
        const changeGlobalState = async () => {
            console.log('change global state');
            actions.setGlobalState({
                ...state,
                'stamp': new Date().getTime()
            });
        }

        // 应用跳转
        const redirectUrl = (path: string) => {

            router.replace(`/portal${path}`);
        }

        return () => (
            <>
                
                    
                        
AppBase Portal {appLoading.value && 'loading'}

                        
                            {{
                                buttons: () => (
                                    修改全局状态
                                )
                            }}
                        
                    
                    
                        
                            
                                 redirectUrl('/app1')} key="app1">
                                    App1
                                
                                 redirectUrl('/app2')} key="app2">
                                    App2
                                
                                 redirectUrl('/app3')} key="app3">
                                    App3
                                
                                 redirectUrl('/app4')} key="app4">
                                    App4
                                
                                 redirectUrl('/app5')} key="app5">
                                    App5
                                
                            
                        
                        
                            {
                                appLoading.value && (
                                    

                                        

                                        

                                        

                                        

                                    

                                )
                            }
                            

                        
                    
                    Footer
                
            
        )
    }
});


经过改造后完整main.ts完整代码如下

// src/main.ts

import {
    addGlobalUncaughtErrorHandler,
    FrameworkLifeCycles,
    registerMicroApps,
    RegistrableApp,
    runAfterFirstMounted
} from "qiankun";
import '@/plugins/polyfills';
import { createApp, App as AppType } from "vue";
import App from './App';
import { setupComponents } from './components';
import { setupDirectives } from './directives';
// import { setupHooks } from './hooks';
import { setupI18n } from './locales';
import { setupAntd, /**setupEcharts,*/ setupMitt, setupVxe } from './plugins';
import router, { setupRouter } from './router';
import { setupStore } from './store';
import { getApp, setApp, updateApp } from './useApp';
import { mockXHR } from '@/mock/index';
import { isDevMode, isMockMode } from './utils/env';
// import 'css-doodle';
import './style.less';
// Tailwind
// import "@/assets/css/styles.css";
import { setupEcharts } from "./plugins/echarts";
import { AppPager as pager } from "./core/app.pager";
import { apps } from "./core/apps";

// 主应用
let app: AppType | any;

// 生产模式覆盖console方法为空函数
function disableConsole() {

    // @ts-ignore
    Object.keys(window.console).forEach(v => window.console[v] = function () { });
}
!isDevMode() && disableConsole();


// 判断是否为mock模式
isMockMode() && mockXHR();


// 封装渲染函数
const loader = (loading: boolean) => render({ loading });
const render = (props: any) => {
    const { appContent, loading } = props;
    if (!app) {

        app = createApp(App);

        // app
        setApp(app);

        // ui
        setupAntd(app);

        // store
        setupStore(app);

        // router
        setupRouter(app);

        // components
        setupComponents(app);

        // directives
        setupDirectives(app);

        // i18n
        setupI18n(app);

        // report
        setupEcharts(app);

        // EventBus
        setupMitt(app);

        // DataTable
        setupVxe(app);

        // mount
        router.isReady().then(() => {

            app.mount('#app', true);
        });
    } else {
        // console.log(app);
        console.log('loading : ', loading);
        app.content = appContent;
        app.loading = loading;
        updateApp(app);
    }
}

// 主应用渲染
render({ loading: true });


// 注册子应用
const microApps: RegistrableApp[] = [
    ...apps.map(mapp => {
        return {
            ...mapp,
            props: {
                ...mapp.props,
                app,
                pager
            }
        } as RegistrableApp;
    })
];
const lifeCycles: FrameworkLifeCycles = {
    // beforeLoad: app => new Promise(resolve => {

    //     console.log("app beforeLoad", app);
    //     resolve(true);
    // }),
    // afterUnmount: app => new Promise(resolve => {

    //     console.log("app afterUnmount", app);
    //     resolve(true);
    // })
};
registerMicroApps(microApps, lifeCycles);

// // 启动微服务
// const opts: FrameworkConfiguration = { prefetch: false };
// start(opts);

// 第一个子应用加载完毕回调
runAfterFirstMounted(() => {

    console.log('First App Mounted !!!')
});

// 设置全局未捕获异常处理器
addGlobalUncaughtErrorHandler(event => {

    console.log(event);
});

130-132行:去掉了原来在main.ts中的启动方式, 该方法调用在protal页面中实现.

项目结构

项目总体结构如下项目结构如下

qiankunapp
├─ app1
├─ app2
├─ app3
├─ app4
├─ app5
└─ appbase

appbase: 基座应用(主应用), vue3 + typescript + tsx + antv

  • app1 - app5表示不同技术框架的子应用
  • app1: vue3 + typescript + tsx + antv
  • app2: Angular12 + typescript + ngzorro
  • app3: Angular13 + typescript + ngzorro
  • app4: React17 + typescript + craco + antd
  • app5: React17 + typescript + react-scripts +antd

完整功能演示




进阶

1.全局状态管理
主应用
appbase\src\views\portal\index.tsx

import { 
  FrameworkConfiguration, 
  initGlobalState, 
  MicroAppStateActions, 
  start 
} from 'qiankun';

// 初始化 state
const state: Record = {
  'main.version': 'v0.0.1'
};
const actions: MicroAppStateActions = initGlobalState(state);
actions.setGlobalState(state);

子应用
app1\src\main.ts

export async function mount(props: any) {

    // 订阅主应用全局状态变更通知事件
    props.onGlobalStateChange((state, prev) => {
        // state: 变更后的状态; prev 变更前的状态
        console.log(state, prev);
    });

    render(props);
}


2.应用间通讯
这里我们采用了rxjs实现应用间的消息发布/订阅
主应用
appbase\src\core\app.pager.ts

import { filter, throttleTime } from 'rxjs/operators';
import { Observable, Subject } from "rxjs";
import router from '@/router';

// 消息来源
export enum PagerEnum {
    // 主应用
    BASE = 1,
    // 子应用
    SUB = 2
}

// 消息主体类型
export interface PagerMessage {
    from: PagerEnum;
    data: any;
}

export const AppPager: Subject = new Subject();

// 主应用下发消息
export const PagerIssue = data => {
    const msg: PagerMessage = {
        from: PagerEnum.BASE,
        data: data
    };
    AppPager.next(msg);
}

// 主应用收集子应用的消息
export const PagerCollect: Observable = AppPager.pipe(
    throttleTime(500),
    filter((msg: any) => msg.from == PagerEnum.SUB)
);


// pager数据处理
export const HandlePagerMessage = ({ type, url }) => {
    switch (type) {
        case 'navigate':
            {
                router.replace(url);
            }
            break;

        default:
            console.log('未识别的操作');
            break;
    }
}

子应用
app1\src\core\app.pager.ts

import { Subject, Observable } from "rxjs";
import { filter, throttleTime } from 'rxjs/operators';

let SubAppPager;

export const setPager = (_pager: Subject) => {

    SubAppPager = _pager;
}

export const getPager = (): Subject => SubAppPager;


// 消息来源
export enum PagerEnum {
    // 主应用
    BASE = 1,
    // 子应用
    SUB = 2
}

// 消息主体类型
export interface PagerMessage {
    from: PagerEnum;
    data: any;
}

// 子应用上报消息
export const SubAppPagerIssue = data => {
    if (!SubAppPager) SubAppPager = getPager();
    const msg: PagerMessage = {
        from: PagerEnum.SUB,
        data: data
    };
    SubAppPager.next({ ...msg });
}

// 订阅主应用下发的消息
export const SubAppPagerCollect = (): Observable => {
    if (!SubAppPager) SubAppPager = getPager();
    return SubAppPager.pipe(
        throttleTime(500),
        filter((msg: any) => msg.from == PagerEnum.BASE)
    );
}

发送消息
主应用下发消息, 子应用接收

// 下发消息
import { PagerIssue } from "@/core/app.pager";

const onIssue = () => {

  PagerIssue('i am from baseapp');
}
// 订阅消息
import { Subscription } from "rxjs";
import { defineComponent, onMounted, onUnmounted } from "vue";
import {
  SubAppPagerIssue,
  SubAppPagerCollect,
  PagerMessage,
} from "../core/app.pager";

let pagerSub: Subscription = new Subscription();

onMounted(async () => {
  pagerSub = SubAppPagerCollect().subscribe((msg: PagerMessage) => {
    if (msg) {
      // 可在app.pager中实现主应用消息的统一处理
      console.log("app1 接收到主应用消息 : ", msg.data);
    }
  });
});

onUnmounted(() => {
  pagerSub?.unsubscribe?.();
});


子应用上报消息, 主应用接收

// app1\src\views\Home.vue


export default defineComponent({
  name: "Home",
  setup() {
    let pagerSub: Subscription = new Subscription();
    
    const onIssueMsg = async () => {
      SubAppPagerIssue("i am from app1");
    };
    
    return {
      onIssueMsg
    };
  },
});

主应用接收


import { HandlePagerMessage, PagerCollect, PagerIssue, PagerMessage } from "@/core/app.pager";
import { defineComponent, inject, onMounted } from 'vue';

export default defineComponent({
    name: 'DevPage',
    setup(props,{ slots }) {

        
        onMounted(async () => {

            PagerCollect.subscribe((msg: PagerMessage) => {
                if (msg) {
                    console.log('接收到子应用上报的消息 : ', msg.data);
                    
                    HandlePagerMessage(msg.data);
                }
            });
        });

        return () => (
          <>
主应用接收示例

        )
    }
});

3.应用跳转
子应用内部跳转与日常开发方式跳转一样, vue环境可以通过router方法跳转, angular环境可以通过this.router.navigateByUrl, react可以通过navigate对象跳转
应用间跳转可以通过history.pushState实现应用间跳转
为了实现路由事件的统一处理,通常可以在各子应用需要跳转时,通过消息通知方式告诉主应用, 由主应用统一进行跳转操作




4.子应用切换Loading的处理
应用程序加载我们可以通过主应用的加载状态进行处理,各自的子应用也可以进行各自的loading监测.
在主应用执行加载子应用未完成初始化阶段我们可以将loading的状态挂载到主应用的app下.各子应用在获取props时可以获取到该loading状态进行相关状态展示.


// 封装渲染函数
const loader = (loading: boolean) => render({ loading });
const render = (props: any) => {
    const { appContent, loading } = props;
    if (!app) {

        app = createApp(App);
        
        // mount
        router.isReady().then(() => {

            app.mount('#app', true);
        });
    } else {
        // 这里挂载loading
        app.content = appContent;
        app.loading = loading;
        updateApp(app);
    }
}

// 主应用渲染
render({ loading: true });

5.抽离公共代码
这里说的很明确,不再赘述.https://github.com/umijs/qiankun/issues/627

​

微服务部署

1.部署到同一服务器
如果服务器数量有限，或不能跨域等原因需要把主应用和微应用部署在一起。通常的做法是主应用部署在一级目录，微应用部署在二/三级目录。但是这样做会增加同一域名下的并发数量, 影响页面加载效率. 另外所有子应用都在一个根目录下, 不方便文件相关的操作.
2.部署到不同服务器
第二种方案主微应用部署在不同的服务器，使用Nginx代理进行访问。一般这么做是因为不允许主应用跨域访问微应用。具体思路是将主应用服务器上一个特殊路径的请求全部转发到微应用的服务器上，即通过代理实现“微应用部署在主应用服务器上”的效果。

架构演变

通过本次实践,不禁联想到近些年的前端架构演变, 从web1.0到今天的mvvm与微服务化, 带来了太多的改变.
简单整理了下架构相关的演变历程.
基于qiankun的微服务落地实践_第10张图片

项目中遇到的问题

1.加载子应用失败
这类问题在刚刚接入微服务进行调试时是经常遇到的，其原因也有很多，官网也给出了一部分可能出现原因。首先我么要确主应用正确的注册了相关子应用，并设置了需要挂在的DOM节点，同时也要保证接入的子应用导出了符合规范的生命周期钩子，在满足了这些基本的条件之后仍然加载失败，我们就需要根据具体的报错信息进行定位。可能的涉及原因：

  1. 本地服务器没有设置CORS导致JS资源无法加载
  2. 子应用自身存在语法错误，我们可以先单独运行子应用来排除此类问题
  3. 如果使用了二级路由进行挂在，可能存在二级路由规则设置问题

2.子应用的图片无法展示
导致图片无法展示或者一些页面引用的资源404问题，通常都是浏览器默认了当前子应用的资源在当前主应用域名下。在webpack打包的项目中我们通过设置__webpack_public_path__来处理资源问题，在Angular框架中我么通过设置统一的管道处理当前资源的引入问题。

3.无法通过rxjs实现应用间通讯
可能存在rxjs版本过高问题，可以参考本文的示例源码使用。

4.找不到子应用路由
在确保应用的接入环节没有问题后，我们可以在控制台看到对应的资源加载情况。当子应用的资源正确加载后页面仍没有呈现子应用的内容，极大的可能是在子应用中没有添加针对微服务状态下的路由配置，如何判断子应用是在独立状态访问还在运行在微服务框架下？qiankun为我们提供了window.__POWERED_BY_QIANKUN__这样的变量用来区分，这样我们就可以在注册子应用路由时候设置路由相关的base变量了。

总结

  _注：主应用加载子应用时，子应用必须支持跨域加载_
  由于qiankunshi采用HTML Entry，localStrage、cookie可共享, 一些通过主应用保存在本地存储的信息在自应用中可以直接获取到.本文只是对qiankun的使用上做了一个基本的介绍, 并对不同技术框架的接入做了基础实践. 未涉及到的性能优化、权限集成、依赖共享、版本管理、团队协作、发布策略、监控等将在后续篇章中陆续发文.
  我们在对OMS平台进行微服务化后, 目前在生产环境已经平稳运行超过半年时间, 在时间过程中,我们也遇到了很多事前没有预料到的一些问题, 好在经过团队的努力攻克了各类难点问题,保证了项目的顺利上线与运行.另外, 在我们团队中也已将微服务纳入前端工程化建设中并作为重要 一环.团队工程化建设架构概要如下, 后续文章中我们也将着重介绍团队的工程化建设.
基于qiankun的微服务落地实践_第11张图片

源码


本文示例源码：https://github.com/gfe-team/qiankunapp


参考链接

https://qiankun.umijs.org/
https://single-spa.js.org/docs/ecosystem-angular/
https://micro-frontends.org/
https://zhuanlan.zhihu.com/p/95085796
https://tech.meituan.com/2020/02/27/meituan-waimai-micro-frontends-practice.html
https://xiaomi-info.github.io/2020/04/14/fe-microfrontends-practice/

团队介绍

高灯科技交易合规前端团队（GFE）, 隶属于高灯科技(北京)交易合规业务事业线研发部，是一个富有激情、充满创造力、坚持技术驱动全面成长的团队, 团队平均年龄27岁，有在各自领域深耕多年的大牛, 也有刚刚毕业的小牛, 我们在工程化、编码质量、性能监控、微服务、交互体验等方向积极进行探索, 追求技术驱动产品落地的宗旨，打造完善的前端技术体系。

  • 愿景: 成为最值得信任、最有影响力的前端团队
  • 使命: 坚持客户体验第一, 为业务创造更多可能性
  • 文化: 勇于承担、深入业务、群策群力、简单开放

Github：github.com/gfe-team
团队邮箱：[email protected]

作者：GFE(高灯科技交易合规前端团队)
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

你可能感兴趣的:(基于qiankun的微服务落地实践)

  • 斤斤计较的婚姻到底有多难？ 白心之岂必有为
    很多人私聊我会问到在哪个人群当中斤斤计较的人最多？我都会回答他，一般婚姻出现问题的斤斤计较的人士会非常多，以我多年经验，在婚姻落的一塌糊涂的人当中，斤斤计较的人数占比在20～30%以上，也就是说10个婚姻出现问题的斤斤计较的人有2-3个有多不减。在婚姻出问题当中，有大量的心理不平衡的、尖酸刻薄的怨妇。在婚姻中仅斤斤计较有两种类型：第一种是物质上的，另一种是精神上的。在物质与精神上抠门已经严重的影响
  • 情绪觉察日记第37天 露露_e800
    今天是家庭关系规划师的第二阶最后一天，慧萍老师帮我做了个案，帮我处理了埋在心底好多年的一份恐惧，并给了我深深的力量！这几天出来学习，爸妈过来婆家帮我带小孩，妈妈出于爱帮我收拾东西，并跟我先生和婆婆产生矛盾，妈妈觉得他们没有照顾好我…。今晚回家见到妈妈，我很欣赏她并赞扬她，妈妈说今晚要跟我睡我说好，当我们俩躺在床上准备睡觉的时候，我握着妈妈的手对她说:妈妈这几天辛苦你了，你看你多利害把我们的家收拾得
  • 芦花鞋一四 许叶晗
    又是在一个寒冷的夏日里，青铜和葵花决定今天一起去卖芦花鞋，奶奶亲手给他们做了一碗热乎乎的粥对他们说:“就靠你们两挣生活费了这碗粥赶紧趁热喝了吧！”于是青铜和葵花喝完了奶奶给她们做的粥，就准备去镇上卖卢花鞋，这回青铜和葵花穿着新的芦花鞋来到了镇上。青铜这回看到了很多人都在卖，用手势表达对葵花说:“这回有好多人在抢我们生意呢！我们必须得吆喝起来。”葵花点了点头。可是谁知他们也大声的叫，卖芦花喽！卖芦花
  • QQ群采集助手，精准引流必备神器 2401_87347160 其他经验分享
    功能概述微信群查找与筛选工具是一款专为微信用户设计的辅助工具，它通过关键词搜索功能，帮助用户快速找到相关的微信群，并提供筛选是否需要验证的群组的功能。主要功能关键词搜索：用户可以输入关键词，工具将自动查找包含该关键词的微信群。筛选功能：工具提供筛选机制，用户可以选择是否只显示需要验证或不需要验证的群组。精准引流：通过上述功能，用户可以更精准地找到目标群组，进行有效的引流操作。3.设备需求该工具可以
  • 关于沟通这件事，项目经理不需要每次都面对面进行 流程大师兄
    很多项目经理都会遇到这样的问题，项目中由于事情太多，根本没有足够的时间去召开会议，那在这种情况下如何去有效地管理项目中的利益相关者？当然，不建议电子邮件也不需要开会的话，建议可以采取下面几种方式来形成有效的沟通，这几种方式可以帮助你努力的通过各种办法来保持和各方面的联系。项目经理首先要问自己几个问题，项目中哪些利益相关者是必须要进行沟通的？可以列出项目中所有的利益相关者清单，同时也整理出项目中哪些
  • 机器学习与深度学习间关系与区别 ℒℴѵℯ心·动ꦿ໊ོ꫞ 人工智能学习深度学习python
    一、机器学习概述定义机器学习（MachineLearning,ML）是一种通过数据驱动的方法，利用统计学和计算算法来训练模型，使计算机能够从数据中学习并自动进行预测或决策。机器学习通过分析大量数据样本，识别其中的模式和规律，从而对新的数据进行判断。其核心在于通过训练过程，让模型不断优化和提升其预测准确性。主要类型1.监督学习（SupervisedLearning）监督学习是指在训练数据集中包含输入
  • 铭刻于星（四十二） 随风至
    69夜晚，绍敏同学做完功课后，看了眼房外，没听到动静才敢从书包的夹层里拿出那个心形纸团。折痕压得很深，都有些旧了，想来是已经写好很久了。绍敏同学慢慢地、轻轻地捏开折叠处，待到全部拆开后，又反复抚平纸张，然后仔细地一字字默看。只是开头的三个字是第一次看到，让她心漏跳了几拍。“亲爱的绍敏：从四年级的时候，我就喜欢你了，但是我一直不敢说，怕影响你学习。六年级的时候听说有人跟你表白，你接受了，我很难过，但
  • 底层逆袭到底有多难，不甘平凡的你准备好了吗？让吴起给你说说 造命者说
    底层逆袭到底有多难，不甘平凡的你准备好了吗？让吴起给你说说我叫吴起，生于公元前440年的战国初期，正是群雄并起、天下纷争不断的时候。后人说我是军事家、政治家、改革家，是兵家代表人物。评价我一生历仕鲁、魏、楚三国，通晓兵家、法家、儒家三家思想，在内政军事上都有极高的成就。周安王二十一年（公元前381年），因变法得罪守旧贵族，被人乱箭射死。我出生在卫国一个“家累万金”的富有家庭，从年轻时候起就不甘平凡
  • 2020-01-25 晴岚85
    郑海燕坚持分享590天2020.1.24在生活中只存在两个问题。一个问题是：你知道想要达成的目标是什么，但却不知道如何才能达成；另一个问题是：你不知道你的目标是什么。前一个是行动的问题，后一个是结果的问题。通过制定具体的下一步行动，可以解决不知道如何开始行动的问题。而通过去想象结果，对结果做预估，可以解决找不着目标的问题。对于所有吸引我们注意力，想要完成的任务，你可以先想象一下，预期的结果究竟是什
  • 随笔 | 仙一般的灵气 海思沧海
    仙岛今天，我看了你全部，似乎已经进入你的世界我不知道，这是否是梦幻，还是你仙一般的灵气吸引了我也许每一个人都要有一份属于自己的追求，这样才能够符合人生的梦想，生活才能够充满着阳光与快乐我不知道，我为什么会这样的感叹，是在感叹自己的人生，还是感叹自己一直没有孜孜不倦的追求只感觉虚度了光阴，每天活在自己的梦中，活在一个不真实的世界是在逃避自己，还是在逃避周围的一切有时候我嘲笑自己，嘲笑自己如此的虚无，
  • 想家 爆米花机
    也许不同于大家对家乡的思念，我对家乡甚至是疯狂的不舍。还未踏出车站就感觉到幸福，我享受这里的夕阳、这里的浓烈柴火味、这里每一口家常菜。我是宅女，我贪恋家的安逸。刚刚踏出大学校门，初出茅庐，无法适应每年只能国庆和春节回家。我焦虑、失眠、无端发脾气，是无法适应工作的节奏，是无法接受我将一步步离开家乡的事实。我不想承认自己胸无大志，选择再次踏上征程。图片发自App
  • 【iOS】MVC设计模式 Magnetic_h iosmvc设计模式objective-c学习ui
    MVC前言如何设计一个程序的结构，这是一门专门的学问，叫做"架构模式"（architecturalpattern），属于编程的方法论。MVC模式就是架构模式的一种。它是Apple官方推荐的App开发架构，也是一般开发者最先遇到、最经典的架构。MVC各层controller层Controller/ViewController/VC（控制器）负责协调Model和View，处理大部分逻辑它将数据从Mod
  • OC语言多界面传值五大方式 Magnetic_h iosui学习objective-c开发语言
    前言在完成暑假仿写项目时，遇到了许多需要用到多界面传值的地方，这篇博客来总结一下比较常用的五种多界面传值的方式。属性传值属性传值一般用前一个界面向后一个界面传值，简单地说就是通过访问后一个视图控制器的属性来为它赋值，通过这个属性来做到从前一个界面向后一个界面传值。首先在后一个界面中定义属性@interfaceBViewController:UIViewController@propertyNSSt
  • 一百九十四章. 自相矛盾 巨木擎天
    唉！就这么一夜，林子感觉就像过了很多天似的，先是回了阳间家里，遇到了那么多不可思议的事情儿。特别是小伙伴们，第二次与自己见面时，僵硬的表情和恐怖的气氛，让自己如坐针毡，打从心眼里难受！还有东子，他现在还好吗？有没有被人欺负？护城河里的小鱼小虾们，还都在吗？水不会真的干枯了吧？那对相亲相爱漂亮的太平鸟儿，还好吧！春天了，到了做窝、下蛋、喂养小鸟宝宝的时候了，希望它们都能够平安啊！虽然没有看见家人，也
  • UI学习——cell的复用和自定义cell Magnetic_h ui学习
    目录cell的复用手动（非注册）自动（注册）自定义cellcell的复用在iOS开发中，单元格复用是一种提高表格（UITableView）和集合视图（UICollectionView）滚动性能的技术。当一个UITableViewCell或UICollectionViewCell首次需要显示时，如果没有可复用的单元格，则视图会创建一个新的单元格。一旦这个单元格滚动出屏幕，它就不会被销毁。相反，它被添
  • element实现动态路由+面包屑 软件技术NINI vue案例vue.js前端
    el-breadcrumb是ElementUI组件库中的一个面包屑导航组件，它用于显示当前页面的路径，帮助用户快速理解和导航到应用的各个部分。在Vue.js项目中，如果你已经安装了ElementUI，就可以很方便地使用el-breadcrumb组件。以下是一个基本的使用示例：安装ElementUI（如果你还没有安装的话）:你可以通过npm或yarn来安装ElementUI。bash复制代码npmi
  • 10月|愿你的青春不负梦想-读书笔记-01 Tracy的小书斋
    本书的作者是俞敏洪，大家都很熟悉他了吧。俞敏洪老师是我行业的领头羊吧，也是我事业上的偶像。本日摘录他书中第一章中的金句：『一个人如果什么目标都没有，就会浑浑噩噩，感觉生命中缺少能量。能给我们能量的，是对未来的期待。第一件事，我始终为了进步而努力。与其追寻全世界的骏马，不如种植丰美的草原，到时骏马自然会来。第二件事，我始终有阶段性的目标。什么东西能给我能量？答案是对未来的期待。』读到这里的时候，我便
  • C语言宏函数 南林yan C语言c语言
    一、什么是宏函数？通过宏定义的函数是宏函数。如下，编译器在预处理阶段会将Add(x,y)替换为((x)*(y))#defineAdd(x,y)((x)*(y))#defineAdd(x,y)((x)*(y))intmain(){inta=10;intb=20;intd=10;intc=Add(a+d,b)*2;cout<
  • 地推话术，如何应对地推过程中家长的拒绝 校师学
    相信校长们在做地推的时候经常遇到这种情况：市场专员反馈家长不接单，咨询师反馈难以邀约这些家长上门，校区地推疲软，招生难。为什么？仅从地推层面分析，一方面因为家长受到的信息轰炸越来越多，对信息越来越“免疫”；而另一方面地推人员的专业能力和营销话术没有提高，无法应对家长的拒绝，对有意向的家长也不知如何跟进，眼睁睁看着家长走远；对于家长的疑问，更不知道如何有技巧地回答，机会白白流失。由于回答没技巧和专业
  • 谢谢你们，爱你们！ 鹿游儿
    昨天家人去泡温泉，二个孩子也带着去，出发前一晚，匆匆下班，赶回家和孩子一起收拾。饭后，我拿出笔和本子（上次去澳门时做手帐的本子）写下了1\2\3\4\5\6\7\8\9,让后让小壹去思考，带什么出发去旅游呢？她在对应的数字旁边画上了，泳衣、泳圈、肖恩、内衣内裤、tapuy、拖鞋……画完后，就让她自己对着这个本子，将要带的，一一带上，没想到这次带的书还是这本《便便工厂》(晚上姑婆发照片过来，妹妹累得
  • C语言如何定义宏函数？ 小九格物 c语言
    在C语言中，宏函数是通过预处理器定义的，它在编译之前替换代码中的宏调用。宏函数可以模拟函数的行为，但它们不是真正的函数，因为它们在编译时不会进行类型检查，也不会分配存储空间。宏函数的定义通常使用#define指令，后面跟着宏的名称和参数列表，以及宏展开后的代码。宏函数的定义方式：1.基本宏函数：这是最简单的宏函数形式，它直接定义一个表达式。#defineSQUARE(x)((x)*(x))2.带参
  • 微服务下功能权限与数据权限的设计与实现 nbsaas-boot 微服务java架构
    在微服务架构下，系统的功能权限和数据权限控制显得尤为重要。随着系统规模的扩大和微服务数量的增加，如何保证不同用户和服务之间的访问权限准确、细粒度地控制，成为设计安全策略的关键。本文将讨论如何在微服务体系中设计和实现功能权限与数据权限控制。1.功能权限与数据权限的定义功能权限：指用户或系统角色对特定功能的访问权限。通常是某个用户角色能否执行某个操作，比如查看订单、创建订单、修改用户资料等。数据权限：
  • 理解Gunicorn：Python WSGI服务器的基石 范范0825 ipythonlinux运维
    理解Gunicorn：PythonWSGI服务器的基石介绍Gunicorn，全称GreenUnicorn，是一个为PythonWSGI（WebServerGatewayInterface）应用设计的高效、轻量级HTTP服务器。作为PythonWeb应用部署的常用工具，Gunicorn以其高性能和易用性著称。本文将介绍Gunicorn的基本概念、安装和配置，帮助初学者快速上手。1.什么是Gunico
  • 小丽成长记（四十三） 玲玲54321
    小丽发现，即使她好不容易调整好自己的心态下一秒总会有不确定的伤脑筋的事出现，一个接一个的问题，人生就没有停下的时候，小问题不断出现。不过她今天看的书，她接受了人生就是不确定的，厉害的人就是不断创造确定性，在Ta的领域比别人多的确定性就能让自己脱颖而出，显示价值从而获得的比别人多的利益。正是这样的原因，因为从前修炼自己太少，使得她现在在人生道路上打怪起来困难重重，她似乎永远摆脱不了那种无力感，有种习
  • 学点心理知识，呵护孩子健康 静候花开_7090
    昨天听了华中师范大学教育管理学系副教授张玲老师的《哪里才是学生心理健康的最后庇护所，超越教育与技术的思考》的讲座。今天又重新学习了一遍，收获匪浅。张玲博士也注意到了当今社会上的孩子由于心理问题导致的自残、自杀及伤害他人等恶性事件。她向我们普及了一个重要的命题，她说心理健康的一些基本命题，我们与我们通常的一些教育命题是不同的，她还举了几个例子，让我们明白我们原来以为的健康并非心理学上的健康。比如如果
  • 2021年12月19日，春蕾教育集团团建活动感受——黄晓丹 黄错错加油
    感受:1.从陌生到熟悉的过程。游戏环节让我们在轻松的氛围中得到了锻炼，也增长了不少知识。2.游戏过程中，我们贡献的是个人力量，展现的是团队的力量。它磨合的往往不止是工作的熟悉，更是观念上契合度的贴近。3.这和工作是一样的道理。在各自的岗位上，每个人摆正自己的位置、各司其职充分发挥才能，并团结一致劲往一处使，才能实现最大的成功。新知:1.团队精神需要不断地创新。过去，人们把创新看作是冒风险，现在人们
  • Cell Insight | 单细胞测序技术又一新发现，可用于HIV-1和Mtb共感染个体诊断 尐尐呅
    结核病是艾滋病合并其他疾病中导致患者死亡的主要原因。其中结核病由结核分枝杆菌（Mycobacteriumtuberculosis,Mtb）感染引起，获得性免疫缺陷综合症（艾滋病）由人免疫缺陷病毒（Humanimmunodeficiencyvirustype1,HIV-1）感染引起。国家感染性疾病临床医学研究中心/深圳市第三人民医院张国良团队携手深圳华大生命科学研究院吴靓团队，共同研究得出单细胞测序
  • c++ 的iostream 和 c++的stdio的区别和联系 黄卷青灯77 c++算法开发语言iostreamstdio
    在C++中，iostream和C语言的stdio.h都是用于处理输入输出的库，但它们在设计、用法和功能上有许多不同。以下是两者的区别和联系：区别1.编程风格iostream（C++风格）：C++标准库中的输入输出流类库，支持面向对象的输入输出操作。典型用法是cin（输入）和cout（输出），使用>操作符来处理数据。更加类型安全，支持用户自定义类型的输入输出。#includeintmain(){in
  • 瑶池防线 谜影梦蝶
    冥华虽然逃过了影梦的军队，但他是一个忠臣，他选择上报战况。败给影梦后成逃兵，高层亡尔还活着，七重天失守......随便一条，即可处死冥华。冥华自然是知道以仙界高层的习性此信一发自己必死无疑，但他还选择上报实情，因为责任。同样此信送到仙宫后，知道此事的人，大多数人都认定冥华要完了，所以上到仙界高层，下到扫大街的，包括冥华自己，全都准备好迎接冥华之死。如果仙界现在还属于两方之争的话，冥华必死无疑。然而
  • 爬山后遗症 璃绛
    爬山，攀登，一步一步走向制高点，是一种挑战。成功抵达是一种无法言语的快乐，在山顶吹吹风，看看风景，这是从未有过的体验。然而，爬山一时爽，下山腿打颤，颠簸的路，一路向下走，腿部力量不够，走起来抖到不行，停不下来了！第二天必定腿疼，浑身酸痛，坐立难安！
  • Js函数返回值 _wy_ jsreturn
    一、返回控制与函数结果，语法为：return 表达式;作用: 结束函数执行，返回调用函数，而且把表达式的值作为函数的结果 二、返回控制语法为：return;作用: 结束函数执行，返回调用函数，而且把undefined作为函数的结果 在大多数情况下,为事件处理函数返回false,可以防止默认的事件行为.例如,默认情况下点击一个<a>元素,页面会跳转到该元素href属性
  • MySQL 的 char 与 varchar bylijinnan mysql
    今天发现，create table 时，MySQL 4.1有时会把 char 自动转换成 varchar 测试举例： CREATE TABLE `varcharLessThan4` ( `lastName` varchar(3) ) ; mysql> desc varcharLessThan4; +----------+---------+------+-
  • Quartz——TriggerListener和JobListener eksliang TriggerListenerJobListenerquartz
    转载请出自出处：http://eksliang.iteye.com/blog/2208624 一.概述 listener是一个监听器对象，用于监听scheduler中发生的事件，然后执行相应的操作；你可能已经猜到了，TriggerListeners接受与trigger相关的事件，JobListeners接受与jobs相关的事件。   二.JobListener监听器  j
  • oracle层次查询 18289753290 oracle；层次查询；树查询
    .oracle层次查询(connect  by) oracle的emp表中包含了一列mgr指出谁是雇员的经理，由于经理也是雇员，所以经理的信息也存储在emp表中。这样emp表就是一个自引用表，表中的mgr列是一个自引用列，它指向emp表中的empno列，mgr表示一个员工的管理者， select   empno,mgr,ename,sal  from e
  • 通过反射把map中的属性赋值到实体类bean对象中 酷的飞上天空 javaee泛型类型转换
    使用过struts2后感觉最方便的就是这个框架能自动把表单的参数赋值到action里面的对象中 但现在主要使用Spring框架的MVC，虽然也有@ModelAttribute可以使用但是明显感觉不方便。 好吧，那就自己再造一个轮子吧。 原理都知道，就是利用反射进行字段的赋值，下面贴代码 主要类如下：   import java.lang.reflect.Field; imp
  • SAP HANA数据存储：传统硬盘的瓶颈问题 蓝儿唯美 HANA
    SAPHANA平台有各种各样的应用场景，这也意味着客户的实施方法有许多种选择，关键是如何挑选最适合他们需求的实施方案。 在 《Implementing SAP HANA》这本书中，介绍了SAP平台在现实场景中的运作原理，并给出了实施建议和成功案例供参考。本系列文章节选自《Implementing SAP HANA》，介绍了行存储和列存储的各自特点，以及SAP HANA的数据存储方式如何提升空间压
  • Java Socket 多线程实现文件传输 随便小屋 javasocket
            高级操作系统作业，让用Socket实现文件传输，有些代码也是在网上找的，写的不好，如果大家能用就用上。 客户端类：   package edu.logic.client; import java.io.BufferedInputStream; import java.io.Buffered
  • java初学者路径 aijuans java
    学习Java有没有什么捷径?要想学好Java，首先要知道Java的大致分类。自从Sun推出Java以来，就力图使之无所不包，所以Java发展到现在，按应用来分主要分为三大块：J2SE,J2ME和J2EE,这也就是Sun ONE(Open Net Environment)体系。J2SE就是Java2的标准版，主要用于桌面应用软件的编程；J2ME主要应用于嵌入是系统开发，如手机和PDA的编程；J2EE
  • APP推广 aoyouzi APP推广
    一，免费篇 1，APP推荐类网站自主推荐 最美应用、酷安网、DEMO8、木蚂蚁发现频道等,如果产品独特新颖，还能获取最美应用的评测推荐。PS：推荐简单。只要产品有趣好玩，用户会自主分享传播。例如足迹APP在最美应用推荐一次，几天用户暴增将服务器击垮。 2，各大应用商店首发合作 老实盯着排期，多给应用市场官方负责人献殷勤。 3，论坛贴吧推广 百度知道，百度贴吧，猫扑论坛，天涯社区，豆瓣（
  • JSP转发与重定向 百合不是茶 jspservletJava Webjsp转发
      在servlet和jsp中我们经常需要请求,这时就需要用到转发和重定向;   转发包括;forward和include     例子;forwrad转发;  将请求装法给reg.html页面   关键代码;    req.getRequestDispatcher("reg.html
  • web.xml之jsp-config bijian1013 javaweb.xmlservletjsp-config
    1.作用：主要用于设定JSP页面的相关配置。 2.常见定义： <jsp-config> <taglib> <taglib-uri>URI(定义TLD文件的URI,JSP页面的tablib命令可以经由此URI获取到TLD文件)</tablib-uri> <taglib-location> TLD文件所在的位置
  • JSF2.2 ViewScoped Using CDI sunjing CDIJSF 2.2ViewScoped
    JSF 2.0 introduced annotation @ViewScoped; A bean annotated with this scope maintained its state as long as the user stays on the same view(reloads or navigation - no intervening views). One problem w
  • 【分布式数据一致性二】Zookeeper数据读写一致性 bit1129 zookeeper
    很多文档说Zookeeper是强一致性保证，事实不然。关于一致性模型请参考http://bit1129.iteye.com/blog/2155336    Zookeeper的数据同步协议 Zookeeper采用称为Quorum Based Protocol的数据同步协议。假如Zookeeper集群有N台Zookeeper服务器(N通常取奇数，3台能够满足数据可靠性同时
  • Java开发笔记 白糖_ java开发
    1、Map<key,value>的remove方法只能识别相同类型的key值   Map<Integer,String> map = new HashMap<Integer,String>(); map.put(1,"a"); map.put(2,"b"); map.put(3,"c"
  • 图片黑色阴影 bozch 图片
     .event{ padding:0;    width:460px;    min-width: 460px;    border:0px solid #e4e4e4;    height: 350px;    min-heig
  • 编程之美-饮料供货-动态规划 bylijinnan 动态规划
    import java.util.Arrays; import java.util.Random; public class BeverageSupply { /** * 编程之美 饮料供货 * 设Opt（V’，i）表示从i到n-1种饮料中，总容量为V’的方案中，满意度之和的最大值。 * 那么递归式就应该是：Opt（V’，i）=max{ k * Hi+Op
  • ajax大参数（大数据）提交性能分析 chenbowen00 WebAjax框架浏览器prototype
    近期在项目中发现如下一个问题 项目中有个提交现场事件的功能，该功能主要是在web客户端保存现场数据（主要有截屏，终端日志等信息）然后提交到服务器上方便我们分析定位问题。客户在使用该功能的过程中反应点击提交后反应很慢，大概要等10到20秒的时间浏览器才能操作，期间页面不响应事件。 根据客户描述分析了下的代码流程，很简单，主要通过OCX控件截屏，在将前端的日志等文件使用OCX控件打包，在将之转换为
  • [宇宙与天文]在太空采矿,在太空建造 comsci
         我们在太空进行工业活动...但是不太可能把太空工业产品又运回到地面上进行加工,而一般是在哪里开采,就在哪里加工,太空的微重力环境,可能会使我们的工业产品的制造尺度非常巨大....      地球上制造的最大工业机器是超级油轮和航空母舰,再大些就会遇到困难了,但是在空间船坞中,制造的最大工业机器,可能就没
  • ORACLE中CONSTRAINT的四对属性 daizj oracleCONSTRAINT
    ORACLE中CONSTRAINT的四对属性 summary:在data migrate时,某些表的约束总是困扰着我们,让我们的migratet举步维艰,如何利用约束本身的属性来处理这些问题呢?本文详细介绍了约束的四对属性: Deferrable/not deferrable, Deferred/immediate, enalbe/disable, validate/novalidate,以及如
  • Gradle入门教程 dengkane gradle
    一、寻找gradle的历程 一开始的时候，我们只有一个工程，所有要用到的jar包都放到工程目录下面，时间长了，工程越来越大，使用到的jar包也越来越多，难以理解jar之间的依赖关系。再后来我们把旧的工程拆分到不同的工程里，靠ide来管理工程之间的依赖关系，各工程下的jar包依赖是杂乱的。一段时间后，我们发现用ide来管理项程很不方便，比如不方便脱离ide自动构建，于是我们写自己的ant脚本。再后
  • C语言简单循环示例 dcj3sjt126com c
    # include <stdio.h> int main(void) { int i; int count = 0; int sum = 0; float avg; for (i=1; i<=100; i++) { if (i%2==0) { count++; sum += i; } } avg
  • presentModalViewController 的动画效果 dcj3sjt126com controller
    系统自带(四种效果)： presentModalViewController模态的动画效果设置：     [cpp]  view plain copy   UIViewController *detailViewController = [[UIViewController al
  • java 二分查找 shuizhaosi888 二分查找java二分查找
    需求：在排好顺序的一串数字中，找到数字T   一般解法：从左到右扫描数据，其运行花费线性时间O(N)。然而这个算法并没有用到该表已经排序的事实。 /** * * @param array * 顺序数组 * @param t * 要查找对象 * @return */ public stati
  • Spring Security（07）——缓存UserDetails 234390216 ehcache缓存Spring Security
           Spring Security提供了一个实现了可以缓存UserDetails的UserDetailsService实现类，CachingUserDetailsService。该类的构造接收一个用于真正加载UserDetails的UserDetailsService实现类。当需要加载UserDetails时，其首先会从缓存中获取，如果缓存中没
  • Dozer 深层次复制 jayluns VOmavenpo
    最近在做项目上遇到了一些小问题，因为架构在做设计的时候web前段展示用到了vo层，而在后台进行与数据库层操作的时候用到的是Po层。这样在业务层返回vo到控制层，每一次都需要从po-->转化到vo层，用到BeanUtils.copyProperties(source, target)只能复制简单的属性，因为实体类都配置了hibernate那些关联关系，所以它满足不了现在的需求，但后发现还有个很
  • CSS规范整理（摘自懒人图库） a409435341 htmlUIcss浏览器
       刚没事闲着在网上瞎逛，找了一篇CSS规范整理，粗略看了一下后还蛮有一定的道理，并自问是否有这样的规范，这也是初入前端开发的人一个很好的规范吧。 一、文件规范 1、文件均归档至约定的目录中。 具体要求通过豆瓣的CSS规范进行讲解： 所有的CSS分为两大类：通用类和业务类。通用的CSS文件，放在如下目录中： 基本样式库 /css/core
  • C++动态链接库创建与使用 你不认识的休道人 C++dll
    一、创建动态链接库 1.新建工程test中选择”MFC [dll]”dll类型选择第二项"Regular DLL With MFC shared linked"，完成 2.在test.h中添加 extern “C” 返回类型 _declspec(dllexport)函数名(参数列表); 3.在test.cpp中最后写 extern “C” 返回类型 _decls
  • Android代码混淆之ProGuard rensanning ProGuard
    Android应用的Java代码，通过反编译apk文件（dex2jar、apktool）很容易得到源代码，所以在release版本的apk中一定要混淆一下一些关键的Java源码。 ProGuard是一个开源的Java代码混淆器（obfuscation）。ADT r8开始它被默认集成到了Android SDK中。 官网： http://proguard.sourceforge.net/
  • 程序员在编程中遇到的奇葩弱智问题 tomcat_oracle jquery编程ide
    　　现在收集一下：       　　排名不分先后，按照发言顺序来的。   1、Jquery插件一个通用函数一直报错，尤其是很明显是存在的函数，很有可能就是你没有引入jquery。。。或者版本不对 2、调试半天没变化：不在同一个文件中调试。这个很可怕，我们很多时候会备份好几个项目，改完发现改错了。有个群友说的好：   在汤匙
  • 解决maven-dependency-plugin (goals "copy-dependencies","unpack") is not supported xp9802 dependency
    解决办法：在plugins之前添加如下pluginManagement，二者前后顺序如下：   [html]  view plain copy   <build>           <pluginManagement
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他