Javaweb15==mysql+mybatis+servlet+axios+fasetjson+vue+elementUI前后端分离，实现列表后端分页、模糊查询后分页、新增、单一/批量删除、修改

难点：模糊查询后再次分页，并可以选择页数。

最终环境配置：

maven3.8：依赖包管理

IDEA2021+JDK8+mysql connector java5+Mysql5+mybatis3.5：从数据库取出数据。

tomcat7插件：web服务器

servlet、fastjson、axios：处理前后端数据交互

fastjson：阿里提供的依赖包。新增时后端收到前端发过来的JSON字符串后，简化将JSON字符串解析成对象。展示商品列表时后端通过mybatis从数据库中查出数据封装成实体类对象的list之后，简化将对象list序列化成JSON字符串。

axios框架：封装了原生JavaScript的ajax操作，简化了HTTP请求的发起和响应参数的获取。

vue.js+ElementUI+html5+css3+chorme：vue.js封装了JavaScript。ElementUI组件库，封装了vue.js，通过提供了搭配的CSS。所以作为后端搭建个简易前端界面，只需要新建个html页面，new一个Vue，绑定一个DIV，然后在这个DIV里填ElementUI提供的组件，并且在head标签中的style中填ElementUI提供的CSS样式就行了。

重点：记住一切操作的背后都是对象，比如前端是在操作vue data中return的对象，后端就是new 的Brand对象。深浅拷贝涉及JS的内存知识

================================================================

项目结构：

 表结构

运行效果

 =================================================================

代码

pom.xml

<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0"
         xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 https://maven.apache.org/xsd/maven-4.0.0.xsd">
    <modelVersion>4.0.0</modelVersion>

    <groupId>com.ldj</groupId>
    <artifactId>brand-crud</artifactId>
    <version>1.0-SNAPSHOT</version>
    <name>brand-crud</name>
    <packaging>war</packaging>

    <properties>
        <maven.compiler.source>8</maven.compiler.source>
        <maven.compiler.target>8</maven.compiler.target>
    </properties>


    <dependencies>
        <!--Servlet-->
        <dependency>
            <groupId>javax.servlet</groupId>
            <artifactId>javax.servlet-api</artifactId>
            <version>3.1.0</version>
            <scope>provided</scope>
        </dependency>


        <!--MyBatis-->
        <dependency>
            <groupId>org.mybatis</groupId>
            <artifactId>mybatis</artifactId>
            <version>3.5.5</version>
        </dependency>
        <!--MySQL-->
        <dependency>
            <groupId>mysql</groupId>
            <artifactId>mysql-connector-java</artifactId>
            <version>5.1.34</version>
        </dependency>

        <!--fastjson-->
        <dependency>
            <groupId>com.alibaba</groupId>
            <artifactId>fastjson</artifactId>
            <version>1.2.62</version>
        </dependency>
        <!-- junit测试包-->
        <dependency>
            <groupId>junit</groupId>
            <artifactId>junit</artifactId>
            <version>4.11</version>
            <scope>test</scope>
        </dependency>


    </dependencies>

    <build>
        <plugins>
            <plugin>
                <groupId>org.apache.tomcat.maven</groupId>
                <artifactId>tomcat7-maven-plugin</artifactId>
                <version>2.2</version>

            </plugin>
        </plugins>
    </build>
</project>

BrandMapper

package com.ldj.mapper;

import com.ldj.pojo.Brand;
import org.apache.ibatis.annotations.Param;

import java.util.List;
import java.util.Map;

public interface BrandMapper {

    /**
     * 查询所有
     *
     * @return
     */
    List<Brand> selectAll();

    /**
     * 添加数据
     *
     * @param brand
     */
    int add(Brand brand);

    int update(Brand brand);

    int delete(Integer id);

    //根据批量删除
    int deleteByIds(int[] ids);

    //多条件查询动态SQL。多个参数可以使用map
    List<Brand> selectLike4(Map map);

    //分页查询。多个参数也可以使用@Param标签
    List<Brand> selectByPage(@Param("begin") int begin, @Param("size") int size);

    //查询总记录数
    int selectTotalCount();

    //分页模糊条件查询
    List<Brand> selectByPageAndCondition(Map map);

    //分页模糊查询
    //查询总记录数
    int selectTotalCountByPageAndCondition(Map map);

}

Brand

package com.ldj.pojo;

public class Brand {
    // id 主键
    private Integer id;
    // 品牌名称
    private String brandName;
    // 企业名称
    private String companyName;
    // 排序字段
    private Integer ordered;
    // 描述信息
    private String description;
    // 状态：0：禁用  1：启用
    private Integer status;


    public Integer getId() {
        return id;
    }

    public void setId(Integer id) {
        this.id = id;
    }

    public String getBrandName() {
        return brandName;
    }

    public void setBrandName(String brandName) {
        this.brandName = brandName;
    }

    public String getCompanyName() {
        return companyName;
    }

    public void setCompanyName(String companyName) {
        this.companyName = companyName;
    }

    public Integer getOrdered() {
        return ordered;
    }

    public void setOrdered(Integer ordered) {
        this.ordered = ordered;
    }

    public String getDescription() {
        return description;
    }

    public void setDescription(String description) {
        this.description = description;
    }

