【阿里低代码引擎实战】— 自定义插件-多页面办理（一）

本文正在参与阿里低代码引擎征文活动

上一篇笔记记录了将自定义组件接入demo项目，以及运用npm发包的具体步骤，上篇指路：juejin.cn/post/734128…

这篇来简略完成一个多页面办理，页面数据期望经过调接口来获取，后端项目运用 egg.js 搭建。

一. demo项目新增多页面

首要依照官方文档新增一个 plugin-demo 插件，lowcode-engine.cn/site/docs/g…，这里不再赘述。接着我们来根据需求修正 index.tsx 文件：

plugin-demo/index.tsx
​
import * as React from 'react';
import { IPublicModelPluginContext } from '@alilc/lowcode-types';
import { Nav } from '@alifd/next';
​
import './index.scss';
​
const LowcodePluginPluginDemo = (ctx: IPublicModelPluginContext) => {
  let menuType = 'home';
​
  return {
    // 插件对外露出的数据和办法
    exports() {
      return {
        data: '你能够把插件的数据这样对外露出',
        func: () => {
          console.log('办法也是相同');
         },
       };
     },
    // 插件的初始化函数，在引擎初始化之后会立刻调用
    async init() {
      const menuClick = (key = []) => {
        menuType = key[0];
        location.href = `${location.pathname}?page=${menuType}`
       };
​
      const { Item } = Nav;
      let config: any = {
        area: 'leftArea',
        name: 'LowcodePluginPluginDemoPane',
        type: 'PanelDock',
        props: {
          description: '菜单',
         },
        content: () => {
          return (
            <Nav type="line" onSelect={menuClick}>
              <Item key="home">Home</Item>
              <Item key="user">UserInfo</Item>
            </Nav>
           );
         },
       };
      // 往引擎增加面板
      ctx.skeleton.add(config);
​
      ctx.logger.log('打个日志');
     },
   };
};
​
// 插件名，注册环境下唯一
LowcodePluginPluginDemo.pluginName = 'LowcodePluginPluginDemo';
LowcodePluginPluginDemo.meta = {
  // 依赖的插件（插件名数组）
  dependencies: [],
  engines: {
    lowcodeEngine: '^1.0.0', // 插件需求配合 ^1.0.0 的引擎才可运转
   },
};
​
export default LowcodePluginPluginDemo;

看到的作用是这样的：

当点击菜单时，会给 url 后边拼不同的参数 ?page=home or ?page=user，接着需求在 plugin-editor-init 里去拿到参数，传给获取页面schema的办法：

plugin-editor-init/index.tsx
​
const match = location.search.match(/?page=([^&#] )/);
const menuType = match ? match[1] : 'home';
const schema = await getProjectSchema(menuType, scenarioName);

同样的，getProjectSchema 也需求增加参数，schema相关的办法都写在 mockService 里，这里经过 fetch 来调接口：

mockService.ts
​
export const getProjectSchema = async (
 pageType: string = 'home',
 scenarioName: string = 'unknown',
): Promise<IPublicTypeProjectSchema> => {
 const pageSchema = await getPageSchema(pageType, scenarioName);
 return generateProjectSchema(pageSchema, DefaultI18nSchema);
};
​
export const getPageSchema = async (
 pageType: string = 'home',
 scenarioName: string = 'unknown',
) => {
 let url = `http://localhost:7001/${pageType}`;
 fetchData(url).then((res) => {
  console.log('res', res); //先打印看下数据
  });
​
 return DefaultPageSchema;
};
​
// 调接口获取数据
const fetchData = async (url: string) => {
 try {
  const response = await fetch(url);
  if (!response.ok) {
   throw new Error(`HTTP error! status: ${response.status}`);
   }
  const data = await response.json();
  return data;
  } catch (error) {
  console.error('Error:', error);
  }
};

二. egg项目初始化与跨域相关装备

①

egg官方文档：www.eggjs.org/zh-CN/intro…

init 好项目后，先来解决跨域的问题，由于我们期望本地的 lowcode-demo 项目去访问本地的 egg 项目。

$ npm i egg-cors --save

在 plugin.js 增加 egg-cors 装备：

config/plugin.js
​
/** @type Egg.EggPlugin */
module.exports = {
 cors: {
  enable: true,
  package: "egg-cors",
  },
};

config/config.default.js
​
module.exports = (appInfo) => {
 // 跨域装备
 config.cors = {
  origin: "http://localhost:5556", // 匹配规矩  域名 端口  *则为全匹配
  allowMethods: "GET, POST, PUT, DELETE", // 答应恳求的方式
  };
}

②

lowcode-demo 项目安装 http-proxy-middleware ：

$ npm install --save-dev http-proxy-middleware

并在 src 下新建 setupProxy.js 文件：

const { creatProxyMiddleware } = require('http-proxy-middleware');
module.exports = function (app) {
  app.use(
    '/api',
    creatProxyMiddleware({
      target: 'http://localhost:7001',
      changeOrigin: true,
      pathRewrite: {
        '^/api': '',
       },
     }),
   );
};

三. egg项目增加多个页面逻辑

为了简略演示，这里先做两个页面，home页和user页，首要增加路由：

router.js
​
/**
 * @param {Egg.Application} app - egg application
 */
module.exports = app => {
 const { router, controller } = app;
 router.get('/home', controller.home.index);
 router.get('/user', controller.user.index);
};

接着在 Controller 下对两个页面回来不同的body数据：

Controller/home.js
​
const { Controller } = require('egg');
​
class HomeController extends Controller {
 async index() {
  const { ctx } = this;
  ctx.body = JSON.stringify({ data: "hi, home666" });
  }
}
​
module.exports = HomeController;

Controller/user.js
​
const { Controller } = require('egg');
​
class UserController extends Controller {
 async index() {
  const { ctx } = this;
  ctx.body = JSON.stringify({ data: "hi, user888" });
  }
}
​
module.exports = UserController;

浏览器打开 localhost：7001 测试一下，应该看到如下作用：

四. 多页面切换作用

打开 http://localhost:5556/ ，点击菜单切换，在F12中查看控制台打印的 res数据：

home页：

user页：

拿到的数据正确，下一篇准备做调接口保存schema，切换页面后调接口获取schema，展示在页面上。

==============================================================
以上为个人工作学习笔记总结，供学习参考交流，未经答应制止转载或商用。
个人博客地址：joexu727.github.io/