WEB应用开发综合实训day11_web实训11-CSDN博客

本文链接：https://blog.csdn.net/weixin_48978100/article/details/120445708

本次实训重点介绍了如何在layui界面框架下，结合ajax和第三方多选框，利用SSM框架实现WEB应用的分页查询、添加、删除、修改和查看功能。具体操作包括设置下拉选框、添加多选按钮、调整js文件以适应后端接口，以及各个控制器的实现。

摘要由CSDN通过智能技术生成

本节实训内容为layui下拉选框和第三方多选框配合ssm框架实现增删查改功能
最新项目链接http://hbuas.top:8082/ManageMusic/index.

文章目录

分页查询专辑列表

@Override
public ResultVo getAlbumListByPage(Integer page, Integer limit) {
     
    int start = (page-1)*limit;
    try{
     
        List<TbAlbum> albumList = tbAlbumMapper.getAlbumListByPage(start,limit);
        for(TbAlbum album:albumList){
     
            //根据专辑id查询对应的歌手列表
            List<TbArtist> artistList = tbArtistMapper.getArtistByAlbumId(album.getAlId());
            album.setArtistList(artistList);
        }
        int length = tbAlbumMapper.selectAll().size();
        ResultVo resultVo = ResultVo.getSuccessVo("success", albumList);
        resultVo.setCount(length);
        return resultVo;
    }catch (Exception e){
     
        e.printStackTrace();
        return ResultVo.getFailVo("fail");
    }
}

添加专辑页面显示所有歌手

添加多选按钮标签到添加专辑表单中(add_album.html)

<div class="layui-form-item">
    <label class="layui-form-label">多选歌手</label>
    <div class="layui-input-block"></div>
</div>

添加专辑页面导入multi_select.js

<script th:src="@{/js/multi_select.js}"></script>

将multi_select.js和layui_extends复制到项目
修改multi_select.js中ajax请求获取后端歌手列表的接口地址

后端歌手列表获取接口(ArtistController)

/**
     * 查询所有歌手列表
*/
@RequestMapping("/listAll")
@ResponseBody
public ResultVo listAll(){
       
    return artistService.listAll();
}

提交添加专辑页面表单

add_album.js

//提交表单
form.on('submit(demo1)', function(data){
       
    console.log(data.field) //当前容器的全部表单字段，名值对形式：{name: value}
    //使用ajax向后端发异步请求
    $.ajax({
       
        type:"post",//请求方式
        url:"album/add",//请求地址
        data:data.field,