vue购物车的完成步骤

购物车案例 完成静态页面 在App.vue先完成所有的静态页面 下载安装 安装less

npm i less less-loader

安装axios

npm i axios

封装组件

把页面分为三个组件

CartHeader.vueProductItem.vueCartFooter.vue

页面css也移动过去

封装组件步骤

先移动App.vue中需要封装的部分在App.vue导入import 组件名 from ‘组件的路径’components:{ 组件名 }<组件名/> 渲染商品 发送请求获取数据 设置基地址 utlis/request.js

// 导入axios
import axios from "axios";
//  统一设置默认的基地址
axios.defaults.baseURL = 'https://www.escook.cn'

// 导出axios
export default axios

设置专门封装接口函数 api/Cart.js

// 导入axios
import axios from "@/utlis/request";
// 封装接口数据,导出供页面使用
// 获取购物车的数据(具名导出)

export function getCart() {
    return axios({
        url: '/api/cart'
    })
}

导入接口 具名导入

import { getCart } from "@/api/cart";

发送请求

定义数组变量接受请求回来的数据

data() {
    return {
      list: [],
    };
  },

created() {
    getCart()
      .then((res) => {
        console.log("获取数据成功", res.data);
        // 把数据赋值给list数组
        this.list = res.data.list;
      })
      .catch((err) => {
        console.log(err);
      });
  },

遍历循环数据显示到页面上

两种遍历方式:

在App.vue的子组件名标签上在子组件里面进行遍历

使用在App.vue的子组件名标签上进行遍历

<ProductItem v-for="item in list" :key="item.id" />

向ProductItem.vue传递数据

<ProductItem v-for="item in list" :key="item.id" :data="item" />

ProductItem.vue接受数据

props: ["data"],

让页面显示请求过来的数据

ProductItem.vue

<template>
  <div class="list">
    <div class="item">
      <input
        class="checkbox"
        type="checkbox"
        name=""
        id=""
        v-model="data.goods_state"
      />
      <img :src="data.goods_img" alt="" />
      <div class="info">
        <div class="top">{{ data.goods_name }}</div>
        <div class="bottom">
          <div class="price">¥{{ data.goods_price }}</div>
          <div class="number">
            <button>-</button>
            <input type="text" v-model="data.goods_count" />
            <button>+</button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

让点击图片也勾选

<label for="data.id">
        <img :src="data.goods_img" alt="" :id="data.id" />
      </label>

修改商品的数量

 <div class="number">
    <button @click="data.goods_count--">-</button>
    <input type="text" v-model.number="data.goods_count" />
    <button @click="data.goods_count++">+</button>
 </div>

监听商品的数量 不小于1

watch: {
    //   如果监听的数据是对象的一个属性,没法作为函数名的话,就回复key:value
    // data:function() {} 原始写法
    "data.goods_count": function (newVal) {
      if (newVal < 1) {
        this.data.goods_count = 1;
      }
    },
  },

全选

传递数据到CartFooter.vue

<CartFooter :list="list" />

CartFooter.vue接收数据

props: ["list"],

被动全选 全选按钮的选中状态由全部单选的状态决定every数组方法是遍历数据看数据时候全部为true或者false

computed: {
    isAll() {
      return this.list.every((item) => item.goods_state);
    },
  },

主动全选

使用对象

computed: {
    isAll: {
      get() {
        return this.list.every((item) => item.goods_state);
      },
      // 参数可以接收到全选的布尔值
      set(isChecked) {
        // 将所有商品状态改为全选的状态一样
        this.list.forEach((item) => {
          item.goods_state = isChecked;
        });
      },
    },
  },

商品的总价和数量

​ 在计算属性里面写，监听也可以

商品的总价

    TotalPrice() {
      let total = 0;
      this.list.forEach((item) => {
        // 判断商品的状态，为true的才计算在内
        if (item.goods_state) {
          total += item.goods_price * item.goods_count;
        }
      });
      return total;
    },

商品的数量

TotalCount() {
      let num = 0;
      this.list.forEach((item) => {
        // 判断商品的状态，为true的才计算在内
        if (item.goods_state) {
          num += item.goods_count;
        }
      });
      return num;
    },