技术博客
首页 所有文章 标签 分类 关于
技术博客

目录

如何实现百度首页搜索

 收录于 实训
   约 3204 字   预计阅读 7 分钟 
https://bing.ee123.net/img/rand?artid=81275688
目录

如何实现百度首页搜索

本文通过一个小项目（百度首页搜索）来说明：

工具：sts，MySQL数据库，火狐浏览器

步奏：

一、先利用sts建立一个web动态项目，然后在web项目中创建一个html文件来制作一个百度首页：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>百度一下 你就知道</title>
<style type="text/css">
body {
	font-family: arial;
	font-size: 12px;
}

#topbar { /*id选择器*/
	text-align: right;
	font-sixe: 13px;
	margin-top: 18px;
	padding-right: 5px;
}

#topbar1 a {
	color: #999;
	margin-left: 25px;
	margin-top: 18px
}

#topbar2 a {
	color: #999;
}
/*#topbar0 span{
color:#999;
}8*/
#topbar2 span {
	color: #999;
}

#topbar a {
	color: #333;
	margin-left: 20px;
}

.bola {
	font-weight: 700;
}

#topbar #morepro {
	background: #2d78f4;
	color: #fff;
	padding: 3px;
}

.centerdiv {
	text-align: center;
}

#searchText {
	width: 540px;
	height: 32px;
	border: 1px solid #2d78f4;
}

#submitBtn {
	width: 100px;
	height: 36px;
	background: #3385ff;
	color: #fff;
	border: none;
}

.iconCls0 {
	display: inline-block;
	width: 14px;
	height: 17px;
	background: url(icons_5859e57.png) -600px -95px;
}

.iconCls {
	display: inline-block;
	width: 14px;
	height: 17px;
	background: url(icons_5859e57.png) -624px -95px;
}
</head>
</style>
<body>
	<div id="topbar">
		<a href="https://news.baidu.com" class="bola">新闻</a> <a
			href="https://www.hao123.com" class="bola">hao123</a> <a
			href="https://map.baidu.com" class="bola">地图</a> <a
			href="https://v.baidu.com" class="bola">视频</a> <a
			href="https://tieba.baidu.com" class="bola">贴吧</a> <a
			href="https://xueshu.baidu.com" class="bola">学术</a> <a
			href="https://passport.baidu.com/v2/?login&tpl=mn&u=http%3A%2F%2Fwww.baidu.com%2F&sms=5">登录</a>
		<a href="http://www.baidu.com/gaoji/preferences.html">设置</a> <a
			id="morepro" href="百度一下，你就知道.htm">更多产品</a>
	</div>
	<div class="centerdiv">
		<img src="bd_logo1.png" width="270" style="margin-top: 135px"
			style="color:#999"></img>
	</div>
	<div class="centerdiv">
		<form action="search.jsp">
			<input id="searchText" name="KW"><input id="submitBtn" type="submit"
				value="百度一下" style="margin-top: 30px">
		</form>
	</div>
	<div class="centerdiv">
		<img src="zbios_efde696.png" style="margin-top: 380px"></img>
	</div>
	<div class="centerdiv">
		<span style="color: #666;">百度</span>
	</div>

	<div id="topbar1" class="centerdiv" style="margin-top: 20px">
		<a href="https://www.baidu.com/cache/sethelp/help.html">把百度设置为主页 </a>
		<a href="http://home.baidu.com/">关于百度 </a> <a
			href="http://ir.baidu.com/">AboutBaidu </a> <a
			href="http://e.baidu.com/?refer=888">百度推广</a>
	</div>
	<div id="topbar2" class="centerdiv" style="margin-top: 8px">
		<span>@2018Baidu</span> <a href="http://www.baidu.com/duty/">使用百度前必读
		</a> <a href="http://jianyi.baidu.com/">意见反馈 </a> <span>京ICP证030173号</span>
		<span class="iconCls0"></span> <a
			href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=11000002000001"
			style="margin-left: 18px">京公安网备号11000002000001 </a> <a href="http://www.qq.com"
			class="iconCls"></a>

	</div>
</body>
</html>

https://i-blog.csdnimg.cn/blog_migrate/d7a8477e4b109779d1b16eb9d5943ac6.png

运行后是这样的，当然你也可以在浏览器中打开会更好看一些

二、制作搜索后跳转后的界面，我们用在web项目中添加一个JSP文件，然后连接上数据库：

<%@page import="java.sql.SQLException"%>
<%@page import="java.sql.ResultSet"%>
<%@page import="java.sql.Statement"%>
<%@page import="java.sql.DriverManager"%>
<%@page import="java.sql.Connection"%>
<%@ page language="java" contentType="text/html; charset=utf-8"
	pageEncoding="utf-8"%>
<!DOCTYPE html>
<html>
<head>
<%
String kw=request.getParameter("KW");
%>
<meta charset="UTF-8">
<title><%=kw %>_百度搜索</title>
<style type="text/css">
body {
	font-family: arial;
	font-size: 12px;
}

#topmar a {
	color: #333;
	font-size: 12px;
	margin-left: 9px;
	padding-right: 5px;
}

.leftdiv {
	float: left;
}