    public Integer getStatus() {
        return status;
    }
    //逻辑视图
    public String getStatusStr(){
        if (status == null){
            return "未知";
        }
        return status == 0 ? "禁用":"启用";
    }

    public void setStatus(Integer status) {
        this.status = status;
    }

    @Override
    public String toString() {
        return "Brand{" +
                "id=" + id +
                ", brandName='" + brandName + '\'' +
                ", companyName='" + companyName + '\'' +
                ", ordered=" + ordered +
                ", description='" + description + '\'' +
                ", status=" + status +
                '}';
    }
}

PageBean

package com.ldj.pojo;

import java.util.List;

//用于分页查询的数据传递，泛型T在new的时候指定
public class PageBean<T> {
    //总记录数
    private int totalCount;
    //当前页数据
    private List<T> rows;

    @Override
    public String toString() {
        return "PageBean{" +
                "totalCount=" + totalCount +
                ", rows=" + 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;
    }
}

BrandService

package com.ldj.service;

import com.ldj.pojo.Brand;
import com.ldj.pojo.PageBean;

import java.util.HashMap;
import java.util.List;
import java.util.Map;

//接口约束功能，方便servlet更换具体的实现类
public interface BrandService {

    /**
     * 查询所有
     *
     * @return
     */
    List<Brand> selectAll();

    /**
     * 添加数据
     *
     * @param brand
     */
    int add(Brand brand);

    /**
     * 修改数据
     *
     * @param brand
     */
    int update(Brand brand);

    int delete(Integer id);

    List<Brand> selectLike4(Map map);

    int deleteByIds(int[] ids);

    PageBean<Brand> selectByPage(int currentPage, int pageSize);

    List<Brand>  selectByPageLike(Map map);

    int selectTotalCountByPageAndCondition(Map map);
}

BrandServiceImpl

package com.ldj.service.impl;

import com.ldj.mapper.BrandMapper;
import com.ldj.pojo.Brand;
import com.ldj.pojo.PageBean;
import com.ldj.service.BrandService;
import com.ldj.util.SqlSessionFactoryUtils;
import org.apache.ibatis.session.SqlSession;
import org.apache.ibatis.session.SqlSessionFactory;

import java.util.HashMap;
import java.util.List;
import java.util.Map;

//实现接口
public class BrandServiceImpl implements BrandService {
    //1. 创建SqlSessionFactory 工厂对象
    SqlSessionFactory factory = SqlSessionFactoryUtils.getSqlSessionFactory();


    @Override
    public List<Brand> selectAll() {
        //2. 获取SqlSession对象
        SqlSession sqlSession = factory.openSession();
        //3. 获取BrandMapper
        BrandMapper mapper = sqlSession.getMapper(BrandMapper.class);

        //4. 调用方法
        List<Brand> brands = mapper.selectAll();

        //5. 释放资源
        sqlSession.close();

        return brands;
    }

    @Override
    public int add(Brand brand) {
        //2. 获取SqlSession对象
        SqlSession sqlSession = factory.openSession();
        //3. 获取BrandMapper
        BrandMapper mapper = sqlSession.getMapper(BrandMapper.class);

        //4. 调用方法
        int add = mapper.add(brand);
        sqlSession.commit();//提交事务

        //5. 释放资源
        sqlSession.close();

        return add;
    }

    @Override
    public int delete(Integer id) {
        //2. 获取SqlSession对象
        SqlSession sqlSession = factory.openSession();
        //3. 获取BrandMapper
        BrandMapper mapper = sqlSession.getMapper(BrandMapper.class);

        //4. 调用方法
        int delete = mapper.delete(id);
        sqlSession.commit();//提交事务

        //5. 释放资源
        sqlSession.close();
        return delete;
    }

    @Override
    public int update(Brand brand) {
        //2. 获取SqlSession对象
        SqlSession sqlSession = factory.openSession();
        //3. 获取BrandMapper
        BrandMapper mapper = sqlSession.getMapper(BrandMapper.class);

        //4. 调用方法
        int update = mapper.update(brand);
        sqlSession.commit();//提交事务

        //5. 释放资源
        sqlSession.close();

        return update;
    }

    @Override
    public List<Brand> selectLike4(Map map) {//多条件动态查询，如果某些条件用户不填写，就要用这种对应的映射文件，类似java if else if

        //2. 获取SqlSession对象
        SqlSession sqlSession = factory.openSession();
        //3. 获取BrandMapper
        BrandMapper mapper = sqlSession.getMapper(BrandMapper.class);

        List<Brand> tbBrands = mapper.selectLike4(map);
        System.out.println(tbBrands);
        return tbBrands;
    }

    @Override
    public int deleteByIds(int[] ids) {
        //2. 获取SqlSession对象
        SqlSession sqlSession = factory.openSession();
        //3. 获取BrandMapper
        BrandMapper mapper = sqlSession.getMapper(BrandMapper.class);

        //4. 调用方法
        int res = mapper.deleteByIds(ids);
        sqlSession.commit();//提交事务

        //5. 释放资源
        sqlSession.close();
        return res;
    }

