前端如何借助 AI 工具提升开发效率

原创

喵喵侠

修改于 2024-06-07 14:58:52

3092

修改于 2024-06-07 14:58:52

文章被收录于专栏：玩转AI 喵喵学前端玩转AI

前端如何借助 AI 工具提升开发效率

前言

大家好，我是喵喵侠。在日新月异的前端开发领域，开发效率的提升显得尤为重要。随着人工智能（AI）技术的不断进步，各种AI工具在前端开发中的应用也越来越广泛。目前市面上的 AI 工具有很多，但基本用法都大差不大。所以在这篇文章，我会告诉你 AI 工具的通用技巧，带你了解如何借助AI工具来提升前端开发效率，并通过实际的业务场景和案例展示这些工具的实际应用效果。

AI 工具在前端开发中的应用

就我目前日常使用来说，AI工具在前端开发中的应用，主要体现在以下几个方面：

代码生成与自动补全

AI工具通过学习大量的代码示例，帮助开发者自动生成代码或进行代码补全。这不仅能减少开发者的工作量，还能提高代码的一致性和规范性。例如，GitHub Copilot能够根据上下文自动生成代码片段，甚至可以根据注释生成完整的函数和模块。国内也有一些不错的 AI 编程助手，有阿里云通义千问，百度云Comate，以及腾讯云 AI 代码助手。

数据格式处理

前端开发经常需要处理各种复杂的数据格式。AI工具可以通过智能算法快速解析和转换数据格式，从而提高处理效率。例如，可以使用AI工具自动将复杂的API响应数据转换为符合应用需求的格式。

UI组件生成

在开发复杂的UI组件时，AI工具可以根据设计稿或需求文档自动生成相应的代码。这不仅减少了重复性工作，还能确保组件的一致性和可维护性。例如，使用AI工具生成复杂的表单组件，可以快速搭建出具有复杂交互逻辑的表单，提高开发效率。

案例分享

实际业务场景下复杂数据处理

假设我们正在开发一个电商平台的管理系统，其中包括一个订单管理模块。这个模块需要展示订单列表，并且支持根据订单状态、客户信息等条件进行筛选和排序。后台API返回的订单数据格式复杂，我们需要将其转换为前端应用能够直接使用的格式。

原始数据格式：

{
    "orders": [
        {
            "order_id": "001",
            "customer": {
                "name": "John Doe",
                "email": "john.doe@example.com"
            },
            "items": [
                {
                    "product_name": "Widget",
                    "quantity": 4,
                    "price": 19.99
                },
                {
                    "product_name": "Gadget",
                    "quantity": 2,
                    "price": 29.99
                }
            ],
            "total_price": 139.94,
            "status": "shipped"
        },
        {
            "order_id": "002",
            "customer": {
                "name": "Jane Smith",
                "email": "jane.smith@example.com"
            },
            "items": [
                {
                    "product_name": "Thingamajig",
                    "quantity": 1,
                    "price": 99.99
                }
            ],
            "total_price": 99.99,
            "status": "processing"
        }
    ]
}

目标数据格式如下：

[
    {
        orderId: "001",
        customerName: "John Doe",
        customerEmail: "john.doe@example.com",
        items: [
            { productName: "Widget", quantity: 4, price: 19.99 },
            { productName: "Gadget", quantity: 2, price: 29.99 }
        ],
        totalPrice: 139.94,
        status: "shipped"
    },
    {
        orderId: "002",
        customerName: "Jane Smith",
        customerEmail: "jane.smith@example.com",
        items: [
            { productName: "Thingamajig", quantity: 1, price: 99.99 }
        ],
        totalPrice: 99.99,
        status: "processing"
    }
]

我们可以使用AI工具来生成转换函数。我们与AI工具的对话提示词如下：

