今天是刘小爱自学Java的第168天。 感谢你的观看,谢谢你。 学习计划安排,搜索相关的前端页面分析:
至于发送请求和后台代码留待明天完成。 一、页面头部栏关于前端代码基本上都已经写好了,但本着学习的态度,最好自己也能看得懂。 大致捋一捋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后沪漂,不为其它,只为学会自律做好自己,也愿我的每日打卡能给你带来勇气,欢迎点赞关注和评论。 |
|