A，案例结构：

综合案例 - 图1

1，服务器端代码 ！：

a，DAO层：

  1. //Mapper：
  2. package com.itheima.mapper;
  4. import com.itheima.pojo.Brand;
  5. import org.apache.ibatis.annotations.Insert;
  6. import org.apache.ibatis.annotations.Param;
  7. import org.apache.ibatis.annotations.Select;
  10. import java.util.List;
  12. public interface BrandMapper {
  14.     /**
  15.      * 查询所有品牌
  16.      *
  17.      * @return List<Brand>
  18.      */
  19.     @Select ("select * from tb_brand;")
  20.     List <Brand> selectAll ();
  23.     /**
  24.      * 添加品牌
  25.      *
  26.      */
  27.     @Insert ("insert into tb_brand values (null,#{brandName},#{companyName},#{ordered},#{description},#{status})")
  28.     void addBrands (Brand brand);
  31.     /**
  32.      * 批量删除品牌
  33.      *
  34.      */
  35.     void deleteBrands (@Param("brandsId") int[] brandsId);
  38.     /**
  39.      * 查询单个品牌
  40.      */
  41.     List<Brand> selectOneBrand(@Param("brandName") String brandName,@Param("companyName") String companyName ,@Param("status")Integer status);
  44.     /**
  45.      * 分页查询一页的数据
  46.      * @return 数据信息
  47.      */
  48.     @Select("select  * from tb_brand limit #{begin},#{size} ;")
  49.     List<Brand> selectAllByLimit(@Param("begin") int begin , @Param("size") int size);
  52.     /**
  53.      * 分页查询的数据数量
  54.      * @return 数量
  55.      */
  56.     @Select("select count(*) from tb_brand;")
  57.     int selectTotalName();
  60.     /**
  61.      * 条件分页查询的数据数量
  62.      */
  63.     int selectByPageCount(Brand brand);
  66.     /**
  67.      * 多条件分页查询
  68.      */
  69.     List<Brand> selectBypage(@Param("begin") int begin , @Param("size") int size,@Param("brand") Brand brand);
  71. }
  79. //Mapper.xml
  80. <?xml version="1.0" encoding="UTF-8" ?>
  81. <!DOCTYPE mapper
  82.         PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
  83.         "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
  84. <mapper namespace = "com.itheima.mapper.BrandMapper">
  86.     <resultMap id = "brandResultMap" type = "Brand">
  87.         <result property = "brandName" column = "brand_name"/>
  88.         <result property = "companyName" column = "company_name"/>
  89.     </resultMap>
  91.     <delete id = "deleteBrands">
  92.         delete from tb_brand where id in
  93.         <foreach collection = "brandsId" open = "(" separator = "," close = ")" item = "id">
  94.             #{id}
  95.         </foreach>
  96.     </delete>
  97.     <!--  多条件查询  -->
  98.     <select id = "selectOneBrand" resultType = "com.itheima.pojo.Brand">
  99.         select * from tb_brand
  100.         <where>
  101.             <if test = "status != null">
  102.                 `status`= #{status}
  103.             </if>
  104.             <if test = "brandName != null and brandName !='' ">
  105.                 AND brand_Name like "%"#{brandName}"%"
  106.             </if>
  107.             <if test = "companyName != null and companyName !='' ">
  108.                 AND company_Name like "%"#{companyName}"%"
  109.             </if>
  110.         </where>
  111.     </select>
  112.     <!--    分页查询的总数量-->
  113.     <select id = "selectByPageCount" resultType = "java.lang.Integer">
  114.         select * from tb_brand
  115.         <where>
  116.             <if test = "status != null">
  117.                 `status`= #{status}
  118.             </if>
  119.             <if test = "brandName != null and brandName !='' ">
  120.                 AND brand_Name like "%"#{brandName}"%"
  121.             </if>
  122.             <if test = "companyName != null and companyName !='' ">
  123.                 AND company_Name like "%"#{companyName}"%"
  124.             </if>
  125.         </where>
  126.     </select>
  127.     <!--   分页条件查询 -->
  128.     <select id = "selectBypage" resultType = "com.itheima.pojo.Brand">
  129.         select * from tb_brand
  130.         <where>
  131.             <if test = "brand.status != null">
  132.                 `status`= #{brand.status}
  133.             </if>
  134.             <if test = "brand.brandName != null and brand.brandName !='' ">
  135.                 AND brand_Name like "%"#{brand.brandName}"%"
  136.             </if>
  137.             <if test = "brand.companyName != null and brand.companyName !='' ">
  138.                 AND company_Name like "%"#{brand.companyName}"%"
  139.             </if>
  140.         </where>
  141.     </select>
  142. </mapper>

