品牌数据的增删改查—JavaWeb

尘开的笔记

已于 2023-03-30 22:47:37 修改

阅读量583

点赞数

分类专栏： JavaWeb 文章标签： java sql mybatis

于 2023-03-30 18:07:28 首次发布

本文链接：https://blog.csdn.net/wwl193206126/article/details/129833087

版权

JavaWeb 专栏收录该内容

20 篇文章 0 订阅

订阅专栏

系列文章目录

使用JavaWeb做品牌数据的增删改查

文章目录

系列文章目录
前言
一、准备环境
二、功能实现
总结

前言

在这里插入图片描述

一、准备环境

在这里插入图片描述

参考资料：
链接：https://pan.baidu.com/s/1tPd1wxOzkJfC0a4sYu5YOA?pwd=1111
提取码：1111

二、功能实现

1.后台代码

1.持久层代码

package com.itheima.mapper;

import com.itheima.pojo.Brand;
import org.apache.ibatis.annotations.*;

import java.util.List;

public interface BrandMapper {
    /**
     * 查询所有
     */
    @Select("select * from tb_brand")
    @ResultMap("brandResultMap")
    List<Brand> selectAll();

    /**
     * 添加数据
     * @param brand
     */
    @Insert("insert into tb_brand values(null,#{brandName},#{companyName},#{ordered},#{description},#{status})")
    void add(Brand brand);

    @Select("select * from tb_brand where id=#{id}")
    @ResultMap("brandResultMap")
    Brand selectById(int id);

    /**
     * 修改数据
     */
    @Update("update tb_brand set brand_name=#{brandName},company_name=#{companyName},ordered=#{ordered},description=#{description},status=#{status} where id=#{id}")
    void update(Brand brand);

    /**
     * 删除数据
     * @param id
     */
    @Delete("delete from tb_brand where id=#{id}")
    void deleteById(int id);

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

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

    /**
     * 查询总记录数
     * @return
     */
    @Select("select count(*) from tb_brand")
    int selectTotalCount();



    /**
     * 分页条件查询
     * @param begin
     * @param size
     * @return
     */
    List<Brand> selectByPageAndCondition(@Param("begin") int begin,@Param("size") int size,@Param("brand") Brand brand);

    /**
     * 查询总记录数
     * @return
     */
    int selectTotalCountByCondition(Brand brand);
}

SQL文件

<?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.itheima.mapper.BrandMapper">

    <resultMap id="brandResultMap" type="brand">
        <result property="brandName" column="brand_name"/>
        <result property="companyName" column="company_name"/>
    </resultMap>
    <delete id="deleteByIds">
        delete from tb_brand where id in
        <foreach collection="ids" separator="," open="(" close=")" item="id">
            #{id}
        </foreach>
    </delete>
    <select id="selectByPageAndCondition" resultMap="brandResultMap" resultType="com.itheima.pojo.Brand">
        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 = #{brand.status}
            </if>
        </where>
        limit #{begin},#{size}
    </select>

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

2.业务层代码

package com.itheima.service;

import com.itheima.pojo.Brand;
import com.itheima.pojo.PageBean;

import java.util.List;

public interface BrandService {
    /**
     * 查询所有数据
     * @return
     */
    List<Brand> selectAll();

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

    /**
     * 根据ID删除数据
     * @param id
     */
    void deleteById(int id);

    /**
     * 批量删除数据
     * @param ids
     */
    void deleteByIds(int[] ids);

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

    /**
     * 分页查询
     * @param currentPage 当前页码
     * @param pageSize   每页显示条数
     * @return
     */
    PageBean<Brand> selectByPage(int currentPage,int pageSize);

    /**
     * 根据ID回显数据
     * @param id
     * @return
     */
    Brand selectById(int id);


    /**
     * 分页条件查询
     * @param currentPage
     * @param pageSize
     * @return
     */
    PageBean<Brand> selectByPageAndCondition(int currentPage,int pageSize,Brand brand);
}

package com.itheima.service.impl;

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

import java.util.List;

public class BrandServiceImpl implements BrandService {

    //创建工厂
    SqlSessionFactory factory = SqlSessionFactoryUtils.getSqlSessionFactory();


