搜索页

技术点

localStorage 自定义 v-model 单个input表单的回车事件处理 $emit debounce 函数使用 axios 实例化 axios 取消请求

目录结构

└─ src                          
   └─ views                
      └─ search                         # 搜索页
         ├─ components                  # 组件
         │  ├─ SearchBar.vue            # 搜索栏
         │  ├─ SearchHistory.vue        # 历史记录
         │  └─ searchResult.vue         # 搜索结果
         └─ index.vue                   # 搜索入口页

介绍

用户输入需要查询的内容时，组件监听 input 事件，对输入内容进行查询，查询接口调用前，会先 debounce 以待用户输入完成后再触发请求。如果请求结果未返回时，再次触发接口请求，则取消上次请求。

自定义 v-model

该页面的 SearchBar 组件，使用了自定义 v-model ，实现代码如下：

<input
	ref="input"
	type="search"
	:value="value"
	@keyup.enter.prevent="noop($event)"
	@input="$emit('input', $event.target.value)"
	placeholder="找影视 / 影人 / 角色"
/>

其中 $emit('input', $event.target.value) 方法，将输入内容通过自定义事件传递给父组件

props: {
	value: String,
},

使用

<search-bar
	v-model="keyword"
	@keyword-change="storageKeyword"
	@on-clear="clearKeyword()"
/>

表单回车事件

当 form 表单中只有一个 type="text" 的 input 标签时，点击回车会触发表单提交，该事件会导致页面刷新，在 vue 中，需要给表单增加 <form @submit.prevent> 事件阻止表单提交

axios 取消请求

本文只说明本项目中的使用方式，更多使用方法，请阅读文档 (opens new window)

import axios from "axios";

data() {
	return {
		cancel: null, // axios 取消请求方法
	}
},

methods: {
	async search() {
		let CancelToken = axios.CancelToken;
		let _this = this;

		// 如果取消请求方法存在，则执行取消
		if (this.cancel) {
			this.cancel();
		}

		// 请求参数
		let params = {
			page,
			keyword: this.keyword,
			type: this.type,
		};

		const { code, data, total } = await axios.get(`/search`, {
			params,
			// 创建 cancel token
			cancelToken: new CancelToken(function executor(c) {
					_this.cancel = c;
			}),
		})
	}
}