任务二项目八揭秘生成式AI原理与编程应用应用MarsCode制作登录页面

在当今数字化快速发展的时代，编程技能变得愈发重要，而AIGC（人工智能生成内容）工具的出现为编程工作带来了诸多便利和新的思路。假设公司正在开发一款小型的在线读书分享社区网站，目前需要构建用户登录前端页面部分，要求页面简洁美观且交互功能完善。鉴于开发时间较为紧张，团队决定借助AIGC工具来辅助完成这一编程任务，提高开发效率并保证代码质量，现在同学们就需要运用所学知识以及MarsCode来完成这个登录页面的制作工作。【任务情境】

【任务分析】完成此次任务，首先利用MarsCode生成代码基础框架，然后开发人员结合对页面样式的设计设想，利用MarsCode对各元素的样式进行进一步细化和优化，最后利用智能修复功能，检查代码中是否存在语法错误、逻辑不清晰等问题，并及时进行修复和完善。

【任务目标】能简述前端技术基础能简述MarsCode编程助手功能能运用HTML与MarsCode搭建页面结构能运用CSS与MarsCode优化页面样式能运用JavaScript与MarsCode实现交互功能保持对MarsCode新功能以及前端编程领域新知识、新技术的学习热情增强对数字化技术的认知和运用能力，紧跟行业发展趋势能力目标素质目标知识目标020301

1.在VisualStudioCode编辑器中安装MarsCode编程助手【任务实施】打开Visual?Studio?Code,点击左侧导航栏中的拓展按钮,进入插件市场。1搜索“豆包”、“MarsCode”关键词,找到插件并安装2重启VisualStudioCode。?3使用快捷键（Windows:Ctrl+U;macOS:Command+U）打开豆包MarsCode编程助手侧边对话框?4

2.生成登录页面基础代码结构代码【任务实施】②点击MarsCode生成的代码上的“Apply”按钮,将代码添加到右侧编辑区,根据需求选择“采纳”或“拒绝”代码。③依次保存文件后,在浏览器中运行查看初步效果,检查结构是否符合预期在MarsCode编程助手侧边对话框的输入框中输入提示词,例如:“请帮我生成一个样式美观的登录页面”,点击发送按钮,等待MarsCode生成相应代码。①

保存文件后,在浏览器中查看效果3.进一步优化页面结构与样式【任务实施】根据需求可以选择在MarsCode编程助手侧边对话框的输入框中继续输入提示词,例如:“请帮我修改登录页面的背景颜色为“浅蓝色”,并且添加忘记密码、记住密码的模块,让页面更协调”，等待MarsCode生成相应代码。点击“Apply”,此时MarsCode会比较原有文件,在原始文件中添加或修改相应的代码,如果接受就点击“采纳”即可。

3.进一步优化页面结构与样式【任务实施】在form中添加了一个新的div，用于包含“记住密码”的复选框和“忘记密码”的链接。使用label和input创建了一个复选框，用于“记住密码”功能。使用a标签创建了一个链接，用于“忘记密码”功能。在.remember-forgot类中，使用display:flex和justify-content:space-between来使“记住密码”的复选框和“忘记密码”的链接在水平方向上均匀分布。为“忘记密码”的链接添加了一些基本的样式，去掉下划线和设置悬停时的下划线。

4.完成添加用户验证【任务实施】在MarsCode编程助手侧边对话框的输入框中继续输入提示词，例如“请为登录页面添加用户验证，生成新的js文件”。此时，MarsCode编程助手创建了一个新的JavaScript文件，用于处理表单提交事件，并验证用户输入的用户名和密码是否正确，同时在登录页面login.html中引入该js文件01理解js文件内容。在表单提交事件监听器中，按照预设逻辑验证用户名和密码是否与假设的值匹配。如果匹配，弹出“登录成功”的提示框，如果不匹配，弹出“用户名或密码错误，请重试”的提示框。02将文件应用保存后，在浏览器中输入不同用户名和密码组合，测试交互功能，查看验证提示。03

4.完成添加用户验证【任务实施】

5.细节调整【任务实施】MarsCode编程助手除了代码生成、智能问答修复以外，还具备代码补全、注释等功能。若要给用户名和密码的文本框添加鼠标悬浮样式，可直接通过代码补全功能来完善任务。具体操作如下：（1）打开style.css样式文件，直接写上注释“文本框鼠标悬停样式”，按回车键“Enter”，MarsCode会根据注释进行代码补全，如果想要采纳补全的代码，就按“Tab”键即可上述代码定义了一个CSS样式，用于在鼠标悬停在文本输入框（上时改变其外观。具体来说，当鼠标悬停在这些输入框上时，输入框的边框颜色将变为蓝色，并且在输入框周围添加一个半透明