10.4 实战：支持搜索和筛选的用户列表示例 -TypeScript和Vue从入门到精通(三)

当前位置:　首页>> 技术小册>> TypeScript和Vue从入门到精通(三)

### 10.4 实战：支持搜索和筛选的用户列表示例

在Web开发中，列表展示与数据操作是基础且核心的功能之一。本章节将深入探讨如何结合TypeScript和Vue.js框架，构建一个支持搜索和筛选功能的用户列表示例。我们将从项目初始化、数据模型定义、组件设计、逻辑实现到最终的界面展示，全面覆盖这一功能的开发过程。

#### 10.4.1 项目初始化与依赖安装

首先，确保你已经安装了Node.js和npm/yarn。接下来，我们将使用Vue CLI来快速搭建项目框架。如果尚未安装Vue CLI，可以通过npm全局安装：

```bash
npm install -g @vue/cli
# 或者使用yarn
yarn global add @vue/cli
```

然后，创建一个新的Vue项目，并添加TypeScript支持：

```bash
vue create vue-user-list-with-search-and-filter
# 在选择特性时，确保选中了TypeScript和Vuex（如果需要状态管理）
```

进入项目目录，并安装可能需要的额外依赖，如axios用于HTTP请求（模拟从服务器获取数据）：

```bash
cd vue-user-list-with-search-and-filter
npm install axios
# 或者使用yarn
yarn add axios
```

#### 10.4.2 数据模型定义

在TypeScript中，我们首先定义用户的数据模型。在`src/types`目录下创建一个`User.ts`文件（如果没有`types`目录，请自行创建）：

```typescript
// src/types/User.ts
export interface User {
  id: number;
  name: string;
  email: string;
  age: number;
  // 可以根据需要添加更多字段
}
```

#### 10.4.3 组件结构设计

对于本示例，我们将主要关注三个组件：

1. **UserList.vue**：主列表组件，负责展示用户列表，并包含搜索和筛选功能。
2. **UserItem.vue**：单个用户项的组件，用于渲染每个用户的数据。
3. **SearchAndFilter.vue**（可选）：一个可复用的搜索和筛选表单组件，如果列表功能复杂，可单独封装。

#### 10.4.4 UserList.vue 实现

在`src/components`目录下创建`UserList.vue`。此组件将包含数据获取逻辑、搜索逻辑、筛选逻辑以及用户列表的渲染。

```vue
<template>
  <div>
    <input type="text" v-model="searchQuery" placeholder="Search users...">
    
    <select v-model="ageFilter">
      <option value="">All Ages</option>
      <option value="18">18+</option>
      <option value="25">25+</option>
      
    </select>

export default defineComponent({
  name: 'UserList',
  components: {
    UserItem: () => import('./UserItem.vue')
  },
  setup() {
    const users = ref<User[]>([]);
    const searchQuery = ref('');
    const ageFilter = ref('');

// 假设函数fetchUsers从API获取用户数据
    const fetchUsers = async () => {
      // 模拟API请求
      const response = await axios.get('https://jsonplaceholder.typicode.com/users');
      users.value = response.data as User[];
    };

// 组件挂载时获取数据
    fetchUsers();

// 计算属性，用于过滤用户列表
    const filteredUsers = computed(() => {
      return users.value.filter(user => {
        if (searchQuery.value.trim() !== '') {
          // 搜索功能，这里简单使用name和email包含搜索词
          return user.name.toLowerCase().includes(searchQuery.value.toLowerCase()) ||
                 user.email.toLowerCase().includes(searchQuery.value.toLowerCase());
        }
        if (ageFilter.value !== '') {
          // 筛选功能
          return user.age >= parseInt(ageFilter.value, 10);
        }
        // 无搜索和筛选时，返回所有用户
        return true;
      });
    });

return { users, searchQuery, ageFilter, filteredUsers };
  }
});
</script>
```

#### 10.4.5 UserItem.vue 实现

接下来，创建`UserItem.vue`来展示单个用户的信息。

```vue
<template>
  <li>{{ user.name }} - {{ user.email }} (Age: {{ user.age }})</li>
</template>

export default defineComponent({
  name: 'UserItem',
  props: {
    user: {
      type: Object as PropType<User>,
      required: true
    }
  }
});
</script>
```

#### 10.4.6 样式与响应式优化

为了提升用户体验，你可以为`UserList.vue`和`UserItem.vue`添加CSS样式。此外，考虑到性能和响应式，确保在数据量大时优化列表渲染，比如使用虚拟滚动等技术。

#### 10.4.7 测试与调试

在开发过程中，不断进行测试和调试是非常重要的。你可以使用Vue Devtools这样的浏览器扩展来帮助你检查和调试Vue组件。同时，编写单元测试（如使用Jest和Vue Test Utils）也是保证代码质量的有效手段。

#### 10.4.8 总结

通过本章节的实战示例，我们学习了如何在Vue.js和TypeScript环境下，构建一个支持搜索和筛选功能的用户列表示例。我们涵盖了从项目初始化、数据模型定义、组件设计到逻辑实现的全过程，并简单讨论了样式和响应式优化以及测试与调试的重要性。希望这个示例能帮助你更好地理解和应用Vue.js和TypeScript在Web开发中的强大功能。

该分类下的相关小册推荐：

Vue.js从入门到精通(二)

Vue.js从入门到精通(一)

Vue.js从入门到精通(三)

TypeScript和Vue从入门到精通(二)

Vue.js从入门到精通(四)

VUE组件基础与实战

移动端开发指南

Vue3技术解密

vuejs组件实例与底层原理精讲

Vue原理与源码解析

vue项目构建基础入门与实战

Vue面试指南