b，Service层：

  1. package com.itheima.service;
  3. import com.itheima.mapper.BrandMapper;
  4. import com.itheima.pojo.Brand;
  5. import com.itheima.pojo.PageBean;
  6. import com.itheima.util.DaoInstanceFactory;
  8. import java.util.List;
  10. /**
  11.  * @author Jztice5
  12.  * @date 2022年03月19日 17:22
  13.  */
  15. public class BrandService {
  17.     private final BrandMapper brandMapper = DaoInstanceFactory.getBean(BrandMapper.class);
  19.     /**
  20.      * 查询所有品牌
  21.      *
  22.      * @return 查询到的品牌信息   ->   web层
  23.      */
  24.     public List <Brand> selectBrand () {
  25.         return brandMapper.selectAll();
  26.     }
  29.     /**
  30.      * 添加品牌
  31.      * 添加的品牌信息  ->     服务器后端 （最终结果）   ->      前端刷新页面
  32.      */
  33.     public void addBrand (Brand brand) {
  34.         brandMapper.addBrands(brand);
  35.     }
  38.     /**
  39.      * 批量删除
  40.      *
  41.      * @param brandListIds id      ->      服务器
  42.      */
  43.     public void deleteBrand (int[] brandListIds) {
  44.         brandMapper.deleteBrands(brandListIds);
  45.     }
  48.     /**
  49.      * 查询单个品牌
  50.      *      前端返回的条件数据   ->    服务器   （查询结果）   ->       前端
  51.      */
  52.     public List <Brand> selectOneBrand (Brand brand) {
  53.         return brandMapper.selectOneBrand(brand.getBrandName() , brand.getCompanyName() , brand.getStatus());
  54.     }
  57.     /**
  58.      * 分页查询
  59.      *
  60.      */
  61.     public PageBean <Brand> selectByPage (int currentPage , int pageSize) {
  62.         //计算开始的值（第一页开始）     currentPage：当前页数（前端显示的那个）   pageSize：前端显示多少条数据
  63.         //数据库：0，10       10，10      20，10...
  64.         int pageHtml = (currentPage - 1) * pageSize;
  65.         //调用dao层的分页查询返回查找到的数据
  66.         List <Brand> brands = brandMapper.selectAllByLimit(pageHtml , pageSize);
  67.         //获取总的记录数
  68.         int sum = brandMapper.selectTotalName();
  70.         //返回到pageBean实体类对象：
  71. //        /**
  72. //         *     // 总记录数
  73. //         *     private int totalCount;
  74. //         *     // 当前页数据
  75. //         *     private List<T> rows;
  76. //         */
  77.         return new PageBean <>(sum , brands);
  78.     }
  81.     /**
  82.      * 分页多条件查询
  83.      */
  84.     public PageBean <Brand> selectByPageWhere (int currentPage , int pageSize , Brand brand) {
  85.         int pageHtmlSize = (currentPage - 1) * pageSize;
  87.         List <Brand> brands = brandMapper.selectBypage(pageHtmlSize , pageSize , brand);
  89.         int sum = brandMapper.selectTotalName();
  91.         return new PageBean <>(sum , brands);
  93.     }
  94. }

c，Web层：

  1.  //参考可见分页查询

