背景
xxx项目作为公司常用的公共包管理仓库，人均使用频率较高，若能提供浏览器地址栏搜索功能，直接在浏览器进行站内包的搜索，将较大程度提高搜索效率。
技术方案
Chromium 提供了两种启发式方法，可自动将网站添加到可搜索网站列表中。但第二种方案限制较多，这里并没有采用，有兴趣可以去看 链接。这里主要讲第一种。
第一种方案是在主页提供一个指向OpenSearch 描述文档的链接，该描述文档告知浏览器具体搜索方式。
例如：
<head>
<link type="application/opensearchdescription+xml" rel="search" href="url_of_osdd_xml_file"/>
</head>
<?xml version="1.0"?>
<OpenSearchDescription xmlns="http://a9.com/-/spec/opensearch/1.1/"> <ShortName>Search My Site</ShortName>
<Description>Search My Site</Description>
<Url type="text/html" method="get" template="http://my_site/{searchTerms}"/>
</OpenSearchDescription>
当主文档页面在浏览器加载过程中，执行到xml的link标签，就会去请求加载xml文档，文档内容
会对应描述如何进行快捷搜索，告知浏览器搜索方式。
如：<Url type="text/html" method="get" template="http://my_site/{searchTerms}"/>
当用户输入域名再按下回车键时，url 中的字符串 {searchTerms} 将替换为用户键入的字符串，进行站内搜索。
但目前新增网站的站内搜索据说不再被自动激活，需要进行手动激活。来源：链接。所以我们在首次访问页面之后需要进行手动激活该站点的站内搜索。
可按照下图进行手动激活
image.png
image.png
image.png
这里可以修改快捷键，一般默认是站点的域名。之后在浏览器输入快捷键，再按下空格或tab就可以站内搜索了。
image.png
项目中具体实现
由于xxx项目中verdaccio把html文件重写覆盖了，所以需要通过配置化的方式插入link标签。如下所示:
verdaccio把html文件被重写覆盖：
image.png
conf.yaml：
请求/-/opensearch接口，返回xml文件
image.png
xml文件服务：
xml文件在启动时存在内存中，请求时读取返回
import { Application } from 'express';
import Xml from '../util/xml';
const xml = new Xml();
xml.saveXmlData();
export default function(app: Application): void {
// /-/opensearch接口
app.get('/-/opensearch', (_, res) => {
try {
const data = xml.getXmlData();
return res.status(200).end(data);
} catch (error) {
return res.status(500).end();
}
});
}
const filePath = path.join(__dirname, `../../opensearch.xml`);
// xml类，提供openseach的xml文件存储和读取方法
class Xml {
private xmlData = '';
public saveXmlData() {
const data = fs.readFileSync(filePath, { encoding: 'utf8', flag: 'r' });
const env = Lib.Const.env;
this.xmlData = data.replace(/\$\$Domain\$\$/gim, Env[env]);
}
public getXmlData() {
if (this.xmlData) {
return this.xmlData;
} else {
this.saveXmlData();
}
}
}
export default Xml;
// openseach的xml文件
<OpenSearchDescription xmlns="http://a9.com/-/spec/opensearch/1.1/" xmlns:moz="http://www.mozilla.org/2006/browser/search/">
<ShortName>ks-npm</ShortName>
<Description>
Type your token to be decoded.
</Description>
<InputEncoding>UTF-8</InputEncoding>
// Domain需要做正则替换
<Url type="text/html" template="$$Domain$$/-/web/search/{searchTerms}"/>
</OpenSearchDescription>
新增搜索落地页
enum Route {
....
// 下面是新增
SEARCHPACKAGE = "/-/web/search/:package",
SCOPE_SEARCHPACKAGE = "/-/web/search/@:scope/:package",
}
const AppRoute: React.FC = () => {
return (
<Router history={history}>
<Switch>
...
// 下面是新增
<ReactRouterDomRoute exact={true} path={Route.SEARCHPACKAGE}>
<SearchPage />
</ReactRouterDomRoute>
<ReactRouterDomRoute exact={true} path={Route.SCOPE_SEARCHPACKAGE}>
<SearchPage />
</ReactRouterDomRoute>
</Switch>
</Router>
);
};
// 下面是新增SearchPage
const SearchPage: React.FC = () => {
return (
<div className="container content" data-testid="home-page-container">
{isLoading && !packages.length ? <Loading /> : <PackageList packages={packages} count={count} loadMoreRows={loadMoreRows} />}
</div>
);
};
export default SearchPage;
落地页查询包列表请求
// 读取包名
const matchArr = location.pathname.match(/\/-\/web\/search\/(?<keyword>.*)/)
const keyword = matchArr.groups?.keyword ?? ''
// 进入落地页请求相关包
useEffect(() => {
if (!packages.length) {
dispatch.packages.getSearchPackages({keyword});
}
}, [dispatch]);
// 下拉加载更多包
const loadMoreRows = async function({ startIndex, stopIndex }) {
if (startIndex >= count - 1) return;
dispatch.packages.getSearchPackages({ startIndex, stopIndex, keyword })
}
包列表模糊查询服务
// model文件
async fuzzyFind(payload: ISearchPaginationParams): Promise<{ count: number; list: ModuleSearchOutput[] }> {
const { limit, offset, name } = payload;
const { count, rows } = await ModuleSearch.findAndCountAll({
// 相比包列表查询，多了where的模糊查询语句
where: {
name: {
[Op.like]: '%' + name + '%',
},
},
order: [
['time', 'DESC'],
['name', 'ASC'],
],
limit,
offset,
});
const list = formatList(rows);
return {
count,
list,
};
},
// service文件
async fuzzyFind(start: number, end: number, name: string): Promise<{ count: number; list: ModuleSearchOutput[] }> {
// 调用 model文件的fuzzyFind模糊查询
const data = await ModuleSearchModel.fuzzyFind({
name: name,
offset: start,
limit: end - start,
});
return formatData(data);
},
// control文件
app.get('/-/ks/search/packages/:keyword', async (req, res) => {
const start = Date.now();
const { startIndex, stopIndex } = req.query;
const startIndexNumber = startIndex ? +startIndex : 0;
const stopIndexNumber = stopIndex ? +stopIndex : 7;
const keyword = req.params.keyword;
// 调用service文件的fuzzyFind方法得到数据
const data = await ModuleSearchService.fuzzyFind(startIndexNumber, stopIndexNumber, keyword);
const totalTiming = Date.now() - start;
res.setHeader('Server-Timing', `total-timing;dur=${totalTiming}`);
res.send(data);
});
网友评论