《Vue.js3Web开发案例教程（在线实训版）》 课件 17 案例-电子商务网站

vue.js

2024.7vue.js第17章

案例—电子商务网站设定基本目标省略的功能介绍本案例的20个步骤文件首页产品列表页和加入购物车产品详情页和加入购物车订单详情页订单列表页项目目录结构安装BootstrapDEMO（电子商务网站）第17章

案例—电子商务网站

第17章

案例—电子商务网站本案例设定如下基本目标：实现一个结构完整的电子商务网站实现产品列表的展示页面（产品列表页）实现单一产品的显示页面（产品详情页）实现将一个产品“加入购物车”功能实现“确定下单”功能可以查看一个订单的信息可以查看订单列表模拟订单的支付过程模拟远程API的处理逻辑模拟存在API调用失败的情况使用localStorage实现本地存储第17章

案例—电子商务网站本案例进行了省略的功能：没有实现调用后端API，但是通过JavaScript模拟异步调用没有实现用户的注册、登录、验证等相关逻辑产品没有分类产品和订单列表没有分页展示购物车中的产品不能调整数量，及每种产品都只有一件第17章

案例—电子商务网站首先对这20个步骤做一介绍，使读者对本案例的整体开发过程有所认知。步骤编号案例文件夹名称说明1geekfun-01-emptyVue-cli脚手架工具生成的基础代码2geekfun-02-router配置基本路由基本页面3geekfun-03-bootstrap安装Bootstrap4geekfun-04-products-html搭建产品列表页的静态文件5geekfun-05-products-vue动态化产品列表页6geekfun-06-product-html搭建产品详情页的静态文件7geekfun-07-product-vue动态化产品详情页8geekfun-08-loading耗时操作显示提示框9geekfun-09-cart-html购物车的静态视图10geekfun-10-cart-moving使购物车可以移动第17章

案例—电子商务网站

步骤编号案例文件夹名称说明11geekfun-11-add-to-cart加入购物车功能12geekfun-12-header-cart-count在页头显示购物车中产品数量13geekfun-13-order-detail订单详情页14geekfun-14-orders订单列表15geekfun-15-check-out“确认下单”功能16geekfun-16-pay“支付”功能17geekfun-17-404-redirect对订单详情页和产品详情页显示40418geekfun-18-nav-header制作响应式的页头导航19geekfun-19-footer页脚20geekfun-20-final-home-about首页和关于我们页面第17章

案例—电子商务网站

首页PC端移动端第17章

案例—电子商务网站

产品列表页和加入购物车PC端移动端第17章

案例—电子商务网站

产品详情页和加入购物车PC端移动端第17章

案例—电子商务网站

订单详情页PC端移动端第17章

案例—电子商务网站

订单列表页PC端移动端第17章

案例—电子商务网站

项目目录结构第17章

案例—电子商务网站

安装Bootstrap

运行命令：npminstallbootstrap--save在main.js中引入Bootstrap相关文件：import"bootstrap/dist/js/bootstrap.bundle";import"bootstrap/dist/css/bootstrap.min.css";第17章

案例—电子商务网站DEMO第17章

案例—电子商务网站设定基本目标省略的功能介绍本案例的20个步骤文件首页