登录
当前位置： 首页 > 编程笔记 >

vue搜索页开发实例代码详解（热门搜索，历史搜索，淘宝接口演示）

叶智
2023-03-14
本文向大家介绍vue搜索页开发实例代码详解（热门搜索，历史搜索，淘宝接口演示），包括了vue搜索页开发实例代码详解（热门搜索，历史搜索，淘宝接口演示）的使用技巧和注意事项，需要的朋友参考一下

完整效果演示

首先完成这个伪搜索框

src/components/search/index.vue （通用搜索框组件）

<template>
 <div class="mine-search-box-wrapper">
  <i class="iconfont icon-search"></i>
  <div class="mine-search-box" v-if="fake">{{placeholder}}</div>
  <input
   class="mine-search-box"
   type="text"
   title="搜索框"
   :placeholder="placeholder"
   ref="input"
   v-model="query"
   v-if="!fake"
  >
  <i
   class="iconfont icon-close"
   v-show="query"
   @click="reset"
  ></i>
 </div>
</template>

<script>
import {debounde} from 'assets/js/util';


export default {
  name:'Search',
  props:{//接收的参数
    placeholder:{
      type:String,
      default:'请输入搜索内容'
    },
    fake:{
      type:Boolean,
      default:false
    }
  },
  data(){
    return{
      query:'',
    }
  },
  watch:{
    query:debounde(function(){
      this.$emit('query',this.query);
    })
  },
  methods:{
    focus(){
      this.$refs.input && this.$refs.input.focus();
    },
    clear(){
      this.query='';
    },
    reset(){//重置
      this.clear();
      this.focus();
    }
  }
}
</script>

<style lang="scss" scoped>
  $search-box-height: 30px;
  $icon-color: #ccc;
  $icon-font-size-sm: 18px;

 .mine-search-box-wrapper {
  display: flex;
  align-items: center;
  width: 85%;
  height: $search-box-height;
  padding: 0 7px;
  background-color: #fff;
  border-radius: $search-box-height / 2;
  margin-left:15px;
 }

 .iconfont {
  color: $icon-color;
  font-size: $icon-font-size-sm;
  font-weight: bold;
 }

 .mine-search-box {
  flex: 1;
  background: none;
  border: none;
  margin: 0 6px;
  color: #666;
  line-height: 1.5;
 }
</style>

src/assets/js/util.js  节流函数（防止请求数据时频率过快消耗性能）

//函数节流
export const debounde=(func,delay=200)=>{
  let timer=null;

  return function(...args){
    timer && clearTimeout(timer);

    timer=setTimeout(()=>{
      func.apply(this,args);
    },delay);
  }
}

在分类页的头部组件中引入搜索框组件

src/pages/category/header.vue

<template>
  <div class="header">
    <i class="iconfont icon-scan header-left"></i>
    <div class="header-center">
      <search placeholder="开学季有礼，好货五折起" @query='getQuery' fake @click.native="goToSearch" />
    </div>
    <i class="iconfont icon-msg header-right"></i>
  </div>
</template>

<script>
import Search from 'components/search';

export default {
  name:'CategoryHeader',
  components:{
    Search
  },
  methods:{
    getQuery(query){
      console.log(query);
    },
    goToSearch(){
      this.$router.push('/search');
    }
  }
}
</script>

<style lang="scss" scoped>
  .header{
    background-color:rgba(222, 24, 27, 0.9);
    transition:background-color 0.5s;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding:5px 20px;

    .iconfont{
      font-size:24px;
      color:#fff;
    }

    .header-center{
      flex:1;
    }
  } 
</style>

点击搜索框之后会跳转到真正的搜索页

热门搜索组件

src/pages/search/hot.vue

<template>
 <div class="hot">
  <h4 class="hot-title">热门搜索</h4>
  <div class="loading-container" v-if="!hots.length">
   <me-loading/>
  </div>
  <ul class="hot-list" v-else>
   <li class="hot-item" v-for="(item,index) in hots" :key="index" @click="$_selectItem(item.hotWord)">
     {{item.hotWord}}
   </li>
  </ul>
 </div>
</template>

<script>
import Search from 'components/search';
import MeLoading from 'components/loading';
import {getHot} from 'api/search';
import {searchMixin} from 'api/mixins';