    @Override
    public PageBean<Brand> selectByPage(int currentPage, int pageSize) {
        //2. 获取SqlSession对象
        SqlSession sqlSession = factory.openSession();
        //3. 获取BrandMapper
        BrandMapper mapper = sqlSession.getMapper(BrandMapper.class);

        //4. 调用方法
        int begin = (currentPage - 1) * pageSize;
        List<Brand> list = mapper.selectByPage(begin, pageSize);
        int totalCount = mapper.selectTotalCount();
        PageBean<Brand> pageBean = new PageBean<>();
        pageBean.setRows(list);
        pageBean.setTotalCount(totalCount);
        sqlSession.commit();//提交事务
        //5. 释放资源
        sqlSession.close();

        return pageBean;
    }

    @Override
    public List<Brand> selectByPageLike(Map map) {
        //2. 获取SqlSession对象
        SqlSession sqlSession = factory.openSession();
        //3. 获取BrandMapper
        BrandMapper mapper = sqlSession.getMapper(BrandMapper.class);
        //4. 调用方法
        List<Brand> brands = mapper.selectByPageAndCondition(map);

        sqlSession.commit();//提交事务
        //5. 释放资源
        sqlSession.close();

        return brands;
    }

    @Override
    public int selectTotalCountByPageAndCondition(Map map) {
        //2. 获取SqlSession对象
        SqlSession sqlSession = factory.openSession();
        //3. 获取BrandMapper
        BrandMapper mapper = sqlSession.getMapper(BrandMapper.class);
        //4. 调用方法
        int count = mapper.selectTotalCountByPageAndCondition(map);

        sqlSession.commit();//提交事务
        //5. 释放资源
        sqlSession.close();

        return count;
    }

}

SqlSessionFactoryUtils

package com.ldj.util;

import org.apache.ibatis.io.Resources;
import org.apache.ibatis.session.SqlSessionFactory;
import org.apache.ibatis.session.SqlSessionFactoryBuilder;

import java.io.IOException;
import java.io.InputStream;

public class SqlSessionFactoryUtils {

    private static SqlSessionFactory sqlSessionFactory;

    static {
        //静态代码块会随着类的加载而自动执行，且只执行一次
        try {
            String resource = "mybatis-config.xml";
            InputStream inputStream = Resources.getResourceAsStream(resource);
            sqlSessionFactory = new SqlSessionFactoryBuilder().build(inputStream);
        } catch (IOException e) {
            e.printStackTrace();
        }
    }


    public static SqlSessionFactory getSqlSessionFactory(){
        return sqlSessionFactory;
    }
}

BaseServlet

package com.ldj.web.servletoptimization;

import javax.servlet.*;
import javax.servlet.http.*;
import javax.servlet.annotation.*;
import java.io.IOException;
import java.lang.reflect.InvocationTargetException;
import java.lang.reflect.Method;

public class BaseServlet extends HttpServlet {
    @Override
    protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        String requestURI = req.getRequestURI();
        int i = requestURI.lastIndexOf('/');
        String methodName = requestURI.substring(i + 1);
        System.out.println(methodName);

        Class clazz = this.getClass();
        Method method = null;
        try {
            method = clazz.getMethod(methodName, HttpServletRequest.class, HttpServletResponse.class);
            method.invoke(this, req, resp);
        } catch (NoSuchMethodException | IllegalAccessException | InvocationTargetException e) {
            e.printStackTrace();
        }
    }
}

BrandServletAfterOptimization

package com.ldj.web.servletoptimization;

import com.alibaba.fastjson.JSON;
import com.alibaba.fastjson.JSONObject;
import com.ldj.pojo.Brand;
import com.ldj.pojo.PageBean;
import com.ldj.service.BrandService;
import com.ldj.service.impl.BrandServiceImpl;

import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.BufferedReader;
import java.io.IOException;
import java.util.HashMap;
import java.util.List;
import java.util.Map;

/**
 * @author ldj
 * 优化后的servlet，通过BaseServlet重写HttpServlet的service方法，解析出访问的方法名，通过反射获取相应的方法并调用
 */
@WebServlet("/brandAfterOptimization/*")
public class BrandServletAfterOptimization extends BaseServlet {
    private BrandService brandService = new BrandServiceImpl();

    //查询所有
    public void selectAllServlet(HttpServletRequest request, HttpServletResponse response) throws IOException {
        System.out.println("收到查询所有的请求");
        //1. 调用service查询
        List<Brand> brands = brandService.selectAll();

        //2. 转为JSON
        String jsonString = JSON.toJSONString(brands);
        System.out.println(jsonString);

        //3. 写数据
        //有中文防止乱码
        response.setContentType("text/json;charset=utf-8");
        response.getWriter().write(jsonString);
    }

    //添加一条数据
    public void addServlet(HttpServletRequest request, HttpServletResponse response) throws IOException {
        System.out.println("收到添加一条数据的请求");
        //解决乱码
        request.setCharacterEncoding("utf-8");//指定输入流的解码方式
        //1. 接收品牌数据
        BufferedReader br = request.getReader();
        String params = br.readLine();//json字符串

        /*
        阿里的fastJson.jar：(import com.alibaba.fastjson.JSON;import com.alibaba.fastjson.JSONObject;)
//list转换为json
List<CustPhone> list = new ArrayList<CustPhone>();
String str=JSON.toJSON(list).toString();
//json转换为list
List<Person> list = new ArrayList<Person>();
list = JSONObject.parseArray(jasonArray, Person.class);
         */

        if (!"".equals(params)) {
            //转为Brand对象
            Brand brand = JSON.parseObject(params, Brand.class);
            System.out.println("收到一条修改信息" + params);
            //2. 调用service添加
            int add = brandService.add(brand);
            //3. 响应成功的标识
            if (add == 1) {
                response.getWriter().write("success");
            }
        }
    }

