系列文章:
新建页面组件
在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
页面布局
搜索使用vux
的Search
组件
组件的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)
// ...
},
发表评论