2，前端页面代码：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>品牌列表哦</title>
  6.     <script src="js/vue.js"></script>
  7.     <script src="js/axios-0.18.0.js"></script>
  8.     <script src="element-ui/lib/index.js"></script>
  9.     <link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css">
  10.     <style>
  11.         .el-table .warning-row {
  12.             background: oldlace;
  13.         }
  15.         .el-table .success-row {
  16.             background: #f0f9eb;
  17.         }
  19.         .el-dropdown-link {
  20.             cursor: pointer;
  21.             float: right;
  22.             color: #409EFF;
  23.         }
  25.         .el-icon-arrow-down {
  26.             font-size: 20px;
  27.         }
  29.         .div-topcss {
  30.             width: 1000px;
  31.         }
  33.     </style>
  35. </head>
  36. <body>
  37. <!--<div id="message">-->
  38. <!--    <template>-->
  39. <!--        <el-alert-->
  40. <!--                title="添加成功"-->
  41. <!--                type="success"-->
  42. <!--                center-->
  43. <!--                show-icon-->
  44. <!--        >-->
  45. <!--        </el-alert>-->
  46. <!--    </template>-->
  47. <!--</div>-->
  48. <div id="app">
  50.     <!--第一行-->
  51.     <el-row>
  52.         <el-form :inline="true" :model="searchBrand" class="demo-form-inline">
  53.             <el-form-item label="当前状态">
  54.                 <el-select v-model="searchBrand.status" placeholder="当前状态">
  55.                     <el-option label="禁用" value="0"></el-option>
  56.                     <el-option label="启用" value="1"></el-option>
  57.                 </el-select>
  58.             </el-form-item>
  59.             <el-form-item label="企业名称">
  60.                 <el-input v-model="searchBrand.companyName" placeholder="企业名称"></el-input>
  61.             </el-form-item>
  62.             <el-form-item label="品牌名称">
  63.                 <el-input v-model="searchBrand.brandName" placeholder="品牌名称"></el-input>
  64.             </el-form-item>
  65.             <el-form-item>
  66.                 <el-button type="primary" @click="onSubmit">查询</el-button>
  67.             </el-form-item>
  68.             <el-form-item>
  69.                 <el-button type="primary" @click="clean">清空</el-button>
  70.             </el-form-item>
  71.             <el-form-item>
  72.                 <div-topcss>
  74.                 </div-topcss>
  75.             </el-form-item>
  76.             <el-dropdown>
  77.                 <span class="el-dropdown-link">个人中心<i class="el-icon-arrow-down el-icon--right"></i>
  78.                 </span>
  79.                 <el-dropdown-menu slot="dropdown">
  80.                     <el-dropdown-item>我的订单</el-dropdown-item>
  81.                     <el-dropdown-item>我的钱包</el-dropdown-item>
  82.                     <el-dropdown-item>账户信息</el-dropdown-item>
  83.                     <el-dropdown-item divided @click="userout">退出登录</el-dropdown-item>
  84.                 </el-dropdown-menu>
  85.             </el-dropdown>
  87.         </el-form>
  89.     </el-row>
  92.     <!--第二行-->
  93.     <el-row>
  94.         <el-button type="danger" plain @click="deleteBrands">批量删除</el-button>
  95.         <el-button type="primary" plain @click="addButton">新增</el-button>
  96.     </el-row>
  97.     <!--对话框-->
  98.     <el-dialog
  99.             title="编辑品牌"
  100.             :visible.sync="dialogVisible"
  101.             width="30%">
  102.         <!--对话框里面的表单-->
  103.         <el-form :model="addBrand" :rules="rules" ref="addBrand" label-width="100px" class="demo-ruleForm">
  104.             <el-form-item label="品牌名称" prop="brandName">
  105.                 <el-input v-model="addBrand.brandName"></el-input>
  106.             </el-form-item>
  107.             <el-form-item label="企业名称" prop="companyName">
  108.                 <el-input v-model="addBrand.companyName"></el-input>
  109.             </el-form-item>
  110.             <el-form-item label="排序">
  111.                 <el-input v-model="addBrand.ordered"></el-input>
  112.             </el-form-item>
  113.             <el-form-item label="备注">
  114.                 <el-input type="textarea" v-model="addBrand.description"></el-input>
  115.             </el-form-item>
  116.             <el-form-item label="状态">
  117.                 <el-switch v-model="addBrand.status"
  118.                            active-value="1"
  119.                            inactive-value="0"></el-switch>
  120.             </el-form-item>
  121.             <el-form-item>
  122.                 <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
  123.                 <el-button @click="resetForm('ruleForm')">取消</el-button>
  124.             </el-form-item>
  125.         </el-form>
  126.     </el-dialog>
  128.     <!--第三行-->
  129.     <el-row>
  130.         <template>
  131.             <el-table
  132.                     :data="tableData"
  133.                     style="width: 100%"
  134.                     :row-class-name="tableRowClassName"
  135.                     @selection-change="handleSelectionChange">
  136.                 <el-table-column
  137.                         type="selection"
  138.                         width="55">
  139.                 </el-table-column>
  140.                 <el-table-column
  141.                         type="index"
  142.                         width="50">
  143.                 </el-table-column>
  144.                 <el-table-column
  145.                         align="center"
  146.                         prop="brandName"
  147.                         label="品牌名称">
  148.                 </el-table-column>
  149.                 <el-table-column
  150.                         align="center"
  151.                         prop="companyName"
  152.                         label="企业名称">
  153.                 </el-table-column>
  154.                 <el-table-column
  155.                         prop="ordered"
  156.                         label="排序"
  157.                         width="150">
  158.                 </el-table-column>
  159.                 <el-table-column
  160.                         prop="status"
  161.                         label="当前状态"
  162.                         width="150">
  163.                 </el-table-column>
  164.                 <el-table-column label="操作" width="250">
  165.                     <template slot-scope="scope">
  166.                         <el-button
  167.                                 size="mini"
  168.                                 type="primary"
  169.                                 @click="handleEdit(scope.$index, scope.row)">修改
  170.                         </el-button>
  171.                         <el-button
  172.                                 size="mini"
  173.                                 type="danger"
  174.                                 @click="handleDelete(scope.$index, scope.row)">删除
  175.                         </el-button>
  176.                     </template>
  177.                 </el-table-column>
  178.             </el-table>
  179.         </template>
  180.     </el-row>
  182.     <!--第四行-->
  183.     <el-row>
  184.         <div class="block" style="text-align: center; margin-top: 15px">
  185.             <el-pagination
  186.                     background
  187.                     @size-change="handleSizeChange"
  188.                     @current-change="handleCurrentChange"
  189.                     :current-page="currentPage"
  190.                     :page-sizes="[5, 10, 15, 20]"
  191.                     :page-size="5"
  192.                     layout="total, sizes, prev, pager, next, jumper"
  193.                     :total="400">
  194.             </el-pagination>
  195.         </div>
  196.     </el-row>
  197. </div>
  199. <script>
  201.     import alert from "./element-ui/packages/alert";
  203.     new Vue({
  204.         el: "#app",
  205.         //设置页面加载完毕后就响应JSON数据
  206.         mounted() {
  207.             //调用查询；
  208.             this.reselectAll();
  209.         },
  210.         methods: {
  211.             //封装查询方法
  212.             reselectAll() {
  213.                 let _this = this;
  214.                 axios.get("/ServletAllBrand").then(resp => {
  215.                     _this.tableData = resp.data;
  216.                 });
  217.             },
  218.             tableRowClassName({row, rowIndex}) {
  219.                 if (rowIndex === 1) {
  220.                     return 'warning-row';
  221.                 } else if (rowIndex === 3) {
  222.                     return 'success-row';
  223.                 }
  224.                 return '';
  225.             },
  226.             // 多选按钮状态改变会调用
  227.             handleSelectionChange(val) {
  228.                 this.multipleSelection = val;
  230.             },
  231.             // 点击查询按钮时调用
  232.             onSubmit() {
  233.                 let _this = this;
  234.                 //记得返回数据啊（this.searchBrand）
  235.                 axios.post("ServletSelectOne", this.searchBrand)
  236.                         .then(resp => {
  237.                             if (resp.data != null) {
  238.                                 _this.tableData = resp.data;
  240.                             }
  241.                         })
  242.             },
  243.             submitForm(formName) {
  244.                 //在前端控制台输出数据信息
  245.                 console.log(this.addBrand);
  247.                 let _this = this;
  248.                 //axios
  249.                 axios.post("ServletAddBrand", this.addBrand)
  250.                         .then(resp => {
  251.                             if (resp.data == "success") {
  252.                                 //添加成功后关闭窗口
  253.                                 _this.dialogVisible = false;
  254.                                 //重新加载数据
  255.                                 _this.reselectAll();
  256.                                 alert("添加成功");
  257.                                 //清空数据模型：
  258.                             }
  259.                         })
  260.             },
  261.             resetForm(formName) {
  262.                 // 关闭对话框
  263.                 this.dialogVisible = false;
  264.             },
  265.             // 每页数量发生变化调用
  266.             handleSizeChange(val) {
  267.                 console.log(`每页 ${val} 条`);
  268.             },
  269.             // 页码变化调用
  270.             handleCurrentChange(val) {
  271.                 console.log(`当前页: ${val}`);
  272.             },
  273.             //设置点击新增后清空数据模型
  274.             addButton() {
  275.                 this.dialogVisible = true;
  276.                 this.addBrand = {};
  277.             },
  278.             //批量删除：
  279.             deleteBrands() {
  281.                 let _this = this;
  282.                 //遍历选中的数据获取id
  283.                 for (let brand of this.multipleSelection) {
  284.                     this.idList.push(brand.id);
  285.                 }
  286.                 //请求发送id到servlet
  287.                 axios.post("ServletDelectBrands", this.idList)
  288.                         .then(resp => {
  289.                             if (resp.data == "success") {
  290.                                 alert("删除成功");
  291.                                 _this.reselectAll();
  292.                             }
  293.                         })
  294.             },
  295.             //清空查询框
  296.             clean() {
  297.                 this.searchBrand = {};
  298.                 this.reselectAll();
  299.             },
  300.             //
  302.             //exit
  303.             userout() {
  305.             }
  306.         },
  307.         data() {
  308.             return {
  309.                 // 分页工具条,显示当前第几页
  310.                 currentPage: 2,
  311.                 addBrand: {
  312.                     id: '',
  313.                     brandName: '',
  314.                     companyName: '',
  315.                     ordered: '',
  316.                     description: '',
  317.                     status: "0"
  318.                 },
  319.                 rules: {
  320.                     brandName: [
  321.                         {required: true, message: '请输入品牌名称', trigger: 'blur'},
  322.                         {min: 1, max: 15, message: '品牌名称长度在 1 到 15 个字符', trigger: 'blur'}
  323.                     ],
  324.                     companyName: [
  325.                         {required: true, message: '请输入企业名称', trigger: 'blur'},
  326.                         {min: 2, max: 15, message: '企业名称长度在 2 到 15 个字符', trigger: 'blur'}
  327.                     ]
  328.                 },
  329.                 // 控制对话框是否显示true表示显示,false表示不显示
  330.                 dialogVisible: false,
  331.                 // 第一行表单绑定的数据
  332.                 searchBrand: {
  333.                     brandName: '',
  334.                     companyName: '',
  335.                     status: ''
  336.                 },
  337.                 // 保存选中的数据
  338.                 multipleSelection: [],
  339.                 tableData: [{
  340.                     brandName: '华为P50',
  341.                     companyName: '华为科技有限公司',
  342.                     ordered: '1',
  343.                     status: '1'
  344.                 }],
  345.                 //选中的id
  346.                 idList: []
  347.             }
  348.         }
  349.     });
  350. </script>
  351. </body>
  352. </html>