AI工具辅助开发小技巧分享

网址1：GPT Pro (mxnf.one)

网址2：保持更新GPT (api-box.com)

网址3：www.lrfc.vip/chat

对于我们开发人员来说，AI 能做的就是提效。

即通过 AI 工具的加持，提高开发效率。

使用 ChatGPT 整理需求

需求大纲

把你的需求背景和意向写清楚，向 ChatGPT 提问。

例如：你是互联网行业一名资深的产品经理，现在主导设计一个银行产品的需求， 这个产品是面向银行客户的，例如银行自助取票，预约窗口等等。 要求产品以客户功能为主，不要有其他无关功能。你来写这个产品的需求文档，先列出需求大纲。

需求大纲 - 银行客户自助服务产品

1. 简介
   - 介绍产品的目标和背景
   - 概述产品的核心功能和优势

2. 目标用户
   - 描述产品的目标用户群体
   - 包括个人客户和企业客户

3. 功能需求
   3.1 自助取票
     - 客户可以通过自助终端机或手机应用程序获取取票号码
     - 提供简单易懂的界面，方便客户选择服务类型
     - 显示当前等待时间和预计等待时间
     - 支持多种语言和可访问性需求

   3.2 预约窗口
     - 客户可以通过自助终端机或手机应用程序预约特定窗口
     - 提供可选的时间段和服务类型
     - 发送预约确认通知给客户
     - 提供取消预约的功能

   3.3 自助查询
     - 提供账户余额查询、交易明细查询等常用查询功能
     - 显示查询结果并支持导出或打印

   3.4 个性化设置
     - 允许客户设置个人偏好，如语言、通知方式等
     - 提供账户管理功能，如修改密码、绑定/解绑手机等

4. 用户界面
   - 设计简洁直观的用户界面，易于操作和导航
   - 保证界面的一致性和可用性
   - 考虑不同设备和屏幕尺寸的适配性

5. 安全性和隐私保护
   - 采用安全的身份验证机制，如密码、指纹或面部识别
   - 保护客户的个人信息和交易数据的安全
   - 遵守相关的隐私法规和合规要求

6. 可扩展性和可维护性
   - 架构设计要考虑可扩展性，以支持未来的功能扩展
   - 代码结构清晰，易于维护和更新

7. 性能和稳定性
   - 保证系统的高性能和稳定性，能够处理大量并发请求
   - 进行性能测试和负载测试，优化系统响应时间和资源利用率

8. 部署和运维
   - 提供简单易用的部署和运维工具
   - 支持容器化部署和自动化运维

9. 用户反馈和改进
   - 收集用户反馈，及时响应和解决问题
   - 定期进行用户调研和用户体验测试，持续改进产品

10. 需求优先级
    - 根据用户需求和业务价值，确定需求的优先级
    - 制定开发和发布计划，确保按时交付关键功能

以上是银行客户自助服务产品的需求大纲，它提供了产品的目标、目标用户、核心功能需求以及其他相关方面的要求。在编写详细的需求文档时，可以进一步细化每个功能的具体需求、用户界面设计和技术实现等内容。

可以看到它写出的需求是非常全面的，有些是自己都想不到的点。 这些需求不一定完全适用，但具有很好的参考价值。

需求细化

有了大纲以后，还可以继续提问一些需求细节，

例如：根据上文，请详细描述“自助查询” 部分的需求，按层级、条目列出

自助查询功能需求：

1. 账户查询
   - 用户可以通过该功能查询账户余额、可用余额、冻结金额等账户相关信息
   - 用户可以选择查询的账户类型，如储蓄账户、信用卡账户等
   - 用户可以查看账户的交易记录，包括存款、取款、转账、缴费等记录
   - 用户可以根据时间范围、交易类型、金额等条件进行筛选和排序

2. 汇率查询
   - 用户可以查询各种货币的实时汇率
   - 用户可以选择查询的货币对，如人民币对美元、欧元对英镑等
   - 用户可以设置汇率预警功能，当汇率达到预设的阈值时，系统会发送通知提醒用户

