专栏首页零基础自学Java【微服务】168:搜索的前端页面分析

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

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

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

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

一、页面头部栏

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

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

1头部栏代码

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

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

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

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

2top.js中搜索对应代码

①找到搜索框

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

②search方法

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

③生命周期钩子函数

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

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

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

二、搜索页面获取参数

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

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

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

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

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

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

搜索页面中代码编写

①定义search属性

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

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

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

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

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

③对page的处理

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

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

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

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

附:判断参数为空时的情况

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

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

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

三、测试

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

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

①location.search

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

②location.search.substring(1)

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

③parse方法

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

④stringify方法

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

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

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

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

最后

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

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

本文分享自微信公众号 - 刘小爱(liuxiaoai946),作者:刘小爱

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2020-09-27

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 【JavaWeb】95:同步和异步

    如果是同步请求,需要将信息填写完整,再发送请求,服务器响应填写是否正确,再做修改。

    刘小爱
  • 【JavaWeb】82:三种对话框和两种计时器

    其中有三个参数:函数名(test),间隔的时间5000(ms),函数参数("孙飞亮")

    刘小爱
  • 【日记】149微服务项目第19天

    能被一个人放在心上,从来都不是理所当然的事,不管那个人是谁,是家人还是朋友,都非常难得,应该要好好珍惜才对。

    刘小爱
  • 【V课堂】数据挖掘知识脉络与资源整理(三)—SAS

    简介: SAS(全称STATISTICAL ANALYSIS SYSTEM,简称SAS)是全球最大的软件公司之一,是由美国NORTH CAROLINA州立大学...

    小莹莹
  • 为什么说社交才是微博的下一头现金牛?

    微博Q3财报显示其广告营收首次突破1亿美金关口,这里面有多少来自微博搜索,却只字未提,信息流为代表的原生广告是微博的大头。这说明微博尚未围绕搜索进行过多商业化,...

    罗超频道
  • 离职创业要看的22本书

    我大学时期的一位好友近日来找我,现在的他仍专心于建筑领域。这次会面,是我退出建筑圈着手创业后,我俩的第一次见面。

    哲洛不闹
  • CodeBlocks 安装及配置

    CodeBlocks 是最适合gfortran的IDE,可以说是量身打造,配置也不复杂。而且体量很小,跟vs动不动就几个G甚至十几个G相比,那是小巫见大巫了。C...

    fem178
  • “三位一体”新驱动,基因检测行业走向交叉应用

    在孟德尔定理被发现以来,人类便一直在深化对于基因的探索与认知,期望通过基因检测来解答生命的奥秘,以此为人类提供专业服务。

    曾响铃
  • WordPress 文章截断方式:有more标签的优先more标签,否则截断一定字数

    最近在完善本站主题Devework,主要是前后台的联系工作,其中遇到一个问题,那就是首页文章的截断方式。就Jeff的使用习惯的话,是直接在后台编辑器写文章的时候...

    Jeff
  • 关于null的操作

    空值     空值一般用NULL表示     一般表示未知的、不确定的值,也不是空格     一般运算符与其进行运算时,都会为空     空不与任何值相等   ...

    郑小超.

扫码关注云+社区

领取腾讯云代金券