bloggingplatform/vue/src/components/BlogSearch.vue

<template>
  <div>
    <!-- 搜索区域 -->
    <div v-if="!showResults" class="search-component">
      <input type="text" v-model="searchTerm" placeholder="请输入搜索词" />
      <button @click="performSearch">搜索</button>
    </div>

    <!-- 搜索结果展示区域 -->
    <div v-if="showResults" class="search-results-page">
      <!-- 搜索词展示 -->
      <div class="search-term-display">
        <h2>搜索结果：“{{ searchTerm }}”</h2>
      </div>

      <!-- 排序与筛选区域 -->
      <div class="sort-filter-area">
        <!-- 排序方式选择 -->
        <div class="sort-by">
          <label for="sort-select">排序方式：</label>
          <select id="sort-select" v-model="sortBy">
            <option value="relevance">相关性</option>
            <option value="publishDate-desc">发布日期（最新）</option>
            <option value="publishDate-asc">发布日期（最旧）</option>
            <option value="popularity">热度</option>
          </select>
        </div>

        <!-- 筛选条件选择 -->
        <div class="filter-by">
          <label for="category-select">文章类别：</label>
          <select id="category-select" v-model="filterConditions.category">
            <option value="">全部</option>
            <option value="food">美食</option>
            <option value="travel">旅游</option>
            <option value="technology">科技</option>
          </select>
          <label for="time-range-select">时间范围：</label>
          <select id="time-range-select" v-model="filterConditions.timeRange">
            <option value="">全部</option>
            <option value="this-week">本周</option>
            <option value="this-month">本月</option>
            <option value="this-year">本年内</option>
          </select>
        </div>

        <!-- 应用筛选与排序按钮 -->
        <button @click="applyFilter">应用筛选</button>
        <button @click="sortResults">排序</button>
      </div>

      <!-- 搜索结果列表展示 -->
      <div class="result-list-area">
        <ul>
          <li v-for="(result, index) in searchResults" :key="index">
            <!-- 突出显示搜索词 -->
            <h3 v-html="result.title | highlight(searchTerm)"></h3>
            <p v-html="result.summary | highlight(searchTerm)"></p>
            <p>发布日期：{{ result.publishDate }}</p>
          </li>
        </ul>
      </div>

      <!-- 最下面一排的导航按钮 -->
      <div class="bottom-navigation">
        <button @click="goToPreviousPage" :disabled="currentPage === 1">上一页</button>
        <span>第{{ currentPage }}页 / 共{{ totalPages }}页</span>
        <button @click="goToNextPage" :disabled="currentPage === totalPages">下一页</button>
        <button @click="goBackToSearch">返回搜索</button>
      </div>
    </div>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  name: 'BlogSearch',
  data() {
    return {
      searchTerm: '',
      showResults: false,
      searchResults: [],
      sortBy: 'relevance',
      filterConditions: {
        category: '',
        timeRange: ''
      },
      currentPage: 1,
      totalPages: 1,
      resultsPerPage: 10
    };
  },
  filters: {
    highlight: function (text, searchTerm) {
      if (!searchTerm) return text;
      const re = new RegExp(searchTerm, 'gi');
      return text.replace(re, '<span style="color:red;">$&</span>');
    }
  },
  methods: {
    performSearch() {
      // 简单验证搜索词是否为空
      if (!this.searchTerm.trim()) {
        alert('请输入有效的搜索词');
        return;
      }

      // 设置显示结果为true，以便展示搜索结果区域
      this.showResults = true;

      // 获取搜索结果
      this.getSearchResults();
    },
    async getSearchResults() {
      try {
        // 根据当前页码、排序方式和筛选条件发送请求获取搜索结果
        const response = await axios.get('/api/search', {
          params: {
            page: this.currentPage,
            sortBy: this.sortBy,
            category: this.filterConditions.category,
            timeRange: this.filterConditions.timeRange,
            searchTerm: this.searchTerm
          }
        });
        this.searchResults = response.data.results;
        this.totalPages = Math.ceil(response.data.totalCount / this.resultsPerPage);
      } catch (error) {
        console.error('获取搜索结果出错：', error);
      }
    },
    sortResults() {
      // 根据选择的排序方式对搜索结果进行排序
      if (this.sortBy === 'publishDate-desc') {
        this.searchResults.sort((a, b) => new Date(b.publishDate) - new Date(a.publishDate));
      } else if (this.sortBy === 'publishDate-asc') {
        this.searchResults.sort((a, b) => new Date(a.publishDate) - new Date(b.publishDate));
      } else if (this.sortBy === 'popularity') {
        // 假设文章对象有一个popularity属性用于表示热度
        this.searchResults.sort((a, b) => b.popularity - a.popularity);
      }
    },
    applyFilter() {
      // 应用筛选条件后重新获取搜索结果并重置当前页码为1
      this.currentPage = 1;
      this.getSearchResults();
    },
    goToPreviousPage() {
      if (this.currentPage > 1) {
        this.currentPage--;
        this.getSearchResults();
      }
    },
    goToNextPage() {
        if (this.currentPage < this.totalPages) {
          this.currentPage++;
          this.getSearchResults();
        }
    },
    goBackToSearch() {
      // 重置相关数据并隐藏搜索结果区域，返回搜索状态
      this.searchTerm = '';
      this.showResults = false;
      this.sortBy = 'relevance';
      this.filterConditions = {
        category: '',
        timeRange: ''
      };
      this.currentPage = 1;
      this.totalPages = 1;
      this.searchResults = [];
    }
  },
  mounted() {
    // 如果是通过路由参数进入此页面且有搜索词参数，自动执行搜索操作
    if (this.$route.params.searchTerm) {
      this.searchTerm = this.$route.params.searchTerm;
      this.showResults = true;
      this.getSearchResults();
    }
  }
};
</script>

<style>
.search-component {
  margin: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
}

input[type="text"] {
  padding: 10px;
  width: 300px;
  border: 1px solid #ccc;
  border-radius: 5px;
  margin-right: 10px;
}

button {
  padding: 10px 20px;
  background-color: #007BFF;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

.search-results-page {
  font-family: Arial, sans-serif;
  padding: 20px;
}

.search-term-display {
  margin-bottom: 10px;
}

.sort-filter-area {
  margin-bottom: 20px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.sort-by,
.filter-by {
  margin-bottom: 10px;
}

.sort-by label,
.filter-by label {
  margin-right: 10px;
}

.result-list-area ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.result-list-area li {
  border-bottom: 1px solid #ccc;
  padding-bottom: 10px;
  margin-bottom: 10px;
}

.pagination-area {
  margin-top: 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.back-button-area {
  margin-top: 20px;
}
.bottom-navigation {
  margin-top: 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-top: 1px solid #ccc;
  padding-top: 20px;
}
</style>