3. 理财产品查询
   - 用户可以查看银行提供的各种理财产品信息，包括产品类型、期限、预期收益等
   - 用户可以根据自己的风险偏好和资金实力筛选合适的理财产品
   - 用户可以查看已购买的理财产品的详情和收益情况

4. 贷款查询
   - 用户可以查询自己的贷款信息，包括贷款余额、还款计划、还款记录等
   - 用户可以查看贷款产品的详细信息，包括利率、期限、还款方式等
   - 用户可以根据还款日期、还款金额等条件进行筛选和排序

5. 交易明细查询
   - 用户可以查询特定交易的详细信息，如转账的收款方、缴费的收款单位等
   - 用户可以查看交易的状态和处理结果，如成功、失败、待处理等
   - 用户可以导出交易明细报表，以便进一步分析和管理个人财务

6. 自定义查询条件
   - 用户可以根据个人需求设置自定义查询条件，如交易类型、金额范围、时间范围等
   - 用户可以保存常用的查询条件，以便快速进行查询
   - 用户可以设定默认的查询条件，以便下次登录时自动应用

7. 查询结果展示
   - 查询结果应以清晰的方式展示，包括表格、图表等形式
   - 查询结果应包含关键信息，如交易时间、交易类型、交易金额等
   - 查询结果应支持分页和滚动加载，以便用户查看大量数据时的浏览体验

8. 查询历史记录
   - 系统应保存用户的查询历史记录，方便用户查看和再次查询
   - 用户可以根据时间、关键词等条件进行查询历史记录的筛选和搜索
   - 用户可以删除不需要的查询历史记录，以保护个人隐私

以上是自助查询功能的详细需求。根据这些需求，可以进行更具体的设计和开发工作。

还可以让它根据需求设计出需要多少页面，以及每个页面的功能。

这样提问：根据上文需求，你分析需要多少个页面？每个页面都有哪些功能？按条目列出

根据上文需求，我分析出以下页面和功能：

1. 注册页面：
   - 输入用户名和密码进行账户注册。
   - 验证用户名的唯一性。
   - 提示用户输入正确的密码格式。

2. 登录页面：
   - 输入用户名和密码进行账户登录。
   - 提供忘记密码的找回功能。
   - 提供记住密码的选项。

3. 账户管理页面：
   - 显示用户的个人信息，如姓名、手机号码、邮箱等。
   - 允许用户修改个人信息。
   - 提供修改密码的功能。
   - 提供注销账户的选项。

4. 转账页面：
   - 输入收款人账号和转账金额进行转账操作。
   - 提供选择转账方式，如即时转账、定时转账等。
   - 提供转账记录查询功能。

5. 缴费页面：
   - 提供选择缴费类型，如水费、电费、电话费等。
   - 输入缴费金额和账号进行缴费操作。
   - 提供缴费记录查询功能。

6. 存取款页面：
   - 提供选择存款或取款操作。
   - 输入存款金额或选择取款金额。
   - 提供存取款记录查询功能。

7. 预约服务页面：
   - 提供选择服务类型，如咨询、预约等。
   - 输入预约时间和内容进行服务预约。
   - 提供预约记录查询功能。

8. 自助查询页面：
   - 提供选择查询类型，如账户查询、汇率查询、理财产品查询等。
   - 提供自定义查询条件，如时间、金额等。
   - 显示查询结果并提供导出功能。
   - 提供查询历史记录查询功能。

9. 安全管理页面：
   - 提供设置交易密码的功能。
   - 提供设置安全问题和答案的功能。
   - 提供绑定手机号码和邮箱的功能。

10. 通知和提醒页面：
    - 显示系统通知和提醒消息。
    - 提供阅读和标记为已读的功能。

11. 用户反馈与支持页面：
    - 提供用户反馈的功能，包括意见反馈、问题反馈等。
    - 提供常见问题解答和帮助中心的链接。

以上是根据需求分析出的大致页面和功能列表，具体设计还需根据实际情况进行调整和完善。

使用 ChatGPT 开发项目

例如：请你使用Vue框架实现以下需求：

注册页面：