# 请将以下JSON数据格式转换为特定的JavaScript对象格式
# JSON数据格式:
# {
#    "orders": [
#        {
#            "order_id": "001",
#            "customer": {
#                "name": "喵喵侠",
#                "email": "miaomiaoxia@tencent.com"
#            },
#            "items": [
#                {
#                    "product_name": "番茄",
#                    "quantity": 4,
#                    "price": 19.99
#                },
#                {
#                    "product_name": "土豆",
#                    "quantity": 2,
#                    "price": 29.99
#                }
#            ],
#            "total_price": 139.94,
#            "status": "shipped"
#        },
#        {
#            "order_id": "002",
#            "customer": {
#                "name": "三掌柜",
#                "email": "sanzhanggui666@tencent.com"
#            },
#            "items": [
#                {
#                    "product_name": "桃子",
#                    "quantity": 1,
#                    "price": 99.99
#                }
#            ],
#            "total_price": 99.99,
#            "status": "processing"
#        }
#    ]
# }
# 目标JavaScript对象格式:
# [
#    {
#        orderId: "001",
#        customerName: "喵喵侠",
#        customerEmail: "miaomiaoxia@tencent.com",
#        items: [
#            { productName: "番茄", quantity: 4, price: 19.99 },
#            { productName: "土豆", quantity: 2, price: 29.99 }
#        ],
#        totalPrice: 139.94,
#        status: "shipped"
#    },
#    {
#        orderId: "002",
#        customerName: "三掌柜",
#        customerEmail: "sanzhanggui666@tencent.com",
#        items: [
#            { productName: "桃子", quantity: 1, price: 99.99 }
#        ],
#        totalPrice: 99.99,
#        status: "processing"
#    }
# ]

提示词输入回车后，生成的回复如下：

您需要将给定的JSON数据格式转换为特定的JavaScript对象格式。下面是转换后的JavaScript对象格式：

const jsonData = {
    "orders": [
        {
            "order_id": "001",
            "customer": {
                "name": "喵喵侠",
                "email": "miaomiaoxia@tencent.com"
            },
            "items": [
                {
                    "product_name": "番茄",
                    "quantity": 4,
                    "price": 19.99
                },
                {
                    "product_name": "土豆",
                    "quantity": 2,
                    "price": 29.99
                }
            ],
            "total_price": 139.94,
            "status": "shipped"
        },
        {
            "order_id": "002",
            "customer": {
                "name": "三掌柜",
                "email": "sanzhanggui666@tencent.com"
            },
            "items": [
                {
                    "product_name": "桃子",
                    "quantity": 1,
                    "price": 99.99
                }
            ],
            "total_price": 99.99,
            "status": "processing"
        }
    ]
};

const formattedData = jsonData.orders.map(order => ({
    orderId: order.order_id,
    customerName: order.customer.name,
    customerEmail: order.customer.email,
    items: order.items.map(item => ({
        productName: item.product_name,
        quantity: item.quantity,
        price: item.price
    })),
    totalPrice: order.total_price,
    status: order.status
}));

console.log(formattedData);

这段代码会将给定的JSON数据转换为目标JavaScript对象格式，并输出到控制台。这样的转换会使数据更易于处理和使用，每个订单都包含了指定的属性名。如果您需要进一步的帮助或有其他问题，请随时告诉我！

我用浏览器控制台测试一下，结果是对的。

通过AI工具，我们可以快速生成这样的转换函数，减少手动编写代码的时间，并确保转换的准确性。我们在得到结果后，可以拿实际数据做下测试，验证下转换后的数据是否能正确。

使用 AI 工具快速生成Element-UI表单案例

在这个案例中，我们需要为电商平台的管理系统生成一个订单筛选表单。这个表单需要包括以下字段：

订单ID：文本输入框
客户名称：文本输入框
订单状态：下拉选择框（processing, shipped, delivered, cancelled）
下单日期范围：日期范围选择器

我们可以使用AI工具来生成Element-UI表单代码。我们与AI工具的对话提示词如下：

请生成一个包含以下字段的Element-UI表单的代码：
- 订单ID：文本输入框
- 客户名称：文本输入框
- 订单状态：下拉选择框（processing, shipped, delivered, cancelled）
- 下单日期范围：日期范围选择器

输入提示词并回车，生成的结果如下：

要生成一个包含指定字段的Element-UI表单代码，可以按照以下方式组织：

