Vue.js前端开发案例教程项目八 综合案例-开发图书销售网站.pptx

;;综合案例—

开发图书销售网站;;01;;图书销售网站在功能方面的需求;;;;;;;;;;;;;;;顶部导航模块包含网站?Logo、网站标题、图书搜索框、“登录”或“退出”按钮，页面效果如图所示。;在项目的“src/components”目录下打开单文件组件“HeaderNav.vue”，定义顶部导航模块的内容，代码如图。;在项目的“src/components”目录下打开单文件组件“HeaderNav.vue”，定义顶部导航模块的内容，代码如图。;在项目的“src/components”目录下打开单文件组件“HeaderNav.vue”，定义顶部导航模块的内容，代码如图。;购物车导航模块显示在网站页面的右侧，包含购物车图标和文本两部分，页面效果如图所示。;在项目的“src/components”目录下打开单文件组件“CartNav.vue”，定义购物车导航模块的内容，代码如图。;在项目的“src/components”目录下打开单文件组件“CartNav.vue”，定义购物车导航模块的内容，代码如图。;单击顶部导航模块的“登录”按钮，页面显示登录模块的内容，页面效果如图所示。;在项目的“src/components”目录下打开单文件组件“Login.vue”，定义登录模块的内容，代码如图。;在项目的“src/components”目录下打开单文件组件“Login.vue”，定义登录模块的内容，代码如图。;在项目的“src/components”目录下打开单文件组件“Login.vue”，定义登录模块的内容，代码如图。;进入图书销售网站后，会默认显示图书展示模块，该模块包含图书分类列表和图书列表两部分，页面效果如图所示。;在项目的“src/components”目录下打开单文件组件“BookList.vue”，定义图书展示模块的内容，代码如图。;在项目的“src/components”目录下打开单文件组件“BookList.vue”，定义图书展示模块的内容，代码如图。;在项目的“src/components”目录下打开单文件组件“BookList.vue”，定义图书展示模块的内容，代码如图。;图书详情模块根据获取的图书?id?展示对应图书的基本信息、“加入购物车”按钮和内容简介，页面效果如图所示。;在项目的“src/components”目录下打开单文件组件“BookInfo.vue”，定义图书详情模块的内容，代码如图。;在项目的“src/components”目录下打开单文件组件“BookInfo.vue”，定义图书详情模块的内容，代码如图。;在项目的“src/components”目录下打开单文件组件“BookInfo.vue”，定义图书详情模块的内容，代码如图。;在顶部导航模块的搜索框中输入书名信息并单击“搜索”按钮，页面显示图书搜索模块的内容，页面效果如图所示。;在项目的“src/components”目录下打开单文件组件“SelectBook.vue”，定义图书搜索模块的内容，代码如图。;在项目的“src/components”目录下打开单文件组件“SelectBook.vue”，定义图书搜索模块的内容，代码如图。;单击图书销售网站页面右侧的购物车图标，页面显示购物车模块的内容。

网站处于登录状态且购物车中添加有商品时，购物车模块包含显示购物车中图书信息的表格和结算信息，页面效果如图所示。;单击图书销售网站页面右侧的购物车图标，页面显示购物车模块的内容。

网站处于未登录状态或购物车中未添加图书时，购物车模块显示“尚未添加商品”提示信息，页面效果如图所示。;在项目的“src/components”目录下打开单文件组件“Cart.vue”，定义购物车模块的内容，代码如图。;在项目的“src/components”目录下打开单文件组件“Cart.vue”，定义购物车模块的内容，代码如图。;在项目的“src/components”目录下打开单文件组件“Cart.vue”，定义购物车模块的内容，代码如图。;在项目的“src/components”目录下打开单文件组件“Cart.vue”，定义购物车模块的内容，代码如图。;在项目的“src/components”目录下打开单文件组件“Cart.vue”，定义购物车模块的内容，代码如图。;在项目的“src/components”目录下打开单文件组件“Cart.vue”，定义购物车模块的内容，代码如图。;在项目的“src/components”目录下打开单文件组件“Cart.vue”，定义购物车模块的内容，代码如图。;;;;;评价项目;