当前位置:网站首页>零基础打造一款属于自己的网页搜索引擎
零基础打造一款属于自己的网页搜索引擎
2020-11-06 20:53:00 【Python进阶者】
前言
在说这个之前,想必大家应该都比较了解搜索引擎了,它就是通过用户在浏览器输入框中输入文本,从而显示一些结果,你觉得哪项符合你要搜索的内容,你就点击哪项。
【一、项目准备】
浏览器:360浏览器
编辑器:Sublime Text 3
插件:Jquery-3.2.1.Min.Js
【二、项目实现】
由于是要实现一个网页搜索引擎,所以我们需要借用网页三剑客(Html+Css+Javascript),然后实现这一功能。
1.打开百度分析网页结构
我们可以先看看百度的搜索引擎:
可以看到,这个搜索框的部分设置,比如关闭自动完成功能。然后我们在随便搜索内容来查看它的变化:
可以看到某些我们查询的关键字,于是我们便发现了请求规律:
https://www.baidu.com/s?+查询字符参数
这就构成了我们的一个完整的get请求,而且这里面有很多关键字参数可以省略掉,只需要保留重要的一部分就好了。于是,经试验,得出如下结论:
https://www.baidu.com/s?wd=keyword
这个才是请求的接口地址,只需将keyword参数替换为任意搜索关键字即可实现查询并跳转到相应结果页面。
2.编写Html输入框,搜索按钮
看过之前写的Html系列的文章,你将不再对此感到困惑。
<html>
<head>
<title></title>
<style type="text/css">
*{ 内外边距初始时为0
margin:0;
padding:0
}
input{
width:300px;
height:30px
}
span{
position:absolute; 绝对定位
background-color:red; 背景颜色
border:1px solid gray; 边框设置
width:60px;
height:32px;
text-align:center 文字位置
}
span:hover{ 鼠标悬停时的样式
background-color:blue
}
</style>
</head>
<body>
<input type="text" name="" placeholder="请输入要搜索的内容"> 文本框
<span>search</span> 搜索按钮
</body>
</html>
编写完成后进入浏览器查看,即可看到:
可以看到,已经有点浏览器搜索框的意思了。
3.导入Jquery插件
<script src='jquery-3.2.1.min.js'></script>
4.编写js脚本
这个是重中之重,打开浏览器,network,继续分析:
可以看到搜索结果就在里面。然后打开这个请求的url地址,经过多次实验,发现就只有图中标记的参数有变化:
所以我们可以得出结论,我们只需要改变这两个值即可。
1).创建删除脚本
于是我先创建一个脚本标签,不用它的时候随时可以清除,避免占用内存,导致页面打开迟缓,性能降低:
var script=document.createElement('script'); 创建script的标签
script.id='jsonp'; 设置id为jsonp
script.src='https://www.baidu.com/sugrec?prod=pc&cb=getData&wd='+wd; 设置它的地址
document.body.appendChild(script); 添加script元素到body中
然后等它不用了,随时将它删除:
var script=document.querySelector('#jsonp'); 选择id为jsonp的元素
script.parentNode.removeChild(script); 从这个元素的父元素中删除这个元素
2).生成选项下拉菜单
我们在浏览器可以看到,只要一输入文本,它就会弹出对应的选项让我们选择,那么这是如何办到的了?
<script>
function getlist(wd){ /*获取下拉列表*/
var script=document.createElement('script'); /*创建script的标签*/
script.id='jsonp'; /*设置id为jsonp*/
script.src='https://www.baidu.com/sugrec?prod=pc&cb=getData&wd='+wd; /* 设置它的地址*/
document.body.appendChild(script); /*添加script元素到body中*/
}
function getData(data){ /*获取数据*/
var script=document.querySelector('#jsonp'); /*选择id为jsonp的元素*/
script.parentNode.removeChild(script); /*从这个元素的父元素中删除这个元素*/
$('ol').html(''); /* 设置有序列表的值为空*/
var da=data.g; /* 获取搜索的结果*/
if(da){ /*结果存在的话就将结果放到li标签中*/
da.forEach(function(item,index){
$('<li><a target="_blank" href ="https://www.baidu.com/s?wd='+item.q+'">'+item.q+'</a></li>').appendTo('ol');
})
}
}
/* 判断键盘是否按下*/
$('input:text').keyup(function(){
var wd=$(this).val(); /* 输入框的值*/
if(wd==''){ /*如果值是空,那么就隐藏,否则显示*/
$('ol').css('display','none');
$('ol').css('zIndex',-10);
}else{
$('ol').css('display','block');
$('ol').css('zIndex',20);
}
getlist(wd);
});
</script>
可以看到,搜索结果已经出来了,而且有序列表下的"li"标签也都对应的生成了。
3).给选项标记序列
我们可以看到,结果终于出来,但是我想给它个序列号,这样就可以知道搜索结果有多少个了。要设置的标记方式有很多种,可以以数字开头,也可以是大小写字母或者罗马时间。在这里我选择数字,很简单。
终于非常完美的实现了这一功能,是不是很惊艳了,赶快去试下吧。
4).搜索刷新
看到这里相信大家应该都知道这个功能已经算是完成了,我们只需要随便点击哪个li标签都可以访问到相应的页面。于是,我决定添加一个刷新的功能,属于重连服务器的那种刷新:
<span onclick='window.location.reload()'>search</span> 点击后立即刷新
【三、项目总结】
总的来说,对于初学者小白是个很不错的练手项目,希望大家能从中有所收获。
需要源码的小伙伴,后台回复“搜索引擎”四个字即可获取。 想学习更多Python网络爬虫与数据挖掘知识,可前往专业网站:http://pdcfighting.com/
版权声明
本文为[Python进阶者]所创,转载请带上原文链接,感谢
https://my.oschina.net/u/4521128/blog/4667614
边栏推荐
- Synchronous configuration from git to consult with git 2consul
- I've been rejected by the product manager. Why don't you know
- Wechat applet: prevent multiple click jump (function throttling)
- How to encapsulate distributed locks more elegantly
- High availability cluster deployment of jumpserver: (6) deployment of SSH agent module Koko and implementation of system service management
- 熬夜总结了报表自动化、数据可视化和挖掘的要点,和你想的不一样
- Analysis of partial source codes of qthread
- 带你学习ES5中新增的方法
- 深度揭祕垃圾回收底層,這次讓你徹底弄懂她
- (2)ASP.NET Core3.1 Ocelot路由
猜你喜欢
前端都应懂的入门基础-github基础
JVM memory area and garbage collection
How to select the evaluation index of classification model
Mac installation hanlp, and win installation and use
从海外进军中国,Rancher要执容器云市场牛耳 | 爱分析调研
阿里云Q2营收破纪录背后,云的打开方式正在重塑
EOS创始人BM: UE,UBI,URI有什么区别?
教你轻松搞懂vue-codemirror的基本用法:主要实现代码编辑、验证提示、代码格式化
The road of C + + Learning: from introduction to mastery
Working principle of gradient descent algorithm in machine learning
随机推荐
How long does it take you to work out an object-oriented programming interview question from Ali school?
Using consult to realize service discovery: instance ID customization
From zero learning artificial intelligence, open the road of career planning!
一篇文章带你了解CSS 分页实例
容联完成1.25亿美元F轮融资
2018中国云厂商TOP5:阿里云、腾讯云、AWS、电信、联通 ...
Natural language processing - wrong word recognition (based on Python) kenlm, pycorrector
一篇文章带你了解CSS 渐变知识
Grouping operation aligned with specified datum
Filecoin最新动态 完成重大升级 已实现四大项目进展!
Word segmentation, naming subject recognition, part of speech and grammatical analysis in natural language processing
Solve the problem of database insert data garbled in PL / SQL developer
中小微企业选择共享办公室怎么样?
加速「全民直播」洪流,如何攻克延时、卡顿、高并发难题?
IPFS/Filecoin合法性:保护个人隐私不被泄露
Brief introduction and advantages and disadvantages of deepwalk model
Character string and memory operation function in C language
Working principle of gradient descent algorithm in machine learning
EOS创始人BM: UE,UBI,URI有什么区别?
Multi classification of unbalanced text using AWS sagemaker blazingtext