零基础也能轻松搞定！用通义灵码 AI 打造你的个人笔记网站！

作者：宋镇江，安阳幼儿师范高等专科学校数字媒体技术专业教师

通义灵码是一款智能编码辅助工具，它依托通义大模型，能够通过自然语言生成代码、创建单元测试和添加代码注释等，支持多种主流IDE和编程语言。对于那些没有编程基础的用户来说，只需要简单描述需求，通义灵码就能自动生成代码，帮助你快速搭建个人笔记网站，极大地简化了开发流程，提高了效率。

引言

使用通义灵码 AI程序员后，无论是学习还是教学，时间都节省了很多。借助这个AI工具，我们可以大幅减少学习基础知识的时间。学生们再也不需要花费大量时间去手动编写重复的代码。实际上，大多数大学教材都是基础内容。通过AI的帮助，这些问题可以被快速解决，避免了死记硬背，从而节省了许多宝贵时间。这样一来，我们就能将更多的精力放在理解核心概念和实际应用上。

• 对学生来说，可以更专注于理解框架设计、掌握业务逻辑以及利用AI工具进行调试，提升使用效果，而不仅仅是停留在编写代码的层面。这样，我们就能有更多的时间和精力去探索更高级的思维和解决方案。
• 对于教师来说，利用AI工具，我们可以更好地释放时间，专注于设计更复杂的项目和解决实际问题。AI工具能够帮助学生专注于项目的高级功能和优化，而不必花费过多时间在基础编码上。大家都知道，学习基础代码是个耗时的过程，但借助AI工具，几分钟就能完成相当于一两个小时的工作量。

接下来，我们将从头开始开发一个项目。首先，我们要进行需求分析，我们的目标是设计一个完整的个人笔记网站，这个网站需要支持添加、删除、修改和查询笔记等基本功能，这是项目的核心部分。整体制作流程是从简单到复杂逐步推进。我们会一步步地介绍，并根据实时反馈来调整界面。

预先准备

在我们正式开始之前，需要做一些准备工作。

首先，得设置一个本地环境。为什么要强调本地环境呢？因为最终我们的项目是要发布到网上的。拥有本地环境的好处在于，准备工作完成后，只需将文件上传到虚拟主机或服务器上，项目就能正常运行。而且，由于我们生成的是多文件项目，使用本地环境访问时，路径和其他设置通常更符合标准，相比开发环境效果更佳。

接下来，我们需要安装一个代码编辑器，也就是 Visual Studio Code。安装完成后，从扩展中心下载并启用“通义灵码”等插件。这些准备工作是为了确保后续操作能够顺利进行。首先，在本地环境中创建一个本地站点，然后删除该站点中的一些默认文件，确保通过自定义域名访问时只看到403界面。

然后，我们将进入下一步。把新建的本地站点根目录拖到代码编辑器中。这一步非常重要，因为只有将文件拖到这里，AI程序员才能与之互动，并将代码生成到根目录。这样，你才能通过IP地址或域名正常访问你的网站。

接下来，打开代码编辑器，找到通义灵码插件并点击打开。在插件中选择AI程序员。在智能问答中输入指令通常不会有反应，因为智能问答主要提供文字说明，而不会编写程序。只有选择AI程序员时，才能进行程序编写。

最后，养成一个好习惯：在进行下一步之前，新建一个文本文件，用VS Code以外的编辑器打开，这样在遇到问题时，我们可以方便地查阅当时的对话内容，或者在完成笔记后分享给他人，展示我们如何通过特定指令实现功能。

实操

接下来，我们将开始进行实际操作。

配置情况确认

首先，检查我们准备的工作是否都做好了。包括一个文本文档，记录口令，确保VS Code已将根目录下的文本文件拖到这里。然后，确认通义灵码是否已经正确配置并且登录状态正常。最后，检查临时指定的域名是否能够正常访问。

实操生成页面

