vuejs前端开发案例教程08综合案例-开发图书销售网站.pptxVIP

Vue.js前端开发案例教程

项目1Vue.js入门项目2Vue.js开发基础项目3Vue.js指令项目4Vue.js组件全书目录项目5过渡动画项目8综合案例——开发图书销售网站项目7网络请求与状态管理项目6路由管理

综合案例—开发图书销售网站项目八

能够分析图书销售网站的背景和需求能够设计图书销售网站的功能模块能够开发图书销售网站技能目标02培养前瞻性思维，养成提前规划和准备的良好习惯提升运用理论知识解决实际问题的能力素养目标03熟悉Vue.js项目的开发步骤掌握开发Vue.js项目的方法知识目标01项目目标

01项目背景模块设计项目评价项目开求分析项目搭建项目运行0406项目导航

02项目背景图书销售网站不仅能够解决传统实体书店存在的租金高昂、库存管理困难等问题，还能为用户提供更加便捷、灵活的购书体验。因此，本项目将开发一个图书销售网站。

图书销售网站在功能方面的需求需求分析（1）具备分类展示图书功能（3）提供图书搜索功能（2）提供查看图书详细信息功能（4）提供账户管理功能（5）提供购物车功能方便用户快速定位图书。包括查看书名、作者、出版社、价格、内容简介等图书信息。方便用户根据书名中的关键字搜索相关图书。允许用户使用账号和密码登录网站、退出网站。Vue.js内核轻量，插件丰富，功能可扩展。

图书销售网站各模块模块设计图书销售网站导航模块顶部导航模块功能：可以切换显示图书展示模块、图书详情模块、图书搜索模块的内容，也可以显示或隐藏登录模块的内容。购物车导航模块功能：可以显示购物车中图书的数量，也可以切换显示购物车模块的内容。图书展示模块功能：可以显示图书分类列表和对应类别的图书列表，并切换显示图书详情模块的内容。图书详情模块功能：可以显示图书的详细信息，并将图书加入购物车中。图书搜索模块功能：可以显示搜索的图书列表，并切换显示图书详情模块的内容。购物车模块功能：可以显示购物车中的图书信息，增加或减少购物车中图书的数量，删除购物车中的图书，改变图书的选中状态。登录模块功能：可以输入登录信息，并登录图书销售网站。

项目搭建打开命令提示符窗口，在合适的目录下创建图书销售网站项目book-store。0102搭建图书销售网站项目切换到book-store项目的根目录下，分别执行如下命令安装相关插件。yarnyarnaddvue-router@4.2.5 //安装路由管理器yarnaddaxios@1.6.2 //安装网络请求库yarnaddvuex@4.0.2 //安装状态管理插件yarnaddvuex-persistedstate@4.1.0 //安装持久化存储插件

在项目的“/src/assets”目录下新建图片资源文件夹“img”和数据资源文件夹“json。将本书配套素材中的所有图片复制到新建的“img”文件夹中；将本书配套素材中的数据文件“menu.json”和“books.json”复制到新建的“json”文件夹中。在项目的“src/components”目录下新建用于实现网站各模块功能的单文件组件“HeaderNav.vue”（顶部导航模块）、“CartNav.vue”（购物车导航模块）、“BookList.vue”（图书展示模块）“BookInfo.vue”（图书详情模块）、“SelectBook.vue”（图书搜索模块）、“Cart.vue”（购物车模块）和“Login.vue”（登录模块）。在项目的“src”目录下新建用于创建Store实例的文件“store.js”。项目搭建使用?VS?Code?编辑器打开图书销售网站项目?book-store，新建文件夹或文件。03搭建图书销售网站项目

项目搭建项目目录结构如图所示搭建图书销售网站项目

实现路由管理和状态管理项目开发图书销售网站中含有多个模块，这些模块的内容切换显示在同一个页面中，而且这些模块共享部分数据。因此，在开发图书销售网站时，可以先实现路由管理和状态管理，以便制作各模块时实现不同的功能。

路由管理：图书销售网站的图书展示模块、图书详情模块、图书搜索模块和购物车模块之间的切换需要使用路由来实现。实现路由管理和状态管理项目开发

实现路由管理的方法如下：1.在项目的“src”目录下打开“main.js”文件，将其内容修改为如图代码，创建并引用路由实例。实现路由管理和状态管理项目开发

实现路由管理的方法如下：2.在项目的“src”目录下打开单文件组件“App.vue”，将其内容修改为如图代码，显示顶部导航模块和购物车模块的内容，并定义路由视图。实现路由管理和状态管理项目开发

状态