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

系列文章：

• Vue项目入门教程1-项目介绍
• Vue项目入门教程2-Vue-cli搭建项目
• Vue项目入门教程3-项目改造
• Vue项目入门教程4-插件安装
• Vue项目入门教程5-Svg图标
• Vue项目入门教程6-数据mock
• Vue项目入门教程7-首页布局
• Vue项目入门教程8-首页数据
• Vue项目入门教程9-文章详情页
• Vue项目入门教程10-搜索页面
• Vue项目入门教程11-我的页面及其他
• Vue项目入门教程12-打包发布

新建页面组件

在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)
  // ...
},