You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
102 rivejä
3.6 KiB
102 rivejä
3.6 KiB
{{template "header" .}}
|
|
<meta name="keywords" content="码农随笔,个人随笔,博客,个人博客,个人笔记,技术博客,免费云笔记,云笔记,随笔,IT博客,谷歌地图,码农笔录,aiprose">
|
|
<title>搜索 - 码农随笔</title>
|
|
<script src="https://unpkg.com/dayjs@1.8.15/dayjs.min.js"></script>
|
|
</head>
|
|
<body>
|
|
<div class="root-container">
|
|
{{template "nav" .}}
|
|
<div class="search-root">
|
|
<div>
|
|
<div>
|
|
<div class="input-group input-class">
|
|
<el-input v-model="searchVal" @change="searchHandler" placeholder="请输入关键字"></el-input>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="search-result">
|
|
<div class="search-item" v-for="el in list">
|
|
<div class="search-title">
|
|
<a style="color: #28a3ef" :href="'https://www.aiprose.com/blog/' + el._source.Id " target="_blank">${el._source.Title}</a>
|
|
<span> ${mtime(el._source.Ctime)}</span>
|
|
</div>
|
|
<p class="search-content">${el._source.BlogDesc }</p>
|
|
</div>
|
|
<p v-if="list.length == 0">没有搜索到相关文章</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</body>
|
|
<script>
|
|
var app = new Vue({
|
|
el: ".root-container",
|
|
delimiters: ['${', '}'],
|
|
data: {
|
|
searchVal: '',
|
|
list: [],
|
|
pageNo: 1,
|
|
pageSize: 30,
|
|
searchParms: {
|
|
from: 0,
|
|
size: 20,
|
|
query: {
|
|
multi_match: {
|
|
query: "",
|
|
// type: "best_fields",
|
|
fields: ["Title", "BlogHtml"]
|
|
}
|
|
}
|
|
}
|
|
},
|
|
methods: {
|
|
mtime (time){
|
|
return dayjs(time).format("YYYY-MM-DD")
|
|
},
|
|
searchHandler (searchVal){
|
|
var _this = this;
|
|
if (!searchVal || searchVal.trim().length == 0) {
|
|
this.$Message.warning('请输入查询内容');
|
|
return
|
|
}
|
|
this.searchParms.query.multi_match.query = searchVal;
|
|
var stringify = JSON.stringify(this.searchParms);
|
|
$.ajax({
|
|
url: "https://www.aiprose.com/es/search", //请求的url地址
|
|
headers: {'Content-Type': 'application/json;charset=utf8'},
|
|
dataType: "json", //返回格式为json
|
|
async: true,//请求是否异步，默认为异步，这也是ajax重要特性
|
|
data: stringify, //参数值
|
|
type: "POST", //请求方式
|
|
beforeSend: function () {
|
|
//请求前的处理
|
|
},
|
|
success: function (resp) {
|
|
_this.list = []
|
|
if (resp.hits.total != 0) {
|
|
_this.list = resp.hits.hits;
|
|
}
|
|
//请求成功时处理
|
|
},
|
|
complete: function () {
|
|
//请求完成的处理
|
|
},
|
|
error: function () {
|
|
//请求出错处理
|
|
}
|
|
})
|
|
}
|
|
}
|
|
})
|
|
|
|
|
|
$(function () {
|
|
|
|
function search() {
|
|
|
|
searchParms.query.multi_match.query = searchVal;
|
|
var stringify = JSON.stringify(searchParms);
|
|
|
|
}
|
|
})
|
|
</script>
|
|
</html>
|