前端实现搜索记录功能--仿天猫购物商城

网站搜索历史的实现：

1. 下面有完整代码，记得删除一部分哟

前端的模块：

<!-- 搜索输入框 -->
      <div class="front-header-center" style="text-align: right;">
        <el-input ref="inputRef" style="width: 200px" placeholder="请输入商品名称" v-model="name" @focus="showSearchHistory"
          @blur="hideSearchHistory"></el-input>
        <el-button type="primary" style="margin-left: 5px" @click="search">搜素</el-button>
        <!-- 添加弹层以显示搜索历史 -->
        <el-dropdown style="margin-left: 10px;">
          <span class="el-dropdown-link">
            搜索历史<i class="el-icon-arrow-down el-icon--right"></i>
          </span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item v-for="(item, index) in searchHistory" :key="index"
              @click.native="name = item; search()">{{
                item
              }}</el-dropdown-item>
            <el-dropdown-item @click.native="clearSearchHistory" v-if="searchHistory.length > 0"
              style="background-color: red; color: white; text-align: center;">清空历史</el-dropdown-item>
            <el-dropdown-item v-else>暂无历史</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
        <!-- 搜索历史 -->
      </div>

watch：监督name值的变化

watch: {
    name(newVal) {
      if (newVal) {
        // 当有新搜索时，将新搜索添加到历史（去重）
        if (!this.searchHistory.includes(newVal)) {
          this.searchHistory.unshift(newVal);
          this.saveSearchHistory(); // 保存更新后的搜索历史
        }
      }
    },
  },

method方法：

search() {
      let name = this.name.trim();
      if (name) {
        location.href = '/front/search?name=' + name
      }
    },
    // 显示弹层历史
    showSearchHistory() {
      this.isHistoryVisible = true;
    },
    // 隐藏弹出历史
    hideSearchHistory() {
      this.isHistoryVisible = false;
    },
    // 初始化时从本地存储加载搜索历史
    loadSearchHistory() {
      const storedHistory = localStorage.getItem('searchHistory');
      if (storedHistory) {
        this.searchHistory = JSON.parse(storedHistory);
      }
    },
    // 保存搜索历史到本地存储
    saveSearchHistory() {
      localStorage.setItem('searchHistory', JSON.stringify(this.searchHistory));
    },
    clearSearchHistory() {
      this.searchHistory = []
      localStorage.removeItem('searchHistory');
    },

Front.vue：完整代码

<template>
  <div>
    <div class="front-notice"><i class="el-icon-bell" style="margin-right: 2px"></i>公告：{{ top }}</div>
    <!--头部-->
    <div class="front-header">
      <!-- 让其跳到首页 -->
      <div class="front-header-left" @click="$router.push('/front/home')">
        <img src="@/assets/imgs/logo.png" alt="">
        <div class="title">项目前台</div>
      </div>
      <!-- 搜索输入框 -->
      <div class="front-header-center" style="text-align: right;">
        <el-input ref="inputRef" style="width: 200px" placeholder="请输入商品名称" v-model="name" @focus="showSearchHistory"
          @blur="hideSearchHistory"></el-input>
        <el-button type="primary" style="margin-left: 5px" @click="search">搜素</el-button>
        <!-- 添加弹层以显示搜索历史 -->
        <el-dropdown style="margin-left: 10px;">
          <span class="el-dropdown-link">
            搜索历史<i class="el-icon-arrow-down el-icon--right"></i>
          </span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item v-for="(item, index) in searchHistory" :key="index"
              @click.native="name = item; search()">{{
                item
              }}</el-dropdown-item>
            <el-dropdown-item @click.native="clearSearchHistory" v-if="searchHistory.length > 0"
              style="background-color: red; color: white; text-align: center;">清空历史</el-dropdown-item>
            <el-dropdown-item v-else>暂无历史</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
        <!-- 搜索历史 -->
      </div>
      <!-- 右侧登录注册 -->
      <div class="front-header-right">
        <div v-if="!user.username">
          <el-button @click="$router.push('/login')">登录</el-button>
          <el-button @click="$router.push('/register')">注册</el-button>
        </div>
        <div v-else>
          <el-dropdown>
            <div class="front-header-dropdown">
              <img @click="$router.push('/front/person')" :src="user.avatar" alt="">
              <div style="margin-left: 10px">
                <span>{{ user.name }}</span><i class="el-icon-arrow-down" style="margin-left: 5px"></i>
              </div>
            </div>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item>
                <div style="text-decoration: none" @click="navTo('/front/collect')">我的收藏</div>
              </el-dropdown-item>
              <!-- 我的地址、购物车、订单 -->
              <el-dropdown-item>
                <div style="text-decoration: none" @click="navTo('/front/address')">我的地址</div>
              </el-dropdown-item>
              <el-dropdown-item>
                <div style="text-decoration: none" @click="navTo('/front/cart')">我的购物车</div>
              </el-dropdown-item>
              <el-dropdown-item>
                <div style="text-decoration: none" @click="navTo('/front/orders')">我的订单</div>
              </el-dropdown-item>
              <el-dropdown-item>
                <div style="text-decoration: none" @click="logout">退出</div>
              </el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </div>
      </div>
    </div>
    <!--主体-->
    <div class="main-body">
      <router-view ref="child" @update:user="updateUser" />
    </div>


  </div>

