AI教程 · 2025年2月19日

如何让不懂编程的人低门槛使用 Windsurf 写出完整应用

不要相信网络中关于“不懂编程使用Windsurf一个月赚了100万”这类新闻,他可能真不懂,但是他爹懂。真不懂一点编程甚至英文,真的很难编写出完整程序。网上都是懂编程的人教你实战中使用Windsurf,而不懂编程的人很难实战,而很多新闻又说不懂编程也可以用Windsurf写出应用,这就是罗生门嘛…既然这样,我不懂编程,可以尝试一下…

 

本文耗时2天,不低于500轮次对话,实现一套包含前后端的汇率兑换计算器应用。整个实现过程仅使用 对话。本文主要讲解不懂编程的人是如何真正编写出完整应用的心得,不提供完整操作流程。

实现的主要功能如下:

  • 完整前端页面(多终端适配)
  • 首页多策略获取货币汇率数值(数据库获取、备用API获取、获取最新汇率更新到数据库)
  • 读写数据库(连表查询)
  • 多个定时任务脚本,采集汇率和新闻数据写入数据库(并实现文件锁逻辑)
  • 封装汇率查询API、封装常用函数调用方法
  • 文件缓存机制
  • 本地文本文件检索
  • 详细的文件报错日志记录
  • 页面伪静态

如何让不懂编程的人低门槛使用 Windsurf 写出完整应用插图
如何让不懂编程的人低门槛使用 Windsurf 写出完整应用插图1

演示地址:https://huilv.aisharenet.com/

 

科普部分

什么人适合使用Windsurf ?

  • 非编程人员,如果是编程人员推荐使用 。
  • 知道基础的技术名词都是干什么用的,例如:数据库、表、字段、API、缓存、类、前端、域名等…
  • 参与过完整的网站建设过程:不限于前后端技术人员、运营、产品、市场、测试等…
  • 有基本的“领域”概念,可以很好的总结所在专业领域知识,并用文字描述出来。

 

除了编写应用,Windsurf还可以用来做什么?

  1. 基于自动化读取本地多文件和Agent能力,Windsurf可以作为优秀的本地文本总结、批处理工具。
  2. 编写需要的自动化运行脚本来处理各类本地任务,例如写一个bat脚本并自动执行。
  3. 学习编程最好的指导老师,提出编程需求后告知你每一步的任务以及实现的方法。
  4. 非标准的自动化测试,不管是技术人员或测试人员,可以导入代码后让Windsurf跟踪一个功能或读取完整代码编写测试计划并半自动执行测试用例。

 

如何学习Windsurf基础操作?

自行搜索”vscode”相关教程,因为Windsurf就是vscode的改版,基础操作逻辑类似。

 

Windsurf和copilot最大的区别是什么?

Windsurf默认写入模式会主动且发散的执行任务,更像一位员工,老板提出基本问题后,员工会主动的寻找解决方案完整工作。当然Windsurf中的Cascade也适合能读懂代码的朋友使用,这里我们不讨论。

copilot更像是沉默且不主动的助理,你不提出明确的任务他就会一直保持沉默,但给出明确需求胡他会做的很好。

 

Windsurf是否要购买付费版使用?

要买付费版本,最近更新的免费版本计划仅允许使用基础模型,效果较差。即使购买付费版本目前也限制了使用量。

免费版本因基础模型能力有限,不适合不懂程序的朋友使用。

 

Windsurf的两种模式?

Write负责代码编写/执行;Chat负责对话,不会写入任何代码,这点很重要。

如何让不懂编程的人低门槛使用 Windsurf 写出完整应用插图2 如何让不懂编程的人低门槛使用 Windsurf 写出完整应用插图3

 

适合新手的Windsurf配套编程环境

使用Windsurf编写代码时,必须要有一个配套的编程环境让Windsurf可以执行各类操作,以及让你实时预览代码实现效果。

既然是小白,必然不懂得搭建编程环境,或者跟着教程很艰难的可以搭建出来。搭建环境时最麻烦的问题是:大多数使用windows系统的人在本地搭建编程环境会遭遇更多的异常,以及无休止的调试各类依赖资源。

更可怕的是,你无法信任让Windsurf操作你的电脑——执行本地命令。这可能让你的私人电脑遭遇不可预料的问题。

 

我给出的解决方案如下:

购买一个服务器,自动化部署宝塔面板,记住连接SSH的root账号和密码。如果你明确使用PHP+MYSQL组合,那么请在宝塔面板中提前创建好(不要让Windsurf创建基础环境)。

到这里如果无法自行部署以上基础环境,建议自行百度。

 

启动Windsurf创建第一个项目

1.如果你顺利的安装Windsurf后,可以下载汉化插件:

2.在宝塔面板中创建一个网站目录,这里我选择PHP+MYSQL的组合

如何让不懂编程的人低门槛使用 Windsurf 写出完整应用插图4 如何让不懂编程的人低门槛使用 Windsurf 写出完整应用插图5

 

3.使用SSH连接远程服务器对应的的网站目录

连接远程服务器:启动软件,选择Connetc 然后选择SHH Host..

如何让不懂编程的人低门槛使用 Windsurf 写出完整应用插图6 如何让不懂编程的人低门槛使用 Windsurf 写出完整应用插图7

4.输入SSH账号(一般都是root)和服务器地址

如何让不懂编程的人低门槛使用 Windsurf 写出完整应用插图8 如何让不懂编程的人低门槛使用 Windsurf 写出完整应用插图9

 

5.输入root账号对应的密码,按Enter确认

如何让不懂编程的人低门槛使用 Windsurf 写出完整应用插图10 如何让不懂编程的人低门槛使用 Windsurf 写出完整应用插图11

 

6.不出意外你默认链接到的“目录”并不对,这里并看不到之前创建的文件夹

如何让不懂编程的人低门槛使用 Windsurf 写出完整应用插图6 如何让不懂编程的人低门槛使用 Windsurf 写出完整应用插图12

 

7.定位文件夹位置

这里选择免费的小尺寸模型提问,避免消耗额度,得到了目录绝对位置。

如何让不懂编程的人低门槛使用 Windsurf 写出完整应用插图6 如何让不懂编程的人低门槛使用 Windsurf 写出完整应用插图13

 

7.选择:文件-使用配置文件新建窗口-新建配置文件

点击创建(在“默认”中添加目录也可以)

如何让不懂编程的人低门槛使用 Windsurf 写出完整应用插图14 如何让不懂编程的人低门槛使用 Windsurf 写出完整应用插图15

 

8.点击Add Folder,并输入得到的目录地址:www/wwwroot/huilv.haoai.us.kg,点确认

如何让不懂编程的人低门槛使用 Windsurf 写出完整应用插图16 如何让不懂编程的人低门槛使用 Windsurf 写出完整应用插图17

 

9.选择在新窗口打开(会要求你再次输入密码)

如何让不懂编程的人低门槛使用 Windsurf 写出完整应用插图18 如何让不懂编程的人低门槛使用 Windsurf 写出完整应用插图19

 

10.进入到正确的目录,接下来我们可以正式编写项目代码了

(这是已经编写过代码的目录,默认你的目录应该为空或者仅显示一个无用的配置文件,不需要删除)

如何让不懂编程的人低门槛使用 Windsurf 写出完整应用插图6 如何让不懂编程的人低门槛使用 Windsurf 写出完整应用插图20

 

 

正式编写应用前准备工作

提问

提问过程使用其他大模型对话工具也可以,这样可以避免Windsurf生成代码,但使用Windsurf进行多轮对话,可以总结出更有用的历史记录。

1.如何获取实时汇率信息

2.帮我思考如何设计一个汇率查询网站

3.根据PHP+MYSQL设计网站架构

 

整理文档

1.数据库账号密码整理为.md文档

2.提问中得到的可用汇率查询API和KEY以及接口说明文档整理为.md文档

3.提问中得到的网站前端架构整理为.md文档(后端架构我根本不会设计,想不清楚,所以没有创建文档)

这些文档会作文Windsurf的上下文,或指定某个文档作为Windsurf的上下文辅助编写代码

如何让不懂编程的人低门槛使用 Windsurf 写出完整应用插图21 如何让不懂编程的人低门槛使用 Windsurf 写出完整应用插图22

 

验证最小功能实现逻辑

测试1:使用API访问,获取到汇率接口的全部货币名称,存入数据库。

测试2:使用API访问,从数据库中获取一个货币名称,请求到该货币汇率,存入数据库。
测试3:…

提示词中声明:这是一个简单的测试,创建最小的功能测试用例,并执行一遍,最后验证成功的标准是查询到数据库中有验证的数据。