现在，我们要进入重点内容。开始操作，输入框中填写你想要的指令或任务。例如，我想要创建一个结合HTML、CSS和JS功能的个人学习笔记网站。这是通过前端开发技术实现的。如果不指定后端技术，生成的内容可能会用Python或Java等语言，这可不是我们想要的效果。因此，一定要明确指示我们将使用何种技术来实现目标。

接下来，我们要给系统下达一些任务，帮助它生成我们需要的文件。比如说，要实现某个特定功能，可能需要好几个文件。第一个文件会记录网站的基本结构，第二个专门负责样式设计，而第三个则是用来处理用户的互动效果。

在这个过程中，我们能够清楚地看到每个文件的具体职责。整体功能涵盖了标题、笔记输入框、添加笔记的按钮以及显示笔记的区域。当我们对样式进行调整和交互效果优化后，就能顺利实现添加和显示笔记的功能，并生成相应的代码。只要点击“接受”，就能在根目录找到生成的代码文件。此时，我们可以在浏览器里直接查看效果，整个效果就这么呈现出来了。

不过，有一个问题值得注意：如果生成的界面是为小屏设备设计的，而用户却不喜欢这样的风格，那该怎么办呢？如果用户不满意，我们就可以重新开始。如果我创建了一个新任务并删除了相关代码，那我们就可以从头来过，让系统生成一个新的界面。

另外，由于大模型的特性，每次生成的效果都是独一无二的。即使看起来差不多，细节上总有些微妙的不同。如果在最初的几次生成中不满意，直接删掉重来就可以了。

功能扩展

现在我们尝试一个更完善的功能，它包括添加和删除的选项。我们可以根据实际需求进一步扩展，并在笔记中记录下这一功能。

在笔记中，我们添加了一些内容。这里有一个“删除”按钮。我们暂时不去点击它，而是先刷新一下页面。刷新后，我们发现有一条数据丢失了。这是新增功能引发的问题吗？我们的核心功能应该包括增、删、改、查，现在新增的功能出了问题。具体来说，就是用户添加的笔记在刷新页面后消失了，这说明笔记没有被正确存储。反馈了这个问题后，通义灵码解释说为了实现该功能，笔记是存储在浏览器的缓存中的。然后通义灵码根据我的需求调整了代码，我只需点击接受即可。

接着我们再次刷新页面，有一个小细节需要注意。功能添加后，它会告诉我们已经处理好了。我们添加笔记后刷新页面，发现笔记消失，其实是浏览器的机制问题。因为修改了JS文件，但浏览器中的.js文件还没有更新。此时，我们需要强制刷新页面，来测试添加功能，这时效果就能正确显示出来。

然后我们继续操作，试试删除按钮的效果。为了测试这个功能，我们再添加两条记录，这样方便查看。我们删除最后一条记录后刷新页面，结果发现删除功能是有效的。

如果界面上缺少删除按钮，我们可以考虑添加一个删除功能。这样，用户就能同时实现增加和删除的操作。接下来，我们还需要考虑增加修改功能。为了实现这个功能，我们需要对基础代码进行调整。具体来说，就是在每条笔记后添加一个编辑按钮。点击编辑时，笔记内容会填充到输入框，同时删除当前笔记。提交表单后，编辑后的笔记将返回到列表中并被保存。

不过，我觉得当前的实现并不符合我们的需求。具体来说，当用户点击“修改”按钮时，系统不仅不进行修改操作，反而直接删除了那条记录，并将笔记内容移动到了其他地方。然后在用户保存记录时，系统又把它加回原来的位置。这显然不是我们想要的效果，我们希望能够直接在原记录上进行编辑，而不是删除或重新添加。此外，删除记录会影响数据排序，这也不是我们想要的结果。对于这种需求，我们认为是不可行的，应该直接拒绝。

为了让系统更好地理解我的需求，我决定为每条笔记添加时间戳。我不希望打乱笔记列表的顺序，因为这样会使笔记变得混乱。因此，我选择为每个笔记加上时间戳，以保持其原有的顺序。接下来，我们先看看需求实现的功能是否符合我们的期望。如果不一致，我们就拒绝；如果一致，就接受。例如，添加笔记时会记录当前时间，并在后续显示时一起呈现出来，我觉得这个功能是可以接受的。

