关于前端:曾经辛苦造的轮子现在能否用-ChatGPT-替代呢

3次阅读

共计 4535 个字符，预计需要花费 12 分钟才能阅读完成。

上一篇文章我在 vscode 插件里接入了 ChatGPT，解决了代码变量命名的难题中，展现了如何在 vscode 插件中应用 ChatGPT 解决代码变量命名的问题。vscode 插件市场中有很多的翻译插件，然而在一些应用场景里是远远比不上 ChatGPT 的，比方只翻译一段 json 数据里的指定字段。那么 ChatGPT 还能做什么呢？是否取代曾经存在的轮子？

以 lowcode 插件中的性能为例，看看能不能用 ChatGPT 代替。

首先复制一段 json，比方：

{
    "code": 200,
    "msg": "","result": {"records": [
            {
                "id": "1a2b3c4d5",
                "costCenterCode": "ccx002",
                "costCenterName": "财务部",
                "accountingCode": "ac0887",
                "bankAccountingCode": "bk1290",
                "orderNumber": "od1089",
                "orderAmount": "6158.36",
                "confirmedTime": "2023-02-07T13:47:34.552Z",
                "laborCostExcludingTax": "4629.05"
            }
        ],
        "total": 200
    }
}

能够发现，简直达到了一样的成果，只是 ChatGPT 会慢一点。不应用 ChatGPT 时，插件外部是间接调用库将 json 转成 ts 类型，还做了一些边界解决，比方如果复制的是 json 变量而不是规范的 json 数据，须要将 json 变量变成 json 数据。应用 ChatGPT 对数据就没有很严格的要求，能够是 json 变量，也能够是 json 数据。

非 ChatGPT 的模板

<%- type %>

export interface I<%= rawSelectedText.slice(0, 1).toUpperCase() + rawSelectedText.slice(1) %>Params {id: number;}
  
export interface I<%= rawSelectedText.slice(0, 1).toUpperCase() + rawSelectedText.slice(1) %>Data {xx: string;}
  
export function <%= rawSelectedText %>(params: I<%= rawSelectedText.slice(0, 1).toUpperCase() + rawSelectedText.slice(1) %>Params,
  data: I<%= rawSelectedText.slice(0, 1).toUpperCase() + rawSelectedText.slice(1) %>Data,
) {return request<I<%= rawSelectedText.slice(0, 1).toUpperCase() + rawSelectedText.slice(1) %>Result>({
    url: `xxxx`,
    method: 'GET',
    params,
    data,
  });
}

ChatGPT 的模板

<%- rawClipboardText %> 
依据这段 json 生成 ts 类型，名字为 I<%= rawSelectedText.slice(0, 1).toUpperCase() + rawSelectedText.slice(1) %>Result
和上面的代码一起返回
export interface I<%= rawSelectedText.slice(0, 1).toUpperCase() + rawSelectedText.slice(1) %>Params {id: number;}
export interface I<%= rawSelectedText.slice(0, 1).toUpperCase() + rawSelectedText.slice(1) %>Data {xx: string;}
export function <%= rawSelectedText %>(params: I<%= rawSelectedText.slice(0, 1).toUpperCase() + rawSelectedText.slice(1) %>Params,
    data: I<%= rawSelectedText.slice(0, 1).toUpperCase() + rawSelectedText.slice(1) %>Data,
) {return request<I<%= rawSelectedText.slice(0, 1).toUpperCase() + rawSelectedText.slice(1) %>Result>({
        url: `xxxx`,
        method: 'GET',
        params,
        data,
    });
}
返回 markdown 代码块

模板会应用 ejs 进行编译。

也是先复制一段 json 数据。

插件外部是间接遍历 json，把这一段代码通过字符串拼出来。

这里应用 ChatGPT 的时候，很难让它输入不须要批改就能间接应用的代码，如上的代码里输入了一段无关的内容。

// 调用办法 
getMockData().then(data => { console.log(data); });

ChatGPT 应用的模板：

<%- rawClipboardText %> 
生成一个 js 办法，办法名为 <%= rawSelectedText || 'getRandomData' %>，办法外部应用 mock.js 生成跟下面的 json 一样字段的数据，如果有数组则生成 10 个元素，最终的数据应用 Promise.resolve 返回
返回 markdown 代码块

先复制一段 json 数据

这个用途是：后端接口能够连调的时候替换原有本人事后写的接口类型。

应用场景：后端没有给接口文档，前端依据原型和设计稿形象出数据模型，依据数据模型生成 mock 的 API 申请办法（mock 数据通过实在后端服务提供）。