测试后要求总结核心功能:总结出每个最小功能测试成功后得到的核心执行代码(我并不懂每段代码的含义)

 

测试成功后,要求清空产生的所有代码和数据库。这通过对话就可以实现。Windsurf可以执行任何远程服务器操作命令是适合新手使用的重要功能。

 

说明:

实际做了很多测试,分别让最小功能跑通,因为我不懂代码,所有接口、设计的功能对我而言并不可信,到这里我并不想编写一套完整的前后端代码来可视化的验证,因为生成过多的代码让项目无法正确前进。

同时,我记录下来了最小功能中的执行逻辑(API请求的方法),以及构建的数据库表,补充整理到了我的文档中。

 

正式编写应用

一开始我没有要求Windsurf先创建整个前端甚至前端首页,即使我已经提前准备好了明确的说明文档可以提供给Windsurf,让他准确的实现。

 

心得1:从哪个功能点开始构建代码很重要

为核心功能(汇率查询API)写一个可视化的前端界面,这个界面的字段要和数据库保持一致,字段尽量详细,就算这个可视化的前端页面并不想提供给访客使用也要先做出来。

该页面如果可以正常访问,表示代码中使用的方法是正确的,数据库中数据也是正确的,可以为后续实际要做页面引用参考。整个应用构建完成后可以删除这个页面。

 

因此我得到了如下两个页面:

如何让不懂编程的人低门槛使用 Windsurf 写出完整应用插图23
如何让不懂编程的人低门槛使用 Windsurf 写出完整应用插图24

示例地址:https://huilv.aisharenet.com/currencies/

 

如何让不懂编程的人低门槛使用 Windsurf 写出完整应用插图25
如何让不懂编程的人低门槛使用 Windsurf 写出完整应用插图26

示例地址:https://huilv.aisharenet.com/AED/

 

心得2:善用“引用”文档方式提问

基于心得1,一开始并不是要构建一个完整的项目,而Windsurf主动性太强,所以问题中建议加入提示词“页面列表展示,仅展示展示字段:XX\XX\XX”

如何让不懂编程的人低门槛使用 Windsurf 写出完整应用插图6 如何让不懂编程的人低门槛使用 Windsurf 写出完整应用插图27

 

提供的@功能十分实用,可以快速引用文件夹、文件、类

如何让不懂编程的人低门槛使用 Windsurf 写出完整应用插图28 如何让不懂编程的人低门槛使用 Windsurf 写出完整应用插图29

 

心得3:善于追问

这是上一步生成的页面,我有几个问题要提问

如何让不懂编程的人低门槛使用 Windsurf 写出完整应用插图30 如何让不懂编程的人低门槛使用 Windsurf 写出完整应用插图31

 

问题1:告诉我是否可以补充更多内容

问题2:告诉我代码效率问题

问题3:告诉我实现方法

问题4:告诉我根据我的需求“这是一个获取到的货币汇率展示列表”是否有优化建议?

 

心得4:高效管理代码,并减少垃圾代码产生的好方法

参考心得2的指令,增加一句:帮我单独创建一个子目录单独存放这个页面的代码。

在新建的子目录中单独测试并实现功能,最后考虑将此代码引用到其他需要的文件中。

如何让不懂编程的人低门槛使用 Windsurf 写出完整应用插图6 如何让不懂编程的人低门槛使用 Windsurf 写出完整应用插图32

 

心得5:在设计的功能较少时抽象出高可复用的能力:样式、方法、类、接口等

注意不要抽取过多可复用的文件代码,过于臃肿、数量过多的复用文件代码,在后续项目开发中,更容易让Windsurf记忆混乱。除非你记住每个复用文件的明确功能并提示Windsurf参考,实际操作中这并不现实。

该项目中复用的代码:查询汇率的API、数据连接文件、缓存规则和头部导航文件。记住,这是构建第二个页面时就抽象出来的,构建第一个页面时我并没有想的太清楚这个项目该做什么功能。

如何让不懂编程的人低门槛使用 Windsurf 写出完整应用插图6 如何让不懂编程的人低门槛使用 Windsurf 写出完整应用插图33

 

心得6:召回相关记忆然后执行任务(并让Windsurf执行服务器操作)

参考心得2,方法存在共性。这是实现复杂功能和复用现有代码的主要手段。

