更新 search 模块

src/api/search.js

@@ -0,0 +1,16 @@
+import { get, post } from '@/utils/request'
+
+const searchApi = {
+  keywordSuggestApi: '/api/content/search/suggest',
+  videoSearchApi: '/api/content/search/query'
+}
+
+// 关键词建议
+export function keywordSuggest(keyword) {
+  return get(searchApi.keywordSuggestApi + '?k=' + keyword)
+}
+
+// 视频搜索
+export function videoQuery(keyword, page) {
+  return get(searchApi.videoSearchApi + '?keyword=' + keyword + '&page=' + page)
+}

src/components/layout/SearchBox.vue

@@ -1,21 +1,22 @@
 <template>
   <!--搜索框-->
   <el-autocomplete
-    v-model="state"
+    v-model="keyword"
     :fetch-suggestions="querySearchAsync"
-    placeholder="想要搜点神马呢"
+    :placeholder="placeholder"
     clearable
     suffix-icon="el-icon-search"
     size="medium"
     :debounce="1000"
     :style="sw"
-    @select="handleSelect"
-    @focus="userFocus"
     @keyup.enter.native="onSearch"
+    @select="onSearch"
   />
 </template>
 
 <script>
+import { keywordSuggest } from '@/api/search'
+
 export default {
   name: 'SearchBox',
   props: {
@@ -27,23 +28,43 @@ export default {
   data() {
     return {
       restaurants: [],
-      state: '',
+      placeholder: '想要搜点神马呢',
+      keyword: '',
       timer: null
     }
   },
   methods: {
-    // 跳转搜索页面，传递搜索框的参数
-    toSearchList() {
-      this.$store.commit('saveValue', this.state)
-      this.$store.dispatch('getPageBeanByValue')
-      this.$router.push('/search')
+    // 重点：当框中的改变时触发该方法，elementui自动设置了防抖，参见debounce属性
+    // queryString 为输入框中的值。cb为返回显示列表的回调函数
+    querySearchAsync(queryString, cb) {
+      console.log('queryString')
+      const res = ['哈1', '哈2', '哈3', '哈4', '哈5']
+      this.restaurants = res.map((item) => {
+        return {
+          value: item
+        }
+      })
+      cb(this.restaurants)
+
+      /*setTimeout(() => {
+        // cb函数如果返回一个空数组的话，那个模糊搜索输入建议的下拉选项因为length为0就会消失了
+        // cb([])
+        cb(keywordSuggest(this.keyword).then(res => {
+          if (res.code === 0) {
+            console.log(res.data)
+            return res.data
+          } else {
+            return ['哈1', '哈2', '哈3', '哈4', '哈5']
+          }
+        }));
+      }, 500);*/
     },
-    // 回车事件
+    // select 事件或 enter 键事件
     onSearch() {
       console.log('回车事件')
       // 正则去空格
-      if (this.state.replace(/\s*/g, '')) {
-        this.toSearchList()
+      if (this.keyword.replace(/\s*/g, '')) {
+        this.toSearchPage()
       } else {
         this.$message({
           showClose: true,
@@ -52,185 +73,28 @@ export default {
         })
       }
     },
-
-    loadAll() {
-      const res = [
-        {
-          vname: '哈1',
-          coverurl: 'https://picx.zhimg.com/v2-ea15e9203a1d95a465a78da043a9315d_xl.jpg',
-          releasetime: '2023-04-24 16:47:00',
-          visited: 10
-        },
-        {
-          vname: '哈2',
-          coverurl: 'https://picx.zhimg.com/v2-ea15e9203a1d95a465a78da043a9315d_xl.jpg',
-          releasetime: '2023-04-24 16:47:00',
-          visited: 10
-        },
-        {
-          vname: '哈3',
-          coverurl: 'https://picx.zhimg.com/v2-ea15e9203a1d95a465a78da043a9315d_xl.jpg',
-          releasetime: '2023-04-24 16:47:00',
-          visited: 10
-        },
-        {
-          vname: '哈4',
-          coverurl: 'https://picx.zhimg.com/v2-ea15e9203a1d95a465a78da043a9315d_xl.jpg',
-          releasetime: '2023-04-24 16:47:00',
-          visited: 10
-        },
-        {
-          vname: '哈5',
-          coverurl: 'https://picx.zhimg.com/v2-ea15e9203a1d95a465a78da043a9315d_xl.jpg',
-          releasetime: '2023-04-24 16:47:00',
-          visited: 10
-        },
-        {
-          vname: '哈1',
-          coverurl: 'https://picx.zhimg.com/v2-ea15e9203a1d95a465a78da043a9315d_xl.jpg',
-          releasetime: '2023-04-24 16:47:00',
-          visited: 10
-        },
-        {
-          vname: '哈2',
-          coverurl: 'https://picx.zhimg.com/v2-ea15e9203a1d95a465a78da043a9315d_xl.jpg',
-          releasetime: '2023-04-24 16:47:00',
-          visited: 10
-        },
-        {
-          vname: '哈3',
-          coverurl: 'https://picx.zhimg.com/v2-ea15e9203a1d95a465a78da043a9315d_xl.jpg',
-          releasetime: '2023-04-24 16:47:00',
-          visited: 10
-        },
-        {
-          vname: '哈4',
-          coverurl: 'https://picx.zhimg.com/v2-ea15e9203a1d95a465a78da043a9315d_xl.jpg',
-          releasetime: '2023-04-24 16:47:00',
-          visited: 10
-        },
-        {
-          vname: '哈5',
-          coverurl: 'https://picx.zhimg.com/v2-ea15e9203a1d95a465a78da043a9315d_xl.jpg',
-          releasetime: '2023-04-24 16:47:00',
-          visited: 10
-        }
-      ]
-      this.restaurants = res.map((item) => {
-        return {
-          value: item.vname
-        }
-      })
-
-      /* getNumVideo(10).then((res) => {
-        // map可以改变原json
-        this.restaurants = res.map((item) => {
-          return {
-            value: item.vname
+    // 跳转搜索页面，传递搜索框的参数
+    toSearchPage() {
+      const currentPath = this.$route.path
+      if (currentPath === '/search') {
+        this.$router.push({
+          path: '/search',
+          query: {
+            keyword: this.keyword,
+            page: 1
           }
         })
-      })*/
-    },
-
-    // 重点：当框中的改变时触发该方法，elementui自动设置了防抖，参见debounce属性
-    // queryString 为输入框中的值。cb为返回显示列表的回调函数
-    querySearchAsync(queryString, cb) {
-      const res = [
-        {
-          vname: '哈1',
-          coverurl: 'https://picx.zhimg.com/v2-ea15e9203a1d95a465a78da043a9315d_xl.jpg',
-          releasetime: '2023-04-24 16:47:00',
-          visited: 10
-        },
-        {
-          vname: '哈2',
-          coverurl: 'https://picx.zhimg.com/v2-ea15e9203a1d95a465a78da043a9315d_xl.jpg',
-          releasetime: '2023-04-24 16:47:00',
-          visited: 10
-        },
-        {
-          vname: '哈3',
-          coverurl: 'https://picx.zhimg.com/v2-ea15e9203a1d95a465a78da043a9315d_xl.jpg',
-          releasetime: '2023-04-24 16:47:00',
-          visited: 10
-        },
-        {
-          vname: '哈4',
-          coverurl: 'https://picx.zhimg.com/v2-ea15e9203a1d95a465a78da043a9315d_xl.jpg',
-          releasetime: '2023-04-24 16:47:00',
-          visited: 10
-        },
-        {
-          vname: '哈5',
-          coverurl: 'https://picx.zhimg.com/v2-ea15e9203a1d95a465a78da043a9315d_xl.jpg',
-          releasetime: '2023-04-24 16:47:00',
-          visited: 10
-        },
-        {
-          vname: '哈1',
-          coverurl: 'https://picx.zhimg.com/v2-ea15e9203a1d95a465a78da043a9315d_xl.jpg',
-          releasetime: '2023-04-24 16:47:00',
-          visited: 10
-        },
-        {
-          vname: '哈2',
-          coverurl: 'https://picx.zhimg.com/v2-ea15e9203a1d95a465a78da043a9315d_xl.jpg',
-          releasetime: '2023-04-24 16:47:00',
-          visited: 10
-        },
-        {
-          vname: '哈3',
-          coverurl: 'https://picx.zhimg.com/v2-ea15e9203a1d95a465a78da043a9315d_xl.jpg',
-          releasetime: '2023-04-24 16:47:00',
-          visited: 10
-        },
-        {
-          vname: '哈4',
-          coverurl: 'https://picx.zhimg.com/v2-ea15e9203a1d95a465a78da043a9315d_xl.jpg',
-          releasetime: '2023-04-24 16:47:00',
-          visited: 10
-        },
-        {
-          vname: '哈5',
-          coverurl: 'https://picx.zhimg.com/v2-ea15e9203a1d95a465a78da043a9315d_xl.jpg',
-          releasetime: '2023-04-24 16:47:00',
-          visited: 10
-        }
-      ]
-      this.restaurants = res.map((item) => {
-        return {
-          value: item.vname
-        }
-      })
-      cb(this.restaurants)
-
-      /* if (queryString) {
-        getUserInput(queryString).then((res) => {
-          this.restaurants = res.map((item) => {
-            return {
-              value: item.vname
-            }
-          })
-          cb(this.restaurants)
-        })
+        this.$router.go(0)
       } else {
-        cb(this.restaurants)
-      }*/
-    },
-
-    createStateFilter(queryString) {
-      return (state) => {
-        return (
-          state.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0
-        )
+        const routeUrl = this.$router.resolve({
+          path: '/search',
+          query: {
+            keyword: this.keyword,
+            page: 1
+          }
+        })
+        window.open(routeUrl.href, '_blank')
       }
-    },
-    handleSelect(item) {
-      this.toSearchList()
-      // console.log(item);
-    },
-    userFocus() {
-      this.loadAll()
     }
   }
 }

src/views/home/Search.vue

@@ -7,11 +7,11 @@
       separator-class="el-icon-arrow-right"
     >
       <el-breadcrumb-item :to="{ path: '' }"><a href="/">返回首页</a></el-breadcrumb-item>
-      <el-breadcrumb-item>搜索结果：共<span class="result">({{ $store.state.pageBean.totalCount }}}</span>条</el-breadcrumb-item>
+      <el-breadcrumb-item>搜索结果：共<span class="result">({{ retList.length }}}</span>条</el-breadcrumb-item>
     </el-breadcrumb>
 
-    <el-row v-if="$store.state.pageBean.totalCount !== 0 && $store.state.pageBean.totalCount !== undefined " class="movie-list">
-      <el-col v-for="(video,index) in $store.state.pageBean.list" :key="index" :md="6" :sm="8" :xs="12">
+    <el-row v-if="retList.length !== 0 " class="movie-list">
+      <el-col v-for="(video,index) in retList" :key="index" :md="6" :sm="8" :xs="12">
         <video-card :video="video" />
       </el-col>
 
@@ -44,24 +44,43 @@
 
 <script>
 import VideoCard from '@/components/card/VideoCard'
+import { videoQuery } from '@/api/search'
 
 export default {
   name: 'Search',
   components: { VideoCard },
   data() {
     return {
-      currentPage: 1
+      currentPage: 1,
+      length: 0,
+      retList: []
     }
   },
   created() {
-    // 当页面创建后，页码变为1
-    this.$store.commit('updatePage', 1)
+    this.currentPage = parseInt(this.$route.query.page)
+    this.videoQueryWrapper(this.$route.query.keyword, this.$route.query.page)
   },
   methods: {
     handleCurrentChange(currentPage) {
       this.currentPage = currentPage
-      this.$store.commit('updatePage', currentPage)
-      this.$store.dispatch('getPageBeanByValue')
+    },
+    videoQueryWrapper(keyword, page) {
+      videoQuery(keyword, page)
+        .then(res => {
+          if (res.code === 0) {
+            const pageList = res.data
+            this.retList = pageList.list
+            this.currentPage = pageList.currentPage
+            this.length = pageList.totalPages
+
+            // 页面跳转后滚动到页面顶部
+            this.$vuetify.goTo(0)
+          } else {
+            console.error(res.msg)
+          }
+        }).catch(error => {
+        console.error(error.message)
+      })
     }
   }
 }