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

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

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

这篇来简单实现一个多页面管理，页面数据希望通过调接口来获取，后端项目使用 egg.js 搭建。

一. demo项目新增多页面

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

typescript 复制代码

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的方法：

rust 复制代码

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 来调接口：

typescript 复制代码

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 项目。

css 复制代码

$ npm i egg-cors --save

在 plugin.js 添加 egg-cors 配置：

java 复制代码

config/plugin.js

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

arduino 复制代码

config/config.default.js

module.exports = (appInfo) => {
  // 跨域配置
  config.cors = {
    origin: "http://localhost:5556", // 匹配规则  域名+端口  *则为全匹配
    allowMethods: "GET, POST, PUT, DELETE", // 允许请求的方式
  };
}

②

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

css 复制代码

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

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

php 复制代码

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页，首先添加路由：

arduino 复制代码

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数据：

scala 复制代码

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;

scala 复制代码

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 测试一下，应该看到如下效果：