Vuejs基础与应用开发实战（微课版） 单元10教案.pdfVIP

《Vue.js基础与应用开发实战（微课版）》配

套教学教案

单元10

课时内Vue综合应用实战授课时间课时12

•编写程序实现简单的登录注册评论功能

•编写程序实现简单的购物车功能

教学目标

•综合应用多项技术实现前后分离的移动版网上商城项目

•综合应用多项技术实现前后分离的网上商城项目

教学重点Vue多项技术综合应用

教学难点综合应用多项技术实现前后分离的网上商城项目

1.教学思路：由易至难依次完成4个综合应用任务。

教学设计

2.教学手段：多媒体展示+软件操作。

教学内

【任务编与程序实现简单的登录注册评论功能

【任务描述】

在文件夹“case01-登录注册评论”中创建网页index.html,实现简单的登录注册评论功能，具体要求如下。

①浏览网页index.html时的初始页面，如图所示。

二E40)rfl2022-02-1709:1S2S

加

C今现会主好

D9K46)皿0)P020223271612:34

G6充5星£；动智再惠义

—«»4$询0)十卑202・0401326:54

MB

a^

浏览网页index.html时的初始页面

②输入留言参加评论之前必须先进行登录操作，如果没有注册，还需要先进行注册。如果曾经注册过，

则直接单击【登录】按钮，弹出【用户登录】对话框，分别输入正确的用户名与密码，如图所示。

【用户登录】对话框

然后单击【立即登录】按钮，弹出【成功登录】的提示对话框，在该对话框中单击【确定】按钮，进入下

图所示的评论留言主界面。

自

X

遢力要0

adin

r阳光，开应.平凡的一天.

—40)S外埠2022・02・1709:1525

所

c今天能会主取诩鼬？