商城-Elasticsearch-实现基本搜索

)

2.实现基本搜索

2.1.页面分析

2.1.1.页面跳转

在首页的顶部，有一个输入框：

当我们输入任何文本，点击搜索，就会跳转到搜索页search.html了：

并且将搜索关键字以请求参数携带过来：

我们打开search.html，在最下面会有提前定义好的Vue实例：

<script type="text/javascript">
    var vm = new Vue({
    
        el: "#searchApp",
        data: {
    
        },
        components:{
    
            // 加载页面顶部组件
            lyTop: () => import("./js/pages/top.js")
        }
    });
script>

这个Vue实例中，通过import导入的方式，加载了另外一个js：top.js并作为一个局部组件。top其实是页面顶部导航组件，我们暂时不管

2.1.2.发起异步请求

要想在页面加载后，就展示出搜索结果。我们应该在页面加载时，获取地址栏请求参数，并发起异步请求，查询后台数据，然后在页面渲染。

我们在data中定义一个对象，记录请求的参数：

data: {
   
    search:{
   
        key:"", // 搜索页面的关键字
    }
}

我们通过钩子函数created，在页面加载时获取请求参数，并记录下来。

created(){
   
    // 判断是否有请求参数
    if(!location.search){
   
        return;
    }
    // 将请求参数转为对象
    const search = ly.parse(location.search.substring(1));
    // 记录在data的search对象中
    this.search = search;
    
    // 发起请求，根据条件搜索
    this.loadData();