AI前端探索：用Cursor打造股票数据分析页面(1)

JackeryJam
1,010 阅读6分钟

前言

在一个平静的周末早晨，小明正在刷着股票APP，看着一堆红红绿绿的K线图发呆。作为一个前端工程师，他总觉得市面上的股票数据展示工具有些不尽人意，没法完全满足自己的需求，例如我想拉出股息率最高的前10支股票，我看到的几个炒股软件就没法满足。

"要是能自己做一个简单好用的股票数据可视化工具就好了！"小明心想。但是传统的开发方式不仅耗时，还需要处理繁琐的数据抓取和分析逻辑。正当他一筹莫展的时候，突然想起了最近特别火的AI编程软件Cursor。"既然AI能帮我们写代码，为什么不试试呢？"

小明眼前一亮。这个想法让他兴奋不已，立刻打开了电脑，准备开启一段有趣的AI辅助编程之旅。接下来，就让我们跟随小明的脚步，看看他是如何借助AI的力量，爬取自己想要的股票数据...

流程设计

作为一个数据可视化项目，小明将整个工作流程划分为三个关键阶段：

  • 数据源确定

    • 寻找合适的股票数据接口

  • 数据采集

    • 通过浏览器插件获取目标数据
    • 确保数据的完整性和实时性

  • 数据分析与可视化

    • 处理和清洗原始数据
    • 进行数据分析和图表展示

作为一名老前端，小明对JavaScript和Node.js十分熟悉。在着手这个项目时，常规思路无非是用Node.js搭建爬虫服务，然后进行数据分析。但这一次，小明决定打破常规，尝试一个大胆的想法。

"为什么不把所有的功能都放在浏览器中实现呢？" —— All in Browser，这个想法让小明兴奋不已。

技术难题

在尝试将爬虫完全运行在浏览器端时，小明首先遇到的最大挑战就是浏览器的跨域限制。但灵光乍现之际，他想到了一个绝妙的主意：开发一个通用的代理请求插件，完美规避跨域的限制。

紧接着，另一个棘手的问题浮现出来 —— 登录态的维护。很多数据接口都需要用户登录后才能访问。这时，小明又想到了一个巧妙的解决方案：通过浏览器插件作为中间桥梁，将用户在目标网站的登录态无缝传递，通过插件作为桥梁，把请求走一圈到目标网站再回来，从而确保数据请求的顺利进行。

方案特点

传统Node.js爬虫方案：

优点：

  • 可持续运行，适合大规模数据采集
  • 数据处理和存储能力强大

缺点：

  • 需要服务器部署和维护成本
  • 登录态维护复杂，容易被反爬

All in Browser方案：

优点：

  • 零部署，用户装插件即可使用
  • 完美复用用户登录态，不用考虑反爬

缺点：

  • 依赖浏览器环境，无法持续后台运行
  • 数据存储受限于浏览器

整体流程

image.png (不瞒你说，这图也是AI帮我画出来的)

实践过程

以下就是小明的实操过程了，先是command+i，唤醒Composer

初始化项目

直接告诉AI说我的整体需求，爬取数据，去东方财富的网站 quote.eastmoney.com/ 进行爬取，希望采用的是用浏览器插件中转的形式。Cursor里面帮我创建了两个目录，一个浏览器插件的，一个是数据可视化的网页

之后成功加载该插件

打开页面进行调试

打开页面后果然没那么顺利，报错了

TypeError: Cannot read properties of undefined (reading 'sendMessage')
at HTMLButtonElement.fetchStockData (script.js:12:47)

回去问一下cursor

再次打开

image.png

再问cursor

"

再次报错

image.png

把问题再次交给cursor

通信成功了

从这里开始，虽然还是报错的，但是我们的html页面，成功通过东方财富的tab发起请求了，请求出错了

image.png

再经过两次把错误日志丢给cursor修改

终于看到结果了，在我们的html页面看到成功请求回来的股票数据

image.png

设计理念优化

虽然成功请求到数据，但是小明觉得AI写的这代码不符合他的设计理念，他要的是一个通用的浏览器插件，起的是一个桥梁作用，为以后所有这种简单数据分析需求达桥梁。为每一个html页面提供一个proxyRequest，是通过目标tab去发起请求，而不是直接发起请求。

// 发起代理请求
const response = await window.proxyRequest({
    url: 'https://api.example.com/data',
    method: 'GET',
    headers: {
        'Accept': 'application/json'
    },
    targetDomain: 'example.com' // 指定目标域名
});

给AI建议让它继续修改

image.png

image.png

中间省略两次翻车

后面一次报错是content script的注入没有那么快，AI写的股票分析的html上过快地调用proxyRequest这个方法，导致报错，还得聪明的小明替帮AI提供解决思路

image.png

中间再省略5次翻车，让AI修修补补，终于又好了

image.png

说明文档

到了这里，虽然还没对拉下来的数据进行相应的分析，但是，浏览器插件的功能也是基本完成，这时候就得让AI帮我写个说明文档了，完善一下popup的界面。这时候真实感受，有AI写文档，真好。

可以看一下AI帮我写的说明文档：

使用说明：jackeryjam.github.io/stockAnalys…

工作原理：jackeryjam.github.io/stockAnalys…

不得不说，真好，虽然是叫AI改了很多次，哈哈，但也是不用我们亲自写了。

实践结果

从上面的过程可以看出，AI帮我写了个插件，装完在任意页面的window对象加上了proxyRequest方法，使用改方法就可以实现移花接木，把该页面的请求通过另外一个tab去发起了，进而解决了跨越和登陆态的问题，可以在前端页内爬取数据。

这是AI写出的代码，可以看一下 github.com/jackeryjam/…

实践心得

不得不说，现在AI编程，确实发展很快，还记得大半年前，AI编程很多都局限于一个页面的代码，没有项目的概念，但如今，AI已经有了项目的概念，并且可以一次性帮你改多个文件，确实是一个从一到多的伟大突破。

从本次的实践上看，小明知道可以通过浏览器插件进行代理实现，正因为有了一定的前端知识，才能引导AI做出这么个东西。知识从来就不是多余的，AI的出现不代表我们之前的知识白学了，相反，正是之前的知识，才能充分发挥AI的才能。

在这个技术快速迭代的时代，也许我们的角色会发生改变，从传统开发者转变为AI prompt工程师，但历史的车轮永远向前，与其担心被时代抛弃，不如主动拥抱变化，在新的浪潮中寻找属于自己的位置。

未完待续

细心的读者会发现，小明只是成功通过浏览器插件代理把一小部分数据请求下，数据不全，也没进行详尽的分析，这个坑我让AI继续填上，之后再和大家分享

avatar
文章
阅读
粉丝