【微服务】168：搜索的前端页面分析

末蓝、 2022-12-11 03:29 82阅读 0赞

### 目录 ###

*   *   *  
     *  一、页面头部栏
     *  二、搜索页面获取参数
     *  三、测试
     *  最后

###  ###

今天是刘小爱自学Java的第168天。

感谢你的观看，谢谢你。

![ca6faea36298a1bc2077b8ce37739e91.png][]

学习计划安排，搜索相关的前端页面分析：

*  页面的头部栏。
 *  搜索页面获取请求参数。
 *  浏览器上做个简单的js代码测试。

至于发送请求和后台代码留待明天完成。

## 一、页面头部栏 ##

关于前端代码基本上都已经写好了，但本着学习的态度，最好自己也能看得懂。

大致捋一捋js代码编写的一个流程。

**1头部栏代码**

![c5a8d6b934b6eed2883a66ec9d6f934c.png][]

一般来说，看前端代码先找到index.html这个文件，从它开始看起。

我们可以找到上述代码，这是其对头部栏的说明，而搜索就是属于头部栏的一部分。

头部栏是用自定义组件lyTop来实现的。

从上述代码可以看出是和top.js相关联的，也就是说要弄明白搜索相关的代码得去从top.js这个文件中找。

**2top.js中搜索对应代码**

![7bae1d68278dd9d7473fca7f85b7927d.png][]

**①找到搜索框**

搜索框绑定了一个点击事件，点击搜索按钮时会调用search方法。

**②search方法**

跳转search.html页面，同时携带参数key，这个key也就是在搜索框中输入的内容。

**③生命周期钩子函数**

created是指实例一创建就会执行，也就是调用getUrlParam()方法，完成对key的处理。

点击搜索会跳转到search.html页面，紧接着要做的事情就是：

*  获取请求路径中的参数。
 *  发送请求到后台查询对应的数据。

## 二、搜索页面获取参数 ##

事实上关于请求参数，除了key之外还会涉及到分页相关的数据，我这里使用key=手机和page=1为例做一个说明。

写之前，先学一个关于location的知识点。

![0c70a084c2014406c601b7c5b53302b2.png][]

当初在学jQuery的时候就接触过location，对应着第82天的学习笔记。

那时主要是学习了location中href这个属性，也就是页面对应的url。

事实上除了href还有其它很多属性，在搜索中需要使用到search属性，也就是拼接的参数。

仔细观察上述的search会发现其还包含了一个问号，所以要将其处理掉。

**搜索页面中代码编写**

![848d6a86390195f820a7c52f65b21b32.png][]

**①定义search属性**

用来接收获取的请求参数。

**②获取请求路径中的参数。**

也就是通过location.search获取请求参数。

但是其值包含有一个问号，所以要通过substring(1)将问号截取掉。

同时要通过parse方法将字符串转换成json对象，这是自定义组件中的一个方法，文章最后会做一个简单的说明。

**③对page的处理**

这行代码简直就是js中的特色代码，我想了好一会儿才反应过来。

search.page例子中page为1，但是其为字符串，所以要将其转换成数字，这很好理解。

关键是如果没有page这个参数，默认page为1，所以使用逻辑运算“或”与1拼接可以实现。

js中可以把数字当成布尔值使用，但是这在Java中肯定是不行的。

**附：判断参数为空时的情况**

我们可以观察下像淘宝京东这样的电商网站，如果Url中的参数为空时会怎样：

![6661e2c7897e9be8cf176a72638a1c3b.png][]

*  京东是出现提示消息，提示没有找到商品。
 *  淘宝是直接重新跳转搜索页面。

总之这种情况是不允许的，所以要做判断，当然上述代码中我只是写了一个警示框。

## 三、测试 ##

可以在浏览器中做一个的测试。

同时对字符串与json对象之间转换的方法简单地做一个说明。

![3a41dc160a439c3a13995819328cf135.png][]

**①location.search**

获取的值就是请求路径中的参数。

**②location.search.substring(1)**

将请求路径中的问号去掉。

**③parse方法**

parse方法将json字符串转换成json对象。

**④stringify方法**

stringify方法刚好反过来，是将json对象转换成json字符串。

以上就是对搜索前端页面的一个说明。

在上述代码中我只是定义了一个请求方法loadData，在生命周期钩子函数created中直接调用了该方法。

但是其具体发送请求的代码还未编写完成，明天补充完成。

## 最后 ##

行有不得反求诸己，我是@刘小爱

一个白天上班晚上学习的95后沪漂，不为其它，只为学会自律做好自己，也愿我的每日打卡能给你带来勇气，欢迎点赞关注和评论。

[ca6faea36298a1bc2077b8ce37739e91.png]: /images/20221123/d598f19357d4407abac0454e0aa82645.png
[c5a8d6b934b6eed2883a66ec9d6f934c.png]: /images/20221123/697ca8ea7e3d40708cd08715c5af0772.png
[7bae1d68278dd9d7473fca7f85b7927d.png]: /images/20221123/8801c7c071ef443c9f5bf40b4d0cdb38.png
[0c70a084c2014406c601b7c5b53302b2.png]: /images/20221123/48ccc5ef32fe49f7915e952cf6a0094d.png
[848d6a86390195f820a7c52f65b21b32.png]: /images/20221123/4e7a59ce47d149b3937d18f735cbfbf4.png
[6661e2c7897e9be8cf176a72638a1c3b.png]: /images/20221123/abfbfb9264cf408ab49eb8a3838df9b8.png
[3a41dc160a439c3a13995819328cf135.png]: /images/20221123/fd67a996929f48de8a21734e4f0d8469.png