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

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

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

上一篇笔记记录了将自定义组件接入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 测试一下,应该看到如下效果:

四. 多页面切换效果

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

home页:

user页:

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

==============================================================

以上为个人工作学习笔记总结,供学习参考交流,未经允许禁止转载或商用。

个人博客地址:joexu727.github.io/

相关推荐
山河木马11 分钟前
前端学C++可太简单了:双冒号 :: 操作符
前端·javascript·c++
3Katrina12 分钟前
前端面试之防抖节流(二)
前端·javascript·面试
前端进阶者18 分钟前
天地图编辑支持删除编辑点
前端·javascript
江号软件分享27 分钟前
无接触服务的关键:二维码生成识别技术详解
前端
江号软件分享28 分钟前
如何利用取色器实现跨平台色彩一致性
前端
灰海31 分钟前
封装WebSocket
前端·网络·websocket·网络协议·vue
前端小巷子42 分钟前
深入理解TCP协议
前端·javascript·面试
万少43 分钟前
鸿蒙外包的十大生存法则
前端·后端·面试
江号软件分享2 小时前
有效保障隐私,如何安全地擦除电脑上的敏感数据
前端
web守墓人3 小时前
【前端】ikun-markdown: 纯js实现markdown到富文本html的转换库
前端·javascript·html