|
|
<script src="/resource/js/vue.js"></script>
|
|
|
<div class="col-sm-3 col-12" style="padding: 0px 10px;">
|
|
|
<div class="col-12 search-bar form-group row">
|
|
|
<div class="col-8">
|
|
|
<input type="text" class="form-control" id="keyword" placeholder="请输入关键字" onkeyup="doSearch(event)" />
|
|
|
</div>
|
|
|
<div class="col-4" style="text-align:right;">
|
|
|
<button type="button" class="btn btn-primary" onclick="doSearch(null)">搜索</button>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<div class="col-12 side">
|
|
|
<div class="tip">最新文章</div>
|
|
|
<ul id="last">
|
|
|
<li v-for="(dict,index) in content">
|
|
|
<a v-bind:href="'/article/' + dict['articleid']">${index+1}.${dict['headline'].substr(0,10)}...</a>
|
|
|
</li>
|
|
|
</ul>
|
|
|
</div>
|
|
|
|
|
|
<div class="col-12 side">
|
|
|
<div class="tip">最多阅读</div>
|
|
|
<ul id="most">
|
|
|
<!-- article:文章编号，等于articleid-->
|
|
|
<!-- content:文章标题，等于headline-->
|
|
|
<li v-for="(dict,index) in content">
|
|
|
<a v-bind:href="'/article/' + dict['articleid']">${index+1}.${dict['headline'].substr(0,10)}...</a>
|
|
|
</li>
|
|
|
</ul>
|
|
|
</div>
|
|
|
|
|
|
<div class="col-12 side" id="fixedmenu">
|
|
|
<div class="tip">特别推荐</div>
|
|
|
<ul id="recommended">
|
|
|
<li v-for="(dict,index) in content">
|
|
|
<a v-bind:href="'/article/' + dict['articleid']">${index+1}.${dict['headline'].substr(0,10)}...</a>
|
|
|
</li>
|
|
|
</ul>
|
|
|
<div class="col-12 side" onclick="gotoTop()" style="height: 40px; text-align: center; cursor: pointer">
|
|
|
回到顶部
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<script type="text/javascript">
|
|
|
function doSearch(e) {
|
|
|
if (e != null && e.keyCode != 13) {
|
|
|
// 如果不是回车键，则不执行搜索
|
|
|
return false;
|
|
|
}
|
|
|
var search = $.trim($("#keyword").val()); // 修改这里以正确获取输入框的值
|
|
|
if (search.length === 0 || search.length > 10 || search.indexOf('%') >= 0) {
|
|
|
// 显示错误提示，并将焦点放回输入框
|
|
|
bootbox.alert({'title': '错误提示', 'message': "你输入的关键字不合法（长度需小于等于10，且不能包含'%'）"});
|
|
|
$("#keyword").focus(); // 修改这里以将焦点放回正确的输入框
|
|
|
return false;
|
|
|
}
|
|
|
// 假设你的 URL 结构是 '/search/' 加上搜索关键字和可能的页码
|
|
|
location.href = '/search/' + encodeURIComponent(search) + '-1'; // 使用 encodeURIComponent 来确保 URL 编码正确
|
|
|
}
|
|
|
|
|
|
// 在jQuery中表示文档加载完成后开始执行（不需要按钮或事件触发），window.load=function() {}
|
|
|
$(document).ready(function () {
|
|
|
// 第一步：发送Ajax请求去访问/recommend接口，获取JSON
|
|
|
$.get('/recommend', function (data) {
|
|
|
// 获取响应并动态填充到对应的推荐栏中
|
|
|
var lastData = data[0];
|
|
|
var mostData = data[1];
|
|
|
var recommendedData = data[2];
|
|
|
|
|
|
var v1 = new Vue({
|
|
|
el: '#last',
|
|
|
data: {content: lastData},
|
|
|
delimiters: ['${', '}']
|
|
|
});
|
|
|
|
|
|
var v2 = new Vue({
|
|
|
el: '#most',
|
|
|
data: {content: mostData},
|
|
|
delimiters: ['${', '}']
|
|
|
});
|
|
|
|
|
|
var v3 = new Vue({
|
|
|
el: '#recommended',
|
|
|
data: {content: recommendedData},
|
|
|
delimiters: ['${', '}']
|
|
|
});
|
|
|
})
|
|
|
});
|
|
|
|
|
|
// 回到顶部
|
|
|
function gotoTop() {
|
|
|
$('html, body').animate({scrollTop: 0}, 800);
|
|
|
return false;
|
|
|
}
|
|
|
</script> |
