Vue项目入门教程10-搜索页面

系列文章:

新建页面组件

src/views/目录下新建文件search.vue

<template> <div> search </div> </template>

配置路由

修改src/router/routes.js文件,添加搜索页路由配置

// ... const Search = res => require(['@/views/search'], res) const routes = [ // ... { path: '/search', name: 'search', component: Search } ] export default routes

页面布局

搜索使用vuxSearch组件
组件的autoFixed设置成false

<template> <div class="page"> <search v-model="value" :autoFixed="false" @on-submit="onSubmit" ref="search"></search> <div class="container"> </div> <com-footer></com-footer> </div> </template> <script> import { Search, Badge, Panel } from 'vux' import comFooter from 'components/common/footer' // ... export default { // ... components: { Search, comFooter } } </script>

请求接口函数

src/api/目录下新建文件search.js,添加获取tag标签和搜索接口

import request from './request' // 获取tag标签 export function getTags() { return request({ url: '/search/tags', method: 'get' }) } // 根据关键字搜索文章列表 export function searchArticles(data) { return request({ url: '/search/lists', method: 'get', params: data }) }

获取Tag

src/views/search.vue文件中,添加获取tag方法

import { getTags } from 'api/search' // ... export default { // ... methods: { // ... getTags() { getTags().then(res => { this.tags = res.data }) } } }

created这个生命周期请求数据。

created() { this.getTags() }

搜索

Search组件的on-submit事件绑定处理方法:@on-submit="onSubmit"
添加文章列表的数据处理方法resultFormat
点击Tag,添加click时间处理方法:@click="handleTags(item)

onSubmit() { this.$refs.search.setBlur() this.page = 1 searchArticles({ keywords: this.value, page: this.page, size: this.size }).then(res => { this.list = this.resultFormat(res.data) if (this.list.length === 0) { this.$vux.toast.show({ type: 'text', position: 'top', text: '没有检索到结果' }) } }) }, handleTags(tag) { this.page = 1 searchArticles({ tag: tag.id, page: this.page, size: this.size }).then(res => { this.list = this.resultFormat(res.data) if (this.list.length === 0) { this.$toast({ message: '没有检索到结果', duration: 5000 }) } }) }, resultFormat(list) { return list.map((item) => { let obj = {} obj.title = item.title obj.desc = item.desc if (item.thumbnail !== '' && item.thumbnail !== null) { obj.src = this.$urlUpload + item.thumbnail } obj.url = `/article/${item.id}` return obj }) }

Vuex

每次点击搜索时,我们将搜索记录存到Vuex
演示Vuex存储过程

修改src/store/index.js文件
添加一个state,比如叫searchList,初始值为空数字
添加一个getter,用来获取该state
添加两个mutation吧,一个用来追加,一个用来设置

const state = { // ... searchList: [] } const getters = { // ... searchList: state => state.searchList } const mutations = { // ... addSearchList(state, obj) { state.searchList.push(obj) }, setSearchList(state, list) { state.searchList = list } }

修改src/views/search.vue文件
我们这里使用mapMutations来操作state
这里用this.$store.state.searchList获取对一个state,在我的页面中演示用mapGetters获取

// ... import { mapGetters, mapMutations } from 'vuex' export default { // ... methods: { ...mapMutations(['addSearchList', 'setSearchList']), // ... } // ... }

修改搜索的方法,在请求接口前,将搜索的关键字和时间戳追加到state

onSubmit() { this.addSearchList({ keywords: this.value, time: new Date().getTime() }) console.log(this.$store.state.searchList) // ... },

创作不易,若本文对你有帮助,欢迎打赏支持作者!

 分享给好友: