shixun_linshi/woniu2/template/side.html

<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>