WEB应用开发综合实训day9

本节实训内容为layui数据表格、表单、弹出层、文件上传、ajax以及后端SSM框架、细节巨多、一定要勤加练习

• 分页歌手列表

  • 前端(artistlist.js)

    //加载模块
    layui.use(function() {
            //亦可加载特定模块：layui.use(['layer', 'laydate', function(){
           
        //得到各种内置组件
        var layer = layui.layer //弹层
            , laypage = layui.laypage //分页
            , laydate = layui.laydate //日期
            , table = layui.table //表格
        //向世界问个好
        layer.msg('Hello World');
        //执行一个 table 实例
        table.render({
           
            elem: '#demo'//表格id
            ,height: 600
            ,url: 'artist/list' //返回歌手列表接口
            ,title: '歌手表'
            ,page: true //开启分页,会默认传值page=1  limit=10
            ,toolbar: '#headBar' //开启工具栏，此处显示默认图标，可以自定义模板，详见文档
            ,totalRow: true //开启合计行
            ,cols: [[ //表头
                {
           type: 'checkbox', fixed: 'left'}
                // field的取值跟返回实体类的属性一致
                ,{
           field: 'aId', title: 'ID',}
                ,{
           field: 'aName', title: '歌手名'}
                ,{
           field: 'aPhoto', width:120,unresize:true, title: '歌手头像',templet:function (d) {
           
                        return "<img src="+d.aPhoto+">"
                    }
                }
                //自定义行工具栏
                ,{
           fixed: 'right',width:180,  align:'center', toolbar: '#barDemo'}
            ]]
        });
    })
    

  • 后端

    @Override
    public ResultVo getArtistList(Integer page, Integer limit) {
           
        int start = (page-1)*limit;
        try{
           
            List<TbArtist> artistList = tbArtistMapper.getArtistListByPage(start,limit);
            //分页查询数量
            int length = tbArtistMapper.getArtistCount(