从零开始打造vue---购物车案例

目录

?购物车案例

1. 案例效果

?2. 实现步骤

1. 初始化项目结构

2. 封装 es-header 组件

3. 基于 axios 请求商品列表数据

4. 封装 es-footer 组件

5. 封装 es-goods 组件

实现合计、结算数量、全选功能

6.1 动态统计已勾选商品的总价格

6.2 动态统计已勾选商品的总数量

6.3 实现全选功能

7. 封装 es-counter 组件

---

购物车案例

1. 案例效果

2. 实现步骤

• ① 初始化项目基本结构
• ② 封装 EsHeader 组件
• ③ 基于 axios 请求商品列表数据
• ④ 封装 EsFooter 组件
• ⑤ 封装 EsGoods 组件
• ⑥ 封装 EsCounter 组件

1. 初始化项目结构

运行如下的命令，初始化 vite 项目：

npm init vite-app code-cart
cd code-cart
npm install

2. 清理项目结构：

• 把 bootstrap 相关的文件放入 src/assets 目录下
• 在 main.js 中导入 bootstrap.css
• 清空 App.vue 组件
• 删除 components 目录下的 HelloWorld.vue 组件

3. 为组件的样式启用 less 语法

npm i less -D

4.初始化 index.css 全局样式如下：

:root {
 font-size: 12px;
 } 

2. 封装 es-header 组件

2.1 创建并注册 EsHeader 组件

1. 在 src/components/es-header/ 目录下新建 EsHeader.vue 组件：

<template>
 <div>EsHeader 组件</div>
</template> <script>
export default {
 name: 'EsHeader', }
</script> <style lang="less" scoped></style>

2. 在 App.vue 组件中导入并注册 EsHeader.vue 组件：

// 导入 header 组件
import EsHeader from './components/es-header/EsHeader.vue'
export default {
 name: 'MyApp',
 components: {
 // 注册 header 组件
 EsHeader,
 },
} 

3. 在 App.vue 的 template 模板结构中使用 EsHeader 组件：

<template>
 <div>
 <h1>App 根组件</h1>
 <!-- 使用 es-header 组件 -->
 <es-header></es-header>
 </div>
</template> 

2.2 封装 es-header 组件

0. 封装需求：

• 允许用户自定义 title 标题内容
• 允许用户自定义 color 文字颜色
• 允许用户自定义 bgcolor 背景颜色
• 允许用户自定义 fsize 字体大小
• es-header 组件必须固定定位到页面顶部的位置，高度为 45px，文本居中，z-index 为 999

1. 在 es-header 组件中封装以下的 props 属性：

export default {
 name: 'EsHeader',
 props: {
 title: { // 标题内容
 type: String,
 default: 'es-header',
 },
 bgcolor: { // 背景颜色
 type: String,
 default: '#007BFF',
 },
 color: { // 文字颜色
 type: String,
 default: '#ffffff',
 },
 fsize: { // 文字大小
 type: Number,
 default: 12,
 },
 },
}

2. 渲染标题内容，并动态为 DOM 元素绑定行内的 style 样式对象：

<template>
 <div :style="{ color: color, backgroundColor: bgcolor, fontSize:
fsize + 'px' }">{
  { title }}</div>
</template> 

3. 为 DOM 节点添加 header-container 类名，进一步美化 es-header 组件的样式：

<template> 
 <div class="header-container" :style="{ color: color,
backgroundColor: bgcolor, fontSize: fsize + 'px' }">
 {
  { title }}
 </div>
</template> <style lang="less" scoped>
.header-container {
 height: 45px;
 line-height: 45px;
 text-align: center;
 position: fixed;
 top: 0;
 left: 0;
 width: 100%;
 z-index: 999;
}
</style> 

4. 在 App 根组件中使用 es-header 组件时，通过 title 属性 指定 标题内容

<template>
 <div class="app-container">
 <h1>App 根组件</h1>
 
 <!-- 为 es-header 组件指定 title 属性的值 -->
 <es-header title="购物车案例"></es-header>
 </div>
</template>

3. 基于 axios 请求商品列表数据

1.运行如下的命令安装 axios

npm i axios -S

2.在 main.js 入口文件中导入并全局配置 axios ：

import { createApp } from 'vue'
import App from './App.vue'
import './assets/css/bootstrap.css'
import './index.css'
// 导入 axios
import axios from 'axios'
const app = createApp(App)
// 配置请求的根路径
axios.defaults.baseURL = 'https://www.escook.cn'
// 将 axios 挂载为全局的 $http 自定义属性
app.config.globalProperties.$http = axios
app.mount('#app') 

3.2 请求商品列表数据

1. 在 App.vue 根组件中声明如下的 data 数据：

data() {
 return {
 // 商品列表的数据
 goodslist: [],
 }
},

2. 在 App.vue 根组件的 created 生命周期函数中， 预调用 获取商品列表数据 的 methods 方法

/ 组件实例创建完毕之后的生命周期函数
created() {
 // 调用 methods 中的 getGoodsList 方法，请求商品列表的数据
 this.getGoodsList()
},

3. 在 Ap.vue 根组件的 methods 节点中，声明刚才预调用的 getGoodsList 方法：

methods: {
 // 请求商品列表的数据
 async getGoodsList() {
 // 1. 通过组件实例 this 访问到全局挂载的 $http 属性，并发起
Ajax 数据请求
 const { data: res } = await this.$http.get('/api/cart')
 // 2. 判断请求是否成功
 if (res.status !== 200) return alert('请求商品列表数据失败！')
 // 3. 将请求到的数据存储到 data 中，供页面渲染期间使用
 this.goodslist = res.list
 },
},

4. 封装 es-footer 组件

4.1 创建并注册 EsFooter 组件

1.在 src/components/es-footer/ 目录下新建 EsFooter.vue 组件：

<template>
 <div>EsFooter 组件</div>
</template> <script>
export default {
 name: 'EsFooter', }
</script> <style lang="less" scoped></style>

2. 在 App.vue 组件中导入并注册 EsFooter.vue 组件：

// 导入 header 组件
import EsHeader from './comp