<template>
  <el-form :model="formData" label-width="100px" ref="orderForm" class="demo-form-styl">
    <el-form-item label="订单ID" prop="orderId">
      <el-input v-model="formData.orderId" placeholder="请输入订单ID"></el-input>
    </el-form-item>

    <el-form-item label="客户名称" prop="customerName">
      <el-input v-model="formData.customerName" placeholder="请输入客户名称"></el-input>
    </el-form-item>

    <el-form-item label="订单状态" prop="orderStatus">
      <el-select v-model="formData.orderStatus" placeholder="请选择订单状态">
        <el-option label="processing" value="processing"></el-option>
        <el-option label="shipped" value="shipped"></el-option>
        <el-option label="delivered" value="delivered"></el-option>
        <el-option label="cancelled" value="cancelled"></el-option>
      </el-select>
    </el-form-item>

    <el-form-item label="下单日期范围" prop="orderDateRange">
      <el-date-picker
        v-model="formData.orderDateRange"
        type="daterange"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        :default-value="[new Date(new Date().getFullYear(), new Date().getMonth(), 1), new Date(new Date().getFullYear(), new Date().getMonth() + 1, 0)]"
        format="yyyy-MM-dd">
      </el-date-picker>
    </el-form-item>
  </el-form>
</template>

<script>
export default {
  data() {
    return {
      formData: {
        orderId: '',
        customerName: '',
        orderStatus: '',
        orderDateRange: []
      }
    };
  }
};
</script>

<style>
.demo-form-styl {
  max-width: 400px;
  margin: 0 auto;
  padding: 20px;
}
</style>

这段代码会生成一个简单的Element-UI表单，包含订单ID、客户名称、订单状态和下单日期范围等字段。您可以根据需要进一步定制样式和逻辑。如果您需要更多的帮助或有其他问题，请随时告诉我！

为了方便演示，我让它改写成 html 格式的代码。目前的 AI 助手都可以记住上下文，我就输入了如下的提示词：

很好，请转换成html文件格式的代码，并使用 bootcdn

生成结果如下：

以下是使用 BootCDN 的 HTML 文件格式代码示例：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Element-UI Form</title>
  <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/element-ui/2.15.6/theme-chalk/index.css">
</head>

<body>
  <div id="app">
    <el-form :model="formData" label-width="100px" ref="orderForm" class="demo-form-styl">
      <el-form-item label="订单ID" prop="orderId">
        <el-input v-model="formData.orderId" placeholder="请输入订单ID"></el-input>
      </el-form-item>

      <el-form-item label="客户名称" prop="customerName">
        <el-input v-model="formData.customerName" placeholder="请输入客户名称"></el-input>
      </el-form-item>

      <el-form-item label="订单状态" prop="orderStatus">
        <el-select v-model="formData.orderStatus" placeholder="请选择订单状态">
          <el-option label="processing" value="processing"></el-option>
          <el-option label="shipped" value="shipped"></el-option>
          <el-option label="delivered" value="delivered"></el-option>
          <el-option label="cancelled" value="cancelled"></el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="下单日期范围" prop="orderDateRange">
        <el-date-picker
          v-model="formData.orderDateRange"
          type="daterange"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          :default-value="[new Date(new Date().getFullYear(), new Date().getMonth(), 1), new Date(new Date().getFullYear(), new Date().getMonth() + 1, 0)]"
          format="yyyy-MM-dd">
        </el-date-picker>
      </el-form-item>
    </el-form>
  </div>

  <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.js"></script>
  <script src="https://cdn.bootcdn.net/ajax/libs/element-ui/2.15.6/index.js"></script>
  <script>
    new Vue({
      el: '#app',
      data: {
        formData: {
          orderId: '',
          customerName: '',
          orderStatus: '',
          orderDateRange: []
        }
      }
    });
  </script>

  <style>
    .demo-form-styl {
      max-width: 400px;
      margin: 0 auto;
      padding: 20px;
    }
  </style>
</body>

</html>

这个示例中使用了 BootCDN 加载了 Vue.js 和 Element-UI 的资源。您可以把这个代码保存为 .html 文件并在浏览器中打开查看效果。如有任何疑问，请随时向我提问。

在 jsbin 里面，在线演示可以看到表单效果，我们来验证一下。

从图中效果可以发现，表单是生成了，但存在两个问题。于是我修改下提示词，并给出一点提示：

表单是生成了，但存在两个问题：
1. 默认时间没有设置成功；（你可以用 dayjs 在生命周期函数里面赋值）
2. 缺少查询和重置按钮

下面是带有 dayjs 设置默认时间和查询、重置按钮的 HTML 文件代码，你可以保存为 .html 文件并在浏览器中查看效果：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Element-UI Form with Buttons</title>
  <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/element-ui/2.15.6/theme-chalk/index.css">
