调用一个在线的api接口,演示如何用cursor完成接口调用和页面数据绑定。
首先用cursor搭建vue的脚手架,项目框架搭建起来。
使用到以下命令:
npm install -g @vue/cli
vue create weather-project
cd weather-project
npm install axios
weather-project是项目名称。
一个免费的天气接口:
http://t.weather.sojson.com/api/weather/city/101030100
在cursor的COMPOSER窗口中输入下面的提示词:
@http://t.weather.sojson.com/api/weather/city/101030100 ,写一个vue代码,调用这个接口,将返回结果中的forecast数组的值,遍历显示到页面上,页面以列表形式显示,forecast中的属性名称对应页面列表的字段名称。生成对应的代码。
输入完成,回车,cursor就会根据提示词生成代码文件,启动项目:
npm run serve
访问http://localhost:8080/
成功拿到接口返回接口,并绑定到页面上。
在过程中出现了跨域问题,也是把错误信息给到cursor,cursor自动修改文件。
cursor的代码需要人工审查,有些不合理的地方需要人工参与调整,并不是人工完全不参与。