版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领
文档简介
《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
admin
r阳光，开应.平凡的一天.
—40)S外埠2022・02・1709:1525
所
c今天能会主取诩鼬？
ffEK46)~0)时W202232710:12:乂
c这次声停话场很闻鼻义
:'45)WiU2022-04-0213:26:54
环北
m
评论留言主界面
在留言输入框中输入评论内容，然后单击【提交】按钮。
【任务实施】
1.创建程序的文件夹结构
登录注册评论程序的文件夹结构如图所示，在文件夹“caseOL登录注册评论”下分别创建css、img、js、lib
文件夹，然后将本程序所需的CSS文件index.cssxjquery-1.11.3.min.js文件、vue.min.js文件和图片文件复
制到对应的文件夹中。
yGicaseOl登录注册评论
▼Cicss
{}ndex.css
▼SE皿
cuse但
ixser01.jpg
user02.jpg
BusefO3.jpg
Eusef04,jpg
cusefO5.jpg
user06,jpg
*index.j$
v修此
ZfjQuery-L11.3.nm)s
2vue.min.js
</>index.htni
登录注册评论程序的文件夹结构
2.编写index.html文件中的HTML代码
在文件夹“caseOl-登录注册评论”中先创建index.html文件，然后编写HTML代码。
(1)编写index.html文件基本结构的HTML代码
index.html文件基本结构的HTML代码如下：
<!DOCTYPEhtml>
<htmllang="en">
<head>
<metacharset="utf-8">
<title>SM</title>
<linkrel="stylesheet"href="css/index.css"/>
<scripttype-'lext/javascriprsrc="lib/vue.min.js"></script>
<scripttype=,'text/iavascript"src="lib/jquery-1.11.3.min.js"></script>
</head>
<body>
<divid="comment">
<!--登录代码
<!••注册代码一》
V!—评论代码一〉
</div>
</body>
</html>
<scriptsrc="js/index.js"></script>
这里在v/html,下一行引入js文件夹中的index.js文件u
(2)编写实现登录功能的HTML代码
index.html文件中实现登录功能的HTML代码如下：
<divclass="loginbox"v-show="loginStatus"@click="loginboxClick()"
style="display:none;">
<divclass="box"@click="stopProp()H>
<h3>用户登录</h3>
<formname="login"id="logn">
<inputtype="text"placeholder^请输入用户名"class="userrame">
(5)编写JavaScript代码实现登录功能
略
(6)编写JavaScript代码实现注册功能
略
(7)编写JavaScript代码实现评论功能
index.js文件中实现评论功能的JavaScript代码如下：
subCommont:function(){
if(Ithis.userbarStatus){
alert("登录之后才可以评论！");
this.loginStatus=true;
}else{
if($(".wordsboxtextarea").val()==""){
alertf'请先填写评论内容！");
}else{
varobj={};〃评论信息对象的容器
obj.username=this.currentUser.username;
obj.userimg=this.currentUser.userimg;
obj.words=$(".wordsboxtextarea").val();
obj.like=0;
obj.nolike=0;
obj.time=newDate().format(Myyyy-MM-ddhh:mm:ss"«;
〃将评论信息压入评论信息列表
ments.pcsh(obj);
alert("评论成功!");
$(".wordsboxtextarea").val("");
)
)
)
4.浏览网页测试其主要功能
浏览网页index.html时，初始页面如图所示。经测试实现了要求的功能。
道;欠蛾取石的
e»：40)M2022-02-1709:152$
今天班今主第
•»»•»«)«»0)2022-3-2710:12：»4
G这次£图：若汕»口京义
:OJK45)«0(0)2022-04-0213:26:54
浏览网页index.html时的初始页面
【任务10-2】编写程序实现简单的购物车功能
【任务描述】
创建Vue项目case02-shoppingCart,实现简单的购物车功能，页面布局外观如图所示，具体要求如下。
商品信息商品单价商碰■金81小计U监
1
If
页面布局外观
①页面上方为文本内容'购物车”和标题名称，中部为商品列表，下方左侧为【全选】和【取消全选】按钮，
右侧为【金额合计】与【结账】按钮。
②页面中以列表形式展示商品数据，从左至右依次为单选按钮、商品图片、商品名称(商品名称下方为
文本内容“赠送：”和赠送的物品名称x商品单价、商品数量、金额小计和【删除】按钮。
③单击商品图片左侧的单选及钮则选中该商品，右下角的金额合计同步发生变化。
④单击左下角的【全选】按钮，左侧的单选按钮会变成选中状态，选中全部商品；单击【取消全选】按
钮，则会取消所有商品的选中状态。
⑤单击“商品数量”列右侧的【+】按钮，会增加数量。每单击1次，增加1o单击“商品数量”列左侧的【-】
按钮，会减少数量，每单击1次，减少1o右下角的金额合计都会同步变化。
【任务实施】
1.创建包含默认设置值的package.json文件
先创建项目根文件夹case02-shoppingCart,然后将项目根文件夹设置为当前文件夹，在命令行中执行以
下命令创建包含默认设置值的package.json文件：
npminit-y
package.json文件的初始代码如下：
(
"name":"case02-shoppingCart",
"version":"1.0.0",
"description":
"main":,'index.js",
"scripts":{
"test":"echoV'Error:notestspecifiedV&&exit1"
}，
"keywords":[].
"author":
"license":"ISC"
)
2.安装项目依赖项
在命令行中执行以下命令安装项目依赖项：
npminstallvue
npminstallaxios
npminstallhttp-server
项目依赖项安装完成后，pac<age.json文件中会添加以下代码：
"dependencies":{
"axios":"A0.24.0",
"http-server":"A14.0.0",
"vue":,，A2.6.14"
}
在"scripts"节点中添加以下代码：
"start'':"http-server-alocalhost-p8080"
3.创建文件夹与复制相关资源
在项目根文件夹case02-shoppingCart下分别创建子文件夹css.datajmg然后将CSS样式文件base.css,
checkout.css.modal.css复制到又件夹css中，将商品图片复制到文件夹img中。
4.创建cartData.json文件与编写代码
略
5.创建index.js文件与编写代码
略
6.创建index.html文件与编写代码
在项目根文件夹中创建index.html文件，然后编写HTML代码。
(1)编写index.html文件的主体结构代码
略
(2)编写index.html文件中部的商品列表代码
略
(3)编写index.html文件底部的HTML代码
略
7.运行项目case02-shoppingCart与测试其功能
在命令行中执行以下命令启动项目case02-shoppingCart:
npmrunstart
项目启动成功，会出现以下提示信息：
Availableon:
http://localhost:8080
HitCTRL-Ctostoptheserver
打开浏览器,在地址栏中输入“http:〃localhost:8080”，按[Enter]键,显示的网页内容如图所示。
购存车
商品信息商品单价商碰■金SW'计
页面布局外观
【任务10-3】综合应用多项技术实现前后端分离的移动版网上商城项目
【任务描述】
创建Vue项目case03-onlineStore,综合应用“Vuejs+Axios+Vuex+NodeJs+MySQL”多项技术实现前后端
分离的移动版网上商城功能，具体要求如下。
①移动版【网上商城】首页显示商品列表，其下方显示【商尻列表】和【购物车】按钮，如图所示。
移动版【网上商城】首页的商品列表
②在商品列表的各个商品区域单击，进入【商品详情】页面，如图10-7所示。在【商品详情】页面单击
【加入购物车】按钮，可以选购当前正在浏览的商品。
移动版网上商城的【商品详情】页面
加入购物车功能调用mutations中的addToCar(state,product)方法实现。
③在【网上商城】首页或者【商品详情】页面单击【购物车】按钿,即可讲入【购物车】页面，如图所示。
在上图所示的【购物车】页面中可以单击【+】按钮增加购物数量，单击【-】按钮减少购物数量，购物数
量改变时，下方的已勾选商品件数和总价会同步发生变化。单击【删除】按钮还可以删除选购的商品。
在【购物车】页面中，更新商品的购买数量调用mutations中的updateprodslnfo(state,info)方法实现，更
新商品的选中状态调用mutations中的updateProdsSelected(state,info)方法实现，删除商品调用mutations
中的removeFormCar(state,id)方法实现。
getters中的getProdsSelectedCount(state)方法用于得到购物车中已选择的商品总量，其在底部购物车图
标右上方的小红圈中显示。
getters中的getProdsCount(state)方法用于得到购物车中各个商品的数量，在【购物车】页面numbox中
显示商品当前购买数量。
getters中的getProdsSelected(state)方法用于得到购物车中各个商品的选中状态，在【购物车】页面中设
置商品的选中状态。
getters中的getGoodsCountAndAmount(state)方法用于得到购物车中总的选择数量和总价，其在结算框
中显不O
【任务实施】
1.创建Vue项目case03-onlineStore
在命令行中执行以下命令创建基于webpack模板的Vue项目：
vueinitwebpackcase03-onlineStore
在对各个选项进行选择时，可以直接按【Enter】键，取其默认配置值创建一个基于webpack模板的Vue
项目。
2.完善项目的文件夹结构
在本项目文件夹case03-onlineStore中创建子文件夹onlineStoreclient和onlineStore-server。
略
3.创建数据库与数据表
在NavicatforMySQL的工作界面中创建一个数据库test。
在项目根文件夹中创建SQL文件malldata.sql,该文件用于创建数据表。
略
在命令行中执行以下命令，运行SQL文件，在数据库test中创建数据表prodsjist,同时插入5条商品记
录：
D:\>mysql-uroot-p123456-Dtest<D:\malldata.sql
创建的prods」ist数据表对应的结构信息如表所示，其中id字段为主键。
创建的prodsjst数据表对应的结构信息
字段名称字段类型字段长度
idtinyint0
titlevarchar255
addjimedatetime0
abstractvarchar255
clicktinyint0
img_urivarchar255
sell_pricedouble0
market_pricedouble0
stock_quantitytinyint0
goods」。varchar255
4.准备项目环境
在文件夹case03-onlineStore下执行以下命令，分别安装相关依赖项：
npminstallexpress
npminstallaxios
npminstallfastclick
npminstallmint-ui
npminstallvuex
在文件夹onlineStore-server下执行以下命令，分别安装相关依赖项：
npminstallmysql
5.创建文件与编写代码实现后端功能
(1)创建app.js文件与编写代码
在文件夹onlineStore-server中创建文件app.js,并给入以下代码：
varexpress=require('express')
varapp=express()
〃静态资源
app.usef/public/'.express.staticC./public'))
app.useC/node-modules/'.express.staticC./node-modules'))
varrouterCar=require('./routes/routerCar')〃弓I入路由模块
app.use(7shopCar*,routerCar)
app.listen(3000,function(){
console.log('serverisrunning')
})
(2)创建routerCar.js文件与编写代码
在文件夹onlineStore-serverVoutes中创建文件routerCar.js,并输入以下代码：
varexpress=require('express')
varrouter=express.Router()〃创建一个路由
varProducts=require('../models/Products')
router.get(7prodlist',function(reqres){
Products.getList(req.query.id,function(qerr,vals,fields){
if(qerr){
res.status(500).send('ERR')
}else{
res.json(vals)
}
))
))
module.exports=router〃导出router
(3)创建Products.js文件与编写代码
略
(4)创建mysqIPool.js文件与编写代码
在文件夹onlineStore-server/common中创建文件mysqIPool.js,并在该文件中输入以下代码：
varmysql=require('mysqr)
var$dbConfig=require('../config/dbConfig')
II使用连接池，避免打开太多的线程，提升性能
varpool-mysql.crcatcPool($dbConfig);
〃导出查询相关
varquery=function(sql,callback){
pool.getConnection(function(err,conn){
if(err){
callback(err,null,null);
}else{
conn.query(sql,function(qerr,vals,fields){
〃释放连接
conn.release();
〃事件驱动回调函数
callback(qerr,vals,fields);
})；
)
})；
}；
module.exports=query
(5)创建dbConfig.js文件与编写代码
在文件夹onlineStore-server/config中创建文件dbConfig.js,并在该文件中输入以下代码：
vardbConfig={
host:"",〃数据瘴的地址
user:"root",
password:"123456",
database:"test",
dateStrings:true
module.exports=dbConfig;
6.创建文件与编写代码实现前端功能
(1)完善index.html文件的代码
对文件夹onlineStore-client下的文件index.html中的代码进行完善：
<!DOCTYPEhtml>
<html>
<head>
<metacharset="utf-8">
<metaname=,'viewport"content="width=device-width,initial-scale=1.0">
<linkrel="shortcuticon"href="./static/favicon.ico"type="image/x-icon">
<title>网上商城
</head>
<body>
<divid="app"></div>
<!-builtfileswillbeautoinjected->
</body>
(2)完善main.js文件的代码
略
(3)完善App.vue文件的代宿
略
(4)完善index.js文件的代码
略
(5)创建Products.vue文件与编写代码
略
(6)创建Productlnfo.vue文件与编写代码
略
(7)创建ShopCar.vue文件与编写代码
略
(8)创建NumBox.vue文件与编写代码
略
(9)创建ShopCarNumBox.vue文件与编写代码
略
7.启动项目与浏览运行结果
在当前文件夹case03-onlineStore/onlineStore-server下执行以下命令，启动项目的后端程序：
nodeapp.js
命令行中显示“serverisrunning”的提示信息。
在当前文件夹case03-onlineStore/onlineStore-client下执行以下命令，启动项目的前端程序：
npmrundev
命令行中输出以下提示信息，则表示项目的前端程序启动成功：
DONECompiledsuccessfullyin3312ms
IYourapplicationisrunninghere:http://localhost:8080
项目case03-onlineStore前端程序启动成功后，打开浏览器，在地址栏中输入“http:〃localhost:
8080/”，按【Enter】键，即可看到【网上商城】首页，如图所示。
移动版【网上商城】首页的商品列表
【任务10-4】综合应用多项技术实现前后端分离的网上商城项目
【任务描述】
创建Vue项目Case04-EShop,实现网上商城功能，具体功能需求要求如下。
①本项目前后端分离，前端基于“Vue.js+Vue-router+Axios+Vuex+Element-ui+Node.js+MySQL"等技
术，参考小米商城实现。后端基于"Node.js（Koa框架）+MySQL”技术实现。
②前端包含11个页面：【首页】、【登录】、【注册】、【全部商品】、【商品详情】、【关于我们】、【我的购物
车】、【订单结算】、【我的收藏】、【我的订单】及【错误处理】页面。
前端实现了登录、注册、商品的展示、商品分类查询、通过关键字搜索商品、商品详细信息展示、用户购
物车、订单结算、用户订单、用户收藏列表及错误处理功能。
③后端采取MVC模式，根据前端需要的数据分模块设计相应的接口、控制层、数据持久层。
各个功能模块的实现方法如下。
①【登录】页面。
该页面使用了element-ui的Dialog实现弹出蒙版对话框的效果，【登录】按钮设置在App.vue根组件中，
通过Vuex中的showLogin状态控制登录框是否显示。这样设计既可以通过单击页面中的按钮登录，也可以用
户访问需要登录验证的页面或后端返回需要验证登录的提示后自动弹出登录框，减少了页面的跳转，简化了用
户操作。
用户输入的数据有时是不可靠的，所以本项目前后端都对登录信息进行了校验，前端基于element-ui的表
单校验方式，自定义了校验规则进行校验。
网卜商城的【登录】页面加图所示。
登录x
admin
网上商城的【登录】页面
②【注册】页面。
该页面同样使用了element-ui的Dialog实现弹出蒙版对话框的效果，【注册】按钮设置在App.vue根
组件中，通过父子组件传值控制注册框是否显示。用户输入的数据有时是不可靠的，所以本项目前后端同
样都对注册信息进行了校验，前端基于element-ui的表单校验方式，自定义了校验规则进行校验。
网上商城的【注册】页面如图所示。
③【首页】页面。
【首页】主要是对商品的展示，有轮播图展示推尊的商品，分类别对热门商品进行展示u网上商喊的【首
页】页面如图所示。
网上商城的【首页】页面
④【全部商品】页面。
【全部商品】页面集成了全部商品展示、商品分类查询，以及根据关键字搜索商品结果展示。网上商城的
【全部商品】页面如图所示。
网上商城的【全部商品】页面
⑤【商品详情】页面。
【商品详情】页面主要是对某个商品的详细信息进行展示，用户可以在这里把喜欢的商品加入购物车或收
藏列表。网上商城的【商品详情】页面如图所示。
Shoppe
小*CC9Pro
网上商城的【商品详情】页面
⑥【我的购物车】页面。
购物车采用Vuex实现，页面效果参考了小米商城的购物车。网上商城的【我的购物车】页面如图所
•从数据库同步购物车数据，根据购物车数据动态生成该页面，添加商品到购物车。
•在购物车中可以删除选中的商品，修改购物车中商品的数量；可以勾选购物车中的商品，也可以全选
购物车中的商品。
•在购物车中可以计算已加购商品的M数疝,计算购物车中勾诜的商品的就数量，计算购物车中勾诜的
商品的总价格，生成购物车中勾选的商品的详细信息。
⑦【订单结算】页面。
用户在购物车中选择了准备购买的商品后，单击【去结算】按钮，会来到该页面。用户在这里选择收货地
址，确认订单的相关信息，然后确认购买。网上商城的【订单结算】页面如图所示。
网上商城的【订单结算】页面
@【我的收藏】页面。
用户在商品的详情页可以通过单击【喜欢】按钮，把喜欢的商品加入收藏列表。网上商城的【我的收藏】
页面如图所示。
网上商城的【我的收藏】页面
⑨【我的订单】页面。
该页面用于对用户所有的订单进行展示，网上商城的【我的订单】页面如图所示。
网上商城的【我的订单】页面
【任务实施】
1.创建Vue项目Case04-EShop
在命令行中执行以下命令创建Vue项目：
vuecreateCase04-EShop
按【Enter】键，开始执行上述命令后会出现一系列的选择项，可以根据自己的需要进行选择。
2.完善项目Case04-EShop的文件夹结构
略
3.创建数据库与数据表
在文件夹EShop-server中创建SQL文件storeDB.sql,该文件用于创建数据库storedb,打开数据库
storedb,创建users、carousekcategory,product、product_pic:ure.shoppingCart、ordersxcollect等数
据表的表结构。
在文件夹EShop-server中创建SQL文件analogDataSql.sql,该文件用于向数据表category,product、
product_picture添加初始数据。
4.准备项目环境
基于vue-cli脚手架创建项目，需要安装Node.js和全局安装vue-cli。
在文件夹Case04-EShop/EShop-client下执行以下命令安装相关依赖项：
npminstallaxios
npminstallcore-js
npminstallelement-ui
npminstallvue-markdown
npminstallvuex
在
温馨提示
- 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
- 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
- 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
- 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
- 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
- 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
- 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。
最新文档
- 行政主管面试常见问题及高分答案
- 定扭矩气板机项目可行性分析报告范文
- 环境医学视角治未病个体化方案调整
- 京东商城运营团队面试题库
- 产品经理业务一部经理考试题集含答案
- 上汽集团投资者关系经理职业资格认证考试大纲含答案
- 深度解析(2026)《GBT 18955-2003木工刀具安全 铣刀、圆锯片》(2026年)深度解析
- 特殊医疗场景应急物资储备方案
- 深度解析(2026)GBT 18717.2-2002用于机械安全的人类工效学设计 第2部分人体局部进入机械的开口尺寸确定原则
- 软件工程师高级职位面试题
- 带你听懂中国传统音乐知到智慧树期末考试答案题库2025年广州大学
- 江苏省2025年中职职教高考文化统考数学试题答案
- 不锈钢清洁操作流程培训
- 浙江省消防技术规范难点问题 操作技术指南（2020 版）
- 精装修监理实施细则
- 急危重症护理培训心得
- 大学体育-瑜伽学习通超星期末考试答案章节答案2024年
- 超星尔雅学习通《文献信息检索与利用（成都航空职业技术学院）》2024章节测试答案
- 【未知机构】华为公司战略规划和落地方法之五看三定工具解析
- 企业微信指导手册管理员版
- (完整word版)劳动合同书(电子版)正规范本(通用版)
评论
0/150
提交评论