持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第21天，点击查看活动详情

批量删除

后端：

1.在BrandMapper定义如下方法

//批量删除
void deleteByIds(@Param("ids") int[] ids);

在BrandMapper.xml中添加下列sql语句

t：其中，foreach表示循环ids这个数组，item() 方法返回节点列表中指定索引号的节点。separator表示每次节点结束后带的符号，一般为",",open表示开头带什么，close表示结尾带什么

<delete id="deleteByIds">
    delete from tb_brand where in
    <foreach collection="ids" item="id" separator="," open="(" close=")">
        #{id}
    </foreach>
</delete>

2.在BrandService中定义方法并在BrandServiceImpl中实现方法

//批量删除
@Override
public void deleteByIds(int[] ids) {
    //2.获取SqlSessionFactory工厂对象
    SqlSession sqlSession = factory.openSession();
    //3.获取BrandMapper
    BrandMapper mapper = sqlSession.getMapper(BrandMapper.class);
    //4.调用方法
    mapper.deleteByIds(ids);
    sqlSession.commit();
    //5.释放资源
    sqlSession.close();
}

3.在BrandService中

//批量删除
public void deleteByIds(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException{
    //1.接收数据 [1,2,3]
    BufferedReader br = request.getReader();
    String params = br.readLine();//json字符串
    //2.转为int数组
    int[] ids = JSON.parseObject(params, int[].class);
    //3.调用service添加
    brandService.deleteByIds(ids);
    //4.响应成功的标识
    response.getWriter().write("success");
}

前端：

PS：记得要先找对应方法的按钮并加上绑定@click=“方法名”

//批量删除
deleteByIds(){
    //1.创建id数组[1,2,3],从this.multipleSelection获取即可
    for (let i = 0; i < this.multipleSelection.length; i++) {
        let selectionElement = this.multipleSelection[i];
        this.selectedIds[i] = selectionElement.id;
    }
    //2.//发送ajax请求，添加数据
    var _this = this;
    axios({
        method:"post",
        url:"http://localhost:8080/brand-case/brand/delectByIds",
        data:_this.selectedIds
    }).then(function (resp){
        if(resp.data == "success"){
            //删除成功
            //1.重新查询数据
            _this.selectAll();
            //2.定义添加成功的提示
            _this.$message({
                message: '恭喜你，批量删除成功',
                type: 'success'
            });

分页查询

sql语句：

分页查询LIMIT 参数1：开始索引=(当前页码-1)*每页显示条数参数2：查询的条目数=每页显示条数

1.先创建一个PageBean类

//分页查询的javabean
public class PageBean<T> {
    //总记录数
    private int totalCount;
	//当前页数据
    private List<T> rows;
    
    public int getTotalCount() {
        return totalCount;
    }

    public void setTotalCount(int totalCount) {
        this.totalCount = totalCount;
    }

    public List<T> getRows() {
        return rows;
    }

    public void setRows(List<T> rows) {
        this.rows = rows;
    }

    
}

后端逻辑

1.在BrandMapper中定义分页查询的方法

//分页查询
@Select("select * from tb_brand limit #{begin} , #{size}")
@ResultMap("brandResultMap")
List<Brand> selectByPage(@Param("begin")int begin,@Param("size")int size);

@Select("select count(*) from tb_brand")
int selectTotalCount();

2.在BrandService中定义方法

//分页查询
PageBean<Brand> selectByPage(int currentPage,int pageSize);

并在BrandServiceImpl中实现方法

public PageBean<Brand> selectByPage(int currentPage, int pageSize) {
    //2.获取SqlSessionFactory工厂对象
    SqlSession sqlSession = factory.openSession();
    //3.获取BrandMapper
    BrandMapper mapper = sqlSession.getMapper(BrandMapper.class);
    //4.计算开始索引
    int begin = (currentPage - 1)* pageSize;
    //计算查询条目数
    int size = pageSize;
    //5.查询当前页数据
    List<Brand> rows = mapper.selectByPage(begin,size);
    //6.查询总记录数
    int totalCount = mapper.selectTotalCount();
    //7.封装对象
    PageBean<Brand> pageBean = new PageBean<>();
    pageBean.setRows(rows);
    pageBean.setTotalCount(totalCount);
    //8.释放资源
    return pageBean;
}

前端：

1.页面加载完成后发送异步请求，携带当前页码和每页显示条数参数，获取数据

2.将数据设置到模型上

先把selectAll从查全部改成分页查询

// selectAll() {
//     //当页面加载完成后，发送异步请求，获取数据
//     var _this = this;
//     axios({
//         method: "get",
//         url: "http://localhost:8080/brand-case/brand/selectAll"
//     }).then(function (resp) {
//         _this.tableData = resp.data;
//
//     })
//
// },
//查询分页的方法
selectAll(){
    var _this = this;
    axios({
        method:"get",
        url:"http://localhost:8080/brand-case/brand/selectByPage?currentPage=1&pageSize=5"
    }).then(function (resp){
        //设置表格数据
        _this.tableData=resp.data.rows;
        _this.totalCount=resp.data.totalCount;
    })

此时呈现在页面上的就是第一页(前5个数据)

2.解决页面左下角显示条数问题

在selectAll中定义_this.totalCount=resp.data.totalCount; 还要在data数据中return

//定义总记录数
totalCount:100,

即可显示实时条数

3.解决通过点击页码数显示到对应页码的数据问题

先将上面的rul修改为

url:"http://localhost:8080/brand-case/brand/selectByPage?currentPage="+_this.currentPage+"&pageSize="+_this.pageSize

并在data中定义pageSize="5"

并修改下述代码

        //分页
            handleSizeChange(val) {
                //console.log(`每页 ${val} 条`);
                //重新设置每页显示的条数
                this.pageSize=val;
                this.selectAll();
            },
            handleCurrentChange(val) {
                // console.log(`当前页: ${val}`);
                //重新设置当前页码
                this.currentPage=val;
                this.selectAll();
            }

条件查询

后端代码：

1.先在BrandMapper中定义方法

//分页条件查询
    //用xml编写sql语句
    List<Brand> selectByPageAndCondition(@Param("begin")int begin,@Param("size")int size,@Param("brand")Brand brand);

    //根据条件查询总记录数
    int selectTotalCountByCondition(Brand brand);
}

t：brand.brandName的原因是此时该方法有多个参数，为了知道是哪个参数中的brandName，得加上brand.brandName

下面的代码是selectByPageAndCondition的sql语句，是为了进行模糊查询并且进行分页展示

<select id="selectByPageAndCondition" resultMap="brandResultMap">
    select * from tb_brand
    <where>
        <if test="brand.brandName!=null and brand.brandName!='' ">
            and brand_name like #{brand.brandName}
        </if>
        <if test="brand.companyName!=null and brand.companyName!='' ">
            and company_name like #{brand.companyName}
        </if>
        <if test="brand.status!=null">
            and status = #{status}
        </if>
    </where>
        limit #{begin},#{size}
</select>

下面的代码是selectTotalCountByCondition(根据条件查询总记录数)

<select id="selectTotalCountByCondition">
    select count(*) from tb_brand
    <where>
        <if test="brand.brandName!=null and brand.brandName!='' ">
            and brand_name like #{brandName}
        </if>
        <if test="brand.companyName!=null and brand.companyName!='' ">
            and company_name like #{companyName}
        </if>
        <if test="brand.status!=null">
            and status = #{status}
        </if>
    </where>
</select>

t:这里由于该方法只有一个参数，因此不用使用brand.brandName之类的进行解释

3.在BrandService中定义方法并在BrandServiceImpl中实现方法

t：处理brand条件，模糊表达式是为了保证传入sql语句进行模糊查询

public PageBean<Brand> selectByPageAndCondition(int currentPage, int pageSize, Brand brand) {
    //2.获取SqlSessionFactory工厂对象
    SqlSession sqlSession = factory.openSession();
    //3.获取BrandMapper
    BrandMapper mapper = sqlSession.getMapper(BrandMapper.class);
    //4.计算开始索引
    int begin = (currentPage - 1)* pageSize;
    //计算查询条目数
    int size = pageSize;
    //处理brand条件，模糊表达式
    String brandName = brand.getBrandName();
    if(brandName!=null&&brandName.length()>0){
        brand.setBrandName("%"+brandName+"%");
    }
    String companyName = brand.getCompanyName();
    if(companyName!=null&&brandName.length()>0){
        brand.setCompanyName("%"+companyName+"%");
    }
    //5.查询当前页数据
    List<Brand> rows = mapper.selectByPageAndCondition(begin,size,brand);
    //6.查询总记录数
    int totalCount = mapper.selectTotalCountByCondition(brand);
    //7.封装对象
    PageBean<Brand> pageBean = new PageBean<>();
    pageBean.setRows(rows);
    pageBean.setTotalCount(totalCount);
    //8.释放资源
    return pageBean;
}

4.在BrandServlet中定义selectByPageAndCondition方法

//分页条件查询
public void selectByPageAndCondition(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException{
    //1.接收 当前页码 和 每页展示条数  url?currentPage=1&pageSize=5
    String _currentPage = request.getParameter("currentPage");
    String _pageSize = request.getParameter("pageSize");

    int currentPage = Integer.parseInt(_currentPage);
    int pageSize = Integer.parseInt(_pageSize);

    //获取查询条件对象
    //1.接收数据 
    BufferedReader br = request.getReader();
    String params = br.readLine();//json字符串
    //2.转为Brand
    Brand brand = JSON.parseObject(params, Brand.class);
    //2.调用service查询
    PageBean<Brand> pageBean = brandService.selectByPageAndCondition(currentPage, pageSize,brand);
    //3.转为json
    String jsonString = JSON.toJSONString(pageBean);
    //4.写数据
    response.setContentType("text/json;charset=utf-8");
    response.getWriter().write(jsonString);
}

还需要将前端的代码改为post请求方式，即

method:"post",
url:"http://localhost:8080/brand-case/brand/selectByPage?currentPage="+_this.currentPage+"&pageSize="+_this.pageSize
data:{}

前端代码

1.查询表单绑定查询条件对象模型

2.点击查询按钮查询数据

3.页面加载完成后发送异步请求，携带当前页码、每页显示条数、查询条件对象

先将submit方法改成如下

// 查询方法
onSubmit() {
    //console.log(this.brand);
    this.selectAll();
},

再将selectAll方法中的data数据进行修改

selectAll(){
    var _this = this;
    axios({
        method:"post",
        url:"http://localhost:8080/brand-case/brand/selectByPage?currentPage="+this.currentPage+"&pageSize="+this.pageSize,
        data:this.brand//这里！！！

案例2

批量删除

分页查询

条件查询

前端代码