Skip to main content
Version: 3.4

入门

NASL SDK 是针对 NASL 投射编辑的无可视化的软件工具包，与用户在编辑器中的实际操作一致。CodeWave 智能开发平台的 IDE 和前端生成服务便是主要以它为核心开发的。

可运行在 现代浏览器 和 Node.js (>=14) 环境上。

🧐 NASL SDK 主要包含以下功能：

  • NASL Object Model，即 NASL 语法树节点结合增删改查等行为的实例化对象，类似 HTML 之于 DOM、CSS 之于 CSSOM
  • vertexsMap，一个 app 下所有点 id -> Vertex 的映射集
  • 用于生成中间代码或 Vue 等最终代码的方法
  • 实体拖拽的方法
  • 请求、遍历树、去重名等工具库
  • ...

NASL SDK 不包含以下功能：

  • 应用本身的创建和删除
  • 应用的发布

快速开始 ⏱️​

我们以一个在 Node.js 环境运行的脚本为例，您可以在上面进行快速开发。这里推荐使用 TypeScript，它可以给您提供很方便的关于 NASL Object Model 的类型提示。

1. 准备​

  • 安装 Node.js (>=14)
  • 在低代码平台的某个租户下创建一个应用

2. 初始化项目​

git clone https://github.com/netease-lcap/nasl-examples
cd typescript-example
npm install

3. 修改配置​

初始示例的源代码是 src/quickstart.ts，请在编辑器中打开它。

如果您用的是 VSCode，并且设置了 Shell Command in PATH，那么可以：

code src/quickstart.ts

需要首先修改文件中的低代码平台某租户的 URL、登录后的 cookie 以及需要访问的 appId：

nasl.config.baseURL = 'http://defaulttenant.qa-ci.lcap.group'; // 低代码平台某租户的 URL
nasl.config.cookie = 'authorization=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9...'; // 登录后的 document.cookie
const appId = '2bb0bb6a-0fdd-4440-b5d2-a7c041da18f1'; // 需要访问的 appId

也可以不用设置config.cookie，调用以下登录方法：

await nasl.login('your username', 'your password');

4. 运行脚本​

npx ts-node src/quickstart.ts

初始示例实现的功能是打印第一个页面 Vue 格式的内容。因此在 Console 中会看到如下结果：

<template>
<u-linear-layout style="height: 100vh;" alignment="center" type="flex" justify="center">
    <u-linear-layout justify="center" direction="vertical">
...

示例说明​

async function start() { // 里面大部分要用 await
    const app = new nasl.App({ id: appId }); // 用 id 实例化一个 app
    nasl.config.defaultApp = app; // 设置在默认配置中，目前这部分功能和撤销重做等绑定

    await app.loadAll(); // 加载当前 app 所有内容

    const page0 = app.firstWebService.pages[0]; // 取出前端的第一个页面
    await page0.rootView.load(); // 获取该页面的内容
    console.log(page0.rootView.toVue()); // 生成 Vue 代码
}

start().catch((e) => console.log(e.response && e.response.data)); // 有 error 提示