《人工智能应用导论（DeepSeek版）》电子教案 项目7 DeepSeek零代码构建应用程序教学设计.docVIP

博学谷——让IT教学更简单，让IT学习更有效

PAGE12

PAGE19

《人工智能应用导论（DeepSeek版）》

教学设计

课程名称：

授课年级：

授课学期：

教师姓名：

年月

课题名称

项目7DeepSeek零代码构建应用程序

任务7-1零代码生成网站

计划课时

4学时

教学引入

王红在项目6中构建教学助手智能体后，为方便师生在各种平台上使用，她决定使用Cursor自动化代码编程工具生成课程知识库网站，在网页上嵌入对话框，访问教学助手智能体，同时生成微信小程序页面，方便师生在微信小程序上浏览课程知识。随着大语言模型的不断深入使用，王红发现大语言模型借助MCP协议可以实现更多复杂的功能。

教学目标

【知识目标】

（1）了解网站的主要页面结构。

（2）了解网页常见功能模块结构。

（3）了解Html、CSS、Javascript的功能。

（4）掌握Cursor自动化代码生成工具的功能和应用场景。

【技能目标】

（1）能独立使用Cursor工具创建和设计一个完整的课程网站。

（2）能够在网页中嵌入对话框访问教学助手智能体。

【素养目标】

（1）通过学习零代码生成网站，培养学生自我学习和独立解决问题的能力。

（2）通过学习课程网站设计，培养学生考虑用户需求，提升创新能力和设计思维。

教学重点

使用Cursor工具创建和设计一个完整的课程网站。

教学难点

在网页中嵌入对话框访问教学助手智能体。

教学方式

任务驱动，案例教学

教

学

过

程

任务7-1零代码生成网站

※通过直接引入的方式导入新课

在构建了教学助手智能体后，王红决定构建一个知识库网站，并在网页上嵌入智能对话框，访问智能体，由于没有编程基础，所以采用Cursor自动化代码生成工具和DeepSeek大语言模型，自动化生成课程网站。

※新课讲解

一、教师通过PPT的方式讲解必备知识。

1网站主要页面结构

网站是一个不同页面的集合。可以把它想象成一本书，每一页展示不同的内容，常见的网站一般有几个主要部分。

（1）主页

（2）列表页

（3）内容页

2.网页常见功能模块结构

网站是由每个具体的网页组成的，每个网页上通常包含以下多个模块内容。

（1）头部（Header）

（2）主内容区（MainContent）

（3）底部（Footer）

（4）交互模块

（5)多媒体内容

3.Html、CSS、JavaScript的功能

HTML、CSS和JavaScript是构建网页的三大基础技术。它们各自的作用就像是建筑房子的不同部分，HTML是房子的框架，CSS是房子的外观设计，JavaScript是房子具备的功能，具体功能如下。

（1）HTML（超文本标记语言）

（2）CSS（层叠样式表）

（3）JavaScript

4.Cursor自动化代码生成工具的功能和应用场景

（1）Cursor的功能

（2）Cursor的应用场景

①非技术人员的低代码开发

②快速构建网站和应用

③自动化代码生成与集成

④加速原型设计和开发

⑤代码重构与优化

二、配置Cursor与DeepSeek对接

1.注册Cursor账号

打开浏览器（建议GoogleChrome)，登录Cursor官网平台，地址为/cn，返回结果如图。

图登录Cursor官网

由于还没有Cursor的账号，所以首先单击图下方的“Signup”链接，进入Cursor账号注册页面。输入firstname（名字）和Lastname(姓），输入自己的Email邮箱地址（作为后续登录的用户名），单击“Continue”，弹出确实是否是真人对话框。勾选“确定您是真人”前面的复选框，进入到输入密码对话框，输入Password密码后，单击“Continue”继续按钮。Cursor平台会向使用的Email账号发送确认邮件，进入到自己的邮件，复制确认邮件的验证码到图7-7的复选框中，完成后，成功注册Cursor账户。

2.下载安装Cursor

（1）下载Cursor

使用浏览器访问/cn/pricing地址，返回页面如图

图Cursor使用定价

显示了Cursor的使用定价，包括Hobby两周试用版本和Pro、Business版，单击Hobby免费版下方的下载按钮，将Cursor软件下载到本地。

（2）安装Cursor

鼠标双击下载到本地的Cursor图标，进入到