【Vue.js——功能实现】购物车（蓝桥杯真题-1771）【合集】

Rossy Yan

发布于 2025-01-24 11:20:26

1.6K0

文章被收录于专栏：【Educoder实训】头歌实践教学平台【Educoder实训】头歌实践教学平台

背景介绍

购物车是商城类应用里必不可少的功能，接下来，我们将使用 vue 实现一个购物车列表。

准备步骤

本题已经内置了初始代码，打开实验环境，目录结构如下：

├── carList.json  # json 数据
├── css      #  样式文件夹
│   ├── element-ui.css
│   └── index.css
├── images   # 图片文件夹
│   ├── img1.jpg
│   ├── img2.jpg
│   ├── img3.jpg
│   └── img4.jpg
├── index.html
└── js    # 项目中用到的 js 文件
    ├── axios.js
    ├── element-ui.js
    └── vue.js

其中：

css 存放项目样式。
js 存放项目中用到的 js 文件。
images 存放项目中用到的图片。
carList.json 存放本次挑战需要请求的数据。
index.html 是本次挑战需要完善的布局页面。

选中 index.html 右键启动 Web Server 服务（Open with Live Server），让项目运行起来。
打开环境右侧的【Web 服务】。

目标效果

在代码中需要修改的部分有相关提示，请仔细阅读，然后完善 index.html 中的 js 部分代码，请求数据，并让数据正确显示到页面上，完成后效果如下：

要求规定

请严格按照考试步骤操作，切勿修改考试默认提供项目中的文件名称、文件夹路径等。
满足题目需求后，保持 Web 服务处于可以正常访问状态，点击「提交检测」系统会自动判分。

通关代码✔️

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>购物车</title>
    <script src="./js/vue.js"></script>
    <script src="./js/axios.js"></script>
    <link rel="stylesheet" href="./css/element-ui.css">
    <link rel="stylesheet" href="./css/index.css">
</head>

<body>
    <div class="container" id="app">
        <h4>购物车</h4>
        <!-- 购物车列表 -->
        <div>
            <el-card class="box-card" v-for="(item,index) in carlist">
                <!-- 商品图片 -->
                <img :src="item.img">
                <div>

                    <span>
                        <!-- 商品名称 -->
                        {
  
  {item.name}}
                    </span>
                    <div class="bottom clearfix">
                        <el-button type="text" class="button" @click=add(index)>+</el-button>
                        <el-button type="text" class="button">
                            <!-- 商品数量 -->
                            {
  
  {item.num}}
                        </el-button>
                        <el-button type="text" class="button" @click=dec(index)>-</el-button>
                    </div>
                </div>
            </el-card>
        </div>
    </div>
    </div>

    <!-- 引入组件库 -->
    <script src="./js/element-ui.js"></script>
    <script>
        new Vue({
            el: "#app",
            data: {
                carlist: [] //购物车列表
            },
            created() {
                // 在这里使用axios 发送请求
                axios.get("./carList.json").then(res => {
                    console.log(res.data)
                    this.carlist = res.data
                })
            },
            methods: {
                add(index) {
                    this.carlist[index].num++
                },
                dec(index) {
                    if (this.carlist[index].num >= 1) {
                        this.carlist[index].num--
                    }
                }
            }
        })
    </script>
</body>

</html>

代码解析📑

1. HTML 部分

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>购物车</title>
    <script src="./js/vue.js"></script>
    <script src="./js/axios.js"></script>
    <link rel="stylesheet" href="./css/element-ui.css">
    <link rel="stylesheet" href="./css/index.css">
</head>
<body>
    <div class="container" id="app">
        <h4>购物车</h4>
        <!-- 购物车列表 -->
        <div>
            <el-card class="box-card" v-for="(item,index) in carlist">
                <!-- 商品图片 -->
                <img :src="item.img">
                <div>
                    <span>
                        <!-- 商品名称 -->
                        {
   
   {item.name}}
                    </span>
                    <div class="bottom clearfix">
                        <el-button type="text" class="button" @click=add(index)>+</el-button>
                        <el-button type="text" class="button">
                            <!-- 商品数量 -->
                            {
   
   {item.num}}
                        </el-button>
                        <el-button type="text" class="button" @click=dec(index)>-</el-button>
                    </div>
                </div>
            </el-card>
        </div>
    </div>
    </div>
    <!-- 引入组件库 -->
    <script src="./js/element-ui.js"></script>
    <script>
        // JavaScript部分（Vue实例）
    </script>
</body>
</html>

HTML 结构和头部信息：

