本教材为浙江省高职院校“十四五”重点立项建设教材，获重量“双高计划”建设项目和重量职业教育教师教学创新团队建设项目重点支持。本教材以移动应用购物作为开发原型，全面介绍电子商务前端开发的相关技术，涵盖列表、搜索、详情、购物车、个人中心等页面的设计和制作过程，每个页面都提供任务要求、实践指导和自我测试。本教材共分为八个单元，涵盖绘制流程简图、绘制页面结构草图、制作页面效果图、页面制作规划、搭建页面框架、页面数据定义、定制模板和组件、填充模板和组件。本教材建设有在线开放课程，配套推出丰富的数字化学习资源，并精选其中优质资源做成二维码在书中进行了关联标注。本教材旨在帮助教师提高课程质量和实用性，帮助学生掌握实际开发技能，为今后成为一名优秀的电子商务前端开发人员打下坚实基础。
本教材既适用于应用型本科、高职高专电子商务类专业课程教学，也适用于计算机类相关专业课程教学。

单元1绘制流程简图1
单元2绘制页面结构草图6
任务2.1列表页面结构草图7
任务2.2分类页面结构草图8
任务2.3搜索录入页面结构草图9
任务2.4搜索结果页面结构草图11
任务2.5我的收藏页面结构草图12
任务2.6名片页面结构草图14
任务2.7详情页面结构草图15
任务2.8购物车自提页面结构草图17
任务2.9购物车快递页面结构草图18
任务2.10收货地址录入页面结构草图20
任务2.11我的自提页面结构草图21
任务2.12自提码页面结构草图22
任务2.13我的快递页面结构草图24
任务2.14物流查询页面结构草图25
任务2.15我的已收订单页面结构草图27
任务2.16评价录入页面结构草图28
单元3制作页面效果图36
任务3.1列表页面效果图37
任务3.2分类页面效果图39
任务3.3搜索录入页面效果图41
任务3.4搜索结果页面效果图43
任务3.5我的收藏页面效果图44
任务3.6名片页面效果图46
任务3.7详情页面效果图47
任务3.8购物车自提页面效果图50
任务3.9购物车快递页面效果图52
任务3.10收货地址录入页面效果图54
任务3.11我的自提页面效果图55
任务3.12自提码页面效果图57
任务3.13我的快递页面效果图59
任务3.14物流查询页面效果图61
任务3.15我的已收订单页面效果图62
任务3.16评价录入页面效果图64
单元4页面制作规划71
任务4.1列表页面制作规划72
任务4.2分类页面制作规划74
任务4.3搜索录入页面制作规划76
任务4.4搜索结果页面制作规划78
任务4.5我的收藏页面制作规划80
任务4.6名片页面制作规划82
任务4.7详情页面制作规划84
任务4.8购物车自提页面制作规划87
任务4.9购物车快递页面制作规划90
任务4.10收货地址录入页面制作规划92
任务4.11我的自提页面制作规划95
任务4.12自提码页面制作规划97
任务4.13我的快递页面制作规划99
任务4.14物流查询页面制作规划101
任务4.15我的已收订单页面制作规划103
任务4.16评价录入页面制作规划105
单元5搭建页面框架112
任务5.1项目基础框架113
任务5.2列表页面框架116
任务5.3分类页面框架121
任务5.4搜索录入页面框架125
任务5.5搜索结果页面框架128
任务5.6我的收藏页面框架131
任务5.7名片页面框架135
任务5.8详情页面框架139
任务5.9购物车自提页面框架142
任务5.10购物车快递页面框架144
任务5.11收货地址录入页面框架145
任务5.12我的自提页面框架147
任务5.13自提码页面框架148
任务5.14我的快递页面框架151
任务5.15物流查询页面框架151
任务5.16我的已收订单页面框架155
任务5.17评价录入页面框架155
单元6页面数据定义170
任务6.1列表页面数据定义171
任务6.2分类页面数据定义172
任务6.3搜索录入页面数据定义174
任务6.4搜索结果页面数据定义175
任务6.5我的收藏页面数据定义177
任务6.6名片页面数据定义179
任务6.7详情页面数据定义179
任务6.8购物车自提页面数据定义182
任务6.9购物车快递页面数据定义184
任务6.10收货地址录入页面数据定义186
任务6.11我的自提页面数据定义187
任务6.12自提码页面数据定义188
任务6.13我的快递页面数据定义189
任务6.14物流查询页面数据定义191
任务6.15我的已收订单页面数据定义192
任务6.16评价录入页面数据定义194
单元7定制模板和组件200
任务7.1定制模板和组件的准备工作201
任务7.2定制轮播模板201
任务7.3定制列表商品列表模板204
任务7.4定制分类商品列表模板208
任务7.5定制暂无提示模板212
任务7.6定制详情摘要模板214
任务7.7定制详情评论列表模板218
任务7.8定制购物车自提列表模板224
任务7.9定制购物车快递列表模板233
任务7.10定制购物车立即支付模板243
任务7.11定制我的订单列表模板247
任务7.12定制评价录入组件255
任务7.13定制分类类别列表组件260
任务7.14定制关键词录入提交组件263
任务7.15定制选项卡组件266
任务7.16定制详情页面底部固定栏组件269
单元8填充模板和组件282
任务8.1导入模板和组件的资源文件283
任务8.2填充列表页面模板284
任务8.3填充分类页面模板和组件288
任务8.4填充搜索录入页面组件292
任务8.5填充搜索结果模板294
任务8.6填充我的收藏页面模板和组件297
任务8.7填充名片页面组件302
任务8.8填充详情页面模板和组件305
任务8.9填充购物车自提页面模板和组件309
任务8.10填充购物车快递页面模板和组件315
任务8.11填充收货地址录入页面组件319
任务8.12填充我的自提页面模板和组件322
任务8.13填充自提码页面模板和组件324
任务8.14填充我的快递页面模板和组件326
任务8.15填充物流查询页面模板和组件328
任务8.16填充我的已收订单页面模板和组件331
任务8.17填充评价录入页面组件334
参考文献348