</head>

<body>
  <div id="app">
    <el-form :model="formData" label-width="100px" ref="orderForm" class="demo-form-styl">
      <el-form-item label="订单ID" prop="orderId">
        <el-input v-model="formData.orderId" placeholder="请输入订单ID"></el-input>
      </el-form-item>

      <el-form-item label="客户名称" prop="customerName">
        <el-input v-model="formData.customerName" placeholder="请输入客户名称"></el-input>
      </el-form-item>

      <el-form-item label="订单状态" prop="orderStatus">
        <el-select v-model="formData.orderStatus" placeholder="请选择订单状态">
          <el-option label="processing" value="processing"></el-option>
          <el-option label="shipped" value="shipped"></el-option>
          <el-option label="delivered" value="delivered"></el-option>
          <el-option label="cancelled" value="cancelled"></el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="下单日期范围" prop="orderDateRange">
        <el-date-picker
          v-model="formData.orderDateRange"
          type="daterange"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          :default-value="defaultDateRange"
          format="yyyy-MM-dd">
        </el-date-picker>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="submitForm">查询</el-button>
        <el-button @click="resetForm">重置</el-button>
      </el-form-item>
    </el-form>
  </div>

  <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.js"></script>
  <script src="https://cdn.bootcdn.net/ajax/libs/element-ui/2.15.6/index.js"></script>
  <script src="https://cdn.bootcdn.net/ajax/libs/dayjs/1.10.7/dayjs.min.js"></script>
  <script>
    new Vue({
      el: '#app',
      data: {
        formData: {
          orderId: '',
          customerName: '',
          orderStatus: '',
          orderDateRange: []
        },
        defaultDateRange: [dayjs().startOf('month').toDate(), dayjs().endOf('month').toDate()]
      },
      methods: {
        submitForm() {
          // 实现查询表单提交逻辑
          console.log('Form submitted');
        },
        resetForm() {
          this.formData = {
            orderId: '',
            customerName: '',
            orderStatus: '',
            orderDateRange: []
          };
          this.defaultDateRange = [dayjs().startOf('month').toDate(), dayjs().endOf('month').toDate()];
        }
      },
      created() {
        this.defaultDateRange = [dayjs().startOf('month').toDate(), dayjs().endOf('month').toDate()];
      }
    });
  </script>

  <style>
    .demo-form-styl {
      max-width: 400px;
      margin: 0 auto;
      padding: 20px;
    }
  </style>
</body>

</html>

这个代码添加了两个按钮（"查询" 和 "重置"），并使用了 dayjs 库在生命周期函数中设置了默认日期范围。你可以保存并在浏览器中打开以查看效果。如有任何问题，请告诉我。

这次按钮确实是生成了，但是默认日期还是没有显示出来。

这里我手动改了下代码，把 created 里面的defaultDateRange赋值，改成对绑定的 v-model的formData.orderDateRange的赋值。这样改一下就好了。

这个例子，只是一个基本的用法，出现了部分功能没实现的问题，类似这样的问题，很多人都会遇到，AI 工具有时候也会幻觉，需要人为修正下。如果你有特殊的定制化需要，比方说指定 v-model 绑定的值和 prop，亦或是需要根据某个 radio 来显示隐藏部分表单，也是可以实现的。有时候出现完成度并不能达到 100%完美，仍然需要你用你的开发经验和提问技巧，来进一步得出正确的结果。

通过AI工具，我们能够快速生成这样一个包含多种交互元素的表单，极大地减少了手动编写代码的工作量。开发者只需要对生成的代码进行少量的调整和优化，即可完成复杂表单的开发。

总结

AI工具在前端开发中的应用为开发者带来了显著的效率提升。通过自动代码生成、智能数据处理和快速组件生成等功能，开发者可以更专注于业务逻辑和用户体验的优化，而不再被繁琐的重复性工作所困扰。本文通过具体的业务场景和案例，展示了AI工具在数据格式处理和复杂表单生成中的实际应用，希望能为前端开发者提供一些有益的启示。我相信，随着AI技术的不断进步，未来的前端开发将更加智能和高效。

原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。

如有侵权，请联系 cloudcommunity@tencent.com 删除。

前端