IT博客汇
  • 首页
  • 精华
  • 技术
  • 设计
  • 资讯
  • 扯淡
  • 权利声明
  • 登录 注册

    我用 Cursor AI 开发了一个在线加密工具网站

    四十九C-137发表于 2025-03-02 16:59:00
    love 0

    最近接触了一个新的AI辅助开发工具Cursor AI,为新用户提供了免费额度,我用它代替了 Github Copilot 工作了一段时间,用来辅助开发我的 Unity 项目。在使用期间,我逐渐摸索了 Cursor 的使用方式,以及它的强大功能,效率高到吓人,并且能够非常清晰地理解我的开发需求,为我提供解决方案。

    其中,它有一个优点是对整个项目的整理与梳理,并且能够根据我的需求,能够一次修改多个文件。
    于是我想,是否可以挑战一下使用 cursor 完整地构建一个项目,我不参与修改任何代码,只负责提出需求,看看 cursor 是否能够完成这个任务。结果让我非常惊喜,cursor 不仅能够完成任务,而且完成得非常好。

    项目实现

    我挑选了一个比较简单的项目,一个在线加密工具网站,包含以下功能:

    • AES 加密/解密
    • SHA256/MD5 哈希计算
    • Base64 编码/解码
    • 随机密码生成器
    • 中英文双语支持

    首先,我给它的第一个指令是:

    本项目将会构建一个静态网页,部署在vercel 上,提供简单的加密服务。
    
    encryption-tool/
    │── public/             # 静态资源(可选)
    │   ├── favicon.ico     # 网站图标
    │   ├── logo.png        # 站点 Logo
    │── src/                # 源代码
    │   ├── assets/         # 存放 CSS、字体、图片等
    │   ├── scripts/        # 存放 JavaScript 逻辑
    │   │   ├── aes.js      # AES 加密相关代码
    │   │   ├── hash.js     # 哈希算法(SHA256/MD5)
    │   │   ├── base64.js   # Base64 编码解码
    │   ├── index.html      # 主页
    │   ├── style.css       # 站点样式
    │   ├── app.js          # 主要 JS 逻辑
    │── .gitignore          # Git 忽略文件
    │── package.json        # npm 依赖(可选)
    │── vercel.json         # Vercel 配置文件(可选)
    │── netlify.toml        # Netlify 配置文件(可选)
    │── README.md           # 项目说明
    
    根据这个项目结构创建我的项目,并创建这些文件,在相关文件内生成代码。
    

    备注:其实以上文件结构也是AI生成的....

    随后 Cursor 生成项目代码,并给出了构建指令:

    npm install
    npm start

    当我运行该指令时,npm 居然报错了,随后我给 Cursor 发送了第二个指令:

    按照依赖时报错:
     npm install
    npm ERR! code EJSONPARSE
    npm ERR! path C:\Users\jxxcl\Documents\GitHub\cryptoWeb/package.json
    npm ERR! JSON.parse Unexpected end of JSON input while parsing " "
    npm ERR! JSON.parse Failed to parse JSON data.
    npm ERR! JSON.parse Note: package.json must be actual JSON, not just JavaScript.
    
    npm ERR! A complete log of this run can be found in:
    npm ERR!     C:\Users\jxxcl\AppData\Local\npm-cache\_logs\2025-03-01T15_36_47_056Z-debug-0.log

    Cursor 为我解决了这个问题,原因是 package.json 文件格式错误;
    解决 package.json 文件格式错误后,我继续运行指令npm start,项目成功运行。我可以通过浏览器 http://localhost:3000 访问网页。

    但是,当我想要加密文本时发现,所有的加密功能都不可用!随后我给 Cursor 发送了第三个指令:

    当我使用 ase 加密时,报错:
    加密失败:Cannot access 'CryptoJS' before initialization

    Cursor 为我解决了这个问题,原因是 CryptoJS 库未正确导入。
    它将 CryptoJS 库的导入语句修改了位置,解决了这个问题;

    修改后,所有的加密功能都可以正常工作了。

    在网页的主要功能可以使用之后,我开始添加一些细节,比如网页图标、网站 Logo、网站标题等。但是我在 public 目录下放置了 logo.ico、logo.png,而网页并没有生效,我无法看到我的网站 Logo。随后我给 Cursor 发送了第四个指令:

    我创建了 public目录,并放入了png文件和ico 文件,为什么调试时,我的网页不显示这两个图片?

    Cursor 为我解决了这个问题,原因是图片路径错误。
    它将图片路径修改正确,解决了这个问题;

    还有一个问题,网页的 footer 组件,没有贴近底部,我希望它贴近底部。随后我给 Cursor 发送了第五个指令:

    当我npm start 之后,使用桌面浏览器访问测试页,发现 footer 没有贴近网页的底部,我希望 footer 能贴近网页的底部

    Cursor 为我解决了这个问题,它将 footer 组件修改为贴近底部;

    此时的它只有 3 个加密功能,但是我希望此网页还支持密码生成器,于是我给 Cursor 发送了第六个指令:

    我希望再增加一个功能,密码生成器,要求添加用户可选的配置,比如大小写,数字,常见特殊字符等

    Cursor 添加了密码生成器,并添加了用户可选的配置,比如大小写,数字,常见特殊字符等;

    由于我的网页将会部署在 vercel 上,全球用户都可以访问,于是我给 Cursor 发送了第七个指令:

    此网站将面向全球用户,请为它添加语言转换,包含中文/English,并且英语为默认语言

    Cursor 为我添加了语言转换,包含中文/English,并且英语为默认语言;

    为了获取更多的浏览量,我需要添加一些 SEO 优化,于是我给 Cursor 发送了第八个指令:

    为网站添加一些SEO关键字,以便获取更多浏览量

    Cursor 在 head 标签中添加了许多 SEO 关键字;

    至此,我使用 Cursor 完成了网页的构建,并实现了所有功能。接下来要做的就是部署到 vercel 上,并绑定域名。此处略过...

    网站预览:https://www.fast-crypto.org/

    总结

    Cursor 真的很强大,周日休息时我有了使用 Cursor 构建网站的想法, 然后我开始行动,加上部署网页,以及写完这篇博客,总共花费了不到 3 小时,并且中途我没有参与任何代码的编写。
    想起来2年前,我写网页时还需要一行一行的写,出错了还需要调试,而现在我只需要提出需求,Cursor 就会自动生成代码,并且 bug 很少,网站样式也符合大众审美。不禁感慨,以后的程序员可能真的会失业了,从而诞生出一种新的职业,Prompt Engineer。



沪ICP备19023445号-2号
友情链接