Skip to content
| Marketplace
Sign in
Visual Studio Code>Other>lowcodeNew to Visual Studio Code? Get it now.
lowcode

lowcode

wjkang

|
54,310 installs
| (6) | Free
lowcode tool, support ChatGPT
Installation
Launch VS Code Quick Open (Ctrl+P), paste the following command, and press enter.
Copied to clipboard
More Info

关于

低代码工具,支持 ChatGPT

详细文档

文档不经常更新,新功能使用方法可查看 releases

物料仓库

支持 ChatGPT

清晰动图点这里

清晰动图点这里

配置 ChatGPT

预置 Prompt 模板

使用 lowcode 原有代码片段功能,可以随意预置 Prompt,支持 EJS 模板语法,可快速创建分析代码、重构代码、代码添加注释等 Prompt。

配置 chatGPT 字段:

commandPrompt 既右键菜单选择模板后发送的内容,支持 EJS 模板语法。

viewPrompt 为 代码片段或者区块物料可视化详情页点 Ask ChatGPT 按钮后发送的内容。

lowcode 代码生成功能结合 ChatGPT

很好的解决了代码变量的命名难题。

清晰动图点这里

不用 ChatGPT ,也可以使用一些常用功能

快速创建组件

根据 yapi 接口文档生成请求方法

复制接口 id

写好接口方法,选中然后右键

生成的 ts 类型可能不完全正确,需要手动调整

根据 json 生成 api 请求方法

复制 json 数据,比如:

{
  "code": 0,
  "message": "成功",
  "result": {
    "records": [
      {
        "id": 137,
        "code": "mechanisms",
        "name": "外部机构",
        "internalType": 0,
        "needArea": 0,
        "assetTypes": [],
        "serviceLines": [
          {
            "serviceLineCode": "CESHI",
            "serviceLineName": "测试勿动",
            "status": 1
          }
        ]
      }
    ],
    "total": 105,
    "size": 10,
    "current": 1,
    "orders": [],
    "optimizeCountSql": true,
    "hitCount": false,
    "countId": null,
    "maxLimit": null,
    "searchCount": true,
    "pages": 11
  }
}

写好接口方法,选中然后右键,选择相应的命令选项

需要手动调整参数,接口地址

根据 ts 类型生成 api 请求方法

复制 ts 类型,比如:

[{ name: string; code: string }]

写好接口方法,选中然后右键,选择相应的命令选项

根据 json 生成 ts 类型

复制 json 数据,比如:

{
  "code": 0,
  "message": "成功",
  "result": {
    "records": [
      {
        "id": 137,
        "code": "mechanisms",
        "name": "外部机构",
        "internalType": 0,
        "needArea": 0,
        "assetTypes": [],
        "serviceLines": [
          {
            "serviceLineCode": "CESHI",
            "serviceLineName": "测试勿动",
            "status": 1
          }
        ]
      }
    ],
    "total": 105,
    "size": 10,
    "current": 1,
    "orders": [],
    "optimizeCountSql": true,
    "hitCount": false,
    "countId": null,
    "maxLimit": null,
    "searchCount": true,
    "pages": 11
  }
}

写好类型名称,选中然后右键,选择相应的命令选项

根据 json 替换字段类型

mock

下载 mock 项目

因为墙的原因下载不了的话,可以使用下面仓库地址下载:

https://gitee.com/lowcode-scaffold/lowcode-mock.git (不要直接 clone,用下图的方式)

routes 目录下创建新的 mock 文件

根据 yapi 接口文档生成 mock

复制接口 id

根据 ts 类型生成 mock

复制 ts 类型,比如(不需要复制类型名称):

{
  /**
   * 0:成功,其他:失败
   */
  code: number;
  message: string;
  result: {
    /**
     * 当前页数
     */
    current: number;
    hitCount: boolean;
    optimizeCountSql: boolean;
    orders: string[];
    /**
     * 总页数
     */
    pages: number;
    /**
     * 记录
     */
    records: {
      id: number;
      /**
       * 组织名称
       */
      orgNodeName: string;
      /**
       * 组织编码
       */
      orgNodeCode: string;
      /**
       * 组织名称全路径
       */
      fullPath: string;
    }[];
    searchCount: boolean;
    /**
     * 每页展示数
     */
    size: number;
    /**
     * 总数据条数
     */
    total: number;
  };
}

根据 json 生成 mock

同理,复制 json,选择对应的命令选项。

建议所有的前端项目共用同一个 mock 项目,避免频繁切换项目,以及接口冲突。不同的项目在 routes 目录下创建相应的文件。

mockjs 文档

提升列表页、表单开发效率

常规查询列表页

以下面原型为例

选择列表页区块

配置表单

https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/5b24b7d804ac4db1a3673fd2aa4aa4cd~tplv-k3u1fbpfcp-zoom-1.image

生成代码

若后端已经提供 yapi 接口文档,可以同时使用根据 yapi 接口文档生成请求方法的功能:

表单

选择表单区块,配置 Schema 表单

自定义区块

创建新的区块

配置 Schema 表单:支持 amis、formily、form-render,创建区块的时候根据自己需要选择相应的类型。

  • Contact us
  • Jobs
  • Privacy
  • Terms of use
  • Trademarks
© 2023 Microsoft