<!DOCTYPE html>：声明该文档为 HTML5 文档。
<html lang="en">：指定文档语言为英语。
<head> 部分：
- <meta charset="UTF-8">：设置字符编码为 UTF-8，确保页面可以正确显示各种字符。
- <meta http-equiv="X-UA-Compatible" content="IE=edge">：针对 Internet Explorer 浏览器，确保使用最新的渲染引擎。
- <meta name="viewport" content="width=device-width, initial-scale=1.0">：设置视口，使页面在不同设备上能自适应显示。
- <title>购物车</title>：设置页面标题为 "购物车"。
- <script src="./js/vue.js"></script>：引入 Vue.js 库，为页面提供 Vue 框架支持。
- <script src="./js/axios.js"></script>：引入 axios 库，用于发送 HTTP 请求。
- <link rel="stylesheet" href="./css/element-ui.css">：引入 Element UI 的样式表，为页面提供 UI 组件的样式。
- <link rel="stylesheet" href="./css/index.css">：引入自定义的样式表，可能包含一些自定义的样式。
<body> 部分：
- <div class="container" id="app">：Vue 实例挂载的根元素，id 为 app，这是 Vue 应用的容器。
- <h4>购物车</h4>：显示一个标题 "购物车"。
- <el-card class="box-card" v-for="(item,index) in carlist">：使用 v-for 指令遍历 carlist 数组，为数组中的每个元素创建一个 el-card 组件。
  - <img :src="item.img">：使用 v-bind 指令（简写为 :）绑定 img 元素的 src 属性，将 item.img 的值作为图片的源。
  - <span>{ {item.name}}</span>：使用双大括号插值表达式显示商品名称。
  - <div class="bottom clearfix">：一个包含操作按钮的 div 元素。
    - <el-button type="text" class="button" @click=add(index)>+</el-button>：使用 @click 指令监听点击事件，调用 add 方法并传递 index 参数，点击按钮会增加商品数量。
    - <el-button type="text" class="button">{ {item.num}}</el-button>：显示商品数量。
    - <el-button type="text" class="button" @click=dec(index)>-</el-button>：使用 @click 指令监听点击事件，调用 dec 方法并传递 index 参数，点击按钮会减少商品数量。

2. JavaScript部分（Vue 实例）

new Vue({
    el: "#app",
    data: {
        carlist: [] //购物车列表
    },
    created() {
        // 在这里使用 axios 发送请求
        axios.get("./carList.json").then(res => {
            console.log(res.data)
            this.carlist = res.data
        })
    },
    methods: {
        add(index) {
            this.carlist[index].num++
        },
        dec(index) {
            if (this.carlist[index].num >= 1) {
                this.carlist[index].num--
            }
        }
    }
})

Vue 实例创建：

new Vue({...})：创建一个 Vue 实例。
el: "#app"：将 Vue 实例挂载到 id 为 app 的元素上。
data 属性：
- carlist: []：定义一个名为 carlist 的数组，用于存储购物车中的商品信息，初始化为空数组。
created 生命周期钩子：
- axios.get("./carList.json").then(res => {...})：在 Vue 实例创建后，使用 axios 发送一个 GET 请求到 ./carList.json 文件。
- console.log(res.data)：打印从服务器获取的数据。
- this.carlist = res.data：将从服务器获取的数据存储在 carlist 数组中。
methods 属性：
- add(index)：
  - this.carlist[index].num++：点击 + 按钮时，会调用该方法，将 carlist 数组中对应 index 的商品数量加 1。
- dec(index)：
  - if (this.carlist[index].num >= 1) {...}：点击 - 按钮时，调用该方法，如果商品数量大于或等于 1，将 carlist 数组中对应 index 的商品数量减 1。

3.JSON 部分

//carList.json
[
    {
        "id": 6,
        "name": "橘子",
        "price": 3.9,
        "num": 1,
        "img": "./images/img1.jpg"
    },
    {
        "id": 7,
        "name": "车厘子",
        "price": 138.8,
        "num": 2,
        "img": "./images/img2.jpg"
    },
    {
        "id": 7,
        "name": "草莓",
        "price": 28.5,
        "num": 3,
        "img": "./images/img3.jpg"
    },
    {
        "id": 7,
        "name": "菠萝",
        "price": 9.8,
        "num": 4,
        "img": "./images/img4.jpg"
    }
]

数据结构和内容：这是一个 JSON 数组，每个元素是一个对象，代表购物车中的一种商品。

id：商品的唯一标识符（不过这里部分 id 重复，实际开发中最好保证 id 的唯一性）。
name：商品的名称，如 "橘子"、"车厘子" 等，用于在购物车中显示商品名称。
price：商品的单价，用于计算总价等操作。
num：商品的数量，与 HTML 部分中的商品数量显示和操作按钮相关联。
img：商品图片的路径，用于在页面上显示商品的图片。

4. 工作流程 ▶️

初始化阶段：
- 页面加载时，Vue 实例被创建并挂载到 id 为 app 的元素上。
- 初始化 data 中的 carlist 数组为空数组。
数据获取阶段：
- 当 Vue 实例进入 created 生命周期钩子时，使用 axios 发送一个 GET 请求到 ./carList.json。
- 从服务器获取购物车数据（假设是一个包含商品信息的 JSON 数组）。
- 将服务器返回的数据存储在 carlist 数组中。
页面渲染阶段：
- Vue 会根据 carlist 数组的内容使用 v-for 指令动态生成购物车列表。
- 对于 carlist 中的每个商品，显示商品图片（通过 item.img）、商品名称（通过 item.name）和商品数量（通过 item.num）。
- 同时，为 + 和 - 按钮绑定点击事件，分别调用 add 和 dec 方法。
交互阶段：
- 当用户点击 + 按钮时，会调用 add 方法，根据传递的 index 增加对应商品的数量。
- 当用户点击 - 按钮时，会调用 dec 方法，根据传递的 index 减少对应商品的数量，但不会让数量小于 0。

小总结：该代码通过 Vue.js 框架实现了一个简单的购物车功能。它利用 Vue 的数据绑定（v-bind、双大括号插值）和指令（v-for、@click），结合 axios 进行数据请求，将服务器的数据渲染为购物车列表，并提供了增加和减少商品数量的交互功能。同时使用了 Element UI 组件库来美化界面，使页面更加美观和易用。