您当前的位置：首页 > 计算机 > 编程开发 > 人工智能

【面向GPT编程】学习接口的使用及接口数据的处理，通过GPT对话完成开发的案例分享

时间：12-13来源：作者：点击数：53

1、首选选用了一个可以免费调用3.5的对话工具(PS：3.5版本的编程能力只限于处理简单的业务，复杂的业务处理是不太靠谱的)

2、给他一个指令，他给我返回了相应的代码，丢到VS CODE里面去实际跑了一下，发现是可以运行的

3、给出我的优化建议之后，他继续优化了输出的代码

4、尴尬，代码报错了，继续让他检查

5、经过优化是可以执行了，发现返回的展示有点问题，给他下了优化建议

6、继续优化展示的结果和展示的数据形式

至此，完成了整个页面的开发，贴一下最终的源代码(PS：写的比我好)

<!DOCTYPE html>
<html lang="en">
 
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>查询QQ信息API使用示例</title>
<style>
body {
font-family: Arial, sans-serif;
text-align: center;
margin: 20px;
}
 
input {
padding: 10px;
font-size: 16px;
}
 
button {
padding: 10px 20px;
font-size: 16px;
cursor: pointer;
}
 
textarea {
width: 100%;
height: 200px;
margin-top: 20px;
padding: 10px;
font-size: 16px;
}
</style>
</head>
 
<body>
 
<label for="qqInput">输入QQ号（5到12位数字）：</label>
<input type="text" id="qqInput" placeholder="请输入QQ号">
 
<button>查询</button>
 
<textarea id="result" readonly></textarea>
 
<script>
function requestData() {
// 获取输入框的值
var qqNumber = document.getElementById('qqInput').value;
 
// 判断是否为5到12位数字
var regex = /^\d{5,12}$/;
if (!regex.test(qqNumber)) {
alert('请输入5到12位的数字');
return;
}
 
// 构建API请求链接
var apiUrl = 'https://api.oioweb.cn/api/qq/info?qq=' + qqNumber;
 
// 发起API请求
fetch(apiUrl)
.then(response => response.json())
.then(data => {
// 格式化返回数据
var formattedData = formatData(data.result);
 
// 将返回数据填写在文本框中
document.getElementById('result').value = formattedData;
})
.catch(error => {
console.error('API请求错误:', error);
alert('API请求错误，请重试');
});
}
function formatData(data) {
// 转译性别值
var sexTranslation = translateSex(data.sex);
 
// 格式化数据为展示文本
return `查询的QQ号: ${data.user_id}\n昵称: ${data.nickname}\n性别: ${sexTranslation}\n年龄: ${data.age};\n地址: ${data.area}`;
}
function translateSex(sex) {
// 定义性别值的映射关系
var sexMap = {
'male': '男',
'female': '女',
'unknown': '未知'
// 可根据实际情况继续添加其他映射关系
};
 
// 返回映射后的值，如果没有映射关系，则直接返回原始值
return sexMap[sex] || sex;
}
</script>
 
</body>
 
</html>