4.爱收藏——首页搜索功能实现

Posted leanfish

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了4.爱收藏——首页搜索功能实现相关的知识,希望对你有一定的参考价值。

一、需求

  1. 随着收藏的网站增多,查找网站功能必不可少。
  2. 需要在主页收藏的网站中搜索。
  3. 能够在网站名称、网站简介、网站标签中根据关键词搜索。
  4. 单独开启搜索页面。
  5. 用户输入的关键词,在命中的结果中突出显示。

二、概要设计

  1. 首页头部增加搜索框、搜索按钮。 
  2. 用户未输入关键词,点击搜索按钮,则提示用户输入关键词。
  3. 携带关键词跳转到搜索页面。
  4. 在搜索页面,给后端传递关键词。
  5. 根据关键词进行搜索。
  6. 前端拿到返回结果,标记关键词。

  流程图:

   技术图片

三、详细设计

3.1搜索功能

  搜索,有两个参数传递路径。

  (1)首页的搜索,关键词通过url传递,搜索页面在创建时,获取url参数,调用搜索方法。

  (2)搜索页面header的搜索,关键词通过$emit传递到父组件,再调用搜索方法。

  1、首页,菜单模块,未输入关键词,则弹出提示。代码如下:

        let keyword = this.searchForm.keyword.trim();
        if (keyword == "") {
          this.$message.warning("请输入关键词!");
          return;
        }

  2、点击搜索按钮,携带关键词,跳转到搜索页面。关键词使用url传递,query方式,则关键词在url上。代码如下:

        //url中传递参数
        this.$router.push({path: "/search", query: {keyword: keyword}});

  3、搜索页面,在页面创建之前,从url中获取关键词参数。代码如下:

    created() {
      //从url中获取参数
      let keyword = this.$route.query.keyword.trim();
    },

  4、搜索页面的header是单独的,header带有搜索框和搜索按钮。为了在搜索框中显示主页携带过来的关键词,搜索页面需要获取关键词并显示。代码如下:

    mounted() {
      //搜索框显示主页传递过来的关键词
      let keyword = this.$route.query.keyword;
      this.searchForm.keyword = keyword;
    }

  5、搜索页面header中搜索功能的实现。搜索页面展示搜索结果,搜索header提供搜索功能。搜索页面引入搜索header,搜索header是子组件,点击搜索header中的搜索按钮,就需要调用父组件中的方法。

    搜索header中调用父组件中的方法代码如下:

      search() {
        let keyword = this.searchForm.keyword.trim();
        if (keyword == "") {
          this.$message.warning("请输入关键词!");
          return;
        }

        //子组件调用父组件方法
        this.$emit(‘search‘, keyword);
      }

  需要调用父组件中的search方法。父组件在引用子组件时进行监听。代码如下:

<search-header @search="onSearch"></search-header>

  父组件需要实现onSearch方法,获取参数,并调用后端方法,代码如下:

      onSearch(keyword) {
        this.searchForm.keyword = keyword;
        this.$axios.get(Service.url.search, {
          params: this.searchForm
        }).then((res) => {
          if (res.status === 200) {
            let responseData = res.data;
            if (responseData.code === 0) {
              this.myDataList = responseData.data;
            } else {
              this.$message.error(responseData.msg);
            }
          } else {
            this.$message.error("系统内部错误");
          }
        }).catch(function (error) {
          console.error(error);
        });
      }

  6、后端搜索功能实现。目前数据量较小,网站数据存储在mysql中,使用mysql进行检索,按照name、remark、tag进行like匹配。后续计划使用ElasticSearch实现全文检索。

 3.2 关键词高亮

  返回结果需要标示出关键词。

   1、返回的结果,使用关键词去匹配,匹配成功,则将原关键词替换成带css样式的字符。代码如下:

      highlight(content) {
        if (content == null || content == "") {
          return;
        }

        let keyword = this.searchForm.keyword;
        // 匹配关键字正则
        let replaceReg = new RegExp(keyword, ‘g‘);
        // 高亮替换v-html
        let replaceString = ‘<span style="color: red;">‘ + keyword + ‘</span>‘;
        // 开始替换
        return content.replace(replaceReg, replaceString);
      }

  2、html代码中调用高亮方法。代码如下:

<div class="remark" v-html="highlight(item.remark)"></div>

  

以上是关于4.爱收藏——首页搜索功能实现的主要内容,如果未能解决你的问题,请参考以下文章

js实现收藏,首页等功能

如何实现加入收藏设为首页保存到桌面的方法功能

Eclipse+Java+Swing+Mysql实现电影购票系统建议收藏

阶段一-02.分类,推荐,搜索,评价,购物车开发-第1章 首页轮播图+分类功能实现-1-4 分类实现 - 自连接查询子分类

阶段一-02.分类,推荐,搜索,评价,购物车开发-第1章 首页轮播图+分类功能实现-1-1 实现电商首页轮播图功能

Eclipse+Java+Swing+Mysql实现进销存管理系统建议收藏