然而，在刷新页面后，我们发现数据又丢失了。这其实并不需要担心，这只是一次关于一维速度和二维速度之间转换的过程。在一维世界里无法友好地展示二维信息，同样，在二维世界中也无法友好地展示一维信息。

轻松搞定笔记功能，编辑与查询随心所欲

一维速度其实就是每条记录只包含一个字段，而二维速度则是可以包含两个字段。遇到这种情况，我们该怎么办呢？简单！我们只需把旧的笔记删掉，再重新添加新的笔记。这时候，笔记和时间的显示就会恢复正常。接着，我们可以在现有内容后增添一个修改功能，首先要把笔记信息记录下来，然后在每条笔记后加个编辑按钮。

每条笔记后都得有一个编辑按钮，点击就能修改。那么具体怎么修改呢？我们可以参考通义灵码的做法。点击编辑后，我希望这一条笔记能够直接变成一个编辑框，而不是让人跳转到别的地方。这样用户就能方便地进行修改并保存，保存时，当前的笔记就会更新。

在设计这个功能的时候，我们应该允许以灵活的方式来实现。我觉得只要能实现功能，具体怎么做并不重要。如果对实现方式不满意，那就要明确我们的需求，告诉系统该怎么做，而不是让它随意处理。

接下来，我们查看修改说明。为了实现新功能，我们添加了一个编辑按钮，并设计了一种状态让笔记内容可以被编辑。一旦更新，功能就能正常运行。我们试了一下，点击“接受”后，再用这个功能，点击编辑时数据顺利加载出来，保存时也没问题。如果数据没有成功加载或者保存，可能是刷新后出现的问题。刷新页面后，时间显示没变，但原来的笔记依然保留。我们向大家说明，点击保存后，原始数据会重新出现。检查了一下代码，发现问题可能出在我们这边。于是我做了个修改并点击接受，咱们再来看看效果。

我们删掉了两条笔记，现在只剩三条。改完一条后，刷新页面还是不行。其实，如果第一次做这种前导员工作，遇到问题是很正常的。比如功能出现问题，或者调整不顺利，由于我们是零基础，可能会导致不得不重头来。不过，咱们不会纠结于如何调整，而是直接开始解决问题。

实际上，使用 AI 有点像开盲盒，总是有些未知，因此需要清理缓存并重新启动。笔记生成后，如果遇到问题，我们会做出相应调整。比如，不用去查看解释，直接输入内容就可以。生成后，先点击“先接受”看看效果，然后再点击“刷新页面”继续。这时候，页面就能成功加载。

我们会尝试使用这个插件，如果发现不太可用，刷新页面后就能看到新的信息。如果缺少发布时间，我们会说明并请求更新。这个插件会帮我们完成这些修改。修改后，我们再次提出问题，但这次用不同的说法。因为之前的表达未被理解，这次我们就换个措辞。点击“接受”并刷新页面后，可以看到“删除”按钮，证明这个功能正常运作。

另外，我们也计划为每条笔记添加一个“修改笔记”的功能。这种功能的成功往往需要一些运气。比如，有次尝试后，系统弹出一个对话框，里面可以展示一个新的笔记。我们可以把这句口令复制下来，下次需要相同效果时直接发送，这样就能准确实现我们想要的效果。就像开盲盒，发现它提供了一个修改选项，点击后，之前的笔记内容会变成编辑框，编辑完成后保存，便能保留当前笔记。我们还可以把这样的口令记录下来，以便下次直接使用。这也是我一直建议大家用记事本记录笔记的原因，方便下次遇到类似问题时能迅速找到之前的笔记，复制并使用相应的口令。

关于排序的问题，我觉得现在的布局有点拥挤，两个按钮显得太突出，甚至有点大。我建议把它们调整得小一些，这样能够更好地并排展示，避免不必要的换行。我们再次告诉系统，希望它能让笔记内容一行显示。

功能完善

接下来，我们来聊聊增删改查功能的完善，特别提到现在系统缺乏“查询”功能，没有提供查询页面和查询笔记的能力。