    //批量删除
    public void deleteSelectedListServlet(HttpServletRequest request, HttpServletResponse response) throws IOException {
        System.out.println("收到批量删除的请求");
        //解决乱码
        request.setCharacterEncoding("utf-8");//指定输入流的解码方式
        //1. 接收品牌数据
        BufferedReader br = request.getReader();
        String params = br.readLine();//json字符串
        System.out.println("前端想要批量删除传过来的JSON字符串：" + params + "======");

               /*
        阿里的fastJson.jar：(import com.alibaba.fastjson.JSON;import com.alibaba.fastjson.JSONObject;)
//list转换为json
List<CustPhone> list = new ArrayList<CustPhone>();
String str=JSON.toJSON(list).toString();
//json转换为list
List<Person> list = new ArrayList<Person>();
list = JSONObject.parseArray(jasonArray, Person.class);
         */

        if (!"".equals(params)) {
            //转为ids数组
            int[] arr = JSONObject.parseObject(params, int[].class);
            if (arr.length != 0) {
                //2. 调用service删除
                brandService.deleteByIds(arr);
                //3. 响应成功的标识
                response.getWriter().write("success");
            }
        }
    }

    //删除一条数据
    public void deleteOneServlet(HttpServletRequest request, HttpServletResponse response) throws IOException {
        System.out.println("收到删除一条数据的请求");
        //解决乱码
        request.setCharacterEncoding("utf-8");//指定输入流的解码方式
        //1. 接收想要删除的ID
        String id = request.getParameter("id");

        //转为
        System.out.println("收到一条删除信息，想要删除的ID是" + id);
        //2. 调用service删除
        brandService.delete(Integer.valueOf(id));

        //3. 响应成功的标识
        response.getWriter().write("success");
    }

    //模糊分页查询
    public void selectLikeServlet(HttpServletRequest request, HttpServletResponse response) throws IOException {
        //获取前端传过来的三个参数封装进Map
        //解决乱码
        request.setCharacterEncoding("utf-8");//指定输入流的解码方式
        //1. 接收模糊查询的品牌数据
        BufferedReader br = request.getReader();
        String params = br.readLine();//json字符串

        //转为Brand对象
        Brand brandLike = JSON.parseObject(params, Brand.class);
        System.out.println("收到一条模糊查询信息" + params);

        //2接收当前页信息和每页显示多少页
        int currentPageLike = Integer.parseInt(request.getParameter("currentPageLike"));
        int pageSizeLike = Integer.parseInt(request.getParameter("pageSizeLike"));
        int begin = (currentPageLike - 1) * pageSizeLike;
        //封装查询条件
        Map map = new HashMap();

        String companyName = "";
        String brandName = "";
        if (!"".equals(brandLike.getCompanyName())) {//不为空则进行模糊查询
            companyName = "%" + brandLike.getCompanyName() + "%";
            brandLike.setCompanyName(companyName);
        }
        if (!"".equals(brandLike.getBrandName())) {//不为空则进行模糊查询
            brandName = "%" + brandLike.getBrandName() + "%";
            brandLike.setBrandName(brandName);
        }


        map.put("begin", begin);
        map.put("pageSizeLike", pageSizeLike);
        map.put("brandLike", brandLike);


        //1. 调用service模糊查询
        List<Brand> brands = brandService.selectByPageLike(map);
        int countLike = brandService.selectTotalCountByPageAndCondition(map);
        PageBean<Brand> pageBean =new PageBean<>();
        pageBean.setTotalCount(countLike);
        pageBean.setRows(brands);
                //2. 转为JSON
        String jsonString = JSON.toJSONString(pageBean);
        System.out.println("模糊查询到的" + jsonString);

        //3. 写数据
        //有中文防止乱码
        response.setContentType("text/json;charset=utf-8");
        response.getWriter().write(jsonString);
    }

    //更新一条数据
    public void updateOneBrandServlet(HttpServletRequest request, HttpServletResponse response) throws IOException {
        //解决乱码
        request.setCharacterEncoding("utf-8");//指定输入流的解码方式
        //1. 接收品牌数据
        BufferedReader br = request.getReader();
        String params = br.readLine();//json字符串

        //转为Brand对象
        Brand brand = JSON.parseObject(params, Brand.class);
        System.out.println("收到一条修改信息" + params);
        //2. 调用service添加
        int update = brandService.update(brand);

        //3. 响应成功的标识
        if (update == 1) {
            response.getWriter().write("success");
        }
    }

    //分页查询
    public void selectByPage(HttpServletRequest request, HttpServletResponse response) throws IOException {
        int currentPage = Integer.parseInt(request.getParameter("currentPage"));
        int pageSize = Integer.parseInt(request.getParameter("pageSize"));

        PageBean<Brand> pageBean = brandService.selectByPage(currentPage, pageSize);
        //2. 转为JSON
        String jsonString = JSON.toJSONString(pageBean);
        System.out.println("模糊查询到的" + jsonString);

        //3. 写数据
        //有中文防止乱码
        response.setContentType("text/json;charset=utf-8");
        response.getWriter().write(jsonString);
    }
}

