基于Serverless快速实现简单版查询工具(文本相似度)
需求背景
朋友的单位,有一个小型的图书室,图书室中摆放了很多的书,每本书都被编号放在对应的区域,为了让大家更快,更容易找到这些书,他联系我,让我帮他弄一个图书查询系统。可以通过用户输入,模糊匹配到对应的结果,并且提供书籍对应的地点。
功能设计
- 让朋友把书籍整理并存储到一个Excel表格中;
- 将Excel表放到对象存储中,云函数读取这个文件,并且解析;
- 根据词语的相似寻找相似的图书;
- 前端页面通过MUI制作,放在对象存储中,并且使用对象存储的Website功能;
整体实现
数据形态
Excel样式主要包括书名和编号,同时下面包括分类的tab:
基于函数的搜索功能
核心代码实现:
1 | import jieba |
同时配置APIGW:
功能页面
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>图书检索系统</title>
<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<link rel="stylesheet" href="https://others-1256773370.cos.ap-chengdu.myqcloud.com/booksearch/css/mui.min.css">
<style>
html,
body {
background-color: #efeff4;
}
</style>
<script>
function getResult() {
var UTFTranslate = {
Change: function (pValue) {
return pValue.replace(/[^\u0000-\u00FF]/g, function ($0) {
return escape($0).replace(/(%u)(\w{4})/gi, "&#x$2;")
});
},
ReChange: function (pValue) {
return unescape(pValue.replace(/&#x/g, '%u').replace(/\\u/g, '%u').replace(/;/g, ''));
}
};
var xmlhttp;
if (window.XMLHttpRequest) {
// IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
xmlhttp = new XMLHttpRequest();
} else {
// IE6, IE5 浏览器执行代码
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange = function () {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200 && xmlhttp.responseText) {
document.getElementById("result").innerHTML = UTFTranslate.ReChange(xmlhttp.responseText).slice(1, -1).replace("\"",'"');
}
}
xmlhttp.open("POST", "https://********", true);
xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xmlhttp.send(document.getElementById("book").value);
}
</script>
</head>
<body>
<div class="mui-content" style="margin-top: 50px">
<h3 style="text-align: center">图书检索系统</h3>
<div class="mui-content-padded" style="margin: 10px; margin-top: 20px">
<div class="mui-input-row mui-search">
<input type="search" class="mui-input-clear" placeholder="请输入图书名" id="book">
</div>
<div class="mui-button-row">
<button type="button" class="mui-btn mui-btn-numbox-plus" style="width: 100%" onclick="getResult()">检索
</button>
</div>
</div>
<div id="result">
<div class="mui-card" style="margin-top: 25px">
<div class="mui-card-content">
<div class="mui-card-content-inner">
可以在搜索框内输入书籍的全称,或者书籍的简称,系统支持智能检索功能。
</div>
</div>
</div>
</div>
</div>
<script src="https://others-1256773370.cos.ap-chengdu.myqcloud.com/booksearch/js/mui.min.js"></script>
</body>
</html>
效果展示
为了便于朋友使用,将这个页面用过Webview封装成一个APP,整体效果如下:
总结
这个APP是一个低频使用APP,可以这样认为,如果做在一个传统服务器上,这应该不是一个明智的选择,云函数的按量付费,对象存储与APIGW的融合,完美解决了资源浪费的问题,同时借用云函数的APIGW触发器,很简单轻松的替代传统的Web框架和部分服务器软件的安装和使用、维护等。这个例子非常小,但是确是一个有趣的小工具,除了图书查询之外,还可以考虑做成成绩查询等。