.rightdiv {
	float: right;
	height: 55px;
	line-height: 55px;
}

.after1div {
	clear: both;
	font-size: 14px;
	height: 55px;
	line-height: 55px;
	padding-left: 101px;
}

.after1div a {
	color: #666;
	margin-left: 18px;
}

.after2div {
	clear: both;
	font-size: 12px;
	height: 55px;
	line-height: 55px;
	padding-left: 101px;
}

.after2div a {
	color: #999;
	margin-left: 240px;
}

.leftdiv1 {
	clear: both;
	float: left;
	width: 538px;
	
	line-height: 15px;
	font-weight: 400;
	font-size: medium;
	margin-left: 101px;
}
#searchText {
	width: 540px;
	height: 34px;
	line-height: 22px;
	border: 1px solid #b6b6b6;
	margin-left: 5px;
	margin-top: 0px;
}

#submitbtn {
	width: 100px;
	height: 38px;
	color: #fff;
	border: 0px;
	background: #3385ff;
	border-bottom: 1px solid #2d78f4;
	margin-top: 0px;
}
</style>
</head>
<body>
	
	<div class="leftdiv">
		<img src="123.gif" width="101" height="32.8" border="0"></img> <input
			id="searchText"><input id="submitbtn" value="百度一下"
			type="submit">
	</div>
	<div id="topmar" class="rightdiv">
		<a href="https://www.baidu.com/">百度首页</a> <a
			href="https://javascript:;">设置</a> <a
			href="https://passport.baidu.com/v2/?login&tpl=mn&u=http%3A%2F%2Fwww.baidu.com%2F&sms=5">登录</a>
	</div>
	<div class="after1div">
		<span style="color: #666;">网页</span> <a
			href="http://news.baidu.com/ns?cl=2&rn=20&tn=news&word=%E6%96%B0%E4%B9%A1">新闻</a>
		<a href="http://tieba.baidu.com/f?fr=wwwt&kw=%E6%96%B0%E4%B9%A1">贴吧</a>
		<a
			href="http://zhidao.baidu.com/q?ct=17&pn=0&tn=ikaslist&rn=10&fr=wwwt&word=%E6%96%B0%E4%B9%A1">知道</a>
		<a
			href="http://music.baidu.com/search?fr=ps&ie=utf-8&key=%E6%96%B0%E4%B9%A1">音乐</a>
		<a
			href="http://image.baidu.com/i?tn=baiduimage&ps=1&ct=201326592&lm=-1&cl=2&nc=1&ie=utf-8&word=%E6%96%B0%E4%B9%A1">图片</a>
		<a
			href="http://v.baidu.com/v?ct=301989888&rn=20&pn=0&db=0&s=25&ie=utf-8&word=%E6%96%B0%E4%B9%A1">视频</a>
		<a href="http://map.baidu.com/m?fr=ps01000&word=%E6%96%B0%E4%B9%A1">地图</a>
		<a
			href="http://wenku.baidu.com/search?lm=0&od=0&ie=utf-8&word=%E6%96%B0%E4%B9%A1">文库</a>
		<a href="http://www.baidu.com/more/">更多>></a>
	</div>
	<div class="after2div">
		<span style="color: #999;">百度为您找到相关结果约17,100,000个</span> <a
			href="http://news.baidu.com/ns?cl=2&rn=20&tn=news&word=%E6%96%B0%E4%B9%A1">搜索工具</a>
	</div>
<%
		try {
			//1.加载驱动
			Class.forName("com.mysql.jdbc.Driver");
			//2.连接数据库
			Connection conn = DriverManager.getConnection("jdbc:mysql:///baidu", "root", "123456");
			//3.创建Statement
			Statement st = conn.createStatement();
			//4.执行查询                                   根据输入关键字进行模糊查询
			ResultSet rs = st.executeQuery("select * from chaxun where title like '%"+kw+"%'");
			//5.遍历结果集：逐行遍历
			while(rs.next()) {
				//获取指定列的值
				int id = rs.getInt("id");
				String title = rs.getString("title");
				String content = rs.getString("content");
				String url = rs.getString("url");
		%>
				<div class="leftdiv1">
					<a href="<%=url %>"><%=title %></a>
					<p style="font-size:13px;color:#333;"><%=content %></p>
					<br><span style="color:green;"><%=url %></span>
				</div>
		
		<%		
			}
		} catch (ClassNotFoundException e) {
			e.printStackTrace();
		} catch (SQLException e) {
			e.printStackTrace();
		}
		%>


</body>
</html>

三、运行html文件，在搜索框中搜索数据库中添加的数据，就会跳转到搜索后的界面，并且读取出数据库中的内容

https://i-blog.csdnimg.cn/blog_migrate/3d6f290ee5ad236ce189789c00a127b3.png

数据库中的内容为： https://i-blog.csdnimg.cn/blog_migrate/82a7829c14647a6283130d9435bf110b.png

点击搜索 后：

https://i-blog.csdnimg.cn/blog_migrate/bc1153b3d7070bd6a4fc76d8cfe2d57b.png

我们发现数据库中的内容已经被读取到了页面上，是不是很神奇呢

更新于 2024-05-03
 Web, Jsp, Jdbc, Html
返回 | 主页