搜索相关的前端页面分析

日期:2020-09-29 08:32:04   来源:互联网   编辑:小优   阅读人数:816

感谢你的观看,谢谢你。

搜索相关的前端页面分析(图1)

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

页面的头部栏。

搜索页面获取请求参数。

浏览器上做个简单的js代码。

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

一、页面头部栏

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

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

1头部栏代码

搜索相关的前端页面分析(图2)

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

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

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

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

2top.js中搜索对应代码

搜索相关的前端页面分析(图3)

①找到搜索框

②search方法

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

③生命周期钩子函数

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

获取请求路径中的参数。

发送请求到后台查询对应的数据。

二、搜索页面获取参数

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

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

搜索相关的前端页面分析(图4)

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

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

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

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

搜索页面中代码编写

搜索相关的前端页面分析(图5)

①定义search属性

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

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

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

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

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

③对page的处理

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

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

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

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

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

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

搜索相关的前端页面分析(图6)

京东是出现提示,提示没有找到商品。

是直接重新跳转搜索页面。

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

三。

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

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

搜索相关的前端页面分析(图7)

①location.search

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

②location.search.substring(1)

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

③parse方法

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

④stringify方法

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

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

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

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

最后

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

本文相关词条概念解析:

页面

雷晓东,男,1973年生,博士,教授,博士生导师。2006年毕业于北京化工大学应用化学专业获工学博士学位后留校任教。主要从事水处理工程与技术。无机功能材料及其应用、膜材料制备及其性能、废弃资源有效利用、镁资源有效利用方面的科研与教学工作。现承担国家支撑计划、863计划和国家自然科学基金和与企业合作的项目等共9项。2013年英国UniversityCollegeLondon(UCL)访问学者。已在AIChEJ.、Chem.Eng.Sci.和J.Mater.Chem.等刊物上发表论文六十余篇,获授权专利16项,参与撰写专着2部。ACSAppl.Mater.Interfaces、Chem.Eng.J、Appl.Catal.A、Ind.Eng.Chem.Res.、DaltonTransRSCAdv.和Nanoscale等期刊审稿人。

网友评论
相关阅读
开心一笑,昨晚酒吧里看球,小王和她男友现在还好吧,男友惊的目瞪口呆

开心一笑,昨晚酒吧里看球,小王和她男友现在还好吧,男友惊的目瞪口呆

她是全公司最认真也最无趣的员工,没想到有天会被经理搭讪。“我

笑话段子,一个月前,我们公司新招来了一位心理学女硕士

笑话段子,一个月前,我们公司新招来了一位心理学女硕士

笑话段子1:儿子的小伙伴说妈挺个大肚子快生了,我插句嘴:“那

一男子支付6万“解冻费”才知被骗

一男子支付6万“解冻费”才知被骗

10月20日至10月21日今日电诈警情通报今日,全市共接电信

开心笑话,我可是跟这种人谈过八年恋爱的人,后来找到后弄了一身湿

开心笑话,我可是跟这种人谈过八年恋爱的人,后来找到后弄了一身湿

有个人看到儿子不肯用功读书,就用古人好学的故事开导他。他说:

特朗普曾在中国缴税?中方回应这是真的吗?特朗普曾在中国缴税?中方回应背后的真相

特朗普曾在中国缴税?中方回应这是真的吗?特朗普曾在中国缴税?中方回应背后的真相

特朗普最新威胁加税!中方回应美国总统特朗普当地时间周日(5月

中国同老挝,赵立坚表示

中国同老挝,赵立坚表示

10月21日,发言人赵立坚主持例行记者会。有记者提问,10月

重磅,一条高铁勘察设计总体总包中标,终点深汕合作区

重磅,一条高铁勘察设计总体总包中标,终点深汕合作区

2020年10月16日,深圳市规划和自然资源局公布:深圳四条

张家界志愿者绝壁捡垃圾这是真的吗?张家界志愿者绝壁捡垃圾令人震惊

张家界志愿者绝壁捡垃圾这是真的吗?张家界志愿者绝壁捡垃圾令人震惊

凌空绝壁,登天梯观奇景,并非只有张家界凌空绝壁,登天梯观奇景

全国平均新房价格进入万元时代究竟怎么回事?全国平均新房价格进入万元时代事件始末

全国平均新房价格进入万元时代究竟怎么回事?全国平均新房价格进入万元时代事件始末

生猪价格8连跌 9月 CPI 或进入“1时代”猪价降了!以往

幽默笑话,5.我一哥们是开公交汽车的,他突然肚子疼想上厕所

幽默笑话,5.我一哥们是开公交汽车的,他突然肚子疼想上厕所

1.公交车上,站我边上一美女问我到不到某地,我说美女,你坐反