export default {
  name:'SearchHot',
  components:{
    MeLoading
  },
  data(){
    return{
      hots:[]
    }
  },
  mixins:[searchMixin],
  created(){
    this.getHot().then(()=>{
      this.$emit('loaded');
    })
  },
  methods:{
    getHot(){
      return getHot().then(data=>{
        return new Promise(resolve=>{
          if(data){
            this.hots=data;
            resolve();
          }
        })
      })
    }
  }
}
</script>

<style lang="scss" scoped>
$border-color: #e5e5e5;
$font-size-base: 12px;
$font-size-l: $font-size-base + 2;

 .hot {
  padding-left: 10px;
  background-color: #fff;
  border-bottom: 1px solid $border-color;
  margin-bottom: 10px;

  &-title {
   height: 34px;
   line-height: 34px;
   font-size: $font-size-l;
   font-weight: bold;
  }

  &-list {
   display: flex;
   flex-wrap: wrap;
  }

  &-item {
   padding: 8px;
   background-color: #f0f2f5;
   border-radius: 4px;
   margin: 0 10px 10px 0;
   color: #686868;
  }
 }

 .loading-container {
  padding: 10px 0;
 }
</style>

axios获取热门搜索数据

src/api/search.js

import axios from 'axios';

//获取热门搜索数据 ajax
export const getHot=()=>{
  return axios.get('http://www.imooc.com/api/search/hot').then(res=>{
    
    res=res.data.hotKeyWord;
    if(res && res.owner){
      return res.owner;
    }
    throw new Error('没有成功获取到数据');

  }).catch(err=>{
    console.log(err);
  });
}

点击搜索的关键词，跳转到淘宝搜索程序

src/api/mixins.js

import storage from 'assets/js/storage';
import {SEARCH_HISTORY_KEYWORD_KEY} from 'pages/search/config';

export const searchMixin={
  methods:{
    $_selectItem(keyword){
      let keywords=storage.get(SEARCH_HISTORY_KEYWORD_KEY,[]);//找到所有搜索历史
 
       if(keywords.length!=0){
         keywords=keywords.filter(val=>val!=keyword);//这次的关键词如果在搜索历史里已存在，先剔除掉
       }
 
       keywords.unshift(keyword);//把这次的关键词放在搜索历史的最开头
      
      storage.set(SEARCH_HISTORY_KEYWORD_KEY,keywords);//更新搜索历史
 
      //跳转到淘宝搜索页
      location.href = `https://s.m.taobao.com/h5?event_submit_do_new_search_auction=1&_input_charset=utf-8&topSearch=1&atype=b&searchfrom=1&action=home%3Aredirect_app_action&from=1&sst=1&n=20&buying=buyitnow&q=${keyword}`;
    }
  }
}

本地存储文件 assets/js/storage.js

const storage = window.localStorage;

export default {
 set(key, val) {
  if (val === undefined) {
   return;
  }
  storage.setItem(key, serialize(val));
 },
 get(key, def) {
  const val = deserialize(storage.getItem(key));
  return val === undefined ? def : val;
 },
 remove(key) {
  storage.removeItem(key);
 },
 clear() {
  storage.clear();
 }
};

function serialize(val) {
 return JSON.stringify(val);
}

function deserialize(val) {
 if (typeof val !== 'string') {
  return undefined;
 }
 try {
  return JSON.parse(val);
 } catch (e) {
  return val || undefined;
 }
}

 搜索页配置文件 src/pages/search/config.js

const prefix = 'mall-search';
const suffix = 'key';
export const SEARCH_HISTORY_KEYWORD_KEY = `${prefix}-history-keyword-${suffix}`;

历史搜索组件

src/pages/search/history.vue

<template>
 <div class="history" v-if="historys.length">
  <h4 class="history-title">历史搜索</h4>
  <transition-group class="g-list" tag="ul" name="list">
   <li class="g-list-item" v-for="item in historys" :key="item" @click="$_selectItem(item)">
     <span class="g-list-text">{{item}}</span>
     <!-- .stop 禁止事件冒泡 -->
     <i class="iconfont icon-delete" @click.stop="removeItem(item)"></i>
   </li>
  </transition-group>
  <a href="javascript:;" rel="external nofollow" class="history-btn" @click="showConfirm">
    <i class="iconfont icon-clear" ></i>
    清空历史搜索
  </a>
 </div>
</template>

<script>
import storage from 'assets/js/storage';
import {SEARCH_HISTORY_KEYWORD_KEY} from 'pages/search/config';
import {searchMixin} from 'api/mixins';