    /**
     * 查询所有数据
     *
     * @return
     */
    @Override
    public List<Brand> selectAll() {
        //连接数据库
        SqlSession sqlSession = factory.openSession();
        //使用Mapper代理
        BrandMapper mapper = sqlSession.getMapper(BrandMapper.class);
        //调用方法
        List<Brand> brands = mapper.selectAll();
        //释放资源
        sqlSession.close();

        return brands;
    }

    /**
     * 添加数据
     *
     * @param brand
     */
    @Override
    public void add(Brand brand) {
        //连接数据库
        SqlSession sqlSession = factory.openSession();
        //使用Mapper代理
        BrandMapper mapper = sqlSession.getMapper(BrandMapper.class);
        //调用方法
        mapper.add(brand);
        sqlSession.commit();

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

    /**
     * 删除数据
     *
     * @param id
     */
    @Override
    public void deleteById(int id) {
        //连接数据库
        SqlSession sqlSession = factory.openSession();
        //使用Mapper代理
        BrandMapper mapper = sqlSession.getMapper(BrandMapper.class);
        //调用方法
        mapper.deleteById(id);
        sqlSession.commit();

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

    /**
     * 批量删除数据
     *
     * @param ids
     */
    @Override
    public void deleteByIds(int[] ids) {
        //连接数据库
        SqlSession sqlSession = factory.openSession();
        //使用Mapper代理
        BrandMapper mapper = sqlSession.getMapper(BrandMapper.class);
        //调用方法
        mapper.deleteByIds(ids);
        sqlSession.commit();

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

    /**
     * 修改数据
     *
     * @param brand
     */
    @Override
    public void update(Brand brand) {
        //连接数据库
        SqlSession sqlSession = factory.openSession();
        //使用Mapper代理
        BrandMapper mapper = sqlSession.getMapper(BrandMapper.class);
        //调用方法
        mapper.update(brand);
        sqlSession.commit();

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

    /**
     * 分页查询
     *
     * @param currentPage 当前页码
     * @param pageSize    每页显示条数
     * @return
     */
    @Override
    public PageBean<Brand> selectByPage(int currentPage, int pageSize) {
        //连接数据库
        SqlSession sqlSession = factory.openSession();
        //使用Mapper代理
        BrandMapper mapper = sqlSession.getMapper(BrandMapper.class);
        //计算开始索引
        int begin = (currentPage - 1) * pageSize;
        int size = pageSize;
        //查询每页显示数据
        List<Brand> rows = mapper.selectByPage(begin, size);
        //查询总条数
        int totalCount = mapper.selectTotalCount();
        //封装PageBean对象
        PageBean<Brand> pageBean = new PageBean<>();
        pageBean.setRows(rows);
        pageBean.setTotalCount(totalCount);
        return pageBean;
    }

    /**
     * 根据ID回显数据
     *
     * @param id
     * @return
     */
    @Override
    public Brand selectById(int id) {
        //连接数据库
        SqlSession sqlSession = factory.openSession();
        //使用Mapper代理
        BrandMapper mapper = sqlSession.getMapper(BrandMapper.class);
        //调用方法
        Brand brand = mapper.selectById(id);

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

    @Override
    public PageBean<Brand> selectByPageAndCondition(int currentPage, int pageSize, Brand brand) {
        //连接数据库
        SqlSession sqlSession = factory.openSession();
        //使用Mapper代理
        BrandMapper mapper = sqlSession.getMapper(BrandMapper.class);
        //计算开始索引
        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 && companyName.length() > 0) {
            brand.setCompanyName("%" + companyName + "%");
        }

        //查询每页显示数据
        List<Brand> rows = mapper.selectByPageAndCondition(begin, size,brand);
        //查询总条数
        int totalCount = mapper.selectTotalCountByCondition(brand);
        //封装PageBean对象
        PageBean<Brand> pageBean = new PageBean<>();
        pageBean.setRows(rows);
        pageBean.setTotalCount(totalCount);
        return pageBean;
    }

}

3.控制层代码

package com.itheima.web.servlet;

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

import javax.servlet.ServletException;
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.List;

@WebServlet("/brand/*")
public class BrandServlet extends BaseServlet {
    private BrandService brandService = new BrandServiceImpl();

    /**
     * 查询所有数据
     * @param request
     * @param response
     * @throws ServletException
     * @throws IOException
     */
    public void selectAll(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        //设置编码格式
        request.setCharacterEncoding("UTF-8");
        response.setContentType("text/json;charset=utf-8");
        //1.调用service查询
        List<Brand> brands = brandService.selectAll();

        //2.转为JSON字符串
        String jsonString = JSON.toJSONString(brands);

        //3.写数据
        response.getWriter().write(jsonString);
    }

    /**
     * 添加数据
     * @param request
     * @param response
     * @throws ServletException
     * @throws IOException
     */
    public void add(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        //1.接收品牌数据
        BufferedReader br = request.getReader();
        String params = br.readLine();//JSON字符串

        //转为Brand对象
        Brand brand = JSON.parseObject(params, Brand.class);

        //2.调用service层添加数据
        brandService.add(brand);

        //3.响应成功表示
        response.getWriter().write("success");
    }

    /**
     * 根据ID删除数据
     * @param request
     * @param response
     * @throws ServletException
     * @throws IOException
     */
    public void deleteById(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        //1.接收数据
        String _id = request.getParameter("id");

        int id = Integer.parseInt(_id);
        //2.调用service层添加数据
        brandService.deleteById(id);

        //3.响应成功表示
        response.getWriter().write("success");
    }


    /**
     * 批量删除数据
     * @param request
     * @param response
     * @throws ServletException
     * @throws IOException
     */
    public void deleteByIds(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        //1.接收数据
        BufferedReader br = request.getReader();
        String params = br.readLine();//JSON字符串

        //转为对应的类型
        int[] ids = JSON.parseObject(params, int[].class);

        //2.调用service层添加数据
        brandService.deleteByIds(ids);

        //3.响应成功表示
        response.getWriter().write("success");
    }


    /**
     * 修改数据
     * @param request
     * @param response
     * @throws ServletException
     * @throws IOException
     */
    public void update(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        //1.接收数据
        BufferedReader br = request.getReader();
        String params = br.readLine();//JSON字符串

        //转为Brand对象
        Brand brand = JSON.parseObject(params, Brand.class);

        //2.调用service层添加数据
        brandService.update(brand);

        //3.响应成功表示
        response.getWriter().write("success");
    }

    /**
     * 分页查询
     * @param request
     * @param response
     * @throws ServletException
     * @throws IOException
     */
    public void selectByPage(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        //设置编码格式
        request.setCharacterEncoding("UTF-8");
        response.setContentType("text/json;charset=utf-8");

        //接收数据
        String _currentPage = request.getParameter("currentPage");
        String _pageSize = request.getParameter("pageSize");

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


        //1.调用service查询
        PageBean<Brand> pageBean = brandService.selectByPage(currentPage, pageSize);

        //2.转为JSON字符串
        String jsonString = JSON.toJSONString(pageBean);

        //3.写数据
        response.getWriter().write(jsonString);
    }


    /**
     * 根据ID查询数据
     * @param request
     * @param response
     * @throws ServletException
     * @throws IOException
     */
    public void selectById(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        //设置编码格式
        request.setCharacterEncoding("UTF-8");
        response.setContentType("text/json;charset=utf-8");

        //接收数据
        String _id = request.getParameter("id");

        int id = Integer.parseInt(_id);


        //1.调用service查询
        Brand brand = brandService.selectById(id);

        //2.转为JSON字符串
        String jsonString = JSON.toJSONString(brand);

        //3.写数据
        response.getWriter().write(jsonString);
    }


    /**
     * 分页条件查询
     * @param request
     * @param response
     * @throws ServletException
     * @throws IOException
     */
    public void selectByPageAndCondition(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        //设置编码格式
        request.setCharacterEncoding("UTF-8");
        response.setContentType("text/json;charset=utf-8");

        //接收数据
        String _currentPage = request.getParameter("currentPage");
        String _pageSize = request.getParameter("pageSize");

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

        BufferedReader br = request.getReader();
        String params = br.readLine();//JSON字符串

        //转为Brand对象
        Brand brand = JSON.parseObject(params, Brand.class);


        //1.调用service查询
        PageBean<Brand> pageBean = brandService.selectByPageAndCondition(currentPage,pageSize,brand);

        //2.转为JSON字符串
        String jsonString = JSON.toJSONString(pageBean);

        //3.写数据
        response.getWriter().write(jsonString);
    }
}

使用方法名为路径的代码

package com.itheima.web.servlet;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.lang.reflect.InvocationTargetException;
import java.lang.reflect.Method;

/**
 * 替换HTTPServlet，根据请求的最后一段路径来进行方法分发
 */

public class BaseServlet extends HttpServlet {

    //根据请求的最后一段路径来进行方法分发
    @Override
    protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {

        //1.获取请求路径
        String uri = req.getRequestURI();

        //2.获取最后一段路径 方法名
        int index=uri.lastIndexOf('/');
        String methodName= uri.substring(index + 1);

        //2.执行方法
        //2.1获取BrandServlet 字节码对象 Class
        //谁调用我（this所在的方法）我（this）代表谁
        //System.out.println(this);

        Class<? extends BaseServlet> cls = this.getClass();
        //2.2获取Method方法对象
        try {
            Method method = cls.getMethod(methodName, HttpServletRequest.class, HttpServletResponse.class);
            //2.3执行方法
            method.invoke(this,req,resp);
        } catch (NoSuchMethodException e) {
            e.printStackTrace();
        } catch (IllegalAccessException e) {
            e.printStackTrace();
        } catch (InvocationTargetException e) {
            e.printStackTrace();
        }

    }
}

2.前台代码

<!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>
<div id="app">

    <!--搜索表单-->
    <el-form :inline="true" :model="brand" class="demo-form-inline">

        <el-form-item label="当前状态">
            <el-select v-model="brand.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="brand.companyName" placeholder="企业名称"></el-input>
        </el-form-item>

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

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

    <!--按钮-->

    <el-row>

        <el-button type="danger" plain @click="deleteByIds">批量删除</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="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="addBrand">提交</el-button>
                <el-button @click="dialogVisible = false">取消</el-button>
            </el-form-item>
        </el-form>

    </el-dialog>
    <!--修改数据对话框表单-->
    <el-dialog title="修改品牌"
               :visible.sync="editDialogVisible"
               width="30%">
        <template slot-scope="scope">
            <el-form ref="form" :model="brand" label-width="120px">
                <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="confirmEdit" >确认</el-button>
                    <el-button @click="cancelEdit">取消</el-button>
                </el-form-item>
            </el-form>
        </template>
    </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
                    type="index"
                    width="50">
            </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="status"
                    align="center"
                    label="当前状态">
            </el-table-column>

            <el-table-column
                    align="center"
                    label="操作">

                <template slot-scope="scope">
                    <el-row>
                        <el-button type="primary" @click="updateBrand(scope.row)">修改</el-button>
                        <el-button type="danger" @click="deleteById(scope.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="[5, 10, 15, 20]"
            :page-size="5"
            layout="total, sizes, prev, pager, next, jumper"
            :total="totalCount">
    </el-pagination>

</div>


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

<script>

    new Vue({
        el: "#app",

        mounted() {
            this.selectByPage();
        },
        methods: {
            //查询所有
            /*selectAll() {
                var _this = this;
                //当页面加载完成后发送异步请求，获取数据
                axios({
                    method: "get",
                    url: "http://localhost:8080/brand-case/brand/selectAll"
                }).then(function (resp) {
                    _this.tableData = resp.data;
                })
            },*/
            //分页查询
            selectByPage() {
                var _this = this;
                //当页面加载完成后发送异步请求，获取数据
                axios({
                    method: "post",
                    url: "http://localhost:8080/brand-case/brand/selectByPageAndCondition?currentPage=" + _this.currentPage + "&pageSize=" + _this.pageSize,
                    data:this.brand
                }).then(function (resp) {
                    //查询数据
                    _this.tableData = resp.data.rows;
                    //查询总记录数
                    _this.totalCount = resp.data.totalCount;
                })
            },

            tableRowClassName({row, rowIndex}) {
                if (rowIndex === 1) {
                    return 'warning-row';
                } else if (rowIndex === 3) {
                    return 'success-row';
                }
                return '';
            },
            // 复选框选中后执行的方法
            handleSelectionChange(val) {
                this.multipleSelection = val;

                console.log(this.multipleSelection)
            },
            // 查询方法
            onSubmit() {
                console.log(this.brand);
                this.selectByPage()
            },
            // 添加数据
            addBrand() {
                //console.log(this.brand);
                var _this = this;
                //发送Ajax请求，添加数据
                axios({
                    method: "post",
                    url: "http://localhost:8080/brand-case/brand/add",
                    data: _this.brand
                }).then(function (resp) {
                    if (resp.data == "success") {
                        //添加成功
                        //关闭对话框
                        _this.dialogVisible = false;
                        //重新查询数据
                        _this.selectByPage();

                        _this.$message({
                            message: '恭喜你，添加成功',
                            type: 'success'
                        });
                    }
                })
            },
            //根据ID删除数据
            deleteById(row) {
                var _this = this;
                _this.brand.id=row.id;
                //弹出提示框
                this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {

                    //发送Ajax请求，删除数据
                    axios({
                        method: "post",
                        url: "http://localhost:8080/brand-case/brand/deleteById?id=" + _this.brand.id
                    }).then(function (resp) {
                        if (resp.data == "success") {
                            //删除成功
                            //重新查询数据
                            _this.selectByPage();

                            _this.$message({
                                message: '恭喜你，删除成功',
                                type: 'success'
                            });
                        }
                    })
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            },
            //批量删除数据
            deleteByIds() {

                var _this = this;
                //弹出提示框
                this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    //1.创建id数组[1,2,3]      从 this.multipleSelection   中获取即可
                    for (let i = 0; i < this.multipleSelection.length; i++) {
                        let selectElement = this.multipleSelection[i];
                        this.selectIds[i] = selectElement.id;
                    }

                    //发送Ajax请求，添加数据
                    axios({
                        method: "post",
                        url: "http://localhost:8080/brand-case/brand/deleteByIds",
                        data: _this.selectIds
                    }).then(function (resp) {
                        if (resp.data == "success") {
                            //删除成功
                            //重新查询数据
                            _this.selectByPage();

                            _this.$message({
                                message: '恭喜你，删除成功',
                                type: 'success'
                            });
                        }
                    })
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            },

            //修改数据
            updateBrand(row){
                // 获取改行已经有的数据，以供填入修改框

                this.brand = JSON.parse(JSON.stringify(row));
                // 弹出修改框
                this.editDialogVisible = true;
            },
            //点击确认后事件
            confirmEdit() {
                var _this = this
                //axios transit ajax request
                axios({
                    method: "post",
                    url: "http://localhost:8080/brand-case/brand/update",
                    data: _this.brand
                }).then(resp =>  {
                    if (resp.data === "success") {
                        _this.editDialogVisible = false
                        _this.selectByPage()
                        _this.$message({
                            message: '恭喜您，修改成功',
                            type: 'success'
                        });
                    }
                })
            },
            //点击取消后事件
            cancelEdit() {
                this.editDialogVisible = false
                this.selectByPage()
            },

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

        },
        data() {
            return {
                //删除的数据id
                selectId: 1,
                //每页显示的条数
                pageSize: 5,
                //总记录数
                totalCount: 100,
                //被选中的ID数组
                selectIds: [],
                // 当前页码
                currentPage: 1,

                // 添加数据对话框是否展示的标记
                dialogVisible: false,
                //修改数据对话框
                editDialogVisible: false,


                // 品牌模型数据
                brand: {
                    status: '',
                    brandName: '',
                    companyName: '',
                    id: "",
                    ordered: "",
                    description: ""
                },
                // 复选框选中数据集合
                multipleSelection: [],
                // 表格数据
                tableData: [/*{
                    brandName: '华为',
                    companyName: '华为科技有限公司',
                    ordered: '100',
                    status: "1"
                }, {
                    brandName: '华为',
                    companyName: '华为科技有限公司',
                    ordered: '100',
                    status: "1"
                }, {
                    brandName: '华为',
                    companyName: '华为科技有限公司',
                    ordered: '100',
                    status: "1"
                }, {
                    brandName: '华为',
                    companyName: '华为科技有限公司',
                    ordered: '100',
                    status: "1"
                }*/]
            }
        }
    })

</script>

</body>
</html>

总结

此次项目主要实现品牌数据的增删改查，遇到的问题有

SQL映射文件的错误，没有与数据库字段相匹配（后端控制台会报错）
前端页面对话框的区分问题，通过:visible.sync="dialogVisible"中的dialogVisible字段区分，不同的对话框:visible.sync的值不一样
前端页面数据绑定的问题，如何获取表单中一行的某个数据，解决方法为

<template slot-scope="scope">
                    <el-row>
                        <el-button type="primary" @click="updateBrand(scope.row)">修改</el-button>
                        <el-button type="danger" @click="deleteById(scope.row)">删除</el-button>
                    </el-row>
</template>