江月迟迟的个人知识库

外观

【功能实现】购物车 ​

作者:江月迟迟
发表于:2024-12-10
字数统计:667 字
预计阅读3分钟

背景介绍 ​

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

准备步骤 ​

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

txt
├── 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 是本次挑战需要完善的布局页面。
  1. 选中 index.html 右键启动 Web Server 服务（Open with Live Server），让项目运行起来。
  2. 打开环境右侧的【Web 服务】。

图片描述

目标 ​

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

图片描述

规定 ​

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

总通过次数: 2068 | 总提交次数: 2723 | 通过率: 75.9%

难度: 简单 标签: 2022, 省模拟赛, Web 前端, Vue.js

题解 ​

vue
<!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 in carlist" :key="item.id">
				<!-- 商品图片 -->
				<img :src="item.img">
				<div>

					<span>
						<!-- 商品名称 -->
						{{ item.name }}
					</span>
					<div class="bottom clearfix">
						<el-button type="text" class="button">+</el-button>
						<el-button type="text" class="button">
							<!-- 商品数量 -->
							{{ item.num }}
						</el-button>
						<el-button type="text" class="button">-</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 => {
					this.carlist = res.data
				})
			},
		})


	</script>
</body>




</html>