vue项目实现搜索功能

使用vue框架实现以下要求：

1、点击“首页“顶部搜索框，通过路由跳转到搜索页，并实现关键字模糊搜索功能

2、搜索页和首页下面用到的JSON数据自行模拟，并正确搜索渲染出来

3、在搜索页保留每次的搜索历史关键字，在搜索页的“历史搜索”中显示出来，最多展现出3个

4、点击搜索框左上角的箭头，可以历史回退到首页

5、点击删除，清空历史记录

流程：1、先全局安装vue（3.0版本）

安装vue命令：npm i @vue/cli -g

安装完后使用vue -V 检查vue的版本号

如果你嫌弃使用npm下载速度（服务器在国外），可以使用淘宝镜像（cnpm）下载，

首先安装淘宝镜像，cnpm才可以使用。

安装cnpm命令：npm install -g cnpm --registry=https://registry.npm.taobao.org

接着你就可以使用cnpm安装vue: cnpm i @vue/cli -g

2、创建一个项目

指令：vue create 项目名

如：vue create demo

创建完成后输入指令： cd demo //进入demo文件夹

安装需要用到的模块（vant、axios）

安装vant指令： cnpm i vant -save

安装axios指令： cnpm i axios --save

3、安装好项目所用的依赖包后，执行npm run serve 指令启动项目

4、打开项目，找到src文件夹下的main.js文件，打开引入vant 、axios模块

import Vant from 'vant';  //引入vant模块

import 'vant/lib/index.css'; //引入vant样式

Vue.use(Vant); //使用vant

import axios from "axios"; //引入axios模块

Vue.prototype.$axios=axios;  //全局引入axios

5、将APP.vue中的内容注释或者删除成下面格式：

<template>

  <div id="app">

    <router-view/>

  </div>

</template>

6、如果不使用views（组件）内的Home.vue和About.vue可以删掉自己创建，

如果删掉，在router（路由文件夹）下index.js中删掉 import Home from '../views/Home.vue'；

如果使用Home/About组件改为下面格式：

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

<script>
export default {
  
}
</script>

<style scoped>

</style>

配置路由：找到router文件夹下的index.js,具体路由配置如下：

import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../views/Home.vue'

Vue.use(VueRouter)

  const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home
  },
  {
    path: '/about',
    name: 'About',
    component: () => import('../views/About.vue')
  },
  {
    path: '/searchResult',
    name: 'searchResult',
    component: () => import('../views/searchResult.vue')
  }
]
const router = new VueRouter({
  routes
})

export default router

7、在Home.vue写跳转（获取焦点时触发事件）,内容如下：

<template>
  <div>
      <!-- search 搜索 -->
      <van-search placeholder="请输入搜索关键词" @focus="skip"/>
      <!-- 获取焦点事件 -->
      <!-- 注：@符号，是v-on的简写 事件绑定 -->
  </div>
</template>

<script>
export default {
  methods: {//事件方法
    skip(){//点击跳转搜索页面
      this.$router.push({
        path:"/About" //跳转到search.vue组件
      })
    }
  },
}
</script>

<style scoped>
</style>

8、在这里是自己写的json文件，在public文件夹下创建一个data.json文件，内容如下：

{
    "data": [{
            "img": "http://img10.360buyimg.com/mobilecms/s372x372_jfs/t1/107731/30/17594/128560/5eba1306E936bf76c/67c1b3f0811d4aad.jpg!q70.dpg.webp",
            "title": "空气循环扇"
        },
        {
            "img": "http://img14.360buyimg.com/mobilecms/s372x372_jfs/t1/144748/18/2025/197309/5efed6acEfda6e78b/a9c0fe200236e109.png.webp",
            "title": "语音鼠标"
        },
        {
            "img": "http://img14.360buyimg.com/mobilecms/s372x372_jfs/t1/149120/14/4563/205634/5f290affEe4b665e0/8516912f4c76bde5.jpg!q70.dpg.webp",
            "title": "沐浴露"
        },
        {
            "img": "http://img13.360buyimg.com/mobilecms/s372x372_jfs/t1/48916/34/14957/190813/5dbeae56E705d7279/6ebd871f40b96a83.jpg!q70.dpg.webp",
            "title": "机械手表"
        },
        {
            "img": "http://img10.360buyimg.com/mobilecms/s372x372_jfs/t1/100792/2/19183/141569/5e9bbedaE11c1dffb/1c71532df00d755a.jpg!q70.dpg.webp",
            "title": "护眼床头灯"
        }
    ],
    "list": [
        "空气循环扇",
        "语音鼠标",
        "沐浴露",
        "机械手表",
        "护眼床头灯"
    ]
}