• 输入用户名和密码进行账户注册。
• 验证用户名的唯一性。
• 提示用户输入正确的密码格式。

当使用Vue框架实现注册页面时，你可以按照以下步骤进行：

1. 创建Vue组件：
   - 创建一个名为`RegistrationForm`的Vue组件，用于显示注册表单和处理用户输入。
   - 在组件中定义`data`属性，包括`username`、`password`和`errorMessage`等字段，用于存储用户名、密码和错误信息。
   - 在组件的`template`中编写HTML代码，包括输入框、按钮和错误信息的显示。

2. 实现用户名唯一性验证：
   - 在组件的`methods`中定义一个方法，例如`checkUsernameUnique`，用于向服务器发送请求验证用户名的唯一性。
   - 在用户名输入框中添加`@blur`事件监听器，当用户离开用户名输入框时触发验证方法。
   - 在验证方法中使用`axios`或其他HTTP库发送异步请求到服务器，检查用户名是否已被注册。
   - 根据服务器返回的结果，更新`errorMessage`字段，提示用户用户名是否唯一。

3. 实现密码格式验证：
   - 在组件的`methods`中定义一个方法，例如`checkPasswordFormat`，用于验证密码的格式。
   - 在密码输入框中添加`@input`事件监听器，当用户输入密码时触发验证方法。
   - 在验证方法中使用正则表达式或其他方法检查密码的格式是否符合要求。
   - 根据验证结果，更新`errorMessage`字段，提示用户密码格式是否正确。

4. 完善注册功能：
   - 在组件的`methods`中定义一个方法，例如`submitRegistration`，用于提交注册表单。
   - 在注册按钮上添加`@click`事件监听器，当用户点击注册按钮时触发提交方法。
   - 在提交方法中进行最终的用户名和密码验证，确保用户名唯一性和密码格式正确性。
   - 如果验证通过，可以向服务器发送注册请求，并根据服务器返回的结果进行相应的处理。

这些步骤只是一个简单的指导，具体的实现方式可能会因你的项目结构和需求而有所不同。你可以根据需要进行调整和扩展。同时，记得在Vue项目中引入相关的库和工具，如axios用于发送HTTP请求，以便实现与服务器的交互。

给出具体参考代码

当使用Vue框架实现注册页面时，以下是一个简单的示例代码，展示了如何实现用户名唯一性验证和密码格式验证的功能：

```html
<template>
  <div>
    <h1>注册页面</h1>
    <form @submit.prevent="submitRegistration">
      <div>
        <label for="username">用户名:</label>
        <input type="text" id="username" v-model="username" @blur="checkUsernameUnique">
      </div>
      <div>
        <label for="password">密码:</label>
        <input type="password" id="password" v-model="password" @input="checkPasswordFormat">
      </div>
      <div v-if="errorMessage" class="error-message">{{ errorMessage }}</div>
      <button type="submit">注册</button>
    </form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      username: '',
      password: '',
      errorMessage: ''
    };
  },
  methods: {
    checkUsernameUnique() {
      // 发送异步请求到服务器验证用户名唯一性
      // 假设使用axios库发送请求
      axios.get('/api/check-username', { params: { username: this.username } })
        .then(response => {
          if (response.data.unique) {
            this.errorMessage = '';
          } else {
            this.errorMessage = '用户名已存在';
          }
        })
        .catch(error => {
          console.error(error);
        });
    },
    checkPasswordFormat() {
      // 使用正则表达式验证密码格式
      const passwordRegex = /^(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d]{8,}$/;
      if (passwordRegex.test(this.password)) {
        this.errorMessage = '';
      } else {
        this.errorMessage = '密码格式不正确';
      }
    },
    submitRegistration() {
      // 最终的用户名和密码验证
      if (this.errorMessage === '') {
        // 发送注册请求到服务器
        // 假设使用axios库发送请求
        axios.post('/api/register', { username: this.username, password: this.password })
          .then(response => {
            // 注册成功的处理逻辑
          })
          .catch(error => {
            // 注册失败的处理逻辑
            console.error(error);
          });
      }
    }
  }
};
</script>

<style>
.error-message {
  color: red;
}
</style>
```

