我的博客网站开发6——博文关键字搜索
2024-04-18 04:23:43
在页面中，用户可以通过关键字的搜索功能搜索博文。可以实现类似百度和Google的页面搜索功能，可实现多个关键字的搜索。搜索后，在搜索的结果中有关键字的高亮度的提示如：
在搜索的结果页面，模仿Google的搜索页面的快照功能，实现简单的快照查看搜索博文的功能。点击搜索页的快照按钮，页面右侧会出现博文的内容，如：
搜索页的基本功能实现。
接下来就是功能逻辑代码的实现部分。
首先要解决一个基本的问题就是：如何传送多个关键字进行查询。
我最初的想法是既然是多个关键字的搜索，类似百度和Google的搜索的话，我感觉就应该用一个数组来装载这些关键字，加以区分这些关键字的是空格，然后将其使用spilit函数对字符串进行拆分分割，使用数组对分割后的关键字装载。装载后的数组进行字符串的拼凑形成SQL语句，传回数据库进行模糊查询。
首先在博客首页的搜索功能中输入关键字，如：
C#代码：
1 string SQLstr; //拼凑SQL语句
2 string keyword = Server.UrlDecode(Request.QueryString["keyword"]);//接收原跳转页面传回的关键字字符串
3 char[] separator={' '};
4 string[] keywordArray = keyword.Split(separator);
5 DataTable dt_CloneKeywordSearch;//克隆dt_KeywordSearch
6 if (keyword != null)
7 {
8 SQLstr = " where title like '%" + keywordArray[0].ToString() + "%'" + "or essayContent like'%" + keywordArray[0].ToString() + "%'";
9 for (int i = 1; i < keywordArray.Length; i++)
10 {
11 SQLstr += "or title like'%" + keywordArray[i].ToString() + "%'" + "or essayContent like'%" + keywordArray[i].ToString()+"%'";
12 }
13 DataTable dt_KeywordSearch = BLL.BLL_BlogSearch.Select_KeywordSearch(SQLstr);
14 }实现关键字的处理传回数据库查询出结果后，接下来就是数据的相关处理，包括对查询结果的数据绑定，关键字的高亮度显示。
Html代码：
View Code
1 <div style=" background:#FFFFFF; float:left; width:50%;"> 2 <asp:GridView ID="gdv_KeywordSearch" runat="server" AutoGenerateColumns="False" 3 BorderStyle="None" GridLines="None" ShowHeader="False" AllowSorting="True"> 4 <Columns> 5 <asp:TemplateField> 6 <ItemTemplate> 7 <div class="dgv_block" style=" border-bottom:dashed 1px #000000; height:auto; float:left; width:100%;"> 8 <div style=" margin:5px 5px 5px 5px; line-height:1.2em; width:90%; float:left;"> 9 <div id="search_title" style=" text-align:left; color:#261cdc; font-family:Verdana; font-size:14px;"><%# DataBinder.Eval(Container.DataItem, "title") %></div> 10 <div id="search_content" style=" text-align:left; font-family:Verdana; font-size:12px; margin-top:5px;"><%# DataBinder.Eval(Container.DataItem, "essayContent")%></div> 11 <div id="search_contentTime" style=" text-align:left;margin-top:5px;"><%# DataBinder.Eval(Container.DataItem, "essaypostTime")%></div> 12 </div> 13 <div class="div_QuickLook" style="width:6%; height:100%; float:right; vertical-align:middle;"> 14 <span class="QuickLook" id="<%# DataBinder.Eval(Container.DataItem, "essayId") %>" style=" color:#261cdc; font-size:14px; font-weight:bold;">快<br />照</span> 15 </div> 16 </div> 17 </ItemTemplate> 18 </asp:TemplateField> 19 </Columns> 20 </asp:GridView> 21 </div>
后台CS的C#代码：
View Code
1 for (int i = 0; i < dt_KeywordSearch.Rows.Count; i++)
2 {
3 //截取正文content前300字
4 string str_Content = dt_KeywordSearch.Rows[i]["essayContent"].ToString().Trim();
5 dt_KeywordSearch.Rows[i]["essayContent"] = RemoveHTML(str_Content.Substring(0, str_Content.Length > 300 ? 300 : str_Content.Length));//去除html标记
6
7 //关键字高亮度显示
8 dt_KeywordSearch.Rows[i]["title"] = keyword_tag(dt_KeywordSearch.Rows[i]["title"].ToString().Trim(), keywordArray);
9 dt_KeywordSearch.Rows[i]["essayContent"] = keyword_tag(dt_KeywordSearch.Rows[i]["essayContent"].ToString(), keywordArray);
10 }
11
12 //查询结果数据绑定
13 this.gdv_KeywordSearch.DataSource = dt_KeywordSearch;
14 gdv_KeywordSearch.DataKeyNames = new string[] { "essayId" };
15 gdv_KeywordSearch.DataBind();
16
17 //关键字高亮度提示
18 public string keyword_tag(string str, string[] keywordArray)
19 {
20 for(int i=0;i<keywordArray.Length;i++)
21 {
22 str = str.Replace(keywordArray[i], "<font color='#ff0000'>" + keywordArray[i] + "</font>");
23 }
24 return str;
25 }
26
27 //摘要中去除html标记
28 public static string RemoveHTML(string Htmlstring)
29 {
30 //删除脚本
31 Htmlstring = Regex.Replace(Htmlstring, @"<script[^>]*?>.*?</script>", "", RegexOptions.IgnoreCase);
32 //删除HTML
33 Htmlstring = Regex.Replace(Htmlstring, @"<(.[^>]*)>", "", RegexOptions.IgnoreCase);
34 Htmlstring = Regex.Replace(Htmlstring, @"([\r\n])[\s]+", "", RegexOptions.IgnoreCase);
35 Htmlstring = Regex.Replace(Htmlstring, @"-->", "", RegexOptions.IgnoreCase);
36 Htmlstring = Regex.Replace(Htmlstring, @"<!--.*", "", RegexOptions.IgnoreCase);
37
38 Htmlstring = Regex.Replace(Htmlstring, @"&(quot|#34);", "\"", RegexOptions.IgnoreCase);
39 Htmlstring = Regex.Replace(Htmlstring, @"&(amp|#38);", "&", RegexOptions.IgnoreCase);
40 Htmlstring = Regex.Replace(Htmlstring, @"&(lt|#60);", "<", RegexOptions.IgnoreCase);
41 Htmlstring = Regex.Replace(Htmlstring, @"&(gt|#62);", ">", RegexOptions.IgnoreCase);
42 Htmlstring = Regex.Replace(Htmlstring, @"&(nbsp|#160);", " ", RegexOptions.IgnoreCase);
43 Htmlstring = Regex.Replace(Htmlstring, @"&(iexcl|#161);", "\xa1", RegexOptions.IgnoreCase);
44 Htmlstring = Regex.Replace(Htmlstring, @"&(cent|#162);", "\xa2", RegexOptions.IgnoreCase);
45 Htmlstring = Regex.Replace(Htmlstring, @"&(pound|#163);", "\xa3", RegexOptions.IgnoreCase);
46 Htmlstring = Regex.Replace(Htmlstring, @"&(copy|#169);", "\xa9", RegexOptions.IgnoreCase);
47 Htmlstring = Regex.Replace(Htmlstring, @"&#(\d+);", "", RegexOptions.IgnoreCase);
48
49 Htmlstring.Replace("<", "");
50 Htmlstring.Replace(">", "");
51 Htmlstring.Replace("\r\n", "");
52 Htmlstring = HttpContext.Current.Server.HtmlEncode(Htmlstring).Trim();
53
54 return Htmlstring;
55 }接下来是实现鼠标经过每个结果时，显示“快照”按钮，离开时隐藏，js代码实现。
Js代码：
1 $(".div_QuickLook").hide(); //隐藏快照标志
2 //经过时显示快照标记,离开时隐藏
3 $(".dgv_block").mousemove(function () {
4 $(this).children(".div_QuickLook").show();
5 });
6 $(".dgv_block").mouseleave(function () {
7 $(this).children(".div_QuickLook").hide();
8 });
9
10 $(".QuickLook").hover(function () {
11 $(this).css({ "color": "#FF0000" });
12 }, function () {
13 $(this).css({ "color": "#261cdc" });
14 });最后是点击快照时，显示文章的全部内容，其实质就是查询绑定数据。处理的小问题就是动态异步加载数据，使用Ajax实现异步刷新。
Html代码：
1 <div id="QuickLookPage" style=" float:right; width:49%; text-align:left; overflow:hidden; background:#FFFFFF;"> 2 </div>
Js的Ajax实现异步加载数据：
1 $(".QuickLook").click(function () {
2 $("#QuickLookPage").html(""); //每次加载快照时，先清空
3 var $essayId = $(this);
4 $(this).parent().siblings().children("#search_title").clone().appendTo($("#QuickLookPage"));
5 var options = {
6 type: "POST",
7 url: "BlogSearch.aspx/GetQuickLook",
8 data: "{essayId:" + $essayId.attr("id") + "}",
9 contentType: "application/json;charset=urf-8",
10 dataType: "json",
11 success: function (response) {
12 $("#QuickLookPage").append("<div style='margin-top:10px; padding:0px 5px 5px 5px;'>" + response.d + "</div>");
13 }
14 };
15 $.ajax(options);
16 });后台CS的C#代码：
1 [WebMethod]
2 public static string GetQuickLook(string essayId)
3 {
4 DataTable dt_QuickLook = BLL.BLL_BlogSearch.Select_QuickLook(essayId);
5
6 return dt_QuickLook.Rows[0]["essayContent"].ToString().Trim();
7 }
自此，搜索功能基本实现，实现多关键字查找。
不足之处：未对搜索算法进行优化，页面的布局和设计还未完善，会在以后不断完善它。
转载于:https://www.cnblogs.com/suguoqiang/archive/2012/05/07/2487373.html
我的博客网站开发6——博文关键字搜索相关推荐
- 我的博客网站开发1——博客首页设计
首先是是对导航菜单的设计,个人感觉对界面的设计还是要以大方和显著为主为好. Html代码: 1 <div id="menu_header"> 2 <ul> ...
- 基于SpringBoot从零构建博客网站 - 开发设置主页标识和修改个人信息功能
由于守望博客系统中支持由用户自己设置个人主页的URL的后半段,所以必须要用户设置该标识的功能,而且是用户注册登录之后自动弹出的页面,如果用户没有设置该标识,其它的操作是不能够操作的,同时要求主页标识只 ...
- 搭建个人博客网站 -- vue初学者学习总结
搭建个人博客网站 – vue技术学习 开源代码:个性化个人博客系统 参考项目:风丶宇的个人博客 一.项目概述 项目主要是基于SpringBoot + Vue 开发的前后端分离博客,本文主要涉及项目前端 ...
- java开发论文答辩_毕业设计答辩基于JavaWeb的博客网站的设计与实现.ppt
毕业设计答辩基于JavaWeb的博客网站的设计与实现 博客网站的设计与实现 --指导老师 XXXXX 学生 XXXXX 毕业答辩 一.研究背景和内容 二.系统环境的配置 三.系统使用的技术 四.系统概 ...
- html编写个人博客_Django 开发简易博客网站
本篇使用 Django 开发博客网站的核心内容,涉及 Django .MySQL .WampServer :我比较喜欢 Django 框架的 MVC (模型.视图.控制器)的软件设计模式,其中我最喜欢 ...
- pbp 读取 mysql数据_pbp: Django项目开发，个人博客网站类。
pbp 项目介绍 首个Django项目开发,个人博客网站类. 框架模型 Django 运行平台 Linux 安装部署 1.安装Python3环境 CentOS 7 curl -o /etc/yum.r ...
- java毕业论文_【毕业论文】基于java的博客网站设计与开发毕业论文(word文档)
<[毕业论文]基于java的博客网站设计与开发毕业论文.doc>由会员分享,可免费在线阅读全文,更多与<[毕业论文]基于java的博客网站设计与开发毕业论文(word文档)>相 ...
- Django开发个人博客网站——1、开发环境
1.写在前面的话 刚最开始自学python,然后学习django框架,中间断断续续有几个月的时间,是时候通过一个项目来检验下自己的学习成果了.既然学习了django web框架,那很自然的就是想到要搭 ...
- Android应用开发-小巫CSDN博客客户端之显示博文详细内容
Android应用开发-小巫CSDN博客客户端之显示博文详细内容 上篇博文给大家介绍的是如何嵌入有米广告并且获取收益,本篇博客打算讲讲关于如何在一个ListView里显示博文的详细信息,这个可能是童鞋 ...
最新文章
- 利用SMS OSD实现win2008操作系统的部署
- wxWidgets：wxURI类用法
- python异常处理优点_python自测100题（下）
- k8s - 如何变更CNI网络插件IP池?
- Unity的几个特殊文件夹
- linux之netstat与lsof
- mysql2008使用教程_sqlserver2008简单使用教程
- 多小区下小区上行速率的计算(6）
- 正余弦变换、和差、倍角公式
- linux程序接口实验,实验 一 操作系统接口实验
- 本地计算机出现多个网络连接,电脑网络连接出现感叹号？教你一招解决
- python作中国地图背景气泡图_Python数据可视化：香港地图、房价可视化，绘制气泡图...
- 乐高大颗粒作品之西游记
- win10右键文件夹无反应
- rep论文阅读2:ResRep_Lossless CNN Pruning via Decoupling Remembering and Forgetting
- 微信绑定会员卡服务器出错,会员卡信息更新失败
- python pip install一些第三方库的时候error
- Java：Set接口
- 1.IEC 62056-21 E模式通信
- potplayer直播源合集