###
Vue 前台
输入框调用后台接口进行搜索
查询 示例
在
Vue 中实现通过
输入框调用后台接口进行搜索
查询，可以通过监听
输入框的变化，结合 `axios` 或其他 HTTP 请求库来完成与后端的交互。以下是完整的实现示例和说明。
####
输入框绑定与事件监听
使用 `v-model` 绑定
输入框的值，并通过 `@input` 事件监听
输入框的变化[^3]。
```html
<template>
<div>
<el-input
placeholder="请输入关键字"
v-model="searchQuery"
@input="handleSearch"
>
<template #append>
<el-button icon="el-icon-search" @click="handleSearch"></el-button>
</template>
</el-input>
<ul>
<li v-for="
(item, index
) in resultList" :key="index">
{{ item.name }}
</li>
</ul>
</div>
</template>
```
#### 定义
数据与逻辑
使用
Vue 的 `data` 定义搜索
查询、结果
列表等状态，并通过 `methods` 定义请求后端接口的逻辑[^2]。
```javascript
<script>
import axios from 'axios';
export default {
data
() {
return {
searchQuery: '', // 搜索框绑定的
数据
resultList: [] // 后端返回的搜索结果
};
},
methods: {
async handleSearch
() {
if
(this.searchQuery.trim
()) {
try {
const response = await axios.get
('/api/search', {
params: { query: this.searchQuery }
}
);
this.resultList = response.data; // 更新搜索结果
} catch
(error
) {
console.error
('搜索失败:', error
);
}
} else {
this.resultList = []; //
清空结果
列表
}
}
}
};
</script>
```
#### 添加防抖功能
为了减少不必要的请求，可以为
输入框添加防抖功能[^3]。
```javascript
<script>
import axios from 'axios';
import { debounce } from 'lodash';
export default {
data
() {
return {
searchQuery: '',
resultList: []
};
},
methods: {
async fetchData
(query
) {
if
(query.trim
()) {
try {
const response = await axios.get
('/api/search', {
params: { query }
}
);
this.resultList = response.data;
} catch
(error
) {
console.error
('搜索失败:', error
);
}
} else {
this.resultList = [];
}
},
handleSearch: debounce
(function
() {
this.fetchData
(this.searchQuery
);
}, 500
) // 防抖时间设置为500ms
}
};
</script>
```
#### 使用组合式 API（
Vue 3）
在
Vue 3 中，可以使用 `setup` 函数和组合式 API 来组织状态和逻辑[^1]。
```html
<template>
<div>
<el-input
placeholder="请输入关键字"
v-model="searchQuery"
@input="handleSearch"
>
<template #append>
<el-button icon="el-icon-search" @click="handleSearch"></el-button>
</template>
</el-input>
<ul>
<li v-for="
(item, index
) in resultList" :key="index">
{{ item.name }}
</li>
</ul>
</div>
</template>
<script>
import { ref } from '
vue';
import axios from 'axios';
import { debounce } from 'lodash';
export default {
setup
() {
const searchQuery = ref
(''
);
const resultList = ref
([]
);
const fetchData = async
(query
) => {
if
(query.trim
()) {
try {
const response = await axios.get
('/api/search', {
params: { query }
}
);
resultList.value = response.data;
} catch
(error
) {
console.error
('搜索失败:', error
);
}
} else {
resultList.value = [];
}
};
const handleSearch = debounce
(() => {
fetchData
(searchQuery.value
);
}, 500
);
return {
searchQuery,
resultList,
handleSearch
};
}
};
</script>
```
#### 处理
分页与加载更多
如果需要支持
分页或加载更多功能，可以在请求参数中加入
分页信息，并根据返回的
数据动态更新
列表[^1]。
```javascript
<script>
import axios from 'axios';
import { debounce } from 'lodash';
export default {
data
() {
return {
searchQuery: '',
resultList: [],
currentPage: 1,
pageSize: 10,
total: 0
};
},
methods: {
async fetchData
(query, page = 1
) {
if
(query.trim
()) {
try {
const response = await axios.get
('/api/search', {
params: { query, page, pageSize: this.pageSize }
}
);
this.resultList = response.data.list;
this.total = response.data.total;
} catch
(error
) {
console.error
('搜索失败:', error
);
}
} else {
this.resultList = [];
this.total = 0;
}
},
handleSearch: debounce
(function
() {
this.currentPage = 1;
this.fetchData
(this.searchQuery, this.currentPage
);
}, 500
),
loadMore
() {
this.currentPage += 1;
this.fetchData
(this.searchQuery, this.currentPage
);
}
}
};
</script>
```
扫一扫
6627
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