请注意，上述代码仅为示例，实际项目中需要根据具体情况进行调整和扩展。另外，需要确保在项目中正确引入Vue和axios库，并在后端实现相应的用户名唯一性验证和注册逻辑。

根据参考代码自行引用并修改，大大提高了开发效率！

初试 ChatGPT 写代码感觉整体效率非常高，超出预期

• 只要能描述清楚需求，ChatGPT 会给你反馈不错的结果
• 个别代码（如 CSS 样式）需要自己调整一下

封装网络请求（ChatGPT）

如果你想封装一个网络请求，对axios进行封装

你还可以这样提问：我想用 axios 发送 ajax 请求，需要你帮助将上述给出的请求封装一下，包括 axios 的各个常用功能 直接写出 js 代码示例

import axios from 'axios';

// 创建axios实例
const instance = axios.create({
  baseURL: 'https://api.example.com', // 设置基础URL
  timeout: 5000, // 设置请求超时时间
});

// 请求拦截器
instance.interceptors.request.use(
  config => {
    // 在发送请求之前做一些处理，例如添加请求头等
    return config;
  },
  error => {
    // 处理请求错误
    return Promise.reject(error);
  }
);

// 响应拦截器
instance.interceptors.response.use(
  response => {
    // 在接收响应之前做一些处理，例如解析响应数据等
    return response.data;
  },
  error => {
    // 处理响应错误
    return Promise.reject(error);
  }
);

// 封装GET请求
export function get(url, params) {
  return instance.get(url, { params });
}

// 封装POST请求
export function post(url, data) {
  return instance.post(url, data);
}

// 封装PUT请求
export function put(url, data) {
  return instance.put(url, data);
}

// 封装DELETE请求
export function del(url) {
  return instance.delete(url);
}

使用上述封装后的axios请求，可以按照以下方式发送请求：

import { get, post, put, del } from './api';

// 发送GET请求
get('/api/data', { id: 1 })
  .then(response => {
    // 处理成功响应
    console.log(response);
  })
  .catch(error => {
    // 处理请求错误
    console.error(error);
  });

// 发送POST请求
post('/api/data', { name: 'John' })
  .then(response => {
    // 处理成功响应
    console.log(response);
  })
  .catch(error => {
    // 处理请求错误
    console.error(error);
  });

// 发送PUT请求
put('/api/data/1', { name: 'John Doe' })
  .then(response => {
    // 处理成功响应
    console.log(response);
  })
  .catch(error => {
    // 处理请求错误
    console.error(error);
  });

// 发送DELETE请求
del('/api/data/1')
  .then(response => {
    // 处理成功响应
    console.log(response);
  })
  .catch(error => {
    // 处理请求错误
    console.error(error);
  });

上述代码封装了常用的GET、POST、PUT和DELETE请求，并添加了请求拦截器和响应拦截器，以便在请求和响应过程中进行额外的处理。你可以根据具体需求进行调整和扩展。

如果你想写一个表单认证，你可以给出详细需求，直接用 ChatGPT 生成表单代码

使用 vue3 和 ElementPlus 写一个注册页面，包含一个标题“注册新用户”和一个表单。要求：
1. 页面内容水平垂直居中
2. 注册表单包含：用户名（必填）、密码（必填）、确认密码、昵称、注册按钮
3. 注册表单要根据 item 数据类型设置校验规则
4. 使用 vue3 setup script 语法

PS：AI 是你的助手，依然需要你有专业能力去解决问题。

使用 ChatGPT 优化代码

可以把你写出来的代码，提交给 ChatGPT ，然它提出优化建议，并且给出优化后的代码。

例如：

下面是一个 vue3 组件的代码，使用了 ElementPlus 组件库。 你作为一名资深前端工程师，有什么优化建议吗？

1. 请结合代码，分条目指出建议 2. 请给出你优化后的代码

总结

有 AI 的加持，写代码会非常高效。80% 的代码都可以通过 AI 生成，提高开发的效率。 我用的还是 国内GPT3.5镜像版本。如果付费使用 GPT4.0 ，那效率会更高。