BrandMapper.xml

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE mapper
        PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
        "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="com.ldj.mapper.BrandMapper">
    <resultMap id="brandResultMap" type="brand">
        <result column="brand_name" property="brandName"></result>
        <result column="company_name" property="companyName"></result>
    </resultMap>
    <!--查询所有-->
    <select id="selectAll" resultMap="brandResultMap">
        select *
        from tb_brand;
    </select>
    <!--插入一条数据-->
    <insert id="add">
        insert into tb_brand
        values (null, #{brandName}, #{companyName}, #{ordered}, #{description}, #{status})
    </insert>

    <update id="update" parameterType="com.ldj.pojo.Brand">
        update tb_brand
        set brand_name   = #{brandName},
            company_name = #{companyName},
            ordered      = #{ordered},
            description  = #{description},
            `status`     = #{status}
        where id = #{id}
    </update>

    <delete id="delete">
        delete
        from tb_brand
        where id = #{id}
    </delete>

    <!--
        多条件动态查询用where标签和if test标签，如果一个条件都不满足，就会自动去除where中的所有内容
    -->
    <select id="selectLike4" parameterType="com.ldj.pojo.Brand" resultMap="brandResultMap">
        select *
        from tb_brand
        <where>
            <if test="status != null">
                and status = #{status}
            </if>
            <if test="companyName != null and companyName != ''">
                <!-- 这里不能用equals来判断-->
                and company_name like #{companyName}
            </if>
            <if test="brandName != null and brandName != ''">
                and brand_name like #{brandName}
            </if>
        </where>
    </select>

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

    <select id="selectByPage" parameterType="int" resultMap="brandResultMap">
        select *
        from tb_brand
        limit #{begin},#{size};
    </select>

    <select id="selectTotalCount" resultType="int">
        select count(*)
        from tb_brand
    </select>

    <select id="selectByPageAndCondition" resultMap="brandResultMap">
        select *
        from tb_brand
        <where>
            <if test="brandLike.status != null">
                and status = #{brandLike.status}
            </if>
            <if test="brandLike.companyName != null and brandLike.companyName != ''">
                <!-- 这里不能用equals来判断-->
                and company_name like #{brandLike.companyName}
            </if>
            <if test="brandLike.brandName != null and brandLike.brandName != ''">
                and brand_name like #{brandLike.brandName}
            </if>
        </where>
        limit #{begin},#{pageSizeLike};
    </select>
    <select id="selectTotalCountByPageAndCondition"  resultType="int">
        select count(*)
        from tb_brand
        <where>
            <if test="brandLike.status != null">
                and status = #{brandLike.status}
            </if>
            <if test="brandLike.companyName != null and brandLike.companyName != ''">
                <!-- 这里不能用equals来判断-->
                and company_name like #{brandLike.companyName}
            </if>
            <if test="brandLike.brandName != null and brandLike.brandName != ''">
                and brand_name like #{brandLike.brandName}
            </if>
        </where>
    </select>
</mapper>

mybatis-config.xml

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE configuration
        PUBLIC "-//mybatis.org//DTD Config 3.0//EN"
        "http://mybatis.org/dtd/mybatis-3-config.dtd">
<configuration>

    <typeAliases>
        <package name="com.ldj.pojo"/>
    </typeAliases>

    <environments default="development">
        <environment id="development">
            <transactionManager type="JDBC"/>
            <dataSource type="POOLED">
                <property name="driver" value="com.mysql.jdbc.Driver"/>
                <property name="url" value="jdbc:mysql:///db1?useSSL=false"/>
                <property name="username" value="root"/>
                <property name="password" value="1234"/>
            </dataSource>
        </environment>
    </environments>
    <mappers>
        <!--扫描mapper-->
        <package name="com.ldj.mapper"/>
    </mappers>
</configuration>

brandAfterOptimizationPageBehind.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .el-table .warning-row {
            background: oldlace;
        }

        .el-table .success-row {
            background: #f0f9eb;
        }
    </style>

</head>
<body>
<a href="http://localhost:8080/brand-crud/brand.html">去往前端分页未优化servlet</a> <br> <br> <br>
<a href="http://localhost:8080/brand-crud/brandAfterOptimization.html">去往前端分页已优化servlet</a> <br> <br> <br>
<a href="http://localhost:8080/brand-crud/brandAfterOptimizationPageBehind.html">去往后端分页已优化servlet</a>

<div id="app">

    <!--模糊查询表单-->
    <el-form :inline="true" :model="brandLike" class="demo-form-inline">

        <el-form-item label="当前状态">
            <el-select v-model="brandLike.status" placeholder="当前状态">
                <el-option label="启用" value="1"></el-option>
                <el-option label="禁用" value="0"></el-option>
            </el-select>
        </el-form-item>

        <el-form-item label="企业名称">
            <el-input v-model="brandLike.companyName" placeholder="企业名称"></el-input>
        </el-form-item>

        <el-form-item label="品牌名称">
            <el-input v-model="brandLike.brandName" placeholder="品牌名称"></el-input>
        </el-form-item>

        <el-form-item>
            <el-button type="primary" @click="selectByPageAndCondition">模糊查询</el-button>
        </el-form-item>
    </el-form>

    <!--删除、新增按钮-->
    <el-row>
        <el-button type="danger" plain @click="deleteList">批量删除</el-button>
        <el-button type="primary" plain @click="dialogVisible = true">新增</el-button>
    </el-row>
    <!--添加数据对话框表单-->
    <el-dialog
            title="编辑品牌"
            :visible.sync="dialogVisible"
            width="30%"
    >
        <el-form ref="form" :model="brandAdd" label-width="80px">
            <el-form-item label="品牌名称">
                <el-input v-model="brandAdd.brandName"></el-input>
            </el-form-item>

            <el-form-item label="企业名称">
                <el-input v-model="brandAdd.companyName"></el-input>
            </el-form-item>

            <el-form-item label="排序">
                <el-input v-model="brandAdd.ordered"></el-input>
            </el-form-item>

            <el-form-item label="备注">
                <el-input type="textarea" v-model="brandAdd.description"></el-input>
            </el-form-item>

            <el-form-item label="状态">
                <el-switch v-model="brandAdd.status"
                           active-value="1"
                           inactive-value="0"
                ></el-switch>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="addBrand">提交</el-button>
                <el-button @click="cancelDo">取消</el-button>
            </el-form-item>
        </el-form>

    </el-dialog>
    <!--修改的弹对话框表单-->
    <el-dialog
            title="修改更新品牌"
            :visible.sync="dialogVisibleUpdate"
            width="30%"
    >

        <el-form ref="form" :model="brand" label-width="80px">
            <el-form-item label="品牌名称">
                <el-input v-model="brand.brandName"></el-input>
            </el-form-item>

            <el-form-item label="企业名称">
                <el-input v-model="brand.companyName"></el-input>
            </el-form-item>

            <el-form-item label="排序">
                <el-input v-model="brand.ordered"></el-input>
            </el-form-item>

            <el-form-item label="备注">
                <el-input type="textarea" v-model="brand.description"></el-input>
            </el-form-item>

            <el-form-item label="状态">
                <el-switch v-model="brand.status"
                           :active-value="1"
                           :inactive-value="0"
                ></el-switch>
            </el-form-item>


            <el-form-item>
                <el-button type="primary" @click="updateBrandDo">提交修改</el-button>
                <el-button @click="dialogVisibleUpdate = false">取消</el-button>
            </el-form-item>
        </el-form>

    </el-dialog>

    <!--显示数据的主表格，后端分页-->
    <template>
        <el-table
                :data="tableData"
                style="width: 100%"
                :row-class-name="tableRowClassName"
                @selection-change="handleSelectionChange"
        >
            <!--            每条记录最前方的小选择框-->
            <el-table-column
                    type="selection"
                    width="55">
            </el-table-column>
            <!--            每条记录的编号-->
            <el-table-column
                    label="序号"
                    type="index"
                    width="50">
            </el-table-column>

            <!--            <el-table-column-->
            <!--                    prop="id"-->
            <!--                    label="ID"-->
            <!--                    align="center"-->
            <!--           //row自动对应整个对象，取出ID备用 >-->
            </el-table-column>
            <el-table-column
                    prop="brandName"
                    label="品牌名称"
                    align="center"
            >
            </el-table-column>
            <el-table-column
                    prop="companyName"
                    label="企业名称"
                    align="center"
            >
            </el-table-column>
            <el-table-column
                    prop="ordered"
                    align="center"
                    label="排序">
            </el-table-column>
            <el-table-column
                    prop="description"
                    align="center"
                    label="描述">
            </el-table-column>
            <el-table-column
                    prop="status"
                    align="center"
                    label="当前状态"
                    :formatter="stateFormat"
            >
            </el-table-column>

            <el-table-column
                    align="center"
                    label="操作"
            >
                <template slot-scope="updateData">
                    <el-row>
                        <el-button type="primary" @click="updateOneBrand(updateData.row)">修改</el-button>
                        <el-button type="danger" @click="deleteOneBrand(updateData.row)">删除
                        </el-button>
                    </el-row>
                </template>
            </el-table-column>

        </el-table>
    </template>

    <!--分页工具条-->
    <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="pageSizes"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="totalNum">
    </el-pagination>

</div>

<!--引入依赖-->
<script src="js/vue.js"></script>
<script src="element-ui/lib/index.js"></script>
<link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css">
<script src="js/axios-0.18.0.js"></script>

<script>

    new Vue({
        el: "#app",
        methods: {
            //点击取消新增或者取消修改按钮时执行此方法重置提示框
            cancelDo() {
                this.dialogVisible = false;
                this.brand = {
                    status: '',
                    brandName: '',
                    companyName: '',
                    id: "",
                    ordered: "",
                    description: ""
                };
                this.brandAdd = {
                    status: '',
                    brandName: '',
                    companyName: '',
                    id: "",
                    ordered: "",
                    description: ""
                }
            },
            //显示每行颜色间隔变化
            tableRowClassName({row, rowIndex}) {
                if (rowIndex === 1) {
                    return 'warning-row';
                } else if (rowIndex === 3) {
                    return 'success-row';
                }
                return '';
            },
            // 复选框选中后执行的方法
            handleSelectionChange(val) {
                this.multipleSelection = val;//选中的对象集合
                let listSelect = this.multipleSelection;
                console.log(listSelect)
                //获取ID集合
                this.ids = [];//保险起见。先重置一下
                if (listSelect.length != 0) {
                    for (let i = 0; i < listSelect.length; i++) {
                        this.ids[i] = listSelect[i].id;
                    }
                }
                console.log("删除的ID集合" + this.ids)
            },
            //点击批量删除后执行此方法
            deleteList() {
                let _this = this;
                console.log("想要批量删除：" + _this.ids);
                axios({
                    method: "post",
                    url: "http://localhost:8080/brand-crud/brandAfterOptimization/deleteSelectedListServlet",
                    data: JSON.stringify(this.ids)//会自动转换，可以不写转换语句
                    //JS对象转通过方法JSON.stringify(js对象) 转换为 JSON串，servlet中以req.getReader()流的形式读取
                }).then(function (resp) {
                    // 判断响应数据是否为 success
                    if (resp.data === "success") {
                        _this.selectByPageAndCondition();
                        // alert("删除成功！"
                        _this.ids = [];//重置选择的IDS集合
                        _this.$message({message: '批量删除成功', type: 'success'});
                    } else {
                        alert("删除失败");
                        _this.selectByPageAndCondition();
                    }
                })
            },
            // 点击查询后执行此方法：按条件模糊查询
            selectByPageAndCondition() {
                console.log("模糊查询的条件为" + this.brandLike.status + this.brandLike.companyName + this.brandLike.brandName);
                let _this = this;
                _this.selectMethod = 1;//标志符改成模糊查询
                axios({
                    method: "post",
                    url: "http://localhost:8080/brand-crud/brandAfterOptimization/selectLikeServlet?currentPageLike=" + this.currentPageLike + "&pageSizeLike=" + this.pageSizeLike,
                    data: JSON.stringify(this.brandLike)//会自动转换，可以不写转换语句
                    //JS对象转通过方法JSON.stringify(js对象) 转换为 JSON串，servlet中以req.getReader()流的形式读取
                }).then(function (resp) {
                    // 判断响应数据是否为 success
                    if (resp.data != "") {
                        // alert("查询成功！")
                        _this.tableData = resp.data.rows;//后端已经分页
                        _this.totalNum = resp.data.totalCount;
                        _this.$message({message: '模糊分页查询成功', type: 'success'});
                    } else {
                        alert("模糊分页查询失败");
                    }
                })
            },
            // 点击新增按钮后会将新增提示框显现，数据填写完毕后，点击提交会执行此方法：添加数据
            addBrand() {
                let _this = this;
                console.log("想要添加：" + _this.brandAdd.brandName);
                axios({
                    method: "post",
                    url: "http://localhost:8080/brand-crud/brandAfterOptimization/addServlet",
                    data: JSON.stringify(this.brandAdd)//会自动转换，可以不写转换语句
                    //JS对象转通过方法JSON.stringify(js对象) 转换为 JSON串，servlet中以req.getReader()流的形式读取
                }).then(function (resp) {
                    // 判断响应数据是否为 success
                    if (resp.data == "success") {
                        // alert("添加成功！")
                        _this.dialogVisible = false;
                        _this.selectByPageAndCondition();
                        _this.brandAdd = {};//重置brandAdd对象
                        // location.href = "http://localhost:8080/brand-crud/brandAfterOptimization/brand.html";
                        // 弹出消息提示
                        _this.$message({message: '恭喜你，添加成功', type: 'success'});
                    } else {
                        alert("添加失败");
                        _this.selectByPageAndCondition();
                        // location.href = "http://localhost:8080/brand-crud/brandAfterOptimization/brand.html";
                    }
                })
            },

            //后端分页==========================================
            //每页显示条数改变后执行：选择  ?条/页后执行此方法
            handleSizeChange(val) {
                console.log(`每页 ${val} 条`);
                if (this.selectMethod == 0) {//正常分页查询
                    this.pageSize = val;
                    this.selectByPageAndCondition();
                } else if (this.selectMethod == 1) {//模糊分页查询
                    this.pageSizeLike = val;
                    this.selectByPageAndCondition();
                }
            },
            //当前页改变后执行：
            //选择 123456.。。之后执行此方法。
            //选择 前往？页后执行此方法
            handleCurrentChange(val) {
                if (this.selectMethod == 0) {//正常分页查询
                    this.currentPage = val;
                    this.selectByPageAndCondition();
                } else if (this.selectMethod == 1) {//模糊分页查询
                    this.currentPageLike = val;
                    this.selectByPageAndCondition();
                }
            },

            //点击删除按钮后执行此方法
            deleteOneBrand(data) {
                console.log("想要删除的数据的ID" + data.id)
                let _this = this;
                //页面加载完成后发送异步请求获取列表数据，获取到的为JSON字符串
                //往前端传JS对象会自动转成JSON字符串
                axios({
                    method: "get",
                    url: "http://localhost:8080/brand-crud/brandAfterOptimization/deleteOneServlet?id=" + data.id
                }).then(function (resp) {
                    //axios会将后端传过来JSON字符串自动转成JS对象
                    //将JSON字符串转成JS对象的原生JS方法是===parse(str) ：
                    // 将 JSON串转换为 js 对象。使用方式是： var jsObject = JSON.parse(jsonStr);
                    // 判断响应数据是否为 success
                    if (resp.data == "success") {
                        _this.selectByPageAndCondition();
                        // 弹出消息提示
                        _this.$message({message: '删除成功', type: 'success'});
                    } else {
                        alert("删除失败");
                        _this.selectByPageAndCondition();
                    }
                });
            },
            //点击修改按钮后获取当前行数据，提示框显现
            updateOneBrand(data) {
                console.log("想要修改的数据的ID" + data.id)
                this.dialogVisibleUpdate = true;
                // this.brand = data;//浅拷贝，我改你也改
                this.brand = JSON.parse(JSON.stringify(data));//深拷贝，我改你不改
            },
            //修改提示框显现后，显示停用启用
            stateFormat(row, column) {
                if (row.status === 1) {
                    return '启用'
                } else {
                    return '停用'
                }
            },
            //填写修改后的信息后，点击提交修改按钮后，执行此方法
            updateBrandDo() {
                let _this = this;
                console.log("想要添加：" + _this.brand.brandName);
                axios({
                    method: "post",
                    url: "http://localhost:8080/brand-crud/brandAfterOptimization/updateOneBrandServlet",
                    data: JSON.stringify(this.brand)//会自动转换，可以不写转换语句
                    //JS对象转通过方法JSON.stringify(js对象) 转换为 JSON串，servlet中以req.getReader()流的形式读取
                }).then(function (resp) {
                    // 判断响应数据是否为 success
                    if (resp.data == "success") {
                        // alert("添加成功！")
                        _this.dialogVisibleUpdate = false;//关闭弹窗
                        _this.selectByPageAndCondition();//重现所有
                        _this.brand = {};//重置brand对象
                        // location.href = "http://localhost:8080/brand-crud/brandAfterOptimization/brand.html";
                        // 弹出消息提示
                        _this.$message({message: '修改成功', type: 'success'});
                    } else {
                        alert("修改失败");
                        _this.selectByPageAndCondition();
                        // location.href = "http://localhost:8080/brand-crud/brandAfterOptimization/brand.html";
                    }
                })
            },
        },
        //钩子函数，页面初次加载DIV被EL后自动调用此方法
        mounted() {
            this.selectByPageAndCondition();
        },
        //页面中用到的相关VM对象
        data() {
            return {
                //是否是模糊查询的标志0表示正常分页查询，1表示模糊分页查询，默认0
                selectMethod: 0,
                // 默认当前页码
                currentPage: 1,
                //每页显示多少条选择框
                pageSizes: [3, 10, 15, 20],
                //当前每页默认显示多少条
                pageSize: 3,
                //默认总数据的条数
                totalNum: 0,

                //默认首次模糊查询当前页码
                currentPageLike: 1,

                //当前每页默认显示多少条
                pageSizeLike: 3,


                // 添加数据对话框是否展示的标记，默认不显示
                dialogVisible: false,
                //修改更新数据对话框是否展示的标记，，默认不显示
                dialogVisibleUpdate: false,

                // 品牌模型数据:用于修改
                brand: {
                    status: '',
                    brandName: '',
                    companyName: '',
                    id: "",
                    ordered: "",
                    description: ""
                },
                //品牌模型数据:用于模糊查询
                brandLike: {
                    status: '',
                    brandName: '',
                    companyName: '',
                    id: "",
                    ordered: "",
                    description: ""
                },
                //品牌模型数据:用于新增
                brandAdd: {
                    status: '',
                    brandName: '',
                    companyName: '',
                    id: "",
                    ordered: "",
                    description: ""
                },

                //复选框选中的数据集合
                multipleSelection: [],
                //复选框选中的数据的ID集合
                ids: [],

                // 表格数据，从后端接收到的JSON字符串经过AXIOS自动转成JS对象并赋值到这里
                tableData: []
            }
        }
    })

</script>

</body>
</html>

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>首页</title>
</head>
<body>

<a href="http://localhost:8080/brand-crud/brand.html">去往前端分页，未优化servlet</a> <br> <br> <br>
<a href="http://localhost:8080/brand-crud/brandAfterOptimization.html">去往前端分页，已优化servlet</a> <br> <br> <br>
<a href="http://localhost:8080/brand-crud/brandAfterOptimizationPageBehind.html">去往后端分页，已优化servlet</a>

</body>
</html>

web.xml

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns="http://xmlns.jcp.org/xml/ns/javaee"
         xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-app_4_0.xsd"
         version="4.0">
</web-app>

element-UI和vue.js和axios的依赖包太长，需要时直接上官网下载吧，版本如下：

Vue.js v2.6.10
=================================
"name": "element-ui",
"version": "2.13.0",
===============================
axios v0.18.0

在pom.xml上右键点击tomcat7.run后，浏览器输入初始页面的地址，点击第三个功能：

http://localhost:8080/brand-crud

 

 如上，实现了：

1、单表的后端分页显示到前端页面、前端页面三种方式选择页数。

2、进行模糊查询，并且模糊查询后能在模糊查询结果中实现分页。

3、新增一条、删除一条、批量删除、修改

=========

 完整代码和SQL

https://download.csdn.net/download/hebian1994/87879042