赞
踩
项目已上传gitee : 链接
当我们输入搜索内容后,会展示出搜索结果页面:
搜索引擎获取页面的方式主要涉及“爬虫”这样的程序。当用户输入查询词后,如何让查询词和当前的网页内容进行匹配呢?如果直接进行暴力搜索是非常低效的,为了高效地获取结果,需要使用“倒排索引”。
倒排索引源于实际应用中需要根据属性的值来查找记录。
实现一个针对Java文档的搜索引擎。像百度,搜狗,bing等搜索引擎,都是属于“全站搜索”,即搜索整个互联网上所有的网站。还有一类搜索引擎,称为“站内搜索”,只针对某个网站内部的内容进行搜索。我们可以通过“爬虫”技术获取到一个网站的页面,但针对Java文档来说,我们有更简单的方案,直接从官网下载文档的压缩包。
我先将下载好的压缩包解压并放在C盘search目录下 , 如下图所示 :
1)扫描下载到的文档。分析文档的内容 , 构建出正排索引+倒排索引 . 并且把索引内容保存到文件中 .
2)加载制作好的索引 . 并提供一些API实现查正排和查倒排这样的功能 .
调用索引模块,实现一个搜索的完整过程 .
输入:用户的查询词;
输出:完整的搜索结果(包含了很多条记录,每个记录就有标题,描述,展示URL,并且点击能够跳转)。
需要实现一个简单的web程序,能够通过网页的形式来和用户进行交互。包含了前端和后端。
用户在搜索引擎中输入的查询词很可能是一句话,那么此时就需要进行分词。
分词原理大体分为两种:
所谓分词的实现,属于“人工智能”的范畴。
Java中也有许多基于分词的第三方库,此处使用ansj。从maven中央仓库下载相关依赖到pom.xml中。
<!-- https://mvnrepository.com/artifact/org.ansj/ansj_seg -->
<dependency>
<groupId>org.ansj</groupId>
<artifactId>ansj_seg</artifactId>
<version>5.1.6</version>
</dependency>
测试分词功能:
import org.ansj.domain.Term;
import org.ansj.splitWord.analysis.ToAnalysis;
import java.util.List;
public class Testansj {
public static void main(String[] args) {
String str = "小明毕业于清华大学计算机专业,后来又去蓝翔技校和新东方深造";
//Term就表示一个分词结果
List<Term> terms = ToAnalysis.parse(str).getTerms();
for (Term t : terms) {
System.out.println(t.getName());
}
}
}
import org.ansj.domain.Term;
import org.ansj.splitWord.analysis.ToAnalysis;
import java.util.List;
public class Testansj {
public static void main(String[] args) {
String str = "I have a dream";
//Term就表示一个分词结果
List<Term> terms = ToAnalysis.parse(str).getTerms();
for (Term t : terms) {
System.out.println(t.getName());
}
}
}
整个索引模块主要涉及Parser类和Index类 . Parser类主要负责解析文件 , Index类主要负责把在内存中构造好的索引数据结构,保存到指定的文件中 .
Parser类
package com.example.demo.searcher; import java.io.BufferedReader; import java.io.File; import java.io.FileReader; import java.io.IOException; import java.util.ArrayList; import java.util.concurrent.CountDownLatch; import java.util.concurrent.ExecutorService; import java.util.concurrent.Executors; import java.util.concurrent.atomic.AtomicLong; public class Parser { //先指定一个加载文档的路径 private static final String INPUT_PATH = "C:/search/jdk-8u351-docs-all/docs/api"; //创建一个Index实例 private Index index = new Index(); private AtomicLong t1 = new AtomicLong(0); private AtomicLong t2 = new AtomicLong(0); /** * 实现单线程制作索引 * @throws IOException */ public void run() throws IOException {//整个Parser类的入口 long beg = System.currentTimeMillis(); System.out.println("索引制作开始!"); //1.根据上面指定的路径,枚举出路径下所有的文件,需要把子目录中的文件全部获取到 ArrayList<File> fileList = new ArrayList<>(); enumFile(INPUT_PATH,fileList); //fileList中已经得到所有以.html结尾的文件名 long endEnumFile = System.currentTimeMillis(); System.out.println("枚举文件完毕!消耗时间:" + (endEnumFile-beg) + "ms"); //展示输出部分文件名 if(25 <= fileList.size()) { for (int i = 25; i >= 0; i++) { System.out.println(fileList.get(i)); } } else { for (int i = fileList.size(); i >= 0; i++) { System.out.println(fileList.get(i)); } } //2.针对上面罗列出来的文件的路径,打开文件,读取文件内容,并进行解析,并构建索引 for (File f : fileList) { parseHTML(f); } long endFor = System.currentTimeMillis(); System.out.println("循环遍历文件并构建索引完毕!消耗时间:" + (endFor-endEnumFile) + "ms"); //3.把在内存中构造好的索引数据结构,保存到指定的文件中。 index.save(); long end = System.currentTimeMillis(); System.out.println("索引制作完毕!消耗时间" + (end-beg) + "ms"); } /** * 实现多线程制作索引 */ public void runByThread() throws IOException, InterruptedException { long beg = System.currentTimeMillis(); System.out.println("索引制作开始!"); //1.根据上面指定的路径,枚举出路径下所有的文件,需要把子目录中的文件全部获取到; ArrayList<File> fileList = new ArrayList<>(); enumFile(INPUT_PATH,fileList); //2.针对上面罗列出来的文件的路径,打开文件,读取文件内容,并进行解析,并构建索引;[直接引入线程池] CountDownLatch latch = new CountDownLatch(fileList.size()); ExecutorService executorService = Executors.newFixedThreadPool(4); for (File f : fileList) { executorService.submit(new Runnable() { @Override public void run() { //System.out.println("解析" + f.getAbsolutePath()); try { parseHTML(f); latch.countDown(); } catch (IOException e) { e.printStackTrace(); } } }); } latch.await(); //手动把线程池里的线程都干掉 executorService.shutdown(); //3.把在内存中构造好的索引数据结构,保存到指定的文件中。 index.save(); long end = System.currentTimeMillis(); System.out.println("索引制作完毕!消耗时间" + (end-beg) + "ms"); System.out.println("解析正文的时间t1:" + t1 + " 将正文添加到索引的时间t2:" + t2); } //解析文件 private void parseHTML(File f) throws IOException { //1.解析出HTML的标题 String title = parseTitle(f); //2.解析出HTML的url String url = parseUrl(f); //3.解析出HTML的正文 long beg = System.nanoTime(); String content = parseContentByRegex(f); long mid = System.nanoTime(); //4.把解析出来的这些信息加入到索引中 index.addDoc(title,url,content); long end = System.nanoTime(); //由于parseHTML会被循环调用很多次,单次调用其实时间较短,加入频繁打印会拖慢速度本身 t1.addAndGet(mid-beg); t2.addAndGet(end-mid); } //解析url private String parseUrl(File f) { String part1 = "https://docs.oracle.com/javase/8/docs/api/"; String part2 = f.getAbsolutePath().substring(INPUT_PATH.length()); return part1 + part2; } //解析标题 private String parseTitle(File f) { // ArrayList.html为例 return f.getName().substring(0,f.getName().length() - ".html".length()); } //解析正文[基于正则表达式实现去标签及去script] public String parseContentByRegex(File f) { //1.先把整个文件读取到String里 String content = readFile(f); //2.替换掉script标签 content = content.replaceAll("<script.*?>(.*?)</script>"," "); //3.替换掉普通的html标签 content = content.replaceAll("<.*?>"," "); //4.合并多个空格 content = content.replaceAll("\\s+"," "); return content; } //把整个文件读取到String里 private String readFile(File f) { try(BufferedReader bufferedReader= new BufferedReader(new FileReader(f))) { StringBuilder content = new StringBuilder(); while(true) { int ret = bufferedReader.read(); if(ret == -1) { break; } char c = (char)ret; if(c == '\n' || c == '\r') {// 将换行符解析为空格 c = ' '; } content.append(c); } return content.toString(); } catch (IOException e) { e.printStackTrace(); } return ""; } //获取路径下所有文件 private void enumFile(String inputPath, ArrayList<File> fileList) { File rootPath = new File(inputPath); // 调用listFiles方法,获取到rootPath当前目录下所包含的文件/目录 File[] files = rootPath.listFiles(); for (File f: files) { //如果当前f是一个普通文件且以.html结尾,直接加入到fileList结果中; //如果当前f是一个目录,就递归的调用enumFile这个方法,来进一步获取子目录中的内容 if(f.isDirectory()) { enumFile(f.getAbsolutePath(),fileList); } else { if(f.getAbsolutePath().endsWith(".html")) { fileList.add(f); } } } } public static void main(String[] args) throws IOException, InterruptedException { //通过main方法来实现整个制作索引的过程 Parser parser = new Parser(); //parser.run(); parser.runByThread(); } }
Index类
package com.example.demo.searcher; import com.example.demo.model.DocInfo; import com.example.demo.model.Weight; import com.fasterxml.jackson.core.type.TypeReference; import com.fasterxml.jackson.databind.ObjectMapper; import org.ansj.domain.Term; import org.ansj.splitWord.analysis.ToAnalysis; import java.io.File; import java.io.IOException; import java.util.ArrayList; import java.util.HashMap; import java.util.List; import java.util.Map; /** * 把在内存中构造好的索引数据结构,保存在文件中 */ public class Index { private static String INDEX_PATH = null; static { if(Config.inOnline) { INDEX_PATH = "/root/search/"; } else { INDEX_PATH = "C:/search/"; } } //将java对象和json对象相互转化 private ObjectMapper objectMapper = new ObjectMapper(); //正排索引的基本表示 private ArrayList<DocInfo> forwardIndex = new ArrayList<>(); //倒排索引的基本表示,key就是词,value就是一组和这个词关联的文章 private HashMap<String,ArrayList<Weight>> invertedIndex = new HashMap<>(); //创建两个锁对象,分别用于构建正排索引和倒排索引 private Object locker1 = new Object(); private Object locker2 = new Object(); //1.给定一个docId,在正排索引中查询文档的详细信息 public DocInfo getDocInfo(int docId){ return forwardIndex.get(docId); } //2.给定一个词,在倒排索引中,查哪些文档和这个词关联 public List<Weight> getInverted(String term){ return invertedIndex.get(term); } //3.往索引中新增一个文档[同时给正排索引和倒排索引新增信息] public void addDoc(String title,String url,String content){ //构建正排索引 DocInfo docInfo = buildForward(title,url,content); //构建倒排索引 buildInverted(docInfo); } //构建倒排索引 private void buildInverted(DocInfo docInfo) { class WordCnt{ public int titleCount; public int contentCount; } HashMap<String,WordCnt> wordCountHashMap = new HashMap<>(); //1.针对文档标题进行分词 List<Term> terms = ToAnalysis.parse(docInfo.getTitle()).getTerms(); //2.遍历分词结果,统计每词出现的次数 for (Term term : terms) { String word = term.getName(); WordCnt wordCnt = wordCountHashMap.get(word); if(wordCnt == null) { WordCnt newWordCnt = new WordCnt(); newWordCnt.contentCount = 0; newWordCnt.titleCount = 1; wordCountHashMap.put(word,newWordCnt); } else { wordCnt.titleCount += 1; } } //3.针对正文进行分词 terms = ToAnalysis.parse(docInfo.getContent()).getTerms(); //4.统计每词出现的次数 for (Term term : terms) { String word = term.getName(); WordCnt wordCnt = wordCountHashMap.get(word); if(wordCnt == null) { WordCnt newWordCnt = new WordCnt(); newWordCnt.titleCount = 0; newWordCnt.contentCount = 1; wordCountHashMap.put(word,newWordCnt); } else { wordCnt.contentCount += 1; } } //5.遍历HashMap,依次更新倒排索引中的结构 //[最终文档的权重:设置成标题中出现的次数 * 10 + 正文中出现的次数] synchronized (locker1) { for (Map.Entry<String,WordCnt> entry : wordCountHashMap.entrySet()){ //先根据这里的词,去倒排索引中查一查 //倒排拉链 List<Weight> invertedList = invertedIndex.get(entry.getKey()); if(invertedList == null){ //插入新的键值对 ArrayList<Weight> newInvertedList = new ArrayList<>(); Weight weight = new Weight() ; weight.setDocId(docInfo.getDocId()); weight.setWeight(entry.getValue().titleCount * 10 + entry.getValue().contentCount); newInvertedList.add(weight); invertedIndex.put(entry.getKey(),newInvertedList); } else { //把当前文档构造一个Weight对象,插入到倒排拉链的后面 Weight weight = new Weight(); weight.setDocId(docInfo.getDocId()); weight.setWeight(entry.getValue().titleCount * 10 + entry.getValue().contentCount); invertedList.add(weight); } } } } //构建正排索引 private DocInfo buildForward(String title, String url, String content) { DocInfo docInfo = new DocInfo(); docInfo.setTitle(title); docInfo.setUrl(url); docInfo.setContent(content); synchronized (locker2) { docInfo.setDocId(forwardIndex.size());// docInfo从0开始 forwardIndex.add(docInfo); } return docInfo; } //4.把内存中的索引结构保存到磁盘中 public void save() throws IOException { //使用两个文件,分别保存正排和倒排 long beg = System.currentTimeMillis(); System.out.println("保存索引开始!"); //1.先判断索引对应的目录是否存在,不存在就创建 File indexPathFile = new File(INDEX_PATH); if(!indexPathFile.exists()){ indexPathFile.mkdirs(); } File forwardIndexFile = new File(INDEX_PATH + "forward.txt"); File invertedIndexFile = new File(INDEX_PATH + "inverted.txt"); objectMapper.writeValue(forwardIndexFile,forwardIndex); objectMapper.writeValue(invertedIndexFile,invertedIndex); long end = System.currentTimeMillis(); System.out.println("保存索引完成!" + "消耗时间为:" + (end - beg)+ "ms"); } //5.把磁盘中的索引数据加载到内存中 public void load(){ long beg = System.currentTimeMillis(); System.out.println("加载索引开始"); //1.设置加载索引的路径 File forwardIndexFile = new File(INDEX_PATH + "forward.txt"); File invertedIndexFile = new File(INDEX_PATH + "inverted.txt"); try{ forwardIndex = objectMapper.readValue(forwardIndexFile, new TypeReference<ArrayList<DocInfo>>() {}); invertedIndex = objectMapper.readValue(invertedIndexFile, new TypeReference<HashMap<String, ArrayList<Weight>>>() {}); } catch (IOException e) { e.printStackTrace(); } long end = System.currentTimeMillis(); System.out.println("加载索引结束" + "消耗时间为:" + (end - beg)+ "ms"); } public static void main(String[] args) { Index index = new Index(); index.load(); System.out.println("索引加载完成!"); } }
在解析过程中, 最开始为追求代码和逻辑的简洁性 , 使用了单线程的方式 , 直接进行for循环遍历每一个文件并进行解析 :
以ArrayList.html为例 , 其标题只需在文件名中截取.html之前的部分即可 . 代码如下所示 :
解析正文 , 本质上是去除HTML标签 , 以及script标签所包裹的内容 , 这些内容是js代码 , 不应该包含在正文部分 .
到这里直接调用index中的addDoc方法 , 即可实现把解析出来的这些信息加入到索引中 . 关于Index类 , 后面详细介绍 .
要实现上面的功能 , 就不得不提到索引模块的另一大核心类 —>Index类 !
该类的主要功能如下 :
正排和倒排的数据结构分别设计如下 :
以这三篇文章为例 :
因为我们在存放正排索引时 , 已经将文章按照顺序保存在ArrayList中 , 所以可以直接根据get(i)方法获取到文章信息 .
直接通过key获取value , 返回Weight数组 , 每个Weight存放该词所在的文章及在这篇文章中的权重(或者说与这篇文章的关联性) .
1.定义WordCnt类 , 统计每一个词在标题和正文中分别出现的次数 ;
2.针对文档标题进行分词 ;
3.遍历分词结果 , 统计每词出现的次数 ;
4.针对文档正文进行分词 ;
5.遍历分词结果 , 统计每词出现的次数 ;
5.遍历HashMap , 依次更新倒排索引中的结构 .
以"大马猴"为例 , 它在三篇文章的标题和正文中都出现过 . 第5步如下 :
Q : 此处为什么使用entry这样的结构 ?
A :
在Parser中有两处调用了index :
运行结果 :
正排索引 :
倒排索引 :
要想优化一段程序的性能 , 先需要通过测试的手段 , 找到其中的"性能瓶颈" .
通过刚才的测试 , 我们发现当前主要的性能瓶颈就在循环遍历文件上 . 每次循环都要针对一个文件进行解析 , 即读文件 + 分词 + 解析内容 (这里主要还是卡在CPU运算上) . 在单线程环境下 , 这些任务都是串行执行的 ; 多个线程 , 这些任务就可以并发执行了 .
/** * 实现多线程制作索引 */ public void runByThread() throws IOException, InterruptedException { long beg = System.currentTimeMillis(); System.out.println("索引制作开始!"); //1.根据上面指定的路径,枚举出路径下所有的文件,需要把子目录中的文件全部获取到; ArrayList<File> fileList = new ArrayList<>(); enumFile(INPUT_PATH,fileList); //2.针对上面罗列出来的文件的路径,打开文件,读取文件内容,并进行解析,并构建索引;[直接引入线程池] CountDownLatch latch = new CountDownLatch(fileList.size()); ExecutorService executorService = Executors.newFixedThreadPool(4); for (File f : fileList) { executorService.submit(new Runnable() { @Override public void run() { //System.out.println("解析" + f.getAbsolutePath()); try { parseHTML(f); latch.countDown(); } catch (IOException e) { e.printStackTrace(); } } }); } latch.await(); //手动把线程池里的线程都干掉 executorService.shutdown(); //3.把在内存中构造好的索引数据结构,保存到指定的文件中。 index.save(); long end = System.currentTimeMillis(); System.out.println("索引制作完毕!消耗时间" + (end-beg) + "ms"); }
验证多线程的效果 :
调用索引模块,来完成搜索的核心过程.
针对用户输入的查询词进行分词(用户输入的查询词 , 可能是一个词 , 也可能是一句话)
停用词可以在构造方法中进行加载 :
拿着分词结果 , 查倒排索引 , 找到具有相关性的文档 .
//描述一个元素在二维数组中的位置 static class Pos { public int row; public int col; public Pos(int row, int col) { this.row = row; this.col = col; } } //合并权重 private List<Weight> mergeResult(List<List<Weight>> source) { //是把多个行合并成一行,确定二维数组中的一个元素,需要行和列 //1.针对每一行,进行排序(按照id进行升序排序) for (List<Weight> curRow : source) { curRow.sort(new Comparator<Weight>() { @Override public int compare(Weight o1, Weight o2) { return o1.getDocId() - o2.getDocId(); } }); } //2.借助优先级队列,针对这些"行"进行合并 List<Weight> target = new ArrayList<>();// 表示合并结果 // 2.1创建优先级队列并按照Weight的docId,取小的优先 PriorityQueue<Pos> queue = new PriorityQueue<>(new Comparator<Pos>() { @Override public int compare(Pos o1, Pos o2) { Weight w1 = source.get(o1.row).get(o1.col); Weight w2 = source.get(o2.row).get(o2.col); return w1.getDocId() - w2.getDocId(); } }); // 2.2初始化队列,把每行的第一个元素放到队列中 for (int row = 0; row < source.size(); row++) { queue.offer(new Pos(row,0));// 初始插入的元素的列就是0 } // 2.3循环取队元素,也就是当前若干行中最小的元素 while (!queue.isEmpty()) { Pos minPos = queue.poll(); Weight curWeight = source.get(minPos.row).get(minPos.col); // 2.4看这个Weight是否和前一个插入到target的结果的docId相同 if(target.size() > 0) { Weight lastWeight = target.get(target.size()-1); if(lastWeight.getDocId() == curWeight.getDocId()) { lastWeight.setWeight(lastWeight.getWeight() + curWeight.getWeight()); } else { target.add(curWeight); } } else {// target当前为空,直接插入 target.add(curWeight); } // 2.5把对应这个元素的光标后移,取下一个元素 Pos newPos = new Pos(minPos.row, minPos.col+1); if(newPos.col >= source.get(newPos.row).size()) {// 移动光标后,超出了这一行的列数 continue; } queue.offer(newPos); } return target; }
排序很简单 , 权重高的排前面 , 在进行页面展示时 , 位置靠前 .
最终展示时 , 需要得到页面的id , url , 摘要 , 所以需要根据排序结果再查正排 , 构造出要返回的数据 .
从正文中提取摘要 . 思路也很简单 , 首先判断是哪个分词结果在正文中出现了 , 如果找到该位置 , 将该位置向前截取60个字符 , 向后截取100个字符 , 整体作为摘要 ; 如果向前不足60个字符 , 从头开始截取 ; 如果向后不足100个字符 , 截取该字符后的全部内容 .
private String GetDesc(String content, List<Term> terms) { //1.遍历分词结果,看看哪个结果是在content中存在 int firstPos = -1; for (Term term : terms) { String word = term.getName(); //严谨做法 : 正则表达式 content = content.toLowerCase().replaceAll("\\b" + word + "\\b", " " + word + " "); firstPos = content.indexOf(" " + word + " "); if(firstPos >= 0) { //找到了 break; } } if(firstPos == -1) {// 所有分词结果都不在正文中存在,可能性很小 if(content.length() > 160) { return content.substring(0,160) + "..."; } else { return content; } } String desc = ""; int beg = firstPos < 60 ? 0 : firstPos - 60; if(beg + 160 > content.length()) { desc = content.substring(beg); } else { desc = content.substring(beg,beg+160) + "..."; } for (Term term : terms) { String word = term.getName(); desc = desc.replaceAll("(?i) " + word + " ","<i> " + word + " </i>");//(?i)表示不区分大小写进行替换 } return desc; }
细节分析 :
搜索模块到此就告一段落了 !
后端代码 :
package com.example.demo.controller; import com.example.demo.searcher.DocSearcher; import com.example.demo.model.Result; import com.fasterxml.jackson.core.JsonProcessingException; import com.fasterxml.jackson.databind.ObjectMapper; import org.springframework.web.bind.annotation.RequestMapping; import org.springframework.web.bind.annotation.RequestParam; import org.springframework.web.bind.annotation.ResponseBody; import org.springframework.web.bind.annotation.RestController; import java.util.List; @RestController public class DocSearcherController { private static DocSearcher searcher = new DocSearcher(); private ObjectMapper objectMapper = new ObjectMapper(); @RequestMapping(value = "/searcher",produces = "application/json;charset=utf-8") @ResponseBody public String search(@RequestParam("query") String query) throws JsonProcessingException { //参数是查询词,返回值是响应内容 List<Result> results = searcher.search(query); return objectMapper.writeValueAsString(results); } }
构建前端页面 :
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Java文档搜索</title> <script src="js/jQuery.js"></script> <link rel="icon" href="image/tubiao.jpg"> </head> <body> <!--1.搜索框 + 搜索按钮--> <!--2.搜索结果 --> <div class="container"> <div class="header"> <input type="text"> <button id="search-btn">搜索</button> </div> <div class="result"> <!--包含很多记录--> <!-- <div class="item"> <a href="#">我是标题</a> <div class="desc">我是一段描述Lorem ipsum, dolor sit amet consectetur adipisicing elit. Cum ipsum, voluptatibus assumenda sed facere nam ab tempore voluptas, perferendis sequi veritatis eveniet fuga cumque in aliquid dolor hic praesentium iusto.</div> <div class="url">http://www.baidu.com</div> </div> --> </div> </div> <style> /*样式*/ /*先去除浏览器的默认样式*/ * { margin: 0; padding:0; box-sizing: border-box; } /*给整体页面指定一个高度*/ html, body { height: 100%; background-image: url(image/beijing.jpg); /*设置背景图不平铺*/ background-repeat: no-repeat; /*设置背景图位置*/ background-position: center center; /*设置背景图大小*/ background-size: cover; } /*针对.container设置样式*/ .container { /*也可设置为百分数形式*/ width: 1200px; height: 100%; /*设置水平居中*/ margin:0 auto; /*设置背景色,让版心和背景图能够区分开*/ background-color: rgba(255,255,255,0.8); /*设置圆角矩形*/ border-radius: 10px; /*设置内边距,避免文字内容紧贴边界*/ padding: 20px; overflow: auto; } .result .count { color:grey; margin-top:10px; } .header { width:100%; height: 50px; display: flex; justify-content: space-between; align-items: center; } .header>input { width: 1050px; height:50px; font-size: 22px; line-height: 50px; padding-left: 10px; border-radius: 10px; } .header>button { width: 100px; height:50px; background-color: rgb(79, 121, 183); color: fff; font-size: 22px; line-height: 50px; border-radius: 10px; border:none; } .header>button:active { background: grey; } .item { width: 100%; margin-top: 20px; } .item a { display: block; height: 40px; font-size: 22px; line-height: 40px; font-weight: 700; color:rgb(79, 121, 183); } .item .desc { font-size: 19px; } .item .url { font-size: 19px; color: rgb(69, 221, 69); } .item .desc i { color:red; font-style: normal; } </style> <!--放置js代码--> <script> let button = document.querySelector("#search-btn"); button.onclick = function() { let input = document.querySelector(".header input"); let query = input.value; jQuery.ajax({ type:"GET", url:"searcher?query=" + query, data:"", success: function(data,status) { //data表示拿到的的结果数据 //status表示HTTP状态码 //根据收到的数据结果,构造页面内容 //console.log(data); buildResult(data); } }); } function buildResult(data) { // 遍历data中的每个元素,针对每个元素都创建一个 // div.item,再把这个div.item加入div.result中 let result = document.querySelector('.result'); //清空上次结果 result.innerHTML=""; //构造div,用于显示结果的个数 let countDiv = document.createElement('div'); countDiv.innerHTML = '当前找到' + data.length + "条搜索结果"; countDiv.className = 'count'; result.appendChild(countDiv); for(let item of data) { let itemDiv = document.createElement('div'); itemDiv.className = 'item'; //构造标题 let title = document.createElement('a'); title.innerHTML = item.title; title.href = item.url; title.target = '_blank'; itemDiv.appendChild(title); //构造描述 let desc = document.createElement('div'); desc.className = 'desc'; desc.innerHTML = item.desc; itemDiv.appendChild(desc); //构造url let url = document.createElement('div'); url.className = 'url'; url.innerHTML = item.url; itemDiv.appendChild(url); result.appendChild(itemDiv); } } </script> </body> </html>
验证效果 :
然后就可以运行了 :
linux涉及到一个概念 , 即前台线程 vs 后台线程 , 直接输入一个命令来产生的进程 , 就是"前台线程" ; 前台线程会随着终端的关闭被杀死 . 为了解决这个问题 , 需要把前台线程转换成后台线程 , 如下 :
nohup java -jar demo-0.0.1-SNAPSHOT.jar &
断开XShell连接 :
可以成功访问 !
搜索引擎网页url : 链接
Copyright © 2003-2013 www.wpsshop.cn 版权所有,并保留所有权利。