export default {
  name:'SearchHistory',
  data(){
    return{
      historys:[]
    }
  },
  mixins:[searchMixin],
  created(){
    this.getKeyword();
  },
  methods:{
    update(){
     this.getKeyword();
    },
    getKeyword(){
      this.historys=storage.get(SEARCH_HISTORY_KEYWORD_KEY,[]);
      this.$emit('loaded');
    },
    removeItem(item){
     this.historys=this.historys.filter(val=>val!==item);//点击后删除该项
     storage.set(SEARCH_HISTORY_KEYWORD_KEY,this.historys);//更新缓存
     this.$emit('remove-item');
    },
    showConfirm(){
     this.$emit('show-confirm');
    },
    clear(){
     storage.remove(SEARCH_HISTORY_KEYWORD_KEY);
    }
  }
}
</script>

<style lang="scss" scoped>

  $border-color: #e5e5e5;
  $font-size-base: 12px;
  $font-size-l: $font-size-base + 2;
  $border-color: #e5e5e5;

  @mixin flex-center($direction: row) {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: $direction;
  }

 .history {
  padding-bottom: 30px;
  background-color: #fff;

  &-title {
   height: 34px;
   line-height: 34px;
   padding: 0 10px;
   font-size: $font-size-l;
   font-weight: bold;
  }

  &-btn {
   @include flex-center();
   width: 80%;
   height: 40px;
   background: none;
   border: 1px solid #ccc;
   border-radius: 4px;
   margin: 0 auto;
   color: #686868;

   .iconfont {
    margin-right: 5px;
   }
  }
 }

 .g-list {
  border-top: 1px solid $border-color;
  border-bottom: 1px solid $border-color;
  margin-bottom: 20px;
 }

 .list {
  &-enter-active,
  &-leave-active {
   transition: height 0.1s;
  }

  &-enter,
  &-leave-to {
   height: 0;
  }
 }

</style>

列表样式统一抽离出去

src/assets/scss/_list.scss

// list
@mixin flex-between() {
  display: flex;
  justify-content: space-between;
  align-items: center;
 }

//ellipsis
@mixin ellipsis() {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
 }

 $border-color: #e5e5e5;
 
.g-list {
 padding-left: 10px;
}
.g-list-item {
 overflow: hidden;
 @include flex-between();
 height: 44px;
 padding-right: 10px;
 border-bottom: 1px solid $border-color;
 color: #686868;

 &:last-child {
  border-bottom: none;
 }
}
.g-list-text {
 flex: 1;
 line-height: 1.5;
 @include ellipsis();
}

src/assets/scss/index.scss

@import 'icons';
@import 'list';

*{
  margin:0;
  padding:0;
}
html,body{
  // 必须设置，否则内容滚动效果无法实现
  width:100%;
  height:100%;
}
ul,li{
  list-style:none;
}
a{
  text-decoration: none;
  color:#333;
}

确认框组件

src/components/comfirm/index.vue

<template>
  <transition name="mine-confirm">
    <div class="mine-confirm-wrapper" v-show="visible">
      <div class="mine-confirm">
        <div class="mine-confirm-title">{{title}}</div>
        <div class="mine-confirm-msg">{{msg}}</div>
        <div class="mine-confirm-btns">
          <button class="mine-confirm-btn mine-confirm-cancel" @click="cancel">{{cancelBtnText}}</button>
          <button class="mine-confirm-btn mine-confirm-ok" @click="confirm">{{confirmBtnText}}</button>
        </div>
      </div>
    </div>
  </transition>
</template>

<script>
export default {
  name:'MineConfirm',
  props:{
    title:{
      type:String,
      default:''
    },
    msg:{
      type:String,
      default:'确定执行此操作吗？'
    },
    cancelBtnText:{
      type:String,
      default:'取消'
    },
    confirmBtnText:{
      type:String,
      default:'确定'
    }
  },
  data(){
    return{
      visible:false
    }
  },
  methods:{
    show(){
      this.visible=true;
    },
    hide(){
      this.visible=false;
    },
    cancel(){
      this.hide();
      this.$emit('cancel');
    },
    confirm(){
      this.hide();
      this.$emit('confirm');
    }
  }
}
</script>

<style lang="scss" scoped>

$search-z-index: 1200;
$search-popup-z-index: $search-z-index + 10;
$modal-bgc: rgba(0, 0, 0, 0.4);