只复制类型体，不要类型名称，比方：

{
    records: {
      id: string;
      costCenterCode: string;
      costCenterName: string;
      accountingCode: string;
      bankAccountingCode: string;
      orderNumber: string;
      orderAmount: string;
      confirmedTime: string;
      laborCostExcludingTax: string;
    }[];
    total: number;
  }

因为只是将剪贴板里的内容在模板里做了一下拼装，齐全用不到 ChatGPT。

模板如下：

export interface I<%= rawSelectedText.slice(0, 1).toUpperCase() + rawSelectedText.slice(1) %>Result {
    code: number;
    msg: string;
    result: <%- rawClipboardText %>
}

export interface I<%= rawSelectedText.slice(0, 1).toUpperCase() + rawSelectedText.slice(1) %>Params {id: number;}
  
export interface I<%= rawSelectedText.slice(0, 1).toUpperCase() + rawSelectedText.slice(1) %>Data {xx: string;}
  
export function <%= rawSelectedText %>(params: I<%= rawSelectedText.slice(0, 1).toUpperCase() + rawSelectedText.slice(1) %>Params,
    data: I<%= rawSelectedText.slice(0, 1).toUpperCase() + rawSelectedText.slice(1) %>Data,
) {return request<I<%= rawSelectedText.slice(0, 1).toUpperCase() + rawSelectedText.slice(1) %>Result>({
        url: `xxxx`,
        method: 'GET',
        params,
        data,
    });
}

应用场景：后端没有给接口文档，前端依据原型和设计稿形象出数据模型，依据数据模型生成 mock 办法（mock 数据没有通过后端服务提供）。

只复制类型体，不要类型名称，比方：

{
    records: {
      id: string;
      costCenterCode: string;
      costCenterName: string;
      accountingCode: string;
      bankAccountingCode: string;
      orderNumber: string;
      orderAmount: string;
      confirmedTime: string;
      laborCostExcludingTax: string;
    }[];
    total: number;
  }

应用场景：mock 数据由 koa 服务提供，依据 json 生成 koa 路由。

应用场景：后端没有给接口文档，前端依据原型和设计稿形象出数据模型，依据数据模型生成 koa mock 服务。

只复制类型体，不要类型名称，比方：

{
    records: {
      id: string;
      costCenterCode: string;
      costCenterName: string;
      accountingCode: string;
      bankAccountingCode: string;
      orderNumber: string;
      orderAmount: string;
      confirmedTime: string;
      laborCostExcludingTax: string;
    }[];
    total: number;
  }

这也是已经造的轮子 typescript-to-markdown，一个 utools 插件。

成果如图：

应用 ChatGPT

能够看进去，并不是很完满。

ChatGPT 很难输入不须要批改间接粘贴到编辑器中就能用的代码，相比于咱们硬编码写的插件，在效率上还是有所欠缺。然而借助插件来治理 ChatGPT Prompt 模板，复制粘贴还是比上官网或者其它客户端快很多的。

文章没有提到拉取 YAPI 接口文档生成代码的性能，因为 ChatGPT 并不能去拉取接口获取数据，最近在钻研 LangChain，借助这玩意儿或者能够实现。

下面所有的模板曾经共享，通过如下形式能够下载到你的我的项目中：

正文完

前端

发表至：前端

2023-06-23

0

关于前端:whistle抓包使用

关于前端:图扑智慧充电桩可视化运营平台｜新能源数字化

关于前端:开发常用镜像站-阿里云镜像站

关于前端:六函数

关于后端:Spring-中的-Bean

关于前端:曾经辛苦造的轮子现在能否用-ChatGPT-替代呢

依据 JSON 生成 API 申请办法

不应用 ChatGPT

应用 ChatGPT

依据 JSON 生成 MOCK 办法

不应用 ChatGPT

应用 ChatGPT

依据 JSON 生成 TS 类型

不应用 ChatGPT

应用 ChatGPT

依据 JSON 生成 TS 类型 - 去除接口名称

不应用 ChatGPT

应用 ChatGPT

依据 TS 类型生成 API 申请办法

不应用 ChatGPT

应用 ChatGPT

依据 TS 类型生成 MOCK 办法

不应用 ChatGPT

应用 ChatGPT

依据 JSON 生成 KOA MOCK

不应用 ChatGPT

应用 ChatGPT

依据 TS 类型生成 MOCK

不应用 ChatGPT

应用 ChatGPT

依据 TS 类型生成组件文档

总结

Prompt 模板

站内搜索