然后它向我们展示了页面的更新，新增了一个查询输入框和一个查询按钮。点击查询按钮后，就能找到需要的数据。点击刷新先清空输入框，我输入要查询的内容，把其余笔记删掉，再添加几条新笔记供大家查询。

我在输入框内输入查询内容，点击查询，功能立刻生效。接下来，我们可以整体说，这个样式有点乱，让它帮我们整理，把无用的笔记删了。再告诉它，想对整个界面进行美化。

让界面更灵动，轻松调整样式

其实呢，我们可以让界面风格变得多样化，比如用户可以选择更可爱的样式或者更商务的设计。通过这样的设定，系统会根据用户的需求来调整色彩主题。现在我们已经具备了基本的功能，比如增删改查，接下来的任务就是对细节进行美化。比如，屏幕变小的时候，顶部内容会被隐藏，这时候我们可能需要用到一些专业术语。经过分析，我们发现，这种效果就像是把整体内容居中。只要把这个指令发给它，它就会进行相应的调整。

说到这里，其实小屏幕的显示效果和其他屏幕有点不同。我们接受这个设定后，观察它的表现。我之前提到过，看一下它的修改说明的时候，它并没有给出解释。我们正常滚动屏幕。至于查询按钮，我想把它放在查询块的后面，也就是调整它的前后位置。你可以输入“我希望笔记查询块和查询按钮在同一行”。这就涉及到细节的调整，而这些细节调整往往是费时的，并且会有不确定性。

接着，我指出查询笔记块的高度和查询按钮的高度不一致，我希望它们能保持一致，因为这样看起来才协调。我们再看看它能否实现我们的要求，看看它是否修改了某个值使得高度一致。我们试一下，但实际情况是，它的高度与我们预想的有所不同，这可能涉及到一些专业术语，或者是因为我们在前端开发的经验不足。

所以，当我们学习前端开发并掌握课程内容后，就能理解代码的运行逻辑，从而进行深入调整。比如之前提到的高度问题，控制特定属性就能确保区域高度一致。虽然在修改前这两者的高度是相同的，但在视觉上却显得不一样。随着学习的深入，理解原理后，调整这类问题就变得轻松多了。如果现在让AI来帮忙，它可能并不明白我们所提到的具体问题。

类似的情况在其他界面块中也出现了。在美化过程中，例如我的输入块宽度超出了，通过与它的沟通，它会根据我们的建议进行初步的界面调整。

在外部因素方面，有一些专业术语。考虑到我们是零基础用户，系统并没有提供这些专业词汇。如果没有相应的专业词汇，意味着它无法准确修改我们的问题。例如，刷新页面后，问题依然存在。这就是我们在学习过程中的一个重要教训。遇到问题时，应该多花时间理解其背后的原理，而不仅仅是关注如何编写代码。在前端开发中，这涉及到某个知识点，我们需要用专业术语来描述，让工具帮我们生成代码。通过不断的输入，每次需求的解释都会有所不同。如果某次解释达到了预期效果，我们可以把它复制到笔记中，下次遇到类似问题时直接使用这些笔记，能快速实现效果。

然后，我们继续对页面进行细节调整，变更功能。如果添加了笔记但没有发布，系统会将该笔记添加在下方，这样我觉得不太合适。我希望最近发布的笔记能够显示在前面。那该怎么处理呢？我们可以调整笔记的排序方式，比如按照发布时间排序，这样新发布的笔记就会显示在最上面，实现了二次调整。

细节优化在某种程度上可以这样理解，如果我们的基础不够扎实或者没有接触过前端开发，那么优化的过程就像是在开盲盒——我们不知道具体的专业术语如何去实现，最终效果可能就不太理想。因此，我们可以通过查阅他人的笔记，参考他们实现某一效果的方法，来获取灵感。在这个过程中，我们的排序可能会发生微妙的变化。

我们再来试试。即便我们尝试把笔记移到前面，它还是显示在最后。刷新后，笔记的位置没有改变，这样的体验不太友好。我希望在点击“添加笔记”按钮时，新数据能直接显示在笔记列表的最上方。