@mixin flex-center($direction: row) {
 display: flex;
 justify-content: center;
 align-items: center;
 flex-direction: $direction;
}
@mixin ellipsis() {
 overflow: hidden;
 text-overflow: ellipsis;
 white-space: nowrap;
}

 .mine-confirm-wrapper {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: $search-popup-z-index;
  @include flex-center();
  background-color: $modal-bgc;
 }

 .mine-confirm {
  overflow: hidden;
  width: 88%;
  background-color: #fff;
  border-radius: 10px;
  font-size: 16px;

  &-title {
   padding: 20px 15px 0;
   font-size: 18px;
   text-align: center;
   @include ellipsis();

   & + .mine-confirm-msg {
    padding-top: 20px;
    padding-bottom: 20px;
   }
  }

  &-msg {
   padding: 40px 15px;
   text-align: center;
   line-height: 1.5;
  }

  &-btns {
   display: flex;
  }

  &-btn {
   flex: 1;
   height: 44px;
   line-height: 44px;
   background: none;
   border: none;
  }

  &-cancel {
   border-top: 1px solid #e3e5e9;
  }

  &-ok {
   background-color: #f23030;
   color: #fff;
  }
 }

 .mine-confirm {
  &-enter-active,
  &-leave-active {
   transition: opacity 0.3s;
  }

  &-enter,
  &-leave-to {
   opacity: 0;
  }

  &-enter-active {
   .mine-confirm {
    animation: bounce-in 0.3s;
   }
  }
 }

 // https://cn.vuejs.org/v2/guide/transitions.html#CSS-动画
 @keyframes bounce-in {
  0% {
   transform: scale(0);
  }
  50% {
   transform: scale(1.1);
  }
  100% {
   transform: scale(1);
  }
 }
</style>

 搜索结果页

src/pages/search/result.vue

<template>
  <div class="result">
  <div class="loading-container" v-show="loading">
   <me-loading/>
  </div>
  <ul class="g-list" v-show="!loading && results.length">
   <li
    class="g-list-item"
    v-for="(item, index) in results"
    :key="index"
    @click="$_selectItem(item[0])"
   >
    <span class="g-list-text">{{item[0]}}</span>
   </li>
  </ul>
  <div class="no-result" v-show="!loading && !results.length">没有结果</div>
 </div>
</template>

<script>
 import MeLoading from 'components/loading';
 import {getSearchResult} from 'api/search';
 import {searchMixin} from 'api/mixins';

export default {
  name:'SearchResult',
  components:{
    MeLoading
  },
  data(){
    return{
      results:[],
      loading:false
    }
  },
  props:{
    query:{
      type:String,
      default:''
    }
  },
  mixins:[searchMixin],
  watch:{
    query(query){
      
      this.getResults(query);
    }
  },
  methods:{
    getResults(keyword){
      if(!keyword){
        return;
      }

      this.loading=true;
      getSearchResult(keyword).then(data=>{
        console.log(data);
        if(data){
          
          this.results=data;
          this.loading=false;
        }
      })
    }
  }
}
</script>

修改src/api/search.js

import axios from 'axios';
import jsonp from 'assets/js/jsonp';

//获取热门搜索数据 ajax
export const getHot=()=>{
  return axios.get('http://www.imooc.com/api/search/hot').then(res=>{
    
    res=res.data.hotKeyWord;
    if(res && res.owner){
      return res.owner;
    }
    throw new Error('没有成功获取到数据');

  }).catch(err=>{
    console.log(err);
  });
}

//获取搜索框的搜索结果
export const getSearchResult=keyword=>{
  const url='https://suggest.taobao.com/sug';
  
  const params={
    q:keyword,
    code:'utf-8',
    area:'c2c',
    nick:'',
    sid:null
  };
  //https://suggest.taobao.com/sug?q=apple&code=utf-8&area=c2c&nick=&sid=null&callback=jsonp5
  return jsonp(url, params, {
    param: 'callback'
   }).then(res => {
     console.log(res);
    if (res.result) {
      // console.log(res);
      return res.result;
    }

    throw new Error('没有成功获取到数据！');
  }).catch(err => {
    if (err) {
      console.log(err);
    }
  });
};

最后，当删除历史搜索之后，也需要更新滚动条

修改src/pages/search/index.vue

修改src/pages/search/history.vue

（因为页面加载时有100ms延迟的动画，因此这里更新滚动条也需要相同的延迟）

注意滚动条组件的更新操作，需要使用 $nextTick( ) 实现异步

总结

