project_03
/
01-4图书管理.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">
        <!-- 循环获取到的数据 -->
        <!-- $index循环中的索引号 $value循环中的值  -->
        {{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>
        //1-渲染页面
        function getmsg() {
            $.ajax({
                url: 'http://www.liulongbin.top:3006/api/cmtlist', //注意网址不要写错
                type: 'get',
                success: function(res) {
                    if (res.status !== 200) return alert('获取数据据失败');
                    var htmlstr = template('tpl', res); //模板字符串方法template('文本类型js','数据')
                    $('#cmt-list').html(htmlstr); //渲染页面
                }
            })
        }
        getmsg();
        //2-发表评论
        $('#formAddCmt').on('submit', function(e) {
            e.preventDefault(); //阻止表单默认跳转
            var data = $(this).serialize(); //快速获取表单数据

            $.ajax({
                type: 'post',
                url: 'http://www.liulongbin.top:3006/api/addcmt',
                data: data,
                success: function(res) {
                    console.log(res);
                    if (res.status !== 201) return alert('发表失败');
                    getmsg();
                    $('#formAddCmt')[0].reset(); //清空表单数据 , 注意reset方法必须要用dom对象调用
                }
            })
        })
        $('html body').on('keyup', function(e) {
            if (e.keyCode == 13) {
                $('.btn-primary').click();
            }
        })
    </script>
    <script src="./lib/template-web.js"></script>
    <!-- //模板引擎引入要在我们自己写的js文件下面 -->
</body>

</html>