【StarLight|开发日记】论坛搜索功能的实现
StarLight 发布于2017-12-08 13:25 浏览:434 回复:1
0
收藏
<!DOCTYPE html>    
<html lang="en">    
<head>    
<meta charset="UTF-8">    
<title>Title</title>    
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>    
<script src="https://cdn.jsdelivr.net/npm/vue"></script>    
<style>    
*{    
padding: 0;    
margin: 0;    
}    
p{    
color: red;    
}    
</style>    
</head>    
<body>    
<!--    
<h2>    
    要允许跨域需要添加命令行    
</h2>    
<pre style="background-color: #ccc">    
    "C:\Program Files (x86)\Google\Chrome\Application\chrome.exe" --disable-web-security  --user-data-dir    
</pre>    
-->    
<div id="app">    
<template>    
<label>总搜索页数</label><input type="number" min="0" v-model='totalPage'/>    
<label>关键字</label><input v-model='search'/>    
<button @click="startSearch" :disabled="running">查看</button>    
<div v-for="(p,i) in pages">    
<p>第{{i+1}}页面</p>    
<p v-for="(t,j) in p"><a v-if="!search||t.title.indexOf(search)!=-1" v-id="t.id" :href="'https://dueros.baidu.com/didp/forum/topic/show?topicId='+t.id" target="_blank"><b>{{t.title}}</b></a></p>    
</div>    
</template>    
</div>    
<script>    
var app=new Vue({    
el:'#app',    
data:{    
pages:[],    
search:'',    
totalPage:10,    
currentPage:0,    
running:false    
},    
methods:{    
startSearch:function () {    
if(+this.totalPage<this.currentPage){    
return;    
}    
max=this.currentPage=this.totalPage;    
this.running=true;    
readTimer=setInterval(readData,800);    
}    
}    
});    
var readTimer;    
var p=0;    
var max=10;    
var finish=true;    
var readData=function () {    
if(finish){    
finish=false;    
p++;    
axios.get('http://query.yahooapis.com/v1/public/yql',{    
params:{    
q:'select * from json where url="https://dueros.baidu.com/didp/duer/api/topic/list?categoryId=34&boardId=-1&currentPage='+p+'"',    
format: "json"    
}})    
.then(function (rs) {    
if(rs.data.query&&rs.data.query.results){    
var json=rs.data.query.results.json;    
app.pages.push(json.data.topics);    
}    
finish=true;    
}).catch(function (reason) {    
finish=true;    
});    
if(p>=max){    
clearInterval(readTimer);    
app.running=false;    
}    
}    
};    
</script>    
</body>    
</html>

新建文本文档保存为,修改文件名为 dueros搜索功能.html,用浏览器打开即可

QQ截图20171208132513.jpg

收藏
点赞
0
个赞
共1条回复 最后由回复于2017-12-08 15:14
#2回复于2017-12-08

0
TOP