• 【JavaWeb】品牌管理系统前后端代码实现

     ✨✨个人主页:沫洺的主页

    📚📚系列专栏: 📖 JavaWeb专栏📖 JavaSE专栏 📖 Java基础专栏📖vue3专栏 

                               📖MyBatis专栏📖Spring专栏📖SpringMVC专栏📖SpringBoot专栏

                               📖Docker专栏📖Reids专栏📖MQ专栏📖SpringCloud专栏     

    💖💖如果文章对你有所帮助请留下三连✨✨

    🍔品牌(Brand)管理系统

    具体实现的功能包括:

    • 🎐查询所有（查询所有品牌数据）
    • 🎐新增品牌（增加新的品牌数据）
    • 🎐修改品牌（修改品牌数据）
    • 🎐删除品牌（删除品牌数据）
    • 🎐批量删除（删除多条品牌数据）
    • 🎐分页查询（分页展示品牌数据）
    • 🎐条件查询（通过条件精确查询品牌数据）

    🍟环境搭建

    💖💖环境搭建步骤

    • 🎐创建maven Web项目,配置pom.xml文件,添加坐标依赖,配置tomcat服务器
    • 🎐采用三层架构(web service mapper)的模式创建项目目录结构,工具类文件夹util,实体类文件夹pojo
    • 🎐搭建MyBatis环境,创建mybatis-config.xml核心配置文件，BrandMapper.xml映射文件，BrandMapper接口
    • 🎐使用navicat工具创建数据库db5,表tb_brand,添加数据,(也可使用其他工具,自定义库名,记得在mybatis核心配置文件中修改连接信息)
    • 🎐webapp创建js文件夹引入vue.js和axios-0.18.0.js本地js,引入element-ui饿了么组件库

    💖💖前言说明

    • 🎐由于本片文章给出的主要是项目源码,在复制时不用将import导包部分一同复制,原因是如果是自定义的项目目录,导包的路径就不一致会让你重新导包,最好的方法是先创建文件,再将除了import的其他部分复制,再IDEA工具中有个自动导包的设置,会根据自己的项目目录进行导包,可以设置一下,这里的项目目录就是com/moming

    💖💖IDEA工具设置自动导包

    💖💖接下来开始搭建环境:

    🍱创建maven Web项目

    🍱配置pom.xml文件(添加坐标依赖,配置tomcat服务器)

    🍚注意在tomcat配置中,端口号和虚拟目录可自定义

    🍖pom.xml

    1. "1.0" encoding="UTF-8"?>
    2.  
    3. <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 http://maven.apache.org/xsd/maven-4.0.0.xsd">  
    4.   <modelVersion>4.0.0modelVersion>  
    5.   <groupId>org.examplegroupId>  
    6.   <artifactId>brand-caseartifactId>  
    7.   <version>1.0-SNAPSHOTversion>  
    8.   <packaging>warpackaging>  
    9.   <properties> 
    10.     <maven.compiler.source>8maven.compiler.source>  
    11.     <maven.compiler.target>8maven.compiler.target> 
    12.   properties>  
    13.   <dependencies> 
    14.       
    15.     <dependency> 
    16.       <groupId>org.mybatisgroupId>  
    17.       <artifactId>mybatisartifactId>  
    18.       <version>3.5.5version> 
    19.     dependency>  
    20.       
    21.     <dependency> 
    22.       <groupId>mysqlgroupId>  
    23.       <artifactId>mysql-connector-javaartifactId>  
    24.       <version>5.1.49version> 
    25.     dependency>  
    26.       
    27.     <dependency> 
    28.       <groupId>com.github.pagehelpergroupId>  
    29.       <artifactId>pagehelperartifactId>  
    30.       <version>5.1.2version> 
    31.     dependency>  
    32.       
    33.     <dependency> 
    34.       <groupId>javax.servletgroupId>  
    35.       <artifactId>javax.servlet-apiartifactId>  
    36.       <version>3.1.0version>  
    37.       <scope>providedscope> 
    38.     dependency>  
    39.       
    40.     <dependency> 
    41.       <groupId>junitgroupId>  
    42.       <artifactId>junitartifactId>  
    43.       <version>4.13version> 
    44.     dependency>  
    45.       
    46.     <dependency> 
    47.       <groupId>cn.hutoolgroupId>  
    48.       <artifactId>hutool-allartifactId>  
    49.       <version>5.8.5version> 
    50.     dependency>  
    51.       
    52.       
    53.     <dependency> 
    54.       <groupId>ch.qos.logbackgroupId>  
    55.       <artifactId>logback-classicartifactId>  
    56.       <version>1.2.3version> 
    57.     dependency>  
    58.       
    59.     <dependency> 
    60.       <groupId>ch.qos.logbackgroupId>  
    61.       <artifactId>logback-coreartifactId>  
    62.       <version>1.2.3version> 
    63.     dependency>  
    64.       
    65.     <dependency> 
    66.       <groupId>org.projectlombokgroupId>  
    67.       <artifactId>lombokartifactId>  
    68.       <version>1.18.24version>  
    69.       <scope>compilescope> 
    70.     dependency>  
    71.       
    72.     <dependency> 
    73.       <groupId>javax.servlet.jspgroupId>  
    74.       <artifactId>jsp-apiartifactId>  
    75.       <version>2.2version>  
    76.       <scope>providedscope> 
    77.     dependency>  
    78.       
    79.     <dependency> 
    80.       <groupId>jstlgroupId>  
    81.       <artifactId>jstlartifactId>  
    82.       <version>1.2version> 
    83.     dependency>  
    84.     <dependency> 
    85.       <groupId>taglibsgroupId>  
    86.       <artifactId>standardartifactId>  
    87.       <version>1.1.2version> 
    88.     dependency>  
    89.       
    90.     <dependency> 
    91.       <groupId>org.springframeworkgroupId>  
    92.       <artifactId>spring-webmvcartifactId>  
    93.       <version>5.3.2version> 
    94.     dependency>  
    95.       
    96.     <dependency> 
    97.       <groupId>com.alibabagroupId>  
    98.       <artifactId>fastjsonartifactId>  
    99.       <version>1.2.62version> 
    100.     dependency> 
    101.   dependencies>  
    102.   <build> 
    103.     <plugins> 
    104.       <plugin> 
    105.         <groupId>org.apache.tomcat.mavengroupId>  
    106.         <artifactId>tomcat7-maven-pluginartifactId>  
    107.         <version>2.2version>  
    108.         <configuration> 
    109.             
    110.           <port>8080port>  
    111.             
    112.           <path>/momingpath>  
    113.             
    114.           <uriEncoding>utf-8uriEncoding> 
    115.         configuration> 
    116.       plugin> 
    117.     plugins> 
    118.   build> 
    119. project>

    🍱创建项目目录结构

    🍚目录结构com/moming可自定义

    🍱搭建MyBatis环境

    🍚如果自定义了目录结构,那么在核心配置文件中将com.moming改为自己的结构路径

    然后就是数据库连接信息配置,数据库名,账号,密码

    🍖mybatis-config.xml核心配置文件

    1. "1.0" encoding="UTF-8" ?>
    2. configuration
    3.         PUBLIC "-//mybatis.org//DTD Config 3.0//EN"
    4.         "http://mybatis.org/dtd/mybatis-3-config.dtd">
    5. <configuration>
    6.     
    7.     
    8.     
    9.     
    10.     
    11.     <typeAliases>
    12.         <package name="com.moming.pojo"/>
    13.     typeAliases>
    14.     
    15.     <plugins>
    16.         <plugin interceptor="com.github.pagehelper.PageInterceptor">
    17.         plugin>
    18.     plugins>
    19.  
    20.     <environments default="development">
    21.         <environment id="development">
    22.             <transactionManager type="JDBC"/>
    23.             <dataSource type="POOLED">
    24.                 <property name="driver" value="com.mysql.jdbc.Driver"/>
    25.                 <property name="url" value="jdbc:mysql:///db5?useSSL=false&useServerPrepStmts=true&characterencoding=utf-8&allowPublicKeyRetrieval=true"/>
    26.                 <property name="username" value="root"/>
    27.                 <property name="password" value="123456"/>
    28.             dataSource>
    29.         environment>
    30.     environments>
    31.     <mappers>
    32.         
    33.         <package name="com.moming.mapper"/>
    34.     mappers>
    35. configuration>

    🍱创建BrandMapper.xml映射文件，BrandMapper接口

    🍱创建数据库db5,表tb_brand,添加数据(库名可自定义,和MyBatis核心配置文件中的库名保持一致)

     🍖tb_brand.sql

    1. -- 删除tb_brand表
    2. drop table if exists tb_brand;
    3. -- 创建tb_brand表
    4. create table tb_brand
    5. (
    6.     -- id 主键
    7.     id           int primary key auto_increment,
    8.     -- 品牌名称
    9.     brand_name   varchar(20),
    10.     -- 企业名称
    11.     company_name varchar(20),
    12.     -- 排序字段
    13.     ordered      int,
    14.     -- 描述信息
    15.     description  varchar(100),
    16.     -- 状态：0：禁用  1：启用
    17.     status       int
    18. );
    19. -- 添加数据
    20. insert into tb_brand (brand_name, company_name, ordered, description, status)
    21. values 
    22.        ('华为', '华为技术有限公司', 100, '万物互联', 1),
    23.        ('小米', '小米科技有限公司', 50, 'are you ok', 1),
    24.        ('格力', '格力电器股份有限公司', 30, '让世界爱上中国造', 1),
    25.        ('阿里巴巴', '阿里巴巴集团控股有限公司', 10, '买买买', 1),
    26.        ('腾讯', '腾讯计算机系统有限公司', 50, '玩玩玩', 0),
    27.        ('百度', '百度在线网络技术公司', 5, '搜搜搜', 0),
    28.        ('京东', '北京京东世纪贸易有限公司', 40, '就是快', 1),
    29.        ('小米', '小米科技有限公司', 50, 'are you ok', 1),
    30.        ('三只松鼠', '三只松鼠股份有限公司', 5, '好吃不上火', 0),
    31.        ('华为', '华为技术有限公司', 100, '万物互联', 1),
    32.        ('小米', '小米科技有限公司', 50, 'are you ok', 1),
    33.        ('格力', '格力电器股份有限公司', 30, '让世界爱上中国造', 1),
    34.        ('阿里巴巴', '阿里巴巴集团控股有限公司', 10, '买买买', 1),
    35.        ('腾讯', '腾讯计算机系统有限公司', 50, '玩玩玩', 0),
    36.        ('百度', '百度在线网络技术公司', 5, '搜搜搜', 0),
    37.        ('京东', '北京京东世纪贸易有限公司', 40, '就是快', 1),
    38.        ('华为', '华为技术有限公司', 100, '万物互联', 1),
    39.        ('小米', '小米科技有限公司', 50, 'are you ok', 1),
    40.        ('格力', '格力电器股份有限公司', 30, '让世界爱上中国造', 1),
    41.        ('阿里巴巴', '阿里巴巴集团控股有限公司', 10, '买买买', 1),
    42.        ('腾讯', '腾讯计算机系统有限公司', 50, '玩玩玩', 0),
    43.        ('百度', '百度在线网络技术公司', 5, '搜搜搜', 0),
    44.        ('京东', '北京京东世纪贸易有限公司', 40, '就是快', 1),
    45.        ('小米', '小米科技有限公司', 50, 'are you ok', 1),
    46.        ('三只松鼠', '三只松鼠股份有限公司', 5, '好吃不上火', 0),
    47.        ('华为', '华为技术有限公司', 100, '万物互联', 1),
    48.        ('小米', '小米科技有限公司', 50, 'are you ok', 1),
    49.        ('格力', '格力电器股份有限公司', 30, '让世界爱上中国造', 1),
    50.        ('阿里巴巴', '阿里巴巴集团控股有限公司', 10, '买买买', 1),
    51.        ('腾讯', '腾讯计算机系统有限公司', 50, '玩玩玩', 0),
    52.        ('百度', '百度在线网络技术公司', 5, '搜搜搜', 0),
    53.        ('京东', '北京京东世纪贸易有限公司', 40, '就是快', 1),
    54.        ('华为', '华为技术有限公司', 100, '万物互联', 1),
    55.        ('小米', '小米科技有限公司', 50, 'are you ok', 1),
    56.        ('格力', '格力电器股份有限公司', 30, '让世界爱上中国造', 1),
    57.        ('阿里巴巴', '阿里巴巴集团控股有限公司', 10, '买买买', 1),
    58.        ('腾讯', '腾讯计算机系统有限公司', 50, '玩玩玩', 0),
    59.        ('百度', '百度在线网络技术公司', 5, '搜搜搜', 0),
    60.        ('京东', '北京京东世纪贸易有限公司', 40, '就是快', 1),
    61.        ('小米', '小米科技有限公司', 50, 'are you ok', 1),
    62.        ('三只松鼠', '三只松鼠股份有限公司', 5, '好吃不上火', 0),
    63.        ('华为', '华为技术有限公司', 100, '万物互联', 1),
    64.        ('小米', '小米科技有限公司', 50, 'are you ok', 1),
    65.        ('格力', '格力电器股份有限公司', 30, '让世界爱上中国造', 1),
    66.        ('阿里巴巴', '阿里巴巴集团控股有限公司', 10, '买买买', 1),
    67.        ('腾讯', '腾讯计算机系统有限公司', 50, '玩玩玩', 0),
    68.        ('百度', '百度在线网络技术公司', 5, '搜搜搜', 0),
    69.        ('京东', '北京京东世纪贸易有限公司', 40, '就是快', 1)
    70.         ;
    71.    
    72.  
    73. SELECT * FROM tb_brand;

    🍱webapp配置js和element组件库

    由于文件比较大,在上一篇结尾处可找到这三个文件,将element-ui解压后复制到项目中,上一篇文章可去JavaWeb专栏去找

    🍟后端代码实现

    🌭 实体类pojo

    🍖Brand

    1. package com.moming.pojo;
    2.  
    3. import lombok.AllArgsConstructor;
    4. import lombok.Data;
    5. import lombok.NoArgsConstructor;
    6.  
    7. @Data
    8. @NoArgsConstructor
    9. @AllArgsConstructor
    10. public class Brand {
    11.     // id 主键
    12.     private Integer id;
    13.     // 品牌名称
    14.     private String brandName;
    15.     // 企业名称
    16.     private String companyName;
    17.     // 排序字段
    18.     private Integer ordered;
    19.     // 描述信息
    20.     private String description;
    21.     // 状态：0：禁用  1：启用
    22.     private Integer status;
    23.     //逻辑视图
    24.     public String getStatusStr(){
    25.         if(status == null){
    26.             return "未知";
    27.         }
    28.         return status == 0 ? "禁用" : "启用";
    29.     }
    30.  
    31. }

    🍖PageBean

    1. package com.moming.pojo;
    2.  
    3. import lombok.Data;
    4.  
    5. import java.util.List;
    6.  
    7. //分页查询的JavaBean
    8. @Data
    9. public class PageBean {
    10.     // 总记录数
    11.     private int totalCount;
    12.     // 当前页数据
    13.     private List rows;
    14.  
    15. }
    16.

    🌭 工具类util

    🍖SqlSessionFactoryUtils

    1. package com.moming.util;
    2.  
    3. import org.apache.ibatis.io.Resources;
    4. import org.apache.ibatis.session.SqlSessionFactory;
    5. import org.apache.ibatis.session.SqlSessionFactoryBuilder;
    6.  
    7. import java.io.IOException;
    8. import java.io.InputStream;
    9.  
    10. public class SqlSessionFactoryUtils {
    11.     private SqlSessionFactoryUtils() {
    12.     }
    13.  
    14.     private static SqlSessionFactory sqlSessionFactory;
    15.  
    16.     static {
    17.         try {
    18.             //1.加载mybatis的核心配置文件,获取SqlSessionFactory
    19.             //定义配置文件的路径
    20.             String resource = "mybatis-config.xml";
    21.             //资源加载返回字节输入流
    22.             InputStream inputStream = Resources.getResourceAsStream(resource);
    23.             //获取工厂
    24.             sqlSessionFactory = new SqlSessionFactoryBuilder().build(inputStream);
    25.         } catch (IOException e) {
    26.             e.printStackTrace();
    27.         }
    28.     }
    29.  
    30.     public static SqlSessionFactory getSqlSessionFactory() {
    31.         return sqlSessionFactory;
    32.     }
    33. }

    🍖BaseServlet

    1. package com.moming.util;
    2.  
    3. import javax.servlet.ServletException;
    4. import javax.servlet.http.HttpServlet;
    5. import javax.servlet.http.HttpServletRequest;
    6. import javax.servlet.http.HttpServletResponse;
    7. import java.io.IOException;
    8. import java.lang.reflect.InvocationTargetException;
    9. import java.lang.reflect.Method;
    10.  
    11. /**
    12.  * 对tomcat来讲,都是找servlet中的service方法,因此将来定义的servlet只需要继承BaseServlet
    13.  * 在BaseServlet中,重写service方法,根据url的地址值获取方法名并反射对应的方法,执行即可
    14.  */
    15. //用来替换HttpServlet,根据请求的最后一段路径进行方法分发,代替HttpServlet根据请求方法分发
    16. public class BaseServlet extends HttpServlet {
    17.     @Override
    18.     protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
    19.         //1.获取请求路径 // /moming/brand/selectAll
    20.         String uri = req.getRequestURI();
    21.         //2.获取最后一段路径,方法名 // /selectAll
    22.         String[] arr = uri.split("/");
    23.         String methodName = arr[arr.length - 1];
    24.         //int index = uri.lastIndexOf("/");
    25.         //String methodName = uri.substring(index+1);
    26.  
    27.         //3.执行方法
    28.         //3.1获取BrandServlet 或者 UserServlet的字节码对象
    29.         //谁调用(this 所在的方法),(this)就代表谁
    30.         //也就是BaseServlet的子类对象
    31.         Classextends BaseServlet> cls = this.getClass();
    32.         //3.2通过反射获取方法的Method对象
    33.         try {
    34.             Method method = cls.getMethod(methodName, HttpServletRequest.class, HttpServletResponse.class);
    35.             //3.3通过反射执行方法
    36.             method.invoke(this, req, resp);
    37.         } catch (NoSuchMethodException e) {
    38.             e.printStackTrace();
    39.         } catch (InvocationTargetException e) {
    40.             e.printStackTrace();
    41.         } catch (IllegalAccessException e) {
    42.             e.printStackTrace();
    43.         }
    44.     }
    45. }

    🌭 dao层

    🍖BrandMapper接口

    1. package com.moming.mapper;
    2.  
    3. import com.moming.pojo.Brand;
    4. import org.apache.ibatis.annotations.*;
    5.  
    6. import java.util.List;
    7.  
    8. public interface BrandMapper {
    9.     //注意数据库字段名称和实体类字段名称不一致问题,可以通过开启驼峰命名支持,也可以使用resultMap映射
    10.     //如果使用resultMap需要在这里添加注解@ResultMap("brandResultMap")
    11.  
    12.     /**
    13.      * 查询所有
    14.      *
    15.      * @return
    16.      */
    17.     @Select("select * from tb_brand")
    18.     @ResultMap("brandResultMap")
    19.     List selectAll();
    20.  
    21.     /**
    22.      * 添加数据
    23.      *
    24.      * @param brand
    25.      */
    26.     @Insert("insert into tb_brand values(null,#{brandName},#{companyName},#{ordered},#{description},#{status})")
    27.     int add(Brand brand);
    28.  
    29.     /**
    30.      * 修改
    31.      *
    32.      * @param brand
    33.      * @return
    34.      */
    35.     int updateBrand(Brand brand);
    36.  
    37.     /**
    38.      * 批量删除
    39.      *
    40.      * @param ids
    41.      */
    42.     void deleteByIds(@Param("ids") int[] ids);
    43.  
    44.     /**
    45.      * 单个删除
    46.      *
    47.      * @param id
    48.      */
    49.     @Delete("delete from tb_brand where id=#{id}")
    50.     void deleteById(String id);
    51.  
    52.     /**
    53.      * 分页查询
    54.      *
    55.      * @param begin
    56.      * @param size
    57.      * @return
    58.      */
    59.     @Select("select * from tb_brand limit #{begin} , #{size}")
    60.     @ResultMap("brandResultMap")
    61.     List selectByPage(@Param("begin") int begin, @Param("size") int size);
    62.  
    63.     /**
    64.      * 查询总记录数
    65.      *
    66.      * @return
    67.      */
    68.     @Select("select count(*) from tb_brand ")
    69.     int selectTotalCount();
    70.  
    71.     /**
    72.      * 分页条件查询
    73.      *
    74.      * @param begin
    75.      * @param size
    76.      * @return
    77.      */
    78.     List selectByPageAndCondition(@Param("begin") int begin, @Param("size") int size, @Param("brand") Brand brand);
    79.  
    80.     /**
    81.      * 根据条件查询总记录数
    82.      *
    83.      * @return
    84.      */
    85.     int selectTotalCountByCondition(Brand brand);
    86.  
    87. }

    🍚注意配置中namespace路径改为自己的

    🍖BrandMapper.xml

    1. "1.0" encoding="UTF-8" ?>
    2. mapper
    3.         PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
    4.         "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
    5. <mapper namespace="com.moming.mapper.BrandMapper">
    6.     
    7.     
    8.     <resultMap id="brandResultMap" type="brand">
    9.         <result column="brand_name" property="brandName">result>
    10.         <result column="company_name" property="companyName">result>
    11.     resultMap>
    12.     
    13.     <update id="updateBrand">
    14.         update tb_brand
    15.         <set>
    16.             <if test="brandName !=null and brandName!=''">
    17.                 brand_name = #{brandName},
    18.             if>
    19.             <if test="companyName !=null and companyName!=''">
    20.                 company_name = #{companyName},
    21.             if>
    22.             <if test="ordered !=null and ordered!=0">
    23.                 ordered = #{ordered},
    24.             if>
    25.             <if test="description !=null and description!=''">
    26.                 description = #{description},
    27.             if>
    28.             <if test="status !=null ">
    29.                 status = #{status}
    30.             if>
    31.         set>
    32.         where id=#{id};
    33.     update>
    34.  
    35.     
    36.     <delete id="deleteByIds">
    37.         delete from tb_brand where id in
    38.         <foreach collection="ids" item="id" separator="," open="(" close=")">
    39.             #{id}
    40.         foreach>
    41.     delete>
    42.  
    43.     
    44.     <select id="selectByPageAndCondition" resultMap="brandResultMap">
    45.         select *
    46.         from tb_brand
    47.         <where>
    48.             <if test="brand.brandName != null and brand.brandName != '' ">
    49.                 and  brand_name like #{brand.brandName}
    50.             if>
    51.  
    52.             <if test="brand.companyName != null and brand.companyName != '' ">
    53.                 and  company_name like #{brand.companyName}
    54.             if>
    55.  
    56.             <if test="brand.status != null">
    57.                 and  status = #{brand.status}
    58.             if>
    59.         where>
    60.         limit #{begin} , #{size}
    61.     select>
    62.  
    63.     
    64.     <select id="selectTotalCountByCondition" resultType="java.lang.Integer">
    65.         select count(*)
    66.         from tb_brand
    67.         <where>
    68.             <if test="brandName != null and brandName != '' ">
    69.                 and  brand_name like #{brandName}
    70.             if>
    71.  
    72.             <if test="companyName != null and companyName != '' ">
    73.                 and  company_name like #{companyName}
    74.             if>
    75.  
    76.             <if test="status != null">
    77.                 and  status = #{status}
    78.             if>
    79.         where>
    80.     select>
    81.  
    82. mapper>

    🌭 service层

    🍚为了方便代码维护,创建一个接口BrandService,创建impl/BrandServiceImpl实现类去实现接口

    🍖BrandService接口

    1. package com.moming.service;
    2.  
    3. import com.moming.pojo.Brand;
    4. import com.moming.pojo.PageBean;
    5.  
    6. import java.util.List;
    7.  
    8. public interface BrandService {
    9.     /**
    10.      * 查询所有
    11.      * @return
    12.      */
    13.     List selectAll();
    14.  
    15.     /**
    16.      * 添加数据
    17.      * @param brand
    18.      */
    19.     void add(Brand brand);
    20.  
    21.     /**
    22.      * 添加或修改
    23.      * @param brand
    24.      * @return
    25.      */
    26.     String addOrUpdate(Brand brand);
    27.  
    28.     /**
    29.      * 批量删除
    30.      * @param ids
    31.      */
    32.     void deleteByIds(int[] ids);
    33.     /**
    34.      * 单个删除
    35.      * @param id
    36.      */
    37.     void deleteById(String id);
    38.  
    39.     /**
    40.      * 分页条件查询
    41.      * @param currentPage 当前页码
    42.      * @param pageSize 每页展示条数
    43.      * @return
    44.      */
    45.     PageBean selectByPage(int currentPage, int pageSize);
    46.  
    47.     /**
    48.      * 分页条件查询
    49.      * @param currentPage
    50.      * @param pageSize
    51.      * @param brand
    52.      * @return
    53.      */
    54.     PageBean selectByPageAndCondition(int currentPage, int pageSize,Brand brand);
    55.  
    56.  
    57. }

    🍖BrandServiceImpl

    1. package com.moming.service.impl;
    2.  
    3. import com.moming.mapper.BrandMapper;
    4. import com.moming.pojo.Brand;
    5. import com.moming.pojo.PageBean;
    6. import com.moming.service.BrandService;
    7. import com.moming.util.SqlSessionFactoryUtils;
    8. import org.apache.ibatis.session.SqlSession;
    9. import org.apache.ibatis.session.SqlSessionFactory;
    10.  
    11. import java.util.List;
    12.  
    13. public class BrandServiceImpl implements BrandService {
    14.     //1.创建SqlSessionFactory 工厂对象
    15.     SqlSessionFactory sqlSessionFactory = SqlSessionFactoryUtils.getSqlSessionFactory();
    16.  
    17.     /**
    18.      * 查询所有
    19.      *
    20.      * @return
    21.      */
    22.     @Override
    23.     public List selectAll() {
    24.         //2.获取SqlSession对象
    25.         SqlSession sqlSession = sqlSessionFactory.openSession();
    26.         //3.获取mapper
    27.         BrandMapper mapper = sqlSession.getMapper(BrandMapper.class);
    28.         //4.调用方法
    29.         List brands = mapper.selectAll();
    30.         //5.释放资源
    31.         sqlSession.close();
    32.         return brands;
    33.     }
    34.  
    35.     /**
    36.      * 添加
    37.      *
    38.      * @param brand
    39.      */
    40.     @Override
    41.     public void add(Brand brand) {
    42.         //2.获取SqlSession对象
    43.         SqlSession sqlSession = sqlSessionFactory.openSession();
    44.         //3.获取mapper
    45.         BrandMapper mapper = sqlSession.getMapper(BrandMapper.class);
    46.         //4.调用方法
    47.         mapper.add(brand);
    48.         //提交事务
    49.         sqlSession.commit();
    50.         //5.释放资源
    51.         sqlSession.close();
    52.     }
    53.     /**
    54.      * 添加或修改
    55.      * @param brand
    56.      * @return
    57.      */
    58.     @Override
    59.     public String addOrUpdate(Brand brand) {
    60.         //2.获取SqlSession对象
    61.         SqlSession sqlSession = sqlSessionFactory.openSession();
    62.         //3.获取mapper
    63.         BrandMapper mapper = sqlSession.getMapper(BrandMapper.class);
    64.         //判断brand对象中的id是否有效,如果有效,则执行修改的行为,无效则执行添加的行为
    65.         //业务层,返回1表示添加成功,2修改成功,3添加失败,4修改失败
    66.         if(brand.getId()!=null&&brand.getId()!=0){
    67.             //修改
    68.             int i = mapper.updateBrand(brand);
    69.             //提交事务
    70.             sqlSession.commit();
    71.             //5.释放资源
    72.             sqlSession.close();
    73.  
    74.              if(i>=1){
    75.                  return "修改成功";
    76.              }else {
    77.                  return "修改失败";
    78.              }
    79.         }else {
    80.             //添加
    81.             int i = mapper.add(brand);
    82.             //提交事务
    83.             sqlSession.commit();
    84.             //5.释放资源
    85.             sqlSession.close();
    86.             if(i>=1){
    87.                 return "添加成功";
    88.             }else {
    89.                 return "添加失败";
    90.             }
    91.         }
    92.     }
    93.  
    94.     /**
    95.      * 批量删除
    96.      * @param ids
    97.      */
    98.     @Override
    99.     public void deleteByIds(int[] ids) {
    100.         //2.获取SqlSession对象
    101.         SqlSession sqlSession = sqlSessionFactory.openSession();
    102.         //3.获取mapper
    103.         BrandMapper mapper = sqlSession.getMapper(BrandMapper.class);
    104.         //4.调用方法
    105.         mapper.deleteByIds(ids);
    106.         //提交事务
    107.         sqlSession.commit();
    108.         //5.释放资源
    109.         sqlSession.close();
    110.     }
    111.  
    112.     /**
    113.      * 单个删除
    114.      * @param id
    115.      */
    116.     @Override
    117.     public void deleteById(String id) {
    118.         //2.获取SqlSession对象
    119.         SqlSession sqlSession = sqlSessionFactory.openSession();
    120.         //3.获取mapper
    121.         BrandMapper mapper = sqlSession.getMapper(BrandMapper.class);
    122.         //4.调用方法
    123.         mapper.deleteById(id);
    124.         //提交事务
    125.         sqlSession.commit();
    126.         //5.释放资源
    127.         sqlSession.close();
    128.     }
    129.  
    130.     /**
    131.      * 分页查询
    132.      * @param currentPage 当前页码
    133.      * @param pageSize 每页展示条数
    134.      * @return
    135.      */
    136.     @Override
    137.     public PageBean selectByPage(int currentPage, int pageSize) {
    138.         //2.获取SqlSession对象
    139.         SqlSession sqlSession = sqlSessionFactory.openSession();
    140.         //3.获取mapper
    141.         BrandMapper mapper = sqlSession.getMapper(BrandMapper.class);
    142.         //4. 计算开始索引
    143.         int begin = (currentPage - 1) * pageSize;
    144.         // 计算查询条目数
    145.         int size = pageSize;
    146.         //5. 查询当前页数据
    147.         List rows = mapper.selectByPage(begin, size);
    148.         //6. 查询总记录数
    149.         int totalCount = mapper.selectTotalCount();
    150.         //7. 封装PageBean对象
    151.         PageBean pageBean = new PageBean<>();
    152.         pageBean.setRows(rows);
    153.         pageBean.setTotalCount(totalCount);
    154.         //8. 释放资源
    155.         sqlSession.close();
    156.  
    157.         return pageBean;
    158.     }
    159.  
    160.     /**
    161.      * 分页条件查询
    162.      * @param currentPage
    163.      * @param pageSize
    164.      * @param brand
    165.      * @return
    166.      */
    167.     @Override
    168.     public PageBean selectByPageAndCondition(int currentPage, int pageSize, Brand brand) {
    169.         //2.获取SqlSession对象
    170.         SqlSession sqlSession = sqlSessionFactory.openSession();
    171.         //3.获取mapper
    172.         BrandMapper mapper = sqlSession.getMapper(BrandMapper.class);
    173.         //4. 计算开始索引
    174.         int begin = (currentPage - 1) * pageSize;
    175.         // 计算查询条目数
    176.         int size = pageSize;
    177.         // 处理brand条件，模糊表达式
    178.         String brandName = brand.getBrandName();
    179.         if (brandName != null && brandName.length() > 0) {
    180.             brand.setBrandName("%" + brandName + "%");
    181.         }
    182.         String companyName = brand.getCompanyName();
    183.         if (companyName != null && companyName.length() > 0) {
    184.             brand.setCompanyName("%" + companyName + "%");
    185.         }
    186.         //5. 查询当前页数据
    187.         List rows = mapper.selectByPageAndCondition(begin, size, brand);
    188.         //6. 查询总记录数
    189.         int totalCount = mapper.selectTotalCountByCondition(brand);
    190.         //7. 封装PageBean对象
    191.         PageBean pageBean = new PageBean<>();
    192.         pageBean.setRows(rows);
    193.         pageBean.setTotalCount(totalCount);
    194.         //8. 释放资源
    195.         sqlSession.close();
    196.  
    197.         return pageBean;
    198.     }
    199.  
    200. }

    🌭 web层

    🍖BrandServlet

    1. package com.moming.web;
    2.  
    3. import com.alibaba.fastjson.JSON;
    4. import com.moming.pojo.Brand;
    5. import com.moming.pojo.PageBean;
    6. import com.moming.service.BrandService;
    7. import com.moming.service.impl.BrandServiceImpl;
    8. import com.moming.util.BaseServlet;
    9.  
    10. import javax.servlet.ServletException;
    11. import javax.servlet.annotation.WebServlet;
    12. import javax.servlet.http.HttpServletRequest;
    13. import javax.servlet.http.HttpServletResponse;
    14. import java.io.BufferedReader;
    15. import java.io.IOException;
    16. import java.util.List;
    17.  
    18. /**
    19.  * 这个类就是专门写所有于商品增删改查相关的类
    20.  */
    21. @WebServlet("/brand/*")
    22. public class BrandServlet extends BaseServlet {
    23.     private BrandService brandService = new BrandServiceImpl();
    24.     //这个方法就是专门出来查询所有商品的方法
    25.     public void selectAll(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
    26.         //1.调用service查询
    27.         List brands = brandService.selectAll();
    28.         //2.将list集合转换为JSON
    29.         String jsonString = JSON.toJSONString(brands);
    30.         //3.响应JSON数据
    31.         //设置响应编码格式
    32.         response.setContentType("text/json;charset=utf-8");
    33.         response.getWriter().write(jsonString);
    34.     }
    35.     //添加
    36.     public void add(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
    37.         //1.接收品牌数据
    38.         BufferedReader reader = request.getReader();
    39.         String params = reader.readLine();
    40.         //转为Brand对象
    41.         Brand brand = JSON.parseObject(params,Brand.class);
    42.         //2.调用service添加
    43.         brandService.add(brand);
    44.         //3.响应成功标识
    45.         response.getWriter().write("success");
    46.     }
    47.     //添加或修改
    48.     public void addOrUpdate(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
    49.         //1.接收品牌数据
    50.         BufferedReader reader = request.getReader();
    51.         String params = reader.readLine();
    52.         //转为Brand对象
    53.         Brand brand = JSON.parseObject(params,Brand.class);
    54.         //调用service 业务层,返回1表示添加成功,2修改成功,3添加失败,4修改失败
    55.         //2.调用service添加
    56.         String msg = brandService.addOrUpdate(brand);
    57.         response.setContentType("text/html;charset=utf-8");
    58.         //3.响应
    59.         response.getWriter().write(msg);
    60.     }
    61.     //批量删除
    62.     public void deleteByIds(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
    63.         //1.接收数据
    64.         BufferedReader reader = request.getReader();
    65.         String params = reader.readLine();
    66.         //转为int[]
    67.         int[] ids = JSON.parseObject(params, int[].class);
    68.         //2.调用service添加
    69.         brandService.deleteByIds(ids);
    70.         //3.响应成功标识
    71.         response.getWriter().write("success");
    72.     }
    73.     //删除
    74.     public void deleteById(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
    75.         //1.接收数据
    76.         String id = request.getParameter("id");
    77.         //2.调用service添加
    78.         brandService.deleteById(id);
    79.         //3.响应成功标识
    80.         response.getWriter().write("success");
    81.     }
    82.  
    83.     /**
    84.      * 分页查询
    85.      * @param request
    86.      * @param response
    87.      * @throws ServletException
    88.      * @throws IOException
    89.      */
    90.     public void selectByPage(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
    91.         //1. 接收 当前页码 和 每页展示条数    url?currentPage=1&pageSize=5
    92.         String _currentPage = request.getParameter("currentPage");
    93.         String _pageSize = request.getParameter("pageSize");
    94.         //转换
    95.         int currentPage = Integer.parseInt(_currentPage);
    96.         int pageSize = Integer.parseInt(_pageSize);
    97.         //2. 调用service查询
    98.         PageBean pageBean = brandService.selectByPage(currentPage, pageSize);
    99.         //2. 转为JSON
    100.         String jsonString = JSON.toJSONString(pageBean);
    101.         //3. 写数据
    102.         response.setContentType("text/json;charset=utf-8");
    103.         response.getWriter().write(jsonString);
    104.     }
    105.     /**
    106.      * 分页条件查询
    107.      * @param request
    108.      * @param response
    109.      * @throws ServletException
    110.      * @throws IOException
    111.      */
    112.  
    113.     public void selectByPageAndCondition(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
    114.         //1. 接收 当前页码 和 每页展示条数    url?currentPage=1&pageSize=5
    115.         String _currentPage = request.getParameter("currentPage");
    116.         String _pageSize = request.getParameter("pageSize");
    117.  
    118.         int currentPage = Integer.parseInt(_currentPage);
    119.         int pageSize = Integer.parseInt(_pageSize);
    120.  
    121.         // 获取查询条件对象
    122.         BufferedReader br = request.getReader();
    123.         String params = br.readLine();//json字符串
    124.  
    125.         //转为 Brand
    126.         Brand brand = JSON.parseObject(params, Brand.class);
    127.  
    128.  
    129.         //2. 调用service查询
    130.         PageBean pageBean = brandService.selectByPageAndCondition(currentPage,pageSize,brand);
    131.  
    132.         //2. 转为JSON
    133.         String jsonString = JSON.toJSONString(pageBean);
    134.         //3. 写数据
    135.         response.setContentType("text/json;charset=utf-8");
    136.         response.getWriter().write(jsonString);
    137.     }
    138.  
    139.  
    140.  
    141. }

    🍟前端代码实现

    🌭 前端页面

    🍚在发送axios异步请求设置中url的路径要改成自己的

    🍖brand.xml

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <title>Titletitle>
    6.     <style>
    7.         .el-table .warning-row {
    8.             background: oldlace;
    9.         }
    10.  
    11.         .el-table .success-row {
    12.             background: #f0f9eb;
    13.         }
    14.     style>
    15.  
    16. head>
    17. <body>
    18. <div id="app">
    19.     
    20.     <el-form :inline="true" :model="brand" class="demo-form-inline">
    21.         <el-form-item label="当前状态">
    22.             <el-select v-model="brand.status" placeholder="当前状态">
    23.                 <el-option label="当前状态" value="">el-option>
    24.                 <el-option label="启用" value="1">el-option>
    25.                 <el-option label="禁用" value="0">el-option>
    26.             el-select>
    27.         el-form-item>
    28.         <el-form-item label="企业名称">
    29.             <el-input v-model="brand.companyName" placeholder="企业名称">el-input>
    30.         el-form-item>
    31.         <el-form-item label="品牌名称">
    32.             <el-input v-model="brand.brandName" placeholder="品牌名称">el-input>
    33.         el-form-item>
    34.         <el-form-item>
    35.             <el-button type="primary" @click="onSubmit">查询el-button>
    36.         el-form-item>
    37.     el-form>
    38.  
    39.     
    40.     <el-row>
    41.         <el-button type="danger" plain @click="deleteByIds">批量删除el-button>
    42.         <el-button type="primary" plain @click="openDialog('新增商品')">新增el-button>
    43.     el-row>
    44.  
    45.     
    46.     <el-dialog
    47.             :title="title"
    48.             :visible.sync="dialogVisible"
    49.             width="30%">
    50.         <el-form ref="form" :model="brand" label-width="80px">
    51.             <el-form-item label="品牌名称">
    52.                 <el-input v-model="brand.brandName">el-input>
    53.             el-form-item>
    54.             <el-form-item label="企业名称">
    55.                 <el-input v-model="brand.companyName">el-input>
    56.             el-form-item>
    57.             <el-form-item label="排序">
    58.                 <el-input v-model="brand.ordered">el-input>
    59.             el-form-item>
    60.             <el-form-item label="备注">
    61.                 <el-input type="textarea" v-model="brand.description">el-input>
    62.             el-form-item>
    63.             <el-form-item label="状态">
    64.                 <el-switch v-model="brand.status"
    65.                            :active-value="1"
    66.                            :inactive-value="0"
    67.                 >el-switch>
    68.             el-form-item>
    69.             <el-form-item>
    70.                 <el-button type="primary" @click="addOrUpdateBrand">提交el-button>
    71.                 <el-button @click="dialogVisible = false">取消el-button>
    72.             el-form-item>
    73.         el-form>
    74.     el-dialog>
    75.  
    76.  
    77.     
    78.     <template>
    79.         <el-table
    80.                 :data="tableData"
    81.                 style="width: 100%"
    82.                 :row-class-name="tableRowClassName"
    83.                 @selection-change="handleSelectionChange">
    84.             
    85.             <el-table-column
    86.                     type="selection"
    87.                     width="55">
    88.             el-table-column>
    89.             
    90.             <el-table-column
    91.                     type="index"
    92.                     width="50">
    93.             el-table-column>
    94.             
    95.             <el-table-column
    96.                     prop="brandName"
    97.                     label="品牌名称"
    98.                     align="center">
    99.             el-table-column>
    100.             
    101.             <el-table-column
    102.                     prop="companyName"
    103.                     label="企业名称"
    104.                     align="center">
    105.             el-table-column>
    106.             
    107.             <el-table-column
    108.                     prop="ordered"
    109.                     align="center"
    110.                     label="排序">
    111.             el-table-column>
    112.             
    113.             <el-table-column
    114.                     prop="statusStr"
    115.                     align="center"
    116.                     label="当前状态">
    117.             el-table-column>
    118.             
    119.             <el-table-column
    120.                     align="center"
    121.                     label="操作">
    122.                 <template slot-scope="scope">
    123.                     <el-button
    124.                             @click="handleEdit(scope.$index, scope.row)">修改
    125.                     el-button>
    126.                     <el-button
    127.                             type="danger"
    128.                             @click="handleDelete(scope.$index, scope.row)">删除
    129.                     el-button>
    130.                 template>
    131.  
    132.             el-table-column>
    133.         el-table>
    134.     template>
    135.  
    136.     
    137.     <el-pagination
    138.             @size-change="handleSizeChange"
    139.             @current-change="handleCurrentChange"
    140.             :current-page="currentPage"
    141.             :page-sizes="[5, 10, 15, 20]"
    142.             :page-size="5"
    143.             layout="total, sizes, prev, pager, next, jumper"
    144.             :total="totalCount">
    145.     el-pagination>
    146. div>
    147.  
    148.  
    149. <script src="js/axios-0.18.0.js">script>
    150. <script src="js/vue.js">script>
    151. <script src="element-ui/lib/index.js">script>
    152. <link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css">
    153.  
    154. <script>
    155.     
    156.     let v = new Vue({
    157.         el: "#app",
    158.         data() {
    159.             return {
    160.                 //每页显示条数
    161.                 pageSize: 5,
    162.                 //总记录数
    163.                 totalCount: 100,
    164.                 //当前页码
    165.                 currentPage: 1,
    166.                 //添加数据对话框是否展示的标记
    167.                 dialogVisible: false,
    168.                 //对话框标题
    169.                 title: '新增商品',
    170.                 // 品牌模型数据
    171.                 brand: {
    172.                     status: '',
    173.                     brandName: '',
    174.                     companyName: '',
    175.                     id: "",
    176.                     ordered: "",
    177.                     description: ""
    178.                 },
    179.                 //被选中的id数组
    180.                 selectedIds: [],
    181.                 // 复选框选中数据集合
    182.                 multipleSelection: [],
    183.                 // 表格数据,假数据
    184.                 tableData: [{
    185.                     id: '',
    186.                     brandName: '华为',
    187.                     companyName: '华为科技有限公司',
    188.                     ordered: '100',
    189.                     status: "1"
    190.                 }]
    191.             }
    192.         },
    193.         mounted() {
    194.             this.selectAll();
    195.         },
    196.         methods: {
    197.             //查询所有的方法
    198.             selectAll() {
    199.                 //提升生命周期
    200.                 //没有发送异步请求之前,this表示vue对象,发送之后this表示window对象
    201.                 // var _this=this;
    202.                 // //页面加载完成之后执行的函数,发送异步请求,获取JSON函数,给vue中的tableDate变量赋值
    203.                 // axios({
    204.                 //     method: "get",
    205.                 //     url: "http://localhost:8080/moming/brand/selectAll"
    206.                 // }).then(function (resp) {
    207.                 //     _this.tableData = resp.data;
    208.                 // })
    209.  
    210.                 // //查询分页数据
    211.                 // var _this=this;
    212.                 // //页面加载完成之后执行的函数,发送异步请求,获取JSON函数,给vue中的tableDate变量赋值
    213.                 // axios({
    214.                 //     method: "post",
    215.                 //     url: "http://localhost:8080/moming/brand/selectByPageAndCondition?currentPage="+this.currentPage+"&pageSize="+this.pageSize,
    216.                 //     data: this.brand
    217.                 // }).then(function (resp) {
    218.                 //     //设置表格数据
    219.                 //     _this.tableData = resp.data.rows;// {rows:[],totalCount:100}
    220.                 //     //设置总记录数
    221.                 //     _this.totalCount = resp.data.totalCount;
    222.                 // })
    223.  
    224.                 //查询分页数据
    225.                 var _this = this;
    226.                 //页面加载完成之后执行的函数,发送异步请求,获取JSON函数,给vue中的tableDate变量赋值
    227.                 axios({
    228.                     method: "post",
    229.                     url: "http://localhost:8080/moming/brand/selectByPageAndCondition?currentPage=" + this.currentPage + "&pageSize=" + this.pageSize,
    230.                     data: this.brand
    231.                 }).then(resp => {
    232.                     //设置表格数据
    233.                     this.tableData = resp.data.rows;// {rows:[],totalCount:100}
    234.                     //设置总记录数
    235.                     this.totalCount = resp.data.totalCount;
    236.                 })
    237.             },
    238.             tableRowClassName({row, rowIndex}) {
    239.                 if (rowIndex % 4 === 1) {
    240.                     return 'warning-row';
    241.                 } else if (rowIndex % 4 === 3) {
    242.                     return 'success-row';
    243.                 }
    244.                 return '';
    245.             },
    246.             // 复选框选中后执行的方法
    247.             handleSelectionChange(val) {
    248.                 this.multipleSelection = val;
    249.                 console.log(this.multipleSelection)
    250.             },
    251.             // 提交按钮时查询方法
    252.             onSubmit() {
    253.                 // console.log(this.brand);
    254.                 this.selectAll();
    255.             },
    256.  
    257.             //添加或修改数据执行方法
    258.             addOrUpdateBrand() {
    259.                 var _this = this;
    260.                 //发送ajax请求,添加数据
    261.                 axios({
    262.                     method: "post",
    263.                     url: "http://localhost:8080/moming/brand/addOrUpdate",
    264.                     data: _this.brand
    265.                 }).then(function (r) {
    266.                     //添加或修改成功
    267.                     //提示信息
    268.                     _this.$message({
    269.                         message: r.data,
    270.                         type: 'success'
    271.                     });
    272.                     //刷新页面,重新查询数据
    273.                     _this.selectAll();
    274.                     //关闭窗口
    275.                     _this.dialogVisible = false;
    276.  
    277.                 })
    278.             },
    279.             //批量删除方法
    280.             deleteByIds() {
    281.                 //弹出确认提示框
    282.                 this.$confirm('此操作将删除该数据, 是否继续?', '提示', {
    283.                     confirmButtonText: '确定',
    284.                     cancelButtonText: '取消',
    285.                     type: 'warning'
    286.                 }).then(() => {
    287.                     //1.创建id数组,从this.multipleSelection获取即可
    288.                     for (let i = 0; i < this.multipleSelection.length; i++) {
    289.                         let selectionElement = this.multipleSelection[i];
    290.                         this.selectedIds[i] = selectionElement.id;
    291.                     }
    292.                     //2.发送AJAX请求
    293.                     var _this = this;
    294.                     //发送ajax请求,添加数据
    295.                     axios({
    296.                         method: "post",
    297.                         url: "http://localhost:8080/moming/brand/deleteByIds",
    298.                         data: _this.selectedIds
    299.                     }).then(function (r) {
    300.                         if (r.data == "success") {
    301.                             //添加成功
    302.                             //提示信息
    303.                             _this.$message({
    304.                                 message: '恭喜你，删除成功',
    305.                                 type: 'success'
    306.                             });
    307.                             //刷新页面,重新查询数据
    308.                             _this.selectAll();
    309.                         }
    310.                     })
    311.                 }).catch(() => {
    312.                     this.$message({
    313.                         type: 'info',
    314.                         message: '已取消删除'
    315.                     });
    316.                 });
    317.  
    318.             },
    319.             //修改按钮回显数据的方法
    320.             handleEdit(i, row) {
    321.                 //打开对话框(可以和添加商品的对话框公用同一个)
    322.                 //需要给对话框设置一个标题和回显的数据
    323.                 v.dialogVisible = true;
    324.                 v.title = '修改商品';
    325.                 v.brand = row;
    326.  
    327.             },
    328.             //单个删除
    329.             handleDelete(i, row) {
    330.                 this.$confirm('此操作将删除' + row.brandName + ', 是否继续?', '提示', {
    331.                     confirmButtonText: '确定',
    332.                     cancelButtonText: '取消',
    333.                     type: 'warning'
    334.                 }).then(() => {
    335.                     //点击确定按钮会执行到这里
    336.                     //发送ajax请求
    337.                     //2.发送AJAX请求
    338.                     var _this = this;
    339.                     //发送ajax请求,添加数据
    340.                     axios({
    341.                         method: "post",
    342.                         url: "http://localhost:8080/moming/brand/deleteById?id=" + row.id,
    343.                     }).then(function (r) {
    344.                         if (r.data == "success") {
    345.                             //删除成功
    346.                             //提示信息
    347.                             _this.$message({
    348.                                 message: '恭喜你，删除成功',
    349.                                 type: 'success'
    350.                             });
    351.                             //刷新页面,重新查询数据
    352.                             _this.selectAll();
    353.                         }
    354.                     })
    355.                 }).catch(() => {
    356.                     this.$message({
    357.                         type: 'info',
    358.                         message: '已取消删除'
    359.                     });
    360.                 });
    361.             },
    362.             //分页
    363.             handleSizeChange(val) {
    364.                 // console.log(`每页 ${val} 条`);
    365.                 //重新设置每页显示的条数
    366.                 this.pageSize = val;
    367.                 this.selectAll();
    368.             },
    369.             handleCurrentChange(val) {
    370.                 // console.log(`当前页: ${val}`);
    371.                 //重新设置当前页码
    372.                 this.currentPage = val;
    373.                 this.selectAll();
    374.             },
    375.             //打开添加商品对话框
    376.             openDialog(t) {
    377.                 v.brand = {};
    378.                 v.title = t;
    379.                 v.dialogVisible = true;
    380.             }
    381.  
    382.         },
    383.  
    384.     })
    385.  
    386. script>
    387.  
    388. body>
    389. html>

    🍕总结说明

    💖💖以上就是全部源代码了,可以结合我前几篇有关JavaWeb登录注册案例进行一下整合,在登录注册案例中,有个success.jsp文件,可用brand.html将其替换,然后在SuccessServlet中将转发到success.jsp改为brand.html

    (request.getRequestDispatcher("/brand.html").forward(request,response);)

    这样就可以实现登录成功后跳转到Brand管理系统界面

    具体的登录注册案例连接如下(三篇)

    第一篇,第二篇,第三篇

    代码量比较大,如果想要进一步了解的我找到了一篇大佬详解的步骤可去参考

    博主:鲁棒最小二乘支持向量机 --- 黑马程序员最新版JavaWeb综合案例(前后端完整版)

  • 相关阅读:
    Pytorch模型转ONNX部署
    TMGM外汇平台官网最全测评（2022年版）
    【ARM AMBA AXI 入门 13 -- AXI 协议中 RRESP 信号详细介绍】
    开放式运动耳机排行榜，盘点五款最适合入手的运动耳机
    使用sipParseArgs/sipBuildResult进行python/C++对象的转换
    【注释和反射】类加载的过程
    敬请期待！
    Python 位运算的操作
    【云原生之k8s】kubernetes核心组件
    个人网页制作 个人网页设计作业 HTML CSS个人网页模板 大学生个人介绍网站毕业设计 DW个人主题网页模板下载 个人网页成品代码 个人网页作品下载
  • 原文地址：https://blog.csdn.net/HeyVIrBbox/article/details/126923568