文档总览

移植进度

  1. 开发子应用方案
  • 废弃,太麻烦了)方案一:目前的开发方式是通过代理,把子应用的请求,转发到主应用,也就是子项目和主项目需要公用一套api, 因为子应用里有的接口,主应用里必须也有。这样后期维护起来可能有点麻烦,因为有些接口主应用是不需要的。

  • 方案二:就是跳过登录接口,这个在别人的文章里有,不知道能不能实现

  • 方案三:自己本地的.env存放token,也就是同时启动主应用和子应用,用主应用登录后获取到的token, 复制粘贴到子应用的.env环境变量里,手动更改,这样做的好处是不用同时维护主应用和子应用的两套api( 实际上是同一套)

  • 方案四: 同时启动主应用和子应用,用主应用登录后,把token传给子应用,然后打开子应用端口号来独立开发

    • (这个本地在主应用可以,如果独立开发子应用的话就不行线上还没有试过)如果使用localstorage来共享token的话,线上如果时不同端口号则不能共享localStorage
    • 通过qiankun的通信来传,好处就是线上也可以用,与本地开发保持了一致性
  • 方案五:每个子模块都有自己的登录页,当单独开发子模块时,直接用子应用的登录功能就行, 这样可以独立开发, 不依赖于著应用,并且还有热更新。关于子应用的左侧导航栏问题,需要使用乾坤的window.__POWERED_BY_QIANKUN__ 来区分当前子应用是否运行在主应用的上下文中,但是我在使用umi+qiankun的时候没有这个变量,所以还得 考虑怎么解决这个问题,** 实在不行自己创建一个__POWERED_BY_QIANKUN__变量传给子应用 如果没有从主应用拿到这个变量就说明不是再主应用的上下文中,而是独立的

  1. 先移植两个子项目过来,在不改动后端的情况下,试试水,就以xjglj和sys

  2. 研究下登录注册方案,获取图片的方案。

  3. qs没有type定义,需要pnpm install --save @types/qs

  4. 子应用中点击logo跳转到父应用的指定路由,需要使用

  5. 抽象出一个request,目前不好搞,主要有两点:1.request的ts类型不好解决。因为要从@umi/max里面导入 目前最简单的方法就是复制粘贴,如果要创建一个项目,直接把request的错误处理复制粘贴过去就行了,手动维护

<MicroAppLink isMaster to="/table">
  <Button>go to master app</Button>
</MicroAppLink>

改进点

  1. 后端改动 xqbase这个module里面有platform.anonUrls 设置了不做权限校验的路径,但由于导出根绝controller导出 的OpenAPI大小写不一致,所以得修改一方。先修改本地的
  2. 后端改动 写Controller的时候需要遵守restful规范,如果使用 @RequestMapping('/dfas')的话,导出的openAPI会有所有请求头的方法
info warning danger

项目架构

这个一个monorepo(单一仓库管理模式) + Micro Frontends(微前端) 的为前端项目,使用turborepo和qiankun.js这两个库来实现monorepo和微前端

模板组件

内置组件

:::未完成 后续会把组件都添加进来。 :::

介绍一些基本的内置组件,简单说明组件功能以及如何使用

  1. AutoSelector: 用来自动选择的输入框组件.
  2. BasicTable: 二次封装的 Table 组件.
  3. BridgeSelector: 桥梁选择器.
  4. ChartBridgeBasicStatistics: 桥梁图表组件.

uni-app 在手机上背景图片不显示 需求:

在 uniapp 代码中 view 的背景图加载

问题:

直接使用 background-image: url(../../static/icon_top_bg.png); 会导致图片不显示

代码:

<template>
  <view
    class="index"
    :style="{
      backgroundImage: `url(${indexBackgroundImage})`,
      backgroundSize: 'cover',
    }"
  >
    <!--你的内容-->
  </view>
</template>
<script>
import indexBackgroundImage from "@/static/img/account_index.jpg";
export default {
  data() {
    return {
      indexBackgroundImage: indexBackgroundImage,
    };
  },
  methods: {},
};
</script>
<style lang="scss" scoped=""></style>

总结:

直接加载图片可能不会显示,绝对路径和相对路径都会不显示,需要动态加载图片地址,通过 data 赋值