构建电影票预订系统

介绍

在这个项目中，你将学习如何构建一个电影票预订系统。该项目涉及异步获取电影数据、在网页上呈现电影信息，以及实现座位选择和总价计算的功能。

👀 预览

电影预订系统演示

🎯 任务

在这个项目中，你将学习：

如何使用 axios 库异步获取数据
如何在网页上呈现电影信息，包括电影名称、价格和座位可用性
如何实现座位选择功能，并相应地更新所选座位数量和总价
如何更新显示以展示当前所选座位数量和总价

🏆 成果

完成这个项目后，你将能够：

使用 axios 库异步获取数据
操作 DOM 以显示动态内容
通过事件处理实现交互式用户界面
根据用户操作更新用户界面

设置项目结构

在这一步中，你将设置项目文件和结构。请按照以下步骤完成此步骤：

打开项目文件夹。目录结构如下：

├── css
│   └── style.css
├── data.json
├── index.html
├── effect.gif
└── js
    ├── axios.min.js
    └── script.js

其中：

index.html 是主页。
css/style.css 是提供的页面样式文件。
data.json 是需要请求的数据文件。
js/axios.min.js 是 axios 请求库文件。
js/script.js 是你需要补充代码的文件。

点击 WebIDE 右下角的 Go Live 按钮来运行项目。

接下来，打开虚拟机顶部的“Web 8080”，并手动刷新页面，以便在浏览器中看到以下效果：

图片描述

异步数据获取与渲染

在这一步中，你将学习如何使用 axios 库异步获取数据，并将电影信息渲染到网页上。

打开 js/script.js 文件。

使用 axios.get() 从 data.json 文件中获取数据：

let data = {};
axios
  .get("../data.json")
  .then((res) => {
    console.log(res);
    data = res.data;
    movieNameNode.innerHTML = data.name;
    moviePriceNode.innerHTML = data.price;
    data.seats.forEach((item) => {
      let row = document.createElement("div");
      row.className = "row";
      item.forEach((item) => {
        let seat = document.createElement("div");
        seat.className = "seat";
        row.appendChild(seat);
        if (item) {
          seat.classList.add("occupied");
        }
      });
      seatAreaNode.appendChild(row);
    });
  })
  .catch((err) => {
    console.log(err);
  });

上述代码从 data.json 文件中获取数据，然后更新相应 DOM 节点中的电影名称和价格。它还通过为 data.seats 数组中的每一行创建一排座位节点来生成座位区域，并为已预订的座位添加“occupied”类。

座位选择与总价计算

在这一步中，你将实现座位选择和总价计算的功能。

打开 js/script.js 文件。
初始化变量以获取座位区域中的所有座位节点：
```
const seatNodes = document.querySelectorAll(".seat");
```
初始化变量以跟踪所选座位的数量和总价：
```
let selectedSeatsCount = 0;
let totalPrice = 0;
```

为座位区域添加点击事件监听器：

seatAreaNode.addEventListener("click", (event) => {
  const clickedSeat = event.target;
  if (
    clickedSeat.classList.contains("seat") &&
    !clickedSeat.classList.contains("occupied")
  ) {
    clickedSeat.classList.toggle("selected");
    if (clickedSeat.classList.contains("selected")) {
      selectedSeatsCount++;
      totalPrice += data.price;
    } else {
      selectedSeatsCount--;
      totalPrice -= data.price;
    }

    updateDisplay();
  }
});

上述代码为座位区域添加了一个点击事件监听器。当点击一个未被占用的座位时，它会在座位节点上切换“selected”类，并相应地更新 selectedSeatsCount 和 totalPrice 变量。

实现 updateDisplay() 函数以更新所选座位的数量和总价：
```
function updateDisplay() {
  count.textContent = selectedSeatsCount;
  total.textContent = totalPrice;
}
```
此函数更新 ID 为“count”和“total”的节点的文本内容，以显示当前所选座位的数量和总价。

完成这些步骤后，电影票预订功能应已完全实现，允许用户选择座位并查看总价。最终页面效果如下：

图片描述

总结

恭喜你！你已经完成了这个项目。你可以在 LabEx 中练习更多实验来提升你的技能。