project_03
/
01-4评论列表模板引擎方式 copy.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="./lib/bootstrap.css" />
    <script src="./lib/jquery.js"></script>
</head>

<body style="padding: 15px;">

    <!-- 评论面板 -->
    <div class="panel panel-primary">
        <div class="panel-heading">
            <h3 class="panel-title">发表评论</h3>
        </div>
        <form class="panel-body" id="formAddCmt">
            <div>评论人：</div>
            <input type="text" class="form-control" name="username" autocomplete="off" />
            <div>评论内容：</div>
            <textarea class="form-control" name="content"></textarea>

            <button type="submit" class="btn btn-primary">发表评论</button>
        </form>
    </div>


    <!-- 评论列表 -->
    <ul class="list-group" id="cmt-list">
        <li class="list-group-item">
            <span class="badge" style="background-color: #F0AD4E;">评论时间：</span>
            <span class="badge" style="background-color: #5BC0DE;">评论人：</span> Item 1
        </li>
    </ul>
    <script type='text' id='tpl'>
        {{each data}}
        <li class="list-group-item">
            <span class="badge" style="background-color: #F0AD4E;">评论时间：{{$value.time}}</span>
            <span class="badge" style="background-color: #5BC0DE;">评论人：{{$value.username}}</span> {{$value.content}}
        </li>
        {{/each}}

    </script>
    <script>
        $(function() {
            function getMsg() {
                $.ajax({
                    type: 'get',
                    url: 'http://www.liulongbin.top:3006/api/cmtlist',
                    success: function(res) {
                        if (res.status !== 200) return alert('获取失败');
                        var htmlStr = template('tpl', res);
                        $('#cmt-list').html(htmlStr);
                    }
                })
            }
            getMsg();
            $('#formAddCmt').on('submit', function(e) {
                e.preventDefault();
                var data = $(this).serialize();
                getMsg(data);
                $.ajax({
                    type: 'post',
                    data: data,
                    url: 'http://www.liulongbin.top:3006/api/addcmt',
                    success: function(res) {
                        if (res.status !== 201) return alert('发表失败');
                        getMsg();
                        $('#formAddCmt')[0].reset();
                    }
                })
            })
        })
    </script>
    <script src="./lib/template-web.js"></script>
</body>

</html>