社交项目（九）

开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第6天，点击查看活动详情

1.在BookController新增查询book列表方法

@GetMapping("/books")
@ResponseBody
public IPage<Book> selectPage(Integer p){
    if(p==null){
        p=1;
    }
   IPage<Book> pageObject =  bookService.paging(p,10);
    return pageObject;
}

代码说明：

• p==null:判断分页参数，如果为null,默认为请求第一页

2.index.ftl新增请求分页的方法

$(function () {
    $.ajax({
        url:"/books",
        data:{p:1},
        type:"get",
        dataType:"json",
        success:function (json){
            console.log(json);
        }
    })
})

3.重启tomcat

可以看到返回了book相关信息

4.引入art-template.js

官网：aui.github.io/art-templat…
art-template是什么？
模板引擎（这里特指用于Web开发的模板引擎）是为了使用户界面与业务数据（内容）分离而产生的，它可以生成特定格式的文档，用于网站的模板引擎就会生成一个标准的HTML文档
一般情况下实现的方法可能是通过字符串拼接将代码与数据拼接起来，然后添加到某一节点。但大量的标签字符串和数据拼接其实不美观，而且维护难。那么这个时候模板引擎的作用就体现出来了

5.引入星星组件js和css

6.定义模板art-temlate模板ID

<script type="text/html" id="tpl">
## html标签
<a href="/book/{{bookId}}" style="color: inherit"></a>
</script>

代码说明：

• type="text/html"：定义文本类型为html
• id="tpl":定义模板ID
• {{bookId}}:使用{{属性名}}来获取属性值

7.ajax加载book数据

<script>
    //引入星星评价图片
    $.fn.raty.defaults.path="./resources/raty/lib/images"
    $(function () {
        $.ajax({
            url: "/books",
            data: {p: 1},
            type: "get",
            dataType: "json",
            success: function (json) {
                var list = json.records;
                for (var  i=0;i<list.length;i++){
                    var book = list[i];
                    var html = template("tpl",book);
                    $("#bookList").append(html);
                }
                $(".stars").raty({readOnly:true})

            }
        })
    })
</script>

代码说明：

• $.fn.raty.defaults.path="./resources/raty/lib/images":加载星星组件的图片
• var html = template("tpl",book):引用template组件，第一个参数为模板ID，第二个参数为值
• $("#bookList").append(html);:使用append方法添加html标签到bookList上
• $(".stars").raty({readOnly:true}):页面中的.stars组件，设置成只读属性

8.重启项目

可以看到，图书列表的数据已经全部渲染出来了