• 电商后台管理系统（基于SSM + Vue + Restful + jquery + axios）

    1.项目架构

    2.config配置

    JdbcConfig

    1. public class JdbcConfig {
    2.  
    3.     @Value("${jdbc.driver}")
    4.     private String driver;
    5.     @Value("${jdbc.url}")
    6.     private String url;
    7.     @Value("${jdbc.username}")
    8.     private String username;
    9.     @Value("${jdbc.password}")
    10.     private String password;
    11.  
    12.     @Bean
    13.     public DataSource dataSource(){
    14.         DruidDataSource dataSource = new DruidDataSource();
    15.         dataSource.setDriverClassName(driver);
    16.         dataSource.setUrl(url);
    17.         dataSource.setUsername(username);
    18.         dataSource.setPassword(password);
    19.         return dataSource;
    20.     }
    21.  
    22.     @Bean
    23.     public PlatformTransactionManager transactionManager(DataSource dataSource){
    24.         DataSourceTransactionManager ds = new DataSourceTransactionManager(dataSource);
    25.         return ds;
    26.     }
    27.  
    28. }

     MyBatisConfig

    1. public class MyBatisConfig {
    2.  
    3.     @Bean
    4.     public SqlSessionFactoryBean sqlSessionFactory(DataSource dataSource){
    5.         SqlSessionFactoryBean factoryBean = new SqlSessionFactoryBean();
    6.         factoryBean.setTypeAliasesPackage("cn.itaxu.domain");
    7.         factoryBean.setDataSource(dataSource);
    8.         return factoryBean;
    9.     }
    10.  
    11.     @Bean
    12.     public MapperScannerConfigurer mapperScannerConfigurer(){
    13.         MapperScannerConfigurer msc = new MapperScannerConfigurer();
    14.         msc.setBasePackage("cn.itaxu.dao");
    15.         return msc;
    16.     }
    17.  
    18. }

    ServletConfig

    1. public class ServletConfig extends AbstractAnnotationConfigDispatcherServletInitializer {
    2.  
    3.     // 加载spring配置
    4.     @Override
    5.     protected Class[] getRootConfigClasses() {
    6.         return new Class[]{SpringConfig.class};
    7.     }
    8.  
    9.     // 加载springMVC配置
    10.     @Override
    11.     protected Class[] getServletConfigClasses() {
    12.         return new Class[]{SpringMvcConfig.class};
    13.     }
    14.  
    15.     // 设置哪些方法归属springMVC处理
    16.     @Override
    17.     protected String[] getServletMappings() {
    18.         return new String[]{"/"};
    19.     }
    20.  
    21.     // 处理POST请求中文乱码问题
    22.     @Override
    23.     protected Filter[] getServletFilters() {
    24.         CharacterEncodingFilter filter = new CharacterEncodingFilter("UTF-8");
    25.         return new Filter[]{filter};
    26.     }
    27.  
    28. }

    SpringConfig

    1. @Configuration
    2. @ComponentScan("cn.itaxu.service")
    3. @PropertySource("classpath:jdbc.properties")
    4. @Import({JdbcConfig.class,MyBatisConfig.class})
    5. @EnableTransactionManagement
    6. public class SpringConfig {
    7. }

    SpringMvcConfig

    1. @Configuration
    2. @ComponentScan({"cn.itaxu.controller","cn.itaxu.config"})
    3. @EnableWebMvc
    4. public class SpringMvcConfig {
    5. }

    SpringMvcSupport

    1. @Configuration
    2. public class SpringMvcSupport extends WebMvcConfigurationSupport {
    3.     @Override
    4.     protected void addResourceHandlers(ResourceHandlerRegistry registry) {
    5.         registry.addResourceHandler("/pages/**").addResourceLocations("/pages/");
    6.         registry.addResourceHandler("/img/**").addResourceLocations("/img/");
    7.     }
    8. }

    3.controller控制

    BrandController

    1. @RestController
    2. @RequestMapping("/brands")
    3. public class BrandController {
    4.  
    5.     @Autowired
    6.     private BrandService brandService;
    7.  
    8.     @PostMapping
    9.     public Result save(@RequestBody Brand brand){
    10.         boolean flag = brandService.save(brand);
    11.         return new Result(flag ? Code.SAVE_OK:Code.SAVE_ERR,flag);
    12.     }
    13.  
    14.     @DeleteMapping("/{id}")
    15.     public Result deleteById(@PathVariable Integer id){
    16.         boolean flag = brandService.deleteById(id);
    17.         return new Result(flag ? Code.DELETE_OK:Code.DELETE_ERR,flag);
    18.     }
    19.  
    20.     @DeleteMapping
    21.     public Result deleteMultiply(@RequestBody int[] ids){
    22.         boolean flag = brandService.deleteMultiply(ids);
    23.         return new Result(flag ? Code.DELETE_OK:Code.DELETE_ERR,flag);
    24.     }
    25.  
    26.     @PutMapping
    27.     public Result update(@RequestBody Brand brand){
    28.         System.out.println(brand);
    29.         boolean flag = brandService.update(brand);
    30.         return new Result(flag ? Code.UPDATE_OK:Code.UPDATE_ERR,flag);
    31.     }
    32.  
    33.     @GetMapping("/{id}")
    34.     public Result getById(@PathVariable Integer id){
    35.         Brand brand = brandService.getById(id);
    36.         Integer code =brand != null ? Code.GET_OK:Code.GET_ERR;
    37.         String msg = brand != null ? "success":"fail";
    38.         return new Result(code,brand,msg);
    39.     }
    40.  
    41.     @GetMapping
    42.     public Result getAll(){
    43.         List brandList = brandService.getAll();
    44.         Integer code = brandList != null ? Code.GET_OK:Code.GET_ERR;
    45.         String msg = brandList != null ? "success":"fail";
    46.         return new Result(code,brandList,msg);
    47.     }
    48.     
    49.     @PostMapping("/{currentPage}/{pageSize}")
    50.     public Result selectByPageAndCondition(@PathVariable int currentPage,@PathVariable int pageSize,
    51.                                            @RequestBody Brand brand) {
    52.         PageBean pageBean = brandService.selectByPageAndCondition(currentPage, pageSize, brand);
    53.         Integer code = pageBean != null ? Code.GET_OK:Code.GET_ERR;
    54.         String msg = pageBean != null ? "success":"fail";
    55.         return new Result(code,pageBean,msg);
    56.     }
    57. }

    Code 响应状态码

    1. public class Code {
    2.     public static final Integer SAVE_OK = 20011;
    3.     public static final Integer DELETE_OK = 20021;
    4.     public static final Integer UPDATE_OK = 20031;
    5.     public static final Integer GET_OK = 20041;
    6.  
    7.     public static final Integer SAVE_ERR = 20010;
    8.     public static final Integer DELETE_ERR = 20020;
    9.     public static final Integer UPDATE_ERR = 20030;
    10.     public static final Integer GET_ERR = 20040;
    11.  
    12.     public static final Integer SYSTEM_ERR = 50001;
    13.     public static final Integer SYSTEM_TIMEOUT_ERR = 50002;
    14.     public static final Integer SYSTEM_UNKNOW_ERR = 59999;
    15.  
    16.     public static final Integer BUSINESS_ERR = 60002;
    17. }
    ProjectExceptionAdvice 项目异常通知
    1. @RestControllerAdvice
    2. public class ProjectExceptionAdvice {
    3.     @ExceptionHandler(SystemException.class)
    4.     public Result doSystemException(SystemException ex){
    5.         // 记录日志
    6.         // 发送消息给运维
    7.         // 发送消息给开发人员,ex对象发送给开发人员
    8.         return new Result(ex.getCode(),"null","系统异常");
    9.     }
    10.  
    11.     @ExceptionHandler(BusinessException.class)
    12.     public Result doBusinessException(BusinessException ex){
    13.         return new Result(ex.getCode(),"null","业务异常");
    14.     }
    15.  
    16.  
    17.     @ExceptionHandler(Exception.class)
    18.     public Result doException(Exception ex){
    19.         // 记录日志
    20.         // 发送消息给运维
    21.         // 发送消息给开发人员,ex对象发送给开发人员
    22.         return new Result(Code.SYSTEM_UNKNOW_ERR,"null","系统繁忙,请稍后再试!");
    23.     }
    24. }

    Result 统一格式数据

    1. public class Result {
    2.     private Object data;
    3.     private Integer code;
    4.     private String  msg;
    5.  
    6.     public Result() {
    7.     }
    8.  
    9.     public Result(Integer code,Object data) {
    10.         this.data = data;
    11.         this.code = code;
    12.     }
    13.  
    14.     public Result(Integer code, Object data, String msg) {
    15.         this.data = data;
    16.         this.code = code;
    17.         this.msg = msg;
    18.     }
    19.  
    20.     public Object getData() {
    21.         return data;
    22.     }
    23.  
    24.     public void setData(Object data) {
    25.         this.data = data;
    26.     }
    27.  
    28.     public Integer getCode() {
    29.         return code;
    30.     }
    31.  
    32.     public void setCode(Integer code) {
    33.         this.code = code;
    34.     }
    35.  
    36.     public String getMsg() {
    37.         return msg;
    38.     }
    39.  
    40.     public void setMsg(String msg) {
    41.         this.msg = msg;
    42.     }
    43.  
    44. }

    4.exception 细化异常

    BusinessException 业务异常

    1. public class BusinessException extends RuntimeException{
    2.     private Integer code;
    3.  
    4.     public Integer getCode() {
    5.         return code;
    6.     }
    7.  
    8.     public void setCode(Integer code) {
    9.         this.code = code;
    10.     }
    11.  
    12.     public BusinessException(Integer code, String message) {
    13.         super(message);
    14.         this.code = code;
    15.     }
    16.  
    17.     public BusinessException(Integer code, String message, Throwable cause) {
    18.         super(message, cause);
    19.         this.code = code;
    20.     }
    21.  
    22. }
    SystemException 系统异常
    1. public class SystemException extends RuntimeException{
    2.     private Integer code;
    3.  
    4.     public Integer getCode() {
    5.         return code;
    6.     }
    7.  
    8.     public void setCode(Integer code) {
    9.         this.code = code;
    10.     }
    11.  
    12.     public SystemException(Integer code, String message) {
    13.         super(message);
    14.         this.code = code;
    15.     }
    16.  
    17.     public SystemException(Integer code, String message, Throwable cause) {
    18.         super(message, cause);
    19.         this.code = code;
    20.     }
    21.  
    22. }

    5.service

    BrandService接口

    1. @Transactional
    2. public interface BrandService {
    3.  
    4.     /**
    5.      * 添加数据
    6.      * @param brand
    7.      * @return
    8.      */
    9.     public boolean save(Brand brand);
    10.  
    11.     /**
    12.      * 根据id删除
    13.      * @param id
    14.      * @return
    15.      */
    16.     public boolean deleteById(Integer id);
    17.  
    18.     /**
    19.      * 根据ids批量删除
    20.      * @param ids
    21.      * @return
    22.      */
    23.     public boolean deleteMultiply(@Param("ids") int[] ids);
    24.  
    25.     /**
    26.      * 修改数据
    27.      * @param brand
    28.      * @return
    29.      */
    30.     public boolean update(Brand brand);
    31.  
    32.     /**
    33.      * 查询单条
    34.      * @param id
    35.      * @return
    36.      */
    37.     public Brand getById(Integer id);
    38.  
    39.     /**
    40.      * 查询所有
    41.      * @return
    42.      */
    43.     public List getAll();
    44.  
    45.     /**
    46.      * 分页查询
    47.       * @param currentPage
    48.      * @param pageSize
    49.      * @return
    50.      */
    51.     PageBean selectByPage(int currentPage, int pageSize);
    52.  
    53.     /**
    54.      * 分页条件查询
    55.      * @param currentPage
    56.      * @param pageSize
    57.      * @param brand
    58.      * @return
    59.      */
    60.     PageBean selectByPageAndCondition(int currentPage, int pageSize, Brand brand);
    61. }

    BrandServiceImpl

    1. @Service
    2. public class BrandServiceImpl implements BrandService {
    3.     @Autowired
    4.     private BrandDao brandDao;
    5.     
    6.     @Override
    7.     public boolean save(Brand brand) {
    8.         return brandDao.save(brand) > 0;
    9.     }
    10.  
    11.     @Override
    12.     public boolean deleteById(Integer id) {
    13.         return brandDao.deleteById(id) > 0;
    14.     }
    15.  
    16.     @Override
    17.     public boolean deleteMultiply(int[] ids) {
    18.         return brandDao.deleteMultiply(ids) > 0;
    19.     }
    20.  
    21.     @Override
    22.     public boolean update(Brand brand) {
    23.         return brandDao.update(brand) > 0;
    24.     }
    25.  
    26.     @Override
    27.     public Brand getById(Integer id) {
    28.         return brandDao.getById(id);
    29.     }
    30.  
    31.     @Override
    32.     public List getAll() {
    33.         return brandDao.getAll();
    34.     }
    35.  
    36.     @Override
    37.     public PageBean selectByPage(int currentPage, int pageSize) {
    38.         int begin = (currentPage-1) * pageSize;
    39.         int size = pageSize;
    40.         List rows = brandDao.selectByPage(begin, size);
    41.         int totalCount = brandDao.selectTotalCount();
    42.         PageBean pageBean = new PageBean();
    43.         pageBean.setRows(rows);
    44.         pageBean.setTotalCount(totalCount);
    45.         return pageBean;
    46.     }
    47.  
    48.     @Override
    49.     public PageBean selectByPageAndCondition(int currentPage, int pageSize, Brand brand) {
    50.         int begin = (currentPage-1) * pageSize;
    51.         int size = pageSize;
    52.  
    53.         // 处理模糊查询
    54.         String brandName = brand.getBrandName();
    55.         if (brandName!=null&&brandName.length()>0){
    56.             brand.setBrandName("%"+brandName+"%");
    57.         }
    58.         String companyName = brand.getCompanyName();
    59.         if (companyName!=null&&companyName.length()>0){
    60.             brand.setCompanyName("%"+companyName+"%");
    61.         }
    62.  
    63.         // 查询当前页数据
    64.         List brandList = brandDao.selectByPageAndCondition(begin, size, brand);
    65.         // 查询当前页总记录条数
    66.         int totalCount = brandDao.selectTotalCountByCondition(brand);
    67.  
    68.         // 封装PageBean
    69.         PageBean pageBean = new PageBean<>(brandList,totalCount);
    70.         return pageBean;
    71.     }
    72.  
    73. }

    6.前端代码

    1. <div id="app">
    2.         
    3.         <el-menu
    4.                 :default-active="activeIndex2"
    5.                 class="el-menu-demo"
    6.                 mode="horizontal"
    7.                 @select="handleSelect"
    8.                 background-color="#545c64"
    9.                 text-color="#fff"
    10.                 active-text-color="#ffd04b">
    11.             <template>
    12.                 <h3 align="center"><img src="../img/E-commerce.png" width="50" height="50" align="center">
    13.                     电商后台数据模型
    14.                 h3>
    15.             template>
    16.             <el-menu-item index="1">处理中心el-menu-item>
    17.             <el-submenu index="2">
    18.                 <template slot="title">我的工作台template>
    19.                 <el-menu-item index="2-1">后台品牌模型el-menu-item>
    20.             el-submenu>
    21.             <el-menu-item index="3" disabled>消息中心el-menu-item>
    22.             <el-menu-item index="4"><a href="https://www.ele.me" target="_blank">订单管理a>el-menu-item>
    23.         el-menu>
    24.  
    26.     <el-form :inline="true" :model="brand" class="demo-form-inline">
    27.  
    28.         <el-form-item label="当前状态">
    29.             <el-select v-model="brand.status" placeholder="当前状态">
    30.                 <el-option label="启用" value="1">el-option>
    31.                 <el-option label="禁用" value="0">el-option>
    32.             el-select>
    33.         el-form-item>
    34.  
    35.         <el-form-item label="企业名称">
    36.             <el-input v-model="brand.companyName" placeholder="企业名称">el-input>
    37.         el-form-item>
    38.  
    39.         <el-form-item label="品牌名称">
    40.             <el-input v-model="brand.brandName" placeholder="品牌名称">el-input>
    41.         el-form-item>
    42.  
    43.         <el-form-item>
    44.             <el-button type="primary" @click="onSubmit">查询el-button>
    45.         el-form-item>
    46.     el-form>
    47.  
    49.     <el-row style="margin-left: 20%">
    50.         <el-button type="danger" plain @click="deleteBrandByIds">批量删除el-button>
    51.         <el-button type="primary" plain @click="dialogVisible = true">新增el-button>
    52.     el-row>
    53.  
    55.     <el-dialog
    56.             title="编辑品牌"
    57.             :visible.sync="dialogVisible"
    58.             width="30%"
    59.     >
    60.  
    61.         <el-form ref="form" :model="brand_add" label-width="80px">
    62.             <el-form-item label="品牌名称">
    63.                 <el-input v-model="brand_add.brandName">el-input>
    64.             el-form-item>
    65.  
    66.             <el-form-item label="企业名称">
    67.                 <el-input v-model="brand_add.companyName">el-input>
    68.             el-form-item>
    69.  
    70.             <el-form-item label="排序">
    71.                 <el-input v-model="brand_add.ordered">el-input>
    72.             el-form-item>
    73.  
    74.             <el-form-item label="备注">
    75.                 <el-input type="textarea" v-model="brand_add.description">el-input>
    76.             el-form-item>
    77.  
    78.             <el-form-item label="状态">
    79.                 <el-switch
    80.                         v-model="brand_add.status"
    81.                         active-value="1"
    82.                         inactive-value="0"
    83.                 >
    84.                 el-switch>
    85.             el-form-item>
    86.  
    87.             <el-form-item>
    88.                 <el-button type="primary" @click="addBrand">提交el-button>
    89.                 <el-button @click="cancelAdd">取消el-button>
    90.             el-form-item>
    91.         el-form>
    92.  
    93.     el-dialog>
    94.  
    96.     <el-dialog
    97.             title="修改数据"
    98.             :visible.sync="updateDialogVisible"
    99.             width="30%">
    100.    <el-form ref="form" :model="update" label-width="80px">
    101.   <el-form-item label="品牌名称">
    102.     <el-input v-model="update.brandName">el-input>
    103.   el-form-item>
    104.   <el-form-item label="企业名称">
    105.        <el-input v-model="update.companyName">el-input>
    106.   el-form-item>
    107.   <el-form-item label="排序">
    108.     <el-input v-model="update.ordered">el-input>
    109.   el-form-item>
    110.   <el-form-item label="备注">
    111.     <el-input type="textarea" v-model="update.description">el-input>
    112.   el-form-item>
    113.   <el-form-item label="状态">
    114.       <el-switch
    115.               v-model="update.status"
    116.               active-value="1"
    117.               inactive-value="0">
    118.       el-switch>
    119.   el-form-item>
    120.        <el-form-item>
    121.            <el-button type="primary" @click="updateBrand">提交el-button>
    122.            <el-button @click="cancel">取消el-button>
    123.        el-form-item>
    124.   el-form>
    125.  
    126.     el-dialog>
    127.  
    128.     <h4 align="center"><img src="../img/product.png" width="50" height="50" align="center"><font color="gray">产品列表
    129.     font>h4>
    130.  
    131.     
    132.     <template>
    133.     <el-table
    134.             :data="tableData"
    135.             style="width: 100%"
    136.             :row-class-name="tableRowClassName"
    137.             @selection-change="handleSelectionChange"
    138.     >
    139.         <el-table-column
    140.                 type="selection"
    141.                 width="55"
    142.         >
    143.         el-table-column>
    144.         <el-table-column
    145.                 type="index"
    146.                 width="50">
    147.         el-table-column>
    148.         <el-table-column
    149.                 prop="brandName"
    150.                 label="品牌名称"
    151.                 align="center"
    152.                 >
    153.         el-table-column>
    154.         <el-table-column
    155.                 prop="companyName"
    156.                 label="企业名称"
    157.                 align="center"
    158.                 >
    159.         el-table-column>
    160.         <el-table-column
    161.                 prop="ordered"
    162.                 label="排序"
    163.                 align="center"
    164.         >
    165.         el-table-column>
    166.         <el-table-column
    167.                 prop="description"
    168.                 label="备注"
    169.                 align="center"
    170.         >
    171.         el-table-column>
    172.         <el-table-column
    173.                 prop="statusStr"
    174.                 label="当前状态"
    175.                 align="center"
    176.         >
    177.         el-table-column>
    178.         <el-table-column
    179.                 prop="address"
    180.                 label="操作"
    181.                 align="center"
    182.         >
    183.             <el-row>
    184.                 <el-button type="primary" @click="modify">修改el-button>
    185.                 <el-button type="danger" @click="deleteById">删除el-button>
    186.             el-row>
    187.         el-table-column>
    188.     el-table>
    189.     template>
    190.  
    192.     <div class="block">
    193.         <el-pagination
    194.                 @size-change="handleSizeChange"
    195.                 @current-change="handleCurrentChange"
    196.                 :current-page="currentPage"
    197.                 :page-sizes="[5, 10, 15, 20]"
    198.                 :page-size="pageSize"
    199.                 layout="total, sizes, prev, pager, next, jumper"
    200.                 :total="totalCount">
    201.         el-pagination>
    202.     div>
    203. div>

    js

    2. <script src="https://cdn.staticfile.org/axios/1.1.3/axios.js">script>
    4. <link rel="stylesheet" href="https://cdn.staticfile.org/element-ui/2.15.10/theme-chalk/index.css">
    6. <script src="https://cdn.staticfile.org/element-ui/2.15.10/index.js">script>
    7. <script>
    8.     new Vue({
    9.         el:"#app",
    10.         mounted(){
    11.             //当页面加载完毕后,发送异步请求
    12.            this.selectAll();
    13.         },
    14.         methods: {
    15.             // 查询所有品牌数据
    16.             selectAll(){
    17.                axios({
    18.                    method:"post",
    19.                    url:`/brands/${this.currentPage}/${this.pageSize}`,
    20.                    data:this.brand,
    21.                    headers: {
    22.                        'Content-Type': 'application/json;charset=UTF-8'
    23.                    }
    24.                }).then((resp)=>{
    25.                    if (resp.data.code == 20041) {
    26.                        this.tableData = resp.data.data.rows;
    27.                        this.totalCount = resp.data.data.totalCount
    28.                    }else if (resp.data.code == 20040){
    29.                        this.$message.error('获取数据失败!').center = true;
    30.                    }else {
    31.                        this.$message.error(resp.data.msg).center = true;
    32.                    }
    33.                })
    34.             },
    35.             resetForm(formName) {
    36.                 this.$refs[formName].resetFields();
    37.             },
    38.             cancelAdd(){
    39.                 this.dialogVisible = false;
    40.                 // 用户点击了取消按钮
    41.                 this.$message({
    42.                     showClose: true,
    43.                     message: '您取消了添加数据!',
    44.                     center:true
    45.                 });
    46.             },
    47.             modify(){
    48.                 for (let i = 0; i < this.multipleSelection.length; i++) {
    49.                     var selectionElement = this.multipleSelection[i];
    50.                     this.update.id = selectionElement.id;
    51.                 }
    52.                 if (this.update.id == '' || this.update.id == null){
    53.                         this.$message({
    54.                             showClose: true,
    55.                             message: '请选中您要修改的数据!',
    56.                             type: 'error',
    57.                             center:true,
    58.                         });
    59.                         return;
    60.                 }
    61.                   axios.get(`/brands/${this.update.id}`).then((resp)=>{
    62.                      if (resp.data.code==20041){
    63.                          this.update = resp.data.data;
    64.                          this.updateDialogVisible = true;
    65.                      }
    66.                   });
    67.                 },
    68.             cancel(){
    69.                 this.updateDialogVisible = false;
    70.                 this.$message({
    71.                     showClose: true,
    72.                     message: '您已取消修改',
    73.                     center:true
    74.                 });
    75.             },
    76.  
    77.             tableRowClassName({row, rowIndex}) {
    78.                 if (rowIndex === 1) {
    79.                     return 'warning-row';
    80.                 } else if (rowIndex === 3) {
    81.                     return 'success-row';
    82.                 }
    83.                 return '';
    84.             },
    85.             // 复选框选中后执行的方法
    86.             handleSelectionChange(val) {
    87.                 this.multipleSelection = val;
    88.             },
    89.             // 查询的方法
    90.             onSubmit() {
    91.                 this.selectAll();
    92.             },
    93.             // 添加数据
    94.             addBrand(){
    95.                 axios({
    96.                     method:'post',
    97.                     url:'/brands',
    98.                     data:this.brand_add,
    99.                     headers:{
    100.                         'Content-Type':'application/json;charset=UTF-8'
    101.                     }
    102.                 }).then( (resp) => {
    103.                     if (resp.data.code==20011){
    104.                         // 关闭添加数据对话框表单
    105.                         this.dialogVisible = false;
    106.                         // 弹出提示信息
    107.                         this.$message({
    108.                             message: '添加数据成功!',
    109.                             type: 'success',
    110.                             center: true
    111.                         });
    112.                     }else if (resp.data.code==20010){
    113.                         this.$message.error("添加数据失败!").center = true;
    114.                     }else {
    115.                         this.$message.error(resp.data.msg).center = true;
    116.                     }
    117.                 }).finally(()=>{
    118.                     // 重新查询数据
    119.                     this.selectAll();
    120.                     this.resetForm(this.brand_add)
    121.                 })
    122.             },
    123.             // 更新数据
    124.             updateBrand(){
    125.                 axios.put("/brands",this.update).then(resp=>{
    126.                     if (resp.data.code == 20031) {
    127.                         this.updateDialogVisible = false;
    128.                         this.$message({
    129.                             showClose: true,
    130.                             message: '更新数据成功!',
    131.                             type: 'success',
    132.                             center: true
    133.                         });
    134.                     }else if (resp.data.code == 20030){
    135.                         this.$message.error("更新数据失败!").center = true
    136.                     }else {
    137.                         this.$message.error(resp.data.msg).center = true
    138.                     }
    139.                 }).finally(()=>{
    140.                     this.selectAll();
    141.                 });
    142.                 this.update.id = '';
    143.             },
    144.             // 批量删除
    145.             deleteBrandByIds(){
    146.                 // 弹出确认提示框
    147.                 this.$confirm('此操作将永久删除数据, 是否继续?', '提示', {
    148.                     confirmButtonText: '确定',
    149.                     cancelButtonText: '取消',
    150.                     type: 'warning'
    151.                 }).then(() => {
    152.  
    153.                     // 1.创建id数组,从this.multipleSelection中获取
    154.                     for (let i = 0; i < this.multipleSelection.length; i++) {
    155.                         let selectionElement = this.multipleSelection[i];
    156.                         this.selectedIds[i] = selectionElement.id
    157.                     }
    158.                   if (this.selectedIds.length < 1){
    159.                       this.$message({
    160.                           showClose: true,
    161.                           message: '请选中您要删除的数据!',
    162.                           type: 'error',
    163.                           center:true,
    164.                       });
    165.                       return;
    166.                   }
    167.                     // 2.发送ajax请求
    168.                     axios({
    169.                         method: 'delete',
    170.                         url: '/brands',
    171.                         data:this.selectedIds,
    172.                         headers:{
    173.                             'Content-Type':'application/json;charset=utf-8'
    174.                         }
    175.                     }).then( (resp) => {
    176.                         if (resp.data.code == 20021) {
    177.                             // 重新查询数据
    178.                             this.selectAll();
    179.                             this.$message({
    180.                                 type: 'success',
    181.                                 message: '删除成功!',
    182.                                 center: true
    183.                             });
    184.                         }else if (resp.data.code == 20020){
    185.                             this.$message.error("删除失败!").center = true
    186.                         }else {
    187.                             this.$message.error(resp.data.msg).center = true
    188.                         }
    189.                     });
    190.                 }).catch(() => {
    191.                     // 用户点击取消按钮
    192.                     this.$message({
    193.                         type: 'info',
    194.                         message: '您已取消删除',
    195.                         center:true
    196.                     });
    197.                 });
    198.                 // 清除数组
    199.                 this.selectedIds = [];
    200.             },
    201.  
    202.  
    203.             // 删除单条数据
    204.             deleteById(){
    205.                 for (let i = 0; i < this.multipleSelection.length; i++) {
    206.                     var selectionElement = this.multipleSelection[i];
    207.                     this.selectedId = selectionElement.id;
    208.                 }
    209.                 if (this.selectedId == '' || this.selectedId == null){
    210.                     this.$message({
    211.                         showClose: true,
    212.                         message: '请选中您要删除的数据!',
    213.                         type: 'error',
    214.                         center:true,
    215.                     });
    216.                     return;
    217.                 }
    218.                 axios.delete(`/brands/${this.selectedId}`)
    219.                     .then(resp=>{
    220.                             this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
    221.                                 confirmButtonText: '确定',
    222.                                 cancelButtonText: '取消',
    223.                                 type: 'warning'
    224.                             }).then(() => {
    225.                                 if (resp.data.code == 20021) {
    226.                                     this.$message({
    227.                                         type: 'success',
    228.                                         message: '删除成功!',
    229.                                         center: true
    230.                                     });
    231.                                 }else if (resp.data.code == 20020){
    232.                                     this.$message.error("删除失败!").center = true
    233.                                 }else {
    234.                                     this.$message.error(resp.data.msg).center = true
    235.                                 }
    236.                             }).catch(() => {
    237.                                 this.$message({
    238.                                     type: 'info',
    239.                                     message: '您已取消删除',
    240.                                     center:true,
    241.                                 });
    242.                             });
    243.                     }).finally(()=>{
    244.                     // 重新查询数据
    245.                     this.selectAll();
    246.                 });
    247.                 // 清空selectedId
    248.                 this.selectedId = ''
    249.             },
    250.             // 分页
    251.             handleSizeChange(val) {
    252.                 // 重新设置每页显示条数
    253.                 this.pageSize = val;
    254.                 this.selectAll();
    255.             },
    256.             handleCurrentChange(val) {
    257.                 // 重新设置当前页码
    258.                 this.currentPage = val;
    259.                 this.selectAll();
    260.             }
    261.         },
    262.         data() {
    263.             return {
    264.                 // 被选中的单个id
    265.                 selectedId:'',
    266.                 // 总记录条数
    267.                 totalCount:'',
    268.                 // 每页显示条数
    269.                 pageSize:10,
    270.                 // 修改数据表单显示状态
    271.                 updateDialogVisible:false,
    272.                 // 当前页码
    273.                 currentPage:1,
    274.                 // 控制添加数据对话框表单是否显示
    275.                 dialogVisible: false,
    276.                 // 品牌模型数据
    277.                 brand: {
    278.                     companyName: '',
    279.                     status: '',
    280.                     brandName:'',
    281.                     id:'',
    282.                     ordered:'',
    283.                     description:'',
    284.                 },
    285.                 // 更新模型数据
    286.                 update: {
    287.                     companyName: '',
    288.                     status: '',
    289.                     brandName:'',
    290.                     id:'',
    291.                     ordered:'',
    292.                     description:'',
    293.                 },
    294.                 // 添加模型数据
    295.                  brand_add: {
    296.                     companyName: '',
    297.                     status: '',
    298.                     brandName:'',
    299.                     id:'',
    300.                     ordered:'',
    301.                     description:'',
    302.                 },
    303.                 // 复选框选中数据集合
    304.                 multipleSelection:[],
    305.                 // 被选中的id数组
    306.                 selectedIds:[],
    307.                 // 表格数据
    308.                 tableData: []
    309.             }
    310.         },
    311.  
    312.     })
    313. script>

    7.页面展示

     

     

     

    结语：

    希望这些能够帮助到你的学习!!! 如果有需要源码的私信我

  • 相关阅读:
    【色彩管理】ICC曲线制作教程
    工业设计里的四个细节你知道吗？
    MySQL数据库进阶操作（超详细大总结）
    获取一段程序运行的时间
    Spring 6【数据绑定之类型转换(Type Conversion)】(十一)-全面详解（学习总结---从入门到深化）
    【机器学习】课程设计布置：某闯关类手游用户流失预测
    ES 知识
    隔离上网，安全上网
    大语言模型(LLM)综述(四)：如何适应预训练后的大语言模型
    危化企业双重预防机制数字化建设进入全面实施阶段
  • 原文地址：https://blog.csdn.net/weixin_64144937/article/details/127910971