记得之前反复提及的“最小功能”么?当构造一个复杂的功能页面时,我往往从最小功能已正常运行代码中召回相关代码,用来实现一个复杂的功能页。

这个复杂页面我往往分块实现,先引入一个最小功能A,调试一次,再引入最小功能B,调试一次,以此类推…最后可以想堆积木一样做出很复杂的页面。

如何让不懂编程的人低门槛使用 Windsurf 写出完整应用插图6 如何让不懂编程的人低门槛使用 Windsurf 写出完整应用插图34

 

这次运气很好,没有直接进行数据库操作,就猜测到了正确的表和字段名,并构建出页面。这可能因为之前产生的上下文历史依然保留着数据库字段信息。

让我们强制执行一次数据库查询,作为近期的记忆留存,这可以更准确的完成后续任务:

如何让不懂编程的人低门槛使用 Windsurf 写出完整应用插图6 如何让不懂编程的人低门槛使用 Windsurf 写出完整应用插图35

 

我要修改已经创建好的汇率定时更新脚本:ExchangeRateService.php。此时需要提前召回相关记忆:

通过阅读代码,原来ExchangeRateService.php不负责定时更新汇率,我搞错了…

好在修改前尝试阅读代码,知道这个文件并不负责定时更新汇率,真正更新脚本文件是:update_exchange_rates.php

如何让不懂编程的人低门槛使用 Windsurf 写出完整应用插图6 如何让不懂编程的人低门槛使用 Windsurf 写出完整应用插图36

最后我提出了一个新问题让上下文记忆更加准确:“既然update_exchange_rates.php是定时获取汇率的脚本,那么ExchangeRateService.php文件是否还有用?”

在对话中最近复述出的内容,才是更准确的“记忆”。

 

心得7:把每一个实现的最小分支功能,记录在之前创建的文档中

当完整实现一个功能后,要写入文档中记录。通过对话让Windsurf更新到说明文档中的。

如何让不懂编程的人低门槛使用 Windsurf 写出完整应用插图37 如何让不懂编程的人低门槛使用 Windsurf 写出完整应用插图38

 

最好在列一个功能开发清单,准确的记录任务进度:

如何让不懂编程的人低门槛使用 Windsurf 写出完整应用插图39 如何让不懂编程的人低门槛使用 Windsurf 写出完整应用插图40

 

这么多要记录的信息,混合在一份说明文档中显然不合理,此时可以将重要说明文件分别记录,重点引用时只要在对话框输入@唤起文档即可。

 

心得8:为每一个核心功能创建“测试”模式

有些功能运行后可能会破坏代码、破坏正式数据库数据、无法检查报错信息或单次执行时间过长,代码中要求引入“测试”模式,方便调试各种问题。比如我的定时更新脚本执行一次要等很久,所以我加入了测试模式。

你信任代码设计功能正确的前提是:视觉上看到,有些视觉上无法直接看到的功能,要让Windsurf主动说出来“实际执行的结果”,此时就需要“测试模式”。

如何让不懂编程的人低门槛使用 Windsurf 写出完整应用插图41 如何让不懂编程的人低门槛使用 Windsurf 写出完整应用插图42

 

心得9:多用回退

对保存后不满意的代码按Ctrl+Z回退,重新对话。这不是简单“重新抽卡”,因为保留了上一轮的对话记忆,再次生成会更加准确。

 

心得10:多轮对话无法得到符合预期功能则放弃

这里的功能指“最小功能”,删除最小功能的目录和目录下文件,尝试打开新对话窗口,删除存储的记忆,然后在指令说明:忘记之前的代码,开始重新写XXX功能。

 

心得11:常用对话词语

增删改查、建议、优化、解释、参考、忽略、依赖、相关引用、完整执行逻辑、测试、合并(如果你无法理解这些词语,向ChatGPT提问:在编程语境下中:XXX词语分别代表什么含义)

 

心得12:尽量使用环境依赖简单的成熟编程语言

因此选择宝塔面板部署PHP+MYSQL。我不会选择更现代化的前端框架和数据库,担心大模型中相关知识较少,理解的业务类型也较少。

PHP作为“古老”的编程语言,面向各类业务应该有很多成熟的解决方案成为了大模型的训练知识。

其实Pythonye不错,但缺点是依赖的“库”过于丰富,让环境依赖随着项目迭代逐步不可控,并不适合完全不懂程序的小白。