用豆包写了个“百公里油耗费用计算器”

主包提车3个多月开了2000公里，平时会不定时刷下吉利的APP，里面有一个行车日志模块，可以看到每一次出行的距离和油耗。结合平日加油时的油价，可以算出百公里烧油的成本（计算公式：距离 ÷ 100 × 油耗 × 每升油价）。

行车日志可以看到单次行程的油耗

于是我打算写一个计算器，方便平时计算油耗花费（有一说一，确实自己开车比较省钱啊！自己开差不多0.6-0.8元/km，打车差不多1.5元/km😂）。

一、前期准备

说回开头提到的计算公式：距离 ÷ 100 × 油耗 × 每升油价，这意味着有3个参与计算的变量，因为计算的是百公里油耗，所以距离就变成常量了，只需要考虑输入油耗和每升油价。油耗肯定是需要自己输入的，油价倒是可以通过API获取。但是不同地区的油价又不一致，所以还要考虑省份这个变量。那么方案大概就出来了：

1. 上策：只输入油耗，通过接口自动获取省份，通过省份获取油价，然后进行计算；
2. 中策：输入油耗，手动选择省份，通过省份获取油价，然后进行计算；
3. 下策：不管省份，手动输入油耗和油价，然后进行计算；

根据上面的方案，需要寻找2个API接口：根据IP获取省份、根据省份获取油价。通过一番搜索找到了 MXNZP，这俩接口正好都能提供，那就开始吧。

接口信息

二、开始编码

之前尝试用豆包写另一个项目的时候，一次性让豆包生成了太多行代码，导致多次对话后生成的代码BUG层出不穷，这次尽可能让AI少生成些代码😥。

芜湖，UI效果还不错，这个样式的网站我最近看到好多，原来都是AI生成的😂

2.1、页面头部展示访问者的省份信息

UI中看不出来，其实已经实现了这个API

2.2、在列表右上方提供省份切换按钮

增加容错性，考虑到通过IP获取省份毕竟是第三方接口，也存在不稳定性。增加切换省份后如果API接口异常，用户也能继续使用。

豆包写UI是真的快，风格也挺不错

从这开始可以看出豆包读文档的能力还是比较一般，“通过IP获取省份”接口的province字段是XX省、XX市、XX自治区，而“获取油价”接口的province字段只需要XX。好在经过2次提示，豆包也解决了这个问题。

JQuery拼接的小问题，肉眼没看出来，AI倒是很快发现了。

2.3、列表展示当前省份的油价信息

这一步也顺利完成了，AI的设计风格比较扁平化，有点像老外网站的风格。

油价卡片展示效果

2.4、剩下的3步

这次AI完成了加油类型选择和油耗计算功能，该说不说这个样式我喜欢，出UI的速度和效果我也挺满意，这比我手工画结构和写样式快多了。测试了一下已经基本满足使用了，后面就是继续优化的工作。

计算卡片样式

三、开始优化

3.1、修复自动获取省份和接口限制问题

我发现在AI完成省份切换功能后，自动获取省份的功能失效了(看了是代码被覆盖了)，通过上述提示词后问题解决。

3.2、调整样式和允许编辑价格

增加一个油价编辑功能，有2个考量：一是这样做即使接口获取失败，也提供了兜底方案；二是有些小加油站的价格会略低于该省公布价格，用户可以自行调整。

支持油价编辑功能

四、人工编码

最初替换完APP_ID和APP_SECRET，接口就能正常工作。后面发现会获取不到油价数据，输出了接口错误信息后，才发现这个免费接口有QPS限制，每秒只能请求一次接口。当我调用了“IP获取省份”接口后，下一个“获取油价”接口也是瞬间发出，就会超出每秒请求频率限制。

接口报错信息

4.1、切换获取IP所在省份接口

如果“IP获取省份”和“获取油价”接口只能二选一，那肯定是优先保障“获取油价”接口的调用，于是我开始寻找有没有可用的第三方服务，最后在知乎找到一个仍可使用的方案，于是我手动替换了这部分逻辑代码。

很幸运的在知乎上看到一个答案

4.2、通过定时任务每日读取并存储油价信息

目前的油价信息是通过接口实时获取的，这还存在着3个问题：

1. 接口仍然受请求频率限制，页面访问量稍大就有可能触发错误；
2. 将我申请的APP_ID和APP_SECRET直接写在页面中，这并不是安全的做法。
3. 免费接口存在1000次/日的调用数量限制，存在单日调用次数耗尽的风险。

所以我决定使用cron定时任务，每天固定时间调用接口，并将结果缓存为json文件，之后页面访问则从json文件中读取数据。一举两得，既解决了敏感信息的安全性问题，又解决了接口请求频率限制的问题。同样的，这部分代码也需要我手动完成并进行替换。

4.3、增加输入限制

在豆包生成的代码中，输入框部分的代码如下所示，它存在2个问题，仍需要我手动解决：

1. 试图输入小数时，由于监听的是input事件，当输入.时就会触发parseFloat进行保留小数操作，导致永远无法输入小数；
2. 没有限制输入位数，number类型也不支持字符长度限制，用户可以输入7.6111111等不符合的价格；

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

<input 
    type="number" 
    id="gas92-price" 
    class="..."
    step="0.01"
    min="0"
/>

<script>
    // 油价输入框变化时自动计算
    $("#gas92-price, ...").on("input", function() {
        // 保留两位小数
        const value = parseFloat($(this).val()) || 0;
        $(this).val(value.toFixed(2));

        // 自动重新计算
        calculateFuelCost();
    });
</script>

五、最终成品

虽然人工排查和编码调整的过程占据了大部分时间，但是我仍满意豆包的效果。原因有二，一是豆包设计的UI界面风格挺不错（扁平极简风格）；二是这个单页面的代码量达到了600行，输出的代码仍然可以正常运行，没有什么严重的BUG。相比去年使用GPT-4o生成的半成品大富翁BUG版（300多行代码），已经有了很大的长进了。

代码量已经来到了600行

最终效果