：购物车案例

Posted 2022-06-17 teayear

第八章：购物车案例

本章目标

• 综合之前学过的知识点
• 完成综合案例购物车

一、vue-cli项目引入font-awesome标签库(自己选择性的学习)

图标官网：https://fontawesome.com/v5.15/icons

1.1 安装

在Font Awesome 4版本中，可以通过使用npm安装font-awesome依赖以后直接在main.js中引入全部CSS文件来像使用原生javascript开发一样使用Font Awesome，但到了Font Awesome 5版本后，官方推出了对Vue的支持，我们可以根据自己的需求引入图标，这样到了最后打包的时候生产环境的文件只会包含我们所需要的图标文件，大大减小了依赖的体积，优化了应用的性能，本文讲解如何在Vue中使用Font Awesome 5版本。

一般来说需要安装三个依赖，也是官方推荐的安装内容：

npm install --save @fortawesome/fontawesome-svg-core
npm install --save @fortawesome/vue-fontawesome
npm install --save @fortawesome/free-solid-svg-icons

其中第一行的依赖是Font Awesome的核心部分，第二行的依赖是Font Awesome在Vue环境中使用需要的Vue组件，第三行的依赖是Font Awesome的solid风格图标。

Font Awesome 5中官方将图标分为了几个风格，有solid，regular，light和brands。作为免费用户，只能使用部分solid，regular和brands的图标，我们目前只安装了solid图标，它已经包含了绝大多数我们要用到的图标，有时我们还需要使用到一些商标图标，让我们再来安装商标图标依赖。

npm install --save @fortawesome/free-brands-svg-icons

1.2 配置

我已经用Vue CLI初始化了一个空白的Vue项目，你也可以用你自己的方式来新建一个Vue项目，如果你也想用Vue CLI但是还不熟悉它的话，可以参考我的另外一篇文章Vue CLI 3 快速搭建项目。.

在Vue的入口文件main.js中添加如下内容：

import Vue from 'vue';
import  library  from '@fortawesome/fontawesome-svg-core';
import  FontAwesomeIcon  from '@fortawesome/vue-fontawesome';
import App from './App.vue';

Vue.component('font-awesome-icon', FontAwesomeIcon);

Vue.config.productionTip = false;

new Vue(
    render: function (h) 
        return h(App);
    ,
).$mount('#app');

我们已经引入了Font Awesome的主要内容，并注册了Font Awesome组件，但是我们还没有引入任何一个图标，让我们先去Font Awesome官网找一下我们需要的图标。

在搜索框内用英文输入我们想搜索的内容，我们搜个比较常用的用户图标，输入user，点击第一排第四个图标。

点进去后我们可以看到如下内容：

注意划横线的内容，我们可以知道这个图标属于solid风格，同时关注一下这个class属性的内容，现在我们就可以去引入这个图标了，添加一些内容到main.js文件后它变成如下状态：

import Vue from 'vue';

//引入fontawesomeIcon需要使用的依赖项
import  library  from '@fortawesome/fontawesome-svg-core';
import  FontAwesomeIcon  from '@fortawesome/vue-fontawesome';
//搜索图标名 加入 这里
import  
    faUser,
 from '@fortawesome/free-solid-svg-icons';
import App from './App.vue';
//把图标加入到库里边
library.add(
    faUser,
);

Vue.component('font-awesome-icon', FontAwesomeIcon);

Vue.config.productionTip = false;

new Vue(
    render: function (h) 
        return h(App);
    ,
).$mount('#app');

刚才图标的class中的fas代表solid风格，fa-user是这个图标的名称，所以我们在第四行引入它：

import  
    faUser,
 from '@fortawesome/free-solid-svg-icons';

引入完毕后还要在核心依赖中加入这个引入的图标：

library.add(
    faUser,
);我这里用换行的写法方便以后引入更多的图标时代码清晰，不换行也完全没有问题，至此配置已经完毕，我们可以在Vue组件中使用它了。

在Vue组件中使用图标
由于已经全局注册了组件，所以不管在那个Vue组件中我们都可以使用，为了方便我就直接在App.vue中使用了，在模板部分添加如下内容：

<font-awesome-icon :icon="['fas', 'user']"></font-awesome-icon>
其中font-awesome-icon是我们刚刚注册好的组件名，:icon属性是一个数组，用来指定具体图标，刚刚的class中有两个属性，分别是fas和fa-user，第一个fas保留，第二个fa-user去掉开头的fa-保留剩下的，作为数组的两个元素，就可以正确指定我们要的图标了。

实际效果：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-XNZNikYW-1655272651571)(assets/image-20220208154057608.png)]

二、购物车案例

以数据驱动视图

第一步：先获取购物车中的数据，并渲染到页面上

1. 先发送axios请求 goods.json 并把这个数据赋值给 shopCar组件的data属性
2. 把数据渲染到页面上
3. 进入Comm.vue组件 定义props属性 定义期待的数据属性
4. 进入shopCar.vue 在使用Com.vue组件的位置 做数据的传递

第二步：全选/反选

• 全选 ：
  1. 注意： 一定要把每一个商品组件的复选框 绑定一个状态数据 ====》跟总数据做绑定
  2. 全选：需要把全选框的状态传递给 shopCar 在shopCar中遍历lists数据，把每一个state都改成 true/false
• 反选：
  1. 通过计算属性 来实时计算 反选状态
  2. 把计算得到的反选的值 传递给shop-car-footer组件 显示到复选框的:checked=‘中’

第三步：计算购物车总数 和 结算总数

• 购物车商品总数据量 遍历lists中所有的商品数据 把其中的num加到一起。
• 计算购物车中选中商品的总数量 遍历lists中所有的选中商品数据 把其中的num加到一起。

第四步：加减按钮

’

第三步：计算购物车总数 和 结算总数

• 购物车商品总数据量 遍历lists中所有的商品数据 把其中的num加到一起。
• 计算购物车中选中商品的总数量 遍历lists中所有的选中商品数据 把其中的num加到一起。

第四步：加减按钮