点击接受后，我们刷新页面，然后为大家的笔记添加一些内容。此时，我们还能进行进一步的调整。比如，笔记多了之后没有翻页功能，这实在是太不方便了。因此，我们决定添加翻页功能。可以输入“这个笔记没有翻页功能，每页显示5篇笔记”。

接下来，由于它记录的内容时间较长，我们发现，随着AI智能笔记功能的升级，它以字节为单位进行输入和输出。文件内容越来越多，生成的数据量加大，导致返回结果的时间延迟。为了让网站看起来更美观和完整，我们考虑为其添加底部或顶部的设定。

接下来给页面加上头部和底部。当出现错误时，我们需要了解生成的错误内容是什么，然后提出问题，请求对方进行修改。修改好后，我们点击接受，刷新页面，这时头部和尾部的修改就会显示出来。

总结

最后，我们通过案例分享经验，告诉大家在使用过程中得到的一些启示。我们先来看看这些界面。你会发现，每个界面根据个人设置生成的效果图都是不一样的。即使整体样式相似，但细节部分依然能够显示出差异。

你知道吗？每个用户所生成的界面都是独特的，都是依靠AI技术打造的。虽然大家都用相同的基本口令，但颜色和细节上往往会有些许差别。这就意味着，页面的美观程度有时候还得看运气。不过，随着技术的逐渐熟悉和使用AI问答的次数增加，我们的经验也会越来越丰富，最终生成的页面效果自然也会更好看。

比如说，在我添加了笔记之后，如果想要修改内容，只需点击编辑按钮，系统就会提示我输入信息，保存之后就能完成相应的操作。不过，得提醒你，AI生成的内容有时候可能会出错哦。

现在我们看到的界面，虽然都有修改功能，但每个人实现这些功能的方式却各有不同。因此，记笔记时，AI会根据我们输入的指令来判断该如何书写，进而实现我们想要的功能。AI生成的第一段文本，正是它为我们设计的一个关键功能。

其实，鼓励大家做笔记的原因在于，最初的笔记可能会比较混乱。随着我们对通义灵码的理解加深，以及制作效果的提升，我们可以对笔记进行更好的优化。经过优化后，能够更精确地实现所需功能，而不是单靠运气来修改。

有些同学在教学内容中添加效果时，可能会遇到问题。一旦出现问题，AI系统就可能无法停止进行修正。通过观察这些小插件，我们发现它们往往缺少返回功能。没有这个功能，我们就需要先给大家讲解一下。例如，如果提前告诉AI在界面中加入一个可以返回列表的文件，或者一个能让我们回到首页的导航栏，这样页面就会显得更连贯。

如果发现删除按钮的宽度过大，我们可以通过AI来进行调整。比如说，我想把笔记列表中的删除按钮宽度改成600像素，AI就会把它调整到合适的状态。此外，如果A标签有下划线，而我们觉得这效果不太好，我们只需要让AI去掉下划线。同样地，如果A标签的颜色不好看，只要告诉AI去除这个颜色就行。通过这种方式，AI能理解我们的意图并做出相应调整。

在我们添加笔记时，如果出现了错误，一定要及时要求修正。如果这一部分没有修复，之后进行增删改查操作时，可能会造成一些浪费。因此，在用AI进行问答时，遇到问题时一定要及时处理。等问题解决后再继续，或者对需要修复的部分进行修正。

在演示中，我们能看到每个用户生成的代码和所遇到的问题都是独特的。现在的演示主要面向零基础的用户，他们之前可能没有接触过编程。从界面来看，它比其他编辑器更美观。通过多次提问，整理出解决方案，并记录下来。如果有人提出一个问题，我们先把这个问题记录下来。当有人给出解决方案时，我们就复制并保存。这样，如果将来遇到相同的问题，我们就能直接应用保存的解决方案，避免重复劳动。

快来点击下面的链接，立即下载通义灵码，开始你的体验吧！

https://lingma.aliyun.com/lingma/download