到此这篇关于vue搜索页开发（热门搜索，历史搜索，淘宝接口演示）的文章就介绍到这了,更多相关vue搜索页开发内容请搜索小牛知识库以前的文章或继续浏览下面的相关文章希望大家以后多多支持小牛知识库！

 类似资料：
  • Android实现搜索历史功能

    本文向大家介绍Android实现搜索历史功能，包括了Android实现搜索历史功能的使用技巧和注意事项，需要的朋友参考一下 本文实例为大家分享了Android实现搜索历史的具体代码，供大家参考，具体内容如下 SharedPreferences实现本地搜索历史功能，覆盖搜索重复的文本，可清空  1. 判断搜索内容是否含表情，不需要可以不判断 2.软键盘工具类弹出、关闭，不需要可以不判断 3.存储工具

  • 搜索页

    搜索页主要是对场景内模型的搜索。 在搜索框内输入关键字，可以显示出场景内所有相关模型的列表。点击列表中模型名称，即可定位到搜索出的模型，如下图所示。

  • Java实现搜索功能代码详解

    本文向大家介绍Java实现搜索功能代码详解，包括了Java实现搜索功能代码详解的使用技巧和注意事项，需要的朋友参考一下 首先，我们要清楚搜索框中根据关键字进行条件搜索发送的是Get请求，并且是向当前页面发送Get请求 当我们要实现多条件搜索功能时，可以将搜索条件封装为一个Map集合，再根据Map集合进行搜索 Controller层代码： 业务层代码： MyBatis中的mapper.xml： 这样

  • 二叉搜索树(BST)-遍历搜索

    编写一个函数，如果给定的二叉搜索树包含给定的值，则返回1，否则返回0。 例如,对于以下树： N1（值：1,左：null,右：null) n2（值：2,左:n1,右:n3) N3（值：3,左：null,右：null) 对contains(&n2,3）的调用应返回1，因为根位于n2的树包含编号3。 函数应该返回1，然而，它返回0或者根本不返回。

  • Android项目类似淘宝 电商 搜索功能，监听软键盘搜索事件，延迟自动搜索，以及时间排序的搜索历史记录的实现

    本文向大家介绍Android项目类似淘宝 电商 搜索功能，监听软键盘搜索事件，延迟自动搜索，以及时间排序的搜索历史记录的实现，包括了Android项目类似淘宝 电商 搜索功能，监听软键盘搜索事件，延迟自动搜索，以及时间排序的搜索历史记录的实现的使用技巧和注意事项，需要的朋友参考一下 最近跳槽去新公司，接受的第一个任务是在 一个电商模块的搜索功能以及搜索历史记录的实现。 需求和淘宝等电商的功能大体差

  • Android的搜索框架实例详解

    本文向大家介绍Android的搜索框架实例详解，包括了Android的搜索框架实例详解的使用技巧和注意事项，需要的朋友参考一下 基础知识 Android的搜索框架将代您管理的搜索对话框，您不需要自己去开发一个搜索框，不需要担心要把搜索框放什么位置，也不需要担心搜索框影响您当前的界面。所有的这些工作都由SearchManager类来为您处理（以下简称“搜索管理器”），它管理的Android搜索对话框

相关阅读

Angular6 Filter实现页面搜索的示例代码iOS 9 Core Spotlight搜索实例代码Android本地实现搜索历史记录Vue 仿百度搜索功能实现代码从Google网络历史记录中检索旧搜索

相关文章

Elasticsearch搜索APIDB2 RazorSQL搜索淘天 搜索算法 9.5 二面深度优先搜索和广度优先搜索C++代码浅谈迭代加深搜索

相关问答

弹性搜索优先排序以搜索词开头的搜索结果搜索容器中的搜索框弹性搜索的搜索查询二进制搜索树-实现“搜索”功能弹性搜索-用连字符搜索

相关工具

Eclipse搜索引擎网页应用接口团购搜索NSPredicate模糊搜索Google AJAX 搜索 API元搜索引擎

相关文档

初识 PhalApi：探索接口服务开发的技艺淘宝无线开放 API网聚宝开发指南Odoo 开发入门支付宝 JSAPI 开发文档
快捷导航： 新手教程 算法原理 架构设计 Java进阶 数据库进阶 大厂专栏 面试经验 编程笔记 编程问答 所有专题 文档资料 工具软件 电子书籍 小牛导航
在线工具： 房贷计算器 个税计算器 Linux命令查询 Json格式化 正则表达式 颜色转换 AES加解密 SHA1加密 MD5加密 毒鸡汤 字数统计 随机密码生成 进制转换 Base64编解码 励志句子
Copyright © 2019-2024 小牛知识库@xnip.cn. All Rights Reserved.