9、在About.vue组件中，内容如下：

<template>
  <div>

    <form action="/">
      <van-search
        v-model="value"
        show-action
        placeholder="请输入搜索关键词"
        @search="onSearch"
        @input="change"
      />
    </form>
    <van-cell-group v-show="value!=''">
      <van-cell v-for="(item,index) in zhineng" :key="index" :title="item" @click="clickTit(item)" />
    </van-cell-group>
    <div v-show="value==''">
        <van-cell-group>
      <van-cell title="搜素历史">
        <template #right-icon>
          <div class="item-delete">
            <van-icon name="delete" @click="del" />
          </div>
        </template>
      </van-cell>
    </van-cell-group>
    <div>
      <van-tag
        plain
        type="primary"
        v-for="(item,index) in histroy"
        :key="index"
        style="margin-left:8px"
        @click="clickHistroy(item)"
      >{{item}}</van-tag>
    </div>
    </div>
    
  </div>
</template>

<script>
export default {
  data() {
    return {
      imgShow:true,//进入页面是的状态，默认显示
      value: "", //输入搜索的关键字
      histroy: [], //存放搜索历史关键字
      zhineng: [], //智能提示
    };
  },
  mounted() {
    //挂载
    this.histroy = JSON.parse(localStorage.getItem("histroy")) || [];
  },
  methods: {
    onSearch(val) {
      //确定搜索时触发（并把关键字传到搜索列表中）
      // 判断输入内容不能为空
      if (this.value.trim() == "") {
        return false;
      }
      // 添加
      let rel = true;
      // 判断去重
      this.histroy.map((item) => {
        if (item == this.value) {
          rel = false;
        }
      });

      // 搜索历史在页面最多显示3条
      if (rel) {
        if (this.histroy.length >= 3) {
          this.histroy.pop(); //数组末尾删除
          this.histroy.unshift(this.value);
        } else {
          this.histroy.unshift(this.value);
        }
      }
      this.save();

      //   跳转页面并传参数到搜索列表页中
      this.$router.push({
        path: "/searchList",
        query: {
          kw: this.value,
        },
      });
      this.value = ""; //添加后清空
    },
    clickTit(item){//点击智能提示
        this.value=item;
        this.onSearch();
    },
    clickHistroy(item){//点击搜索记录
        this.value=item;
        this.onSearch();
    },
    del() {
      //清空（删除历史记录）
      this.$dialog
        .confirm({
          message: "你确定要清空历史记录吗？",
        })
        .then(() => {
          this.histroy = [];
          localStorage.removeItem("histroy");
        })
        .catch(() => {});
    },
    change() {
      //智能事件
      this.zhineng=[];
      this.$axios.get("http://localhost:8080/data.json").then((res) => {
        let lists= res.data.list;
        lists.map(item=>{
            if(item.includes(this.value)){
                this.zhineng.push(item);
            }
        })
      });
    },
    save() {
      //保存到本地
      localStorage.setItem("histroy", JSON.stringify(this.histroy));
    },
  },
};
</script>

<style scoped>
</style>

10、在views文件夹下创建searchResult.vue组件，具体内容如下：

<template>
  <div>
    <van-nav-bar title="搜索列表" left-arrow @click-left="onClickLeft" />
    <van-card v-for="(item,index) in selChange" :key="index" :thumb="item.img">
      <template #title>
        <div class="item-title">{{item.title}}</div>
      </template>
    </van-card>
  </div>
</template>

<script>
export default {
  data() {
    return {
      kw: this.$route.query.kw, //搜索关键字
      list: [], //所有数据
    };
  },
  mounted() {//挂载
    // 请求数据
    this.$axios.get("http://localhost:8080/data.json").then((res) => {
      this.list = res.data.data;
    });
  },
  methods: {
    onClickLeft() {
      //返回搜索首页
      this.$router.push({
        path: "/About",
      });
    },
  },
  computed: {//计算属性
    selChange() {
      // 把请求回来的数据过滤，然后显示
      var news = this.list.filter((item) => {
        if (item.title.indexOf(this.kw) != -1) {
          return item;
        }
      });
      return news;
    },
  },
};
</script>

<style scoped>
.item-title {
  height: 88px;
  font-size: 18px;
  /* background: red; */
  display: flex;
  align-items: center;
}
</style>

原文链接：https://blog.csdn.net/yycnf/article/details/107848541