</template>

<script>

export default {
  name: "FrontLayout",

  data() {
    return {
      top: '',
      notice: [],
      user: JSON.parse(localStorage.getItem("xm-user") || '{}'),
      name: '',
      isHistoryVisible: false,
      searchHistory: [],
    }
  },

  mounted() {
    this.loadNotice()
    this.loadSearchHistory()
  },
  watch: {
    name(newVal) {
      if (newVal) {
        // 当有新搜索时，将新搜索添加到历史（去重）
        if (!this.searchHistory.includes(newVal)) {
          this.searchHistory.unshift(newVal);
          this.saveSearchHistory(); // 保存更新后的搜索历史
        }
      }
    },
  },
  methods: {
    search() {
      let name = this.name.trim();
      if (name) {
        location.href = '/front/search?name=' + name
      }
    },
    // 显示弹层历史
    showSearchHistory() {
      this.isHistoryVisible = true;
    },
    // 隐藏弹出历史
    hideSearchHistory() {
      this.isHistoryVisible = false;
    },
    // 初始化时从本地存储加载搜索历史
    loadSearchHistory() {
      const storedHistory = localStorage.getItem('searchHistory');
      if (storedHistory) {
        this.searchHistory = JSON.parse(storedHistory);
      }
    },
    // 保存搜索历史到本地存储
    saveSearchHistory() {
      localStorage.setItem('searchHistory', JSON.stringify(this.searchHistory));
    },
    clearSearchHistory() {
      this.searchHistory = []
      localStorage.removeItem('searchHistory');
    },

    // 其他部分→路由的跳转
    navTo(url) {
      location.href = url;
    },
    loadNotice() {
      this.$request.get('/notice/selectAll').then(res => {
        this.notice = res.data
        let i = 0
        if (this.notice && this.notice.length) {
          this.top = this.notice[0].content
          setInterval(() => {
            this.top = this.notice[i].content
            i++
            if (i === this.notice.length) {
              i = 0
            }
          }, 2500)
        }
      })
    },
    updateUser() {
      this.user = JSON.parse(localStorage.getItem('xm-user') || '{}')   // 重新获取下用户的最新信息
    },
    // 退出登录
    logout() {
      localStorage.removeItem("xm-user");
      this.$router.push("/login");
    },
  }

}
</script>

<style scoped>
@import "@/assets/css/front.css";
</style>
<style scoped>
/* 假定已有的Element UI样式已经包含了基础的.el-col样式，这里仅添加自定义的部分 */
.search-history-popup {
  padding-left: 15px;
  position: absolute;
  z-index: 1;
  background: #fff;
  margin-top: 0;
  width: 100%;
  border: 1px solid #e4e7ed;
  border-radius: 4px;
  box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
  box-sizing: border-box;
}

.history-item-wrapper {
  height: auto;
  width: 100%;
  background: white;
  line-height: normal;
}
</style>