仿豆瓣分页原型(Javascript版)-前端开发

让我们一步步来详细讲解“仿豆瓣分页原型(Javascript版)”的完整攻略。

让我们一步步来详细讲解“仿豆瓣分页原型(Javascript版)”的完整攻略。

1. 目标

在这个项目中，我们的目标是完成一个可以实现类似豆瓣电影列表分页的原型，包含如下功能：

页面展示电影列表
实现分页功能，可以翻页查看电影列表的不同页面
支持自定义每页显示的电影数量

2. 环境

完成这个项目我们需要一个web开发环境，下面列出了需要的工具和技术：

HTML
CSS
JavaScript
代码编辑器（如：Visual Studio Code）
浏览器（如：Chrome、Firefox等）

3. 步骤

下面我们来一步一步实现这个项目：

3.1 准备工作

首先，我们需要在html中增加一个列表容器，用来显示电影列表，并增加两个分页控制按钮（上一页和下一页）。

<div id="movie-list"></div>
<button id="prev">上一页</button>
<button id="next">下一页</button>

其次，我们需要在JavaScript中定义一个电影列表数据（数组形式），代码如下：

const movie_data = [
  { id: 1, name: "肖申克的救赎", director: "弗兰克·德拉邦特", year: 1994 },
  { id: 2, name: "盗梦空间", director: "克里斯托弗·诺兰", year: 2010 },
  { id: 3, name: "阿甘正传", director: "罗伯特·泽米吉斯", year: 1994 },
  // ...省略部分数据...
];

3.2 显示电影列表

我们可以使用JavaScript动态生成电影列表，并将其添加到页面上的电影列表容器中。这里我们使用forEach()方法遍历电影列表数据，并使用字符串模板构建电影列表的HTML代码。

const movie_list = document.getElementById("movie-list");

function renderMovies(page = 0, per_page = 3) {
  const start = page * per_page;
  const end = start + per_page;
  const movies = movie_data.slice(start, end);

  movie_list.innerHTML = "";

  movies.forEach((movie) => {
    const movie_element = `
      <div>
        <h3>${movie.name}</h3>
        <p>导演：${movie.director}</p>
        <p>年份：${movie.year}</p>
      </div>
    `;
    movie_list.insertAdjacentHTML("beforeend", movie_element);
  });
}

其中renderMovies()函数接受两个参数：page表示当前页数，per_page表示每页显示的电影数量。使用slice()方法从电影列表中获取当前页需要展示的电影信息。

在电影列表生成完成后，我们要将其添加到页面上的电影列表容器中。使用innerHTML属性可以清空容器原有的内容，然后使用insertAdjacentHTML()方法在容器末尾添加电影列表HTML代码。

3.3 实现分页功能

为了实现分页功能，我们要监听上一页和下一页的点击事件，从而改变显示的电影列表页面。我们可以在HTML上选择两个按钮元素，并给它们分别绑定点击事件。

const prev_button = document.getElementById("prev");
const next_button = document.getElementById("next");

let page = 0;
const per_page = 3;

prev_button.addEventListener("click", () => {
  page--;
  renderMovies(page, per_page);
});

next_button.addEventListener("click", () => {
  page++;
  renderMovies(page, per_page);
});

我们在上一页和下一页按钮的点击事件处理函数中，分别减少或增加当前页数，然后再调用renderMovies()函数重新生成电影列表。

3.4 自定义每页显示电影数量

我们还可以在页面上添加一个下拉框元素，用来实现自定义每页显示的电影数量，代码如下：

<select id="per-page">
  <option value="3">每页显示 3 部电影</option>
  <option value="5">每页显示 5 部电影</option>
  <option value="10">每页显示 10 部电影</option>
</select>

然后，在JavaScript中添加下拉框的change事件监听函数，从而获取用户选择的每页显示电影数量，并重新生成显示的电影列表：

const per_page_selector = document.getElementById("per-page");

per_page_selector.addEventListener("change", () => {
  per_page = parseInt(per_page_selector.value);
  renderMovies(page, per_page);
});

示例

下面给出两个示例说明：

示例1：每页显示5部电影

在页头上添加一个下拉框元素，用来实现自定义每页显示的电影数量：

<header>
  <h1>电影列表</h1>
  <select id="per-page">
    <option value="3">每页显示 3 部电影</option>
    <option value="5" selected>每页显示 5 部电影</option>
    <option value="10">每页显示 10 部电影</option>
  </select>
</header>

然后在JavaScript中将每页默认显示数量改为5部电影：

const per_page = 5;

示例2：显示所有电影

在页头上添加一个按钮，用来显示所有电影：

<header>
  <h1>电影列表</h1>
  <button id="show-all">显示所有电影</button>
</header>

然后在JavaScript中重写renderMovies()函数，使其可以根据需要显示所有电影：

function renderMovies(page = 0, per_page = 0) {
  let movies = [];
  if (per_page <= 0) {
    per_page = movie_data.length;
  }
  movies = movie_data;

  // ...省略分页逻辑...

  movies.forEach((movie) => {
    // ...省略页面渲染逻辑...
  });
}

在处理函数中，如果用户选择的每页显示电影数量小于或等于0，则表示显示所有电影。然后使用movie_data数组中的所有元素构建电影列表。同时在显示所有电影的按钮点击事件处理函数中，将每页显示电影数量设置为0，并重新生成电影列表：

const show_all_button = document.getElementById("show-all");

show_all_button.addEventListener("click", () => {
  per_page = 0;
  renderMovies(page, per_page);
});