月木学途开发 5.轮播图模块

2023-09-21 14:46:51

概述

效果图

 

数据库设计

轮播图表
DROP TABLE IF EXISTS `banner`;
CREATE TABLE `banner` (
  `bannerId` int(11) NOT NULL AUTO_INCREMENT,
  `bannerUrl` longtext,
  `bannerDesc` varchar(255) DEFAULT NULL,
  `bannerTypeId` int(11) DEFAULT NULL,
  PRIMARY KEY (`bannerId`)
) ENGINE=InnoDB AUTO_INCREMENT=4 DEFAULT CHARSET=utf8mb4;

轮播图类型表
DROP TABLE IF EXISTS `banner_type`;
CREATE TABLE `banner_type` (
  `bannerTypeId` int(11) NOT NULL AUTO_INCREMENT,
  `bannerTypeName` varchar(255) DEFAULT NULL,
  PRIMARY KEY (`bannerTypeId`)
) ENGINE=InnoDB AUTO_INCREMENT=4 DEFAULT CHARSET=utf8mb4;

实体类设计

轮播图
package jkw.pojo;

import com.baomidou.mybatisplus.annotation.TableField;
import com.baomidou.mybatisplus.annotation.TableId;
import lombok.Data;

import java.io.Serializable;

/**
 * 轮播图
 */
@Data
public class Banner implements Serializable {
    @TableId
    private Integer bannerId;
    private String bannerUrl;//图片
    private String bannerDesc;//描述

    private Integer bannerTypeId;//类型
    @TableField(exist = false)
    private BannerType bannerType;
}

轮播图类型
package jkw.pojo;

import com.baomidou.mybatisplus.annotation.TableId;
import lombok.Data;

import java.io.Serializable;

/**
 * 轮播图类型
 */
@Data
public class BannerType implements Serializable {
    @TableId
    private Integer bannerTypeId;
    private String bannerTypeName;//类型名
}

Mapper层开发

BannerTypeMapper
package jkw.mapper;

import com.baomidou.mybatisplus.core.mapper.BaseMapper;
import jkw.pojo.BannerType;

public interface BannerTypeMapper extends BaseMapper<BannerType> {
}

BannerMapper
package jkw.mapper;

import com.baomidou.mybatisplus.core.mapper.BaseMapper;
import jkw.pojo.Banner;

public interface BannerMapper extends BaseMapper<Banner> {
}

Service层开发

BannerTypeService
package jkw.service;

import com.baomidou.mybatisplus.extension.plugins.pagination.Page;
import jkw.pojo.BannerType;

import java.util.List;

public interface BannerTypeService {
    void add(BannerType BannerType);

    void update(BannerType BannerType);

    void delete(Integer id);

    BannerType findById(Integer id);

    List<BannerType> findAll();

    Page<BannerType> search(String search, int page, int size);
}

BannerTypeServiceImpl
package jkw.service.impl;

import com.baomidou.mybatisplus.core.conditions.query.QueryWrapper;
import com.baomidou.mybatisplus.extension.plugins.pagination.Page;
import jkw.mapper.BannerTypeMapper;
import jkw.pojo.BannerType;
import jkw.service.BannerTypeService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;
import org.springframework.transaction.annotation.Transactional;

import java.util.List;

@Service
@Transactional
public class BannerTypeServiceImpl implements BannerTypeService {
    @Autowired
    private BannerTypeMapper bannerTypeMapper;

    @Override
    public void add(BannerType BannerType) {
        bannerTypeMapper.insert(BannerType);
    }

    @Override
    public void update(BannerType BannerType) {
        bannerTypeMapper.updateById(BannerType);
    }

    @Override
    public void delete(Integer id) {
        bannerTypeMapper.deleteById(id);
    }

    @Override
    public BannerType findById(Integer id) {
        return bannerTypeMapper.selectById(id);
    }

    @Override
    public List<BannerType> findAll() {
        return bannerTypeMapper.selectList(null);
    }

    @Override
    public Page<BannerType> search(String search, int page, int size) {
        QueryWrapper queryWrapper = new QueryWrapper();
        if (search != null) {

        }
        return bannerTypeMapper.selectPage(new Page<>(page, size), queryWrapper);
    }
}

BannerService
package jkw.service;

import com.baomidou.mybatisplus.extension.plugins.pagination.Page;
import jkw.pojo.Banner;

import java.util.List;

public interface BannerService {
    void add(Banner Banner);

    void update(Banner Banner);

    void delete(Integer id);

    Banner findById(Integer id);

    List<Banner> findAll();

    Page<Banner> search(String search, int page, int size);
}

BannerServiceImpl
package jkw.service.impl;

import com.baomidou.mybatisplus.core.conditions.query.QueryWrapper;
import com.baomidou.mybatisplus.extension.plugins.pagination.Page;
import jkw.mapper.BannerMapper;
import jkw.pojo.Banner;
import jkw.service.BannerService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;
import org.springframework.transaction.annotation.Transactional;

import java.util.List;

@Service
@Transactional
public class BannerServiceImpl implements BannerService {
    @Autowired
    private BannerMapper bannerMapper;

    @Override
    public void add(Banner Banner) {
        bannerMapper.insert(Banner);
    }

    @Override
    public void update(Banner Banner) {
        bannerMapper.updateById(Banner);
    }

    @Override
    public void delete(Integer id) {
        bannerMapper.deleteById(id);
    }

    @Override
    public Banner findById(Integer id) {
        return bannerMapper.selectById(id);
    }

    @Override
    public List<Banner> findAll() {
        return bannerMapper.selectList(null);
    }

    @Override
    public Page<Banner> search(String search, int page, int size) {
        QueryWrapper queryWrapper = new QueryWrapper();
        if (search != null) {

        }
        return bannerMapper.selectPage(new Page<>(page, size), queryWrapper);
    }
}

控制层开发

BannerTypeCon
package jkw.controller.back;

import com.baomidou.mybatisplus.extension.plugins.pagination.Page;
import jkw.pojo.BannerType;
import jkw.service.BannerTypeService;
import jkw.vo.BaseResult;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.security.access.prepost.PreAuthorize;
import org.springframework.web.bind.annotation.*;

import java.util.List;

@CrossOrigin
@RestController
@RequestMapping("/back/bannerType")
public class BannerTypeCon {
    @Autowired
    private BannerTypeService bannerTypeService;

    /**
     * 新增
     *
     * @param bannerType
     * @return
     */
    @PostMapping("/add")
    @PreAuthorize("hasAnyAuthority('/website/banner')")
    public BaseResult add(BannerType bannerType) {
        bannerTypeService.add(bannerType);
        return BaseResult.ok();
    }

    /**
     * 修改
     *
     * @param bannerType
     * @return
     */
    @PostMapping("/update")
    @PreAuthorize("hasAnyAuthority('/website/banner')")
    public BaseResult update(BannerType bannerType) {
        bannerTypeService.update(bannerType);
        return BaseResult.ok();
    }

    /**
     * 删除
     *
     * @param bannerTypeId
     * @return
     */
    @DeleteMapping("/delete")
    @PreAuthorize("hasAnyAuthority('/website/banner')")
    public BaseResult delete(Integer bannerTypeId) {
        bannerTypeService.delete(bannerTypeId);
        return BaseResult.ok();
    }

    /**
     * 根据id查询
     *
     * @param bannerTypeId
     * @return
     */
    @GetMapping("/findById")
    @PreAuthorize("hasAnyAuthority('/website/banner')")
    public BaseResult findById(Integer bannerTypeId) {
        BannerType bannerType = bannerTypeService.findById(bannerTypeId);
        return BaseResult.ok(bannerType);
    }

    /**
     * 查询所有
     *
     * @return
     */
    @GetMapping("/findAll")
    @PreAuthorize("hasAnyAuthority('/website/banner')")
    public BaseResult findAll() {
        List<BannerType> all = bannerTypeService.findAll();
        return BaseResult.ok(all);
    }

    /**
     * 分页查询
     *
     * @param page
     * @param size
     * @return
     */
    @GetMapping("/search")
    @PreAuthorize("hasAnyAuthority('/website/banner')")
    public BaseResult search(String search, int page, int size) {
        Page<BannerType> brandPage = bannerTypeService.search(search, page, size);
        return BaseResult.ok(brandPage);
    }
}

BannerCon
package jkw.controller.back;

import com.baomidou.mybatisplus.extension.plugins.pagination.Page;
import jkw.pojo.Banner;
import jkw.service.BannerService;
import jkw.vo.BaseResult;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.security.access.prepost.PreAuthorize;
import org.springframework.web.bind.annotation.*;

import java.util.List;

@RequestMapping("/back/banner")
@CrossOrigin
@RestController
public class BannerCon {
    @Autowired
    private BannerService bannerService;

    /**
     * 新增
     *
     * @param banner
     * @return
     */
    @PostMapping("/add")
    @PreAuthorize("hasAnyAuthority('/website/banner')")
    public BaseResult add(Banner banner) {
        bannerService.add(banner);
        return BaseResult.ok();
    }

    /**
     * 修改
     *
     * @param banner
     * @return
     */
    @PostMapping("/update")
    @PreAuthorize("hasAnyAuthority('/website/banner')")
    public BaseResult update(Banner banner) {
        bannerService.update(banner);
        return BaseResult.ok();
    }

    /**
     * 删除
     *
     * @param bannerId
     * @return
     */
    @DeleteMapping("/delete")
    @PreAuthorize("hasAnyAuthority('/website/banner')")
    public BaseResult delete(Integer bannerId) {
        bannerService.delete(bannerId);
        return BaseResult.ok();
    }

    /**
     * 根据id查询
     *
     * @param bannerId
     * @return
     */
    @GetMapping("/findById")
    @PreAuthorize("hasAnyAuthority('/website/banner')")
    public BaseResult findById(Integer bannerId) {
        Banner banner = bannerService.findById(bannerId);
        return BaseResult.ok(banner);
    }

    /**
     * 查询所有
     *
     * @return
     */
    @GetMapping("/findAll")
    @PreAuthorize("hasAnyAuthority('/website/banner')")
    public BaseResult findAll() {
        List<Banner> all = bannerService.findAll();
        return BaseResult.ok(all);
    }

    /**
     * 分页查询
     *
     * @param page
     * @param size
     * @return
     */
    @GetMapping("/search")
    @PreAuthorize("hasAnyAuthority('/website/banner')")
    public BaseResult search(String search, int page, int size) {
        Page<Banner> brandPage = bannerService.search(search, page, size);
        return BaseResult.ok(brandPage);
    }
}

后台ui设计

BannerType.vue
<template>
  <div class="data-container">
    <!--添加 start-->
    <div class="data-header">
      <el-input class="input" @keyup.enter="searchHandle" v-model="searchInfo" size="large"
                placeholder="请输入关键字"></el-input>
      <el-button @click="searchHandle" class="button" size="large" type="primary" plain>搜索</el-button>
      <el-button round @click="addHander" size="large" type="primary">
        <el-icon>
          <DocumentAdd/>
        </el-icon>
        <span>新增</span>
      </el-button>
    </div>
    <!--添加 end-->
    <!--表格数据展示 start-->
    <div class="data-table">
      <el-table :data="dataList.list" style="width: 550px;">
        <el-table-column show-overflow-tooltip label="类型名" prop="bannerTypeName" align="center" width="300"></el-table-column>
        <el-table-column label="操作" align="center" width="220">
          <template #default="scope">
            <el-button size="small" type="primary" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
            <el-button size="small" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!--分页 start-->
      <div class="page">
        <el-pagination background
                       layout="prev,pager,next,jumper"
                       :default-page-size="defaultPageSize"
                       :total="totalData"
                       @current-change="currentChangeHaddler"></el-pagination>
      </div>
      <!--分页 end-->
    </div>
    <!--表格数据展示 end-->
    <!--添加对话框 start-->
    <el-dialog draggable destroy-on-close v-model="dialogAddVisible" title="添加" width="35%" center>
      <el-form inline :model="addFormInfo" label-width="150px">
        <el-form-item label="类型名">
          <el-input v-model="addFormInfo.bannerTypeName"></el-input>
        </el-form-item>
      </el-form>
      <template #footer>
            <span class="dialog-footer">
                <el-button @click="dialogAddVisible = false">取消</el-button>
                <el-button type="primary" @click="sureHandler">确定</el-button>
            </span>
      </template>
    </el-dialog>
    <!--添加对话框 end-->
    <!--编辑对话框 start-->
    <!--destroy-on-close:每次关闭对话框时直接销毁对话框，没有缓存-->
    <el-dialog
        draggable
        destroy-on-close
        v-model="dialogEditorVisible"
        title="编辑"
        width="35%"
        center>
      <el-form inline :model="editorFormInfo" label-width="150px">
        <el-form-item label="类型名">
          <el-input v-model="editorFormInfo.bannerTypeName"></el-input>
        </el-form-item>
      </el-form>
      <template #footer>
            <span class="dialog-footer">
                <el-button @click="dialogEditorVisible = false">取消</el-button>
                <el-button type="primary" @click="sureEditorHandler">确定</el-button>
            </span>
      </template>
    </el-dialog>
    <!--编辑对话框 end-->
  </div>
</template>

<script setup>
import axios from "../../api/index.js"
import {onMounted, reactive, ref} from "vue";
import {ElMessage} from "element-plus";
//初始化分页查询数据
const dataList = reactive({
  list: []
})
//初始化总条数
const totalData = ref(0)
//当前页
const currentPage = ref(1)
//初始化分页显示条数
const defaultPageSize = ref(10)
//搜索初始化状态
const searchInfo = ref("")
//添加添加对话框控制器
const dialogAddVisible = ref(false)
//初始化添加对话框状态
const addFormInfo = reactive({
  bannerTypeName: "",
})
//编辑对话框控制器
const dialogEditorVisible = ref(false)
//初始化编辑对话框状态
const editorFormInfo = reactive({
  bannerTypeId: '',
  bannerTypeName: "",
})
/**
 * 网路请求：分页查询
 *  */
const http = (search, page, size) => {
  axios.banner_type_search({
    search: search,
    page: page,
    size: size
  }).then(res => {
    if (res.data.code == 200) {
      dataList.list = res.data.data.records
      totalData.value = res.data.data.total
    } else {
      ElMessage.error(res.data.message)
    }

  })
}
onMounted(() => {
  http(searchInfo.value, currentPage.value, defaultPageSize.value)
})
/**
 * 分页
 */
const currentChangeHaddler = (nowPage) => {
  http(searchInfo.value, nowPage, defaultPageSize.value)
  currentPage.value = nowPage
}
/**
 * 搜索按钮
 */
const searchHandle = () => {
  http(searchInfo.value, currentPage.value, defaultPageSize.value)
}
/**
 * 添加对话框弹出事件
 */
const addHander = () => {
  dialogAddVisible.value = true
}
/**
 * 添加对话框 确定事件
 */
const sureHandler = () => {
  axios.banner_type_add({
    bannerTypeName: addFormInfo.bannerTypeName,
  }).then(res => {
    if (res.data.code == 200) {
      dialogAddVisible.value = false
      http(searchInfo.value, currentPage.value, defaultPageSize.value)
    } else {
      ElMessage.error(res.data.message)
    }
  })
}
/**
 * 编辑对话框 弹出事件
 *  */
const handleEdit = (index, row) => {

  dialogEditorVisible.value = true
  axios.banner_type_findById({
    bannerTypeId: row.bannerTypeId
  }).then(res => {
    if (res.data.code == 200) {
      editorFormInfo.bannerTypeId = res.data.data.bannerTypeId;
      editorFormInfo.bannerTypeName = res.data.data.bannerTypeName;
    } else {
      ElMessage.error(res.data.data.message)
    }
  })

}
/**
 * 编辑对话框 确定事件
 */
const sureEditorHandler = () => {
  axios.banner_type_update({
    bannerTypeId: editorFormInfo.bannerTypeId,
    bannerTypeName: editorFormInfo.bannerTypeName,
  }).then(res => {
    if (res.data.code == 200) {
      dialogEditorVisible.value = false
      http(searchInfo.value, currentPage.value, defaultPageSize.value)
    } else {
      ElMessage.error(res.data.message)
    }
  })
}
/**删除 */
const handleDelete = (index, row) => {
  ElMessageBox.confirm(
      '确定删除么',
      '删除',
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }
  ).then(() => {
    //确认删除
    axios.banner_type_delete({
      bannerTypeId: row.bannerTypeId
    }).then(res => {
      if (res.data.code == 200) {
        ElMessage({
          type: 'success',
          message: "删除成功！！！",
        })
        //刷新
        http(searchInfo.value, currentPage.value, defaultPageSize.value)
      } else {
        ElMessage({
          type: 'error',
          message: res.data.message,
        })
      }
    })
  }).catch(error => {
    ElMessage({
      type: 'info',
      message: "取消删除",
    })
  })


}
</script>
<style scoped>
.data-container {
  background: linear-gradient(left, rgb(89, 234, 233) 27%, rgb(131, 231, 218) 44%, rgb(69, 150, 216) 88%);
  background: -o-linear-gradient(left, rgb(89, 234, 233) 27%, rgb(131, 231, 218) 44%, rgb(69, 150, 216) 88%);
  background: -ms-linear-gradient(left, rgb(89, 234, 233) 27%, rgb(131, 231, 218) 44%, rgb(69, 150, 216) 88%);
  background: -moz-linear-gradient(left, rgb(89, 234, 233) 27%, rgb(131, 231, 218) 44%, rgb(69, 150, 216) 88%);
  background: -webkit-linear-gradient(left, rgb(89, 234, 233) 27%, rgb(131, 231, 218) 44%, rgb(69, 150, 216) 88%);
  height: 800px;
}

.data-header {
  padding: 20px;
}

.data-header .input {
  width: 300px;
}

.data-table {
  padding: 20px;
}

.page {
  position: fixed;
  right: 10px;
  bottom: 10px;
}
</style>

Banner.vue
<template>
  <div class="data-container">
    <!--添加 start-->
    <div class="data-header">
      <el-input class="input" @keyup.enter="searchHandle" v-model="searchInfo" size="large"
                placeholder="请输入关键字"></el-input>
      <el-button @click="searchHandle" class="button" size="large" type="primary" plain>搜索</el-button>
      <el-button round @click="addHander" size="large" type="primary">
        <el-icon>
          <DocumentAdd/>
        </el-icon>
        <span>新增</span>
      </el-button>
    </div>
    <!--添加 end-->
    <!--表格数据展示 start-->
    <div class="data-table">
      <el-table :data="dataList.list" style="width: 800px;">
        <el-table-column label="图片" prop="bannerUrl" align="center">
          <template #default="scope">
            <img :src="scope.row.bannerUrl" style="height:60px"/>
          </template>
        </el-table-column>
        <el-table-column label="类型" prop="bannerTypeId" align="center">
          <template #default="scope">
                  <span v-for="item in typeList.list" :key="item.bannerTypeId">
                      {{ scope.row.bannerTypeId == item.bannerTypeId ? item.bannerTypeName : '' }}
                  </span>
          </template>
        </el-table-column>
        <el-table-column show-overflow-tooltip label="描述" prop="bannerDesc" align="center"></el-table-column>
        <el-table-column label="操作" align="center" width="220">
          <template #default="scope">
            <el-button size="small" type="primary" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
            <el-button size="small" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!--分页 start-->
      <div class="page">
        <el-pagination background
                       layout="prev,pager,next,jumper"
                       :default-page-size="defaultPageSize"
                       :total="totalData"
                       @current-change="currentChangeHaddler"></el-pagination>
      </div>
      <!--分页 end-->
    </div>
    <!--表格数据展示 end-->
    <!--添加对话框 start-->
    <el-dialog draggable destroy-on-close v-model="dialogAddVisible" title="添加" width="35%" center>
      <el-form inline :model="addFormInfo" label-width="150px">
        <el-form-item label="图片">
          <el-upload list-type="picture-card"
                     :action="uploadStore.fastdfsUploadUrl"
                     :on-success="onHeadImageAddSuccess"
                     :on-remove="onHeadImageAddRemove">
            <el-icon>
            </el-icon>
          </el-upload>
        </el-form-item>
        <el-form-item label="类型">
          <el-select v-model="addFormInfo.bannerTypeId" placeholder="请选择类型" size="large">
            <el-option v-for="item in typeList.list" :key="item.bannerTypeId"
                       :label="item.bannerTypeName"
                       :value="item.bannerTypeId">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="描述">
          <el-input type="textarea" rows="6" style="width: 200px" v-model="addFormInfo.bannerDesc"></el-input>
        </el-form-item>
      </el-form>
      <template #footer>
            <span class="dialog-footer">
                <el-button @click="dialogAddVisible = false">取消</el-button>
                <el-button type="primary" @click="sureHandler">确定</el-button>
            </span>
      </template>
    </el-dialog>
    <!--添加对话框 end-->
    <!--编辑对话框 start-->
    <!--destroy-on-close:每次关闭对话框时直接销毁对话框，没有缓存-->
    <el-dialog
        draggable
        destroy-on-close
        v-model="dialogEditorVisible"
        title="编辑"
        width="35%"
        center>
      <el-form inline :model="editorFormInfo" label-width="150px">
        <el-form-item label="头图">
          <el-upload list-type="picture-card"
                     :action="uploadStore.fastdfsUploadUrl"
                     :on-success="onHeadImageEditSuccess"
          >
            <el-image :src="editorFormInfo.bannerUrl"/>

          </el-upload>
        </el-form-item>
        <el-form-item label="类型">
          <el-select v-model="editorFormInfo.bannerTypeId" placeholder="请选择类型" size="large">
            <el-option v-for="item in typeList.list" :key="item.bannerTypeId"
                       :label="item.bannerTypeName"
                       :value="item.bannerTypeId">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="描述">
          <el-input type="textarea" rows="6" style="width: 200px" v-model="editorFormInfo.bannerDesc"></el-input>
        </el-form-item>
      </el-form>
      <template #footer>
            <span class="dialog-footer">
                <el-button @click="dialogEditorVisible = false">取消</el-button>
                <el-button type="primary" @click="sureEditorHandler">确定</el-button>
            </span>
      </template>
    </el-dialog>
    <!--编辑对话框 end-->
  </div>
</template>

<script setup>
import axios from "../../api/index.js"
import {onMounted, reactive, ref} from "vue";
import {ElMessage} from "element-plus";
import {useUploadStore} from "../../stores/uploadStore.js"

const uploadStore = useUploadStore()
//初始化分页查询数据
const dataList = reactive({
  list: []
})
//初始化类型列表
const typeList = reactive({
  list: []
})
//初始化总条数
const totalData = ref(0)
//当前页
const currentPage = ref(1)
//初始化分页显示条数
const defaultPageSize = ref(10)
//搜索初始化状态
const searchInfo = ref("")
//添加添加对话框控制器
const dialogAddVisible = ref(false)
//初始化添加对话框状态
const addFormInfo = reactive({
  bannerUrl: "",
  bannerDesc: "",
  bannerTypeId: ''
})
//编辑对话框控制器
const dialogEditorVisible = ref(false)
//初始化编辑对话框状态
const editorFormInfo = reactive({
  bannerId: '',
  bannerUrl: "",
  bannerDesc: "",
  bannerTypeId: ''
})
/**
 * 网路请求：分页查询
 *  */
const http = (search, page, size) => {
  axios.banner_search({
    search: search,
    page: page,
    size: size
  }).then(res => {
    if (res.data.code == 200) {
      dataList.list = res.data.data.records
      totalData.value = res.data.data.total
    } else {
      ElMessage.error(res.data.message)
    }

  })
}
onMounted(() => {
  http(searchInfo.value, currentPage.value, defaultPageSize.value)
  axios.banner_type_findAll().then(res => {
    if (res.data.code == 200) {
      typeList.list = res.data.data
    }
  })
})
/**
 * 分页
 */
const currentChangeHaddler = (nowPage) => {
  http(searchInfo.value, nowPage, defaultPageSize.value)
  currentPage.value = nowPage
}
/**
 * 搜索按钮
 */
const searchHandle = () => {
  http(searchInfo.value, currentPage.value, defaultPageSize.value)
}
/**
 * 添加对话框弹出事件
 */
const addHander = () => {
  dialogAddVisible.value = true
}
//上传成功的钩子
const onHeadImageAddSuccess = (response, uploadFile) => {
  addFormInfo.bannerUrl = response.data
  ElMessage.success("上传成功")
}
//移除图片的钩子
const onHeadImageAddRemove = (response, uploadFile) => {
  axios.fastdfs_delete({

    filePath: addFormInfo.bannerUrl

  }).then(res => {
    if (res.data.code == 200) {
      ElMessage.success("移除成功")
    }
  })
}
/**
 * 添加对话框 确定事件
 */
const sureHandler = () => {
  axios.banner_add({
    bannerUrl: addFormInfo.bannerUrl,
    bannerDesc: addFormInfo.bannerDesc,
    bannerTypeId: addFormInfo.bannerTypeId,
  }).then(res => {
    if (res.data.code == 200) {
      dialogAddVisible.value = false
      http(searchInfo.value, currentPage.value, defaultPageSize.value)
    } else {
      ElMessage.error(res.data.message)
    }
  })
}
/**
 * 编辑对话框 弹出事件
 *  */
const handleEdit = (index, row) => {

  dialogEditorVisible.value = true
  axios.banner_findById({
    bannerId: row.bannerId
  }).then(res => {
    if (res.data.code == 200) {
      editorFormInfo.bannerId = res.data.data.bannerId;
      editorFormInfo.bannerUrl = res.data.data.bannerUrl;
      editorFormInfo.bannerDesc = res.data.data.bannerDesc;
      editorFormInfo.bannerTypeId = res.data.data.bannerTypeId;
    } else {
      ElMessage.error(res.data.data.message)
    }
  })

}
/**
 * 编辑对话框 头图修改时图片上传成功事件
 */
    //上传成功的钩子
const onHeadImageEditSuccess = (response, uploadFile) => {
      //删除以前图片
      axios.fastdfs_delete({

        filePath: editorFormInfo.bannerUrl

      }).then(res => {
        if (res.data.code == 200) {
          ElMessage.success("fastdfs移除原图片成功")
        }
      })
      //替换为现在的图片
      editorFormInfo.bannerUrl = response.data
      ElMessage.success("上传成功")

    }
/**
 * 编辑对话框 确定事件
 */
const sureEditorHandler = () => {
  axios.banner_update({
    bannerId: editorFormInfo.bannerId,
    bannerUrl: editorFormInfo.bannerUrl,
    bannerDesc: editorFormInfo.bannerDesc,
    bannerTypeId: editorFormInfo.bannerTypeId,

  }).then(res => {
    if (res.data.code == 200) {
      dialogEditorVisible.value = false
      http(searchInfo.value, currentPage.value, defaultPageSize.value)
    } else {
      ElMessage.error(res.data.message)
    }
  })
}
/**删除 */
const handleDelete = (index, row) => {
  ElMessageBox.confirm(
      '确定删除么',
      '删除',
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }
  ).then(() => {
    //确认删除
    axios.banner_delete({
      bannerId: row.bannerId
    }).then(res => {
      if (res.data.code == 200) {
        ElMessage({
          type: 'success',
          message: "删除成功！！！",
        })
        //刷新
        http(searchInfo.value, currentPage.value, defaultPageSize.value)
      } else {
        ElMessage({
          type: 'error',
          message: res.data.message,
        })
      }
    })
  }).catch(error => {
    ElMessage({
      type: 'info',
      message: "取消删除",
    })
  })


}
</script>
<style scoped>
.data-container {
  background: linear-gradient(left, rgb(89, 234, 233) 27%, rgb(131, 231, 218) 44%, rgb(69, 150, 216) 88%);
  background: -o-linear-gradient(left, rgb(89, 234, 233) 27%, rgb(131, 231, 218) 44%, rgb(69, 150, 216) 88%);
  background: -ms-linear-gradient(left, rgb(89, 234, 233) 27%, rgb(131, 231, 218) 44%, rgb(69, 150, 216) 88%);
  background: -moz-linear-gradient(left, rgb(89, 234, 233) 27%, rgb(131, 231, 218) 44%, rgb(69, 150, 216) 88%);
  background: -webkit-linear-gradient(left, rgb(89, 234, 233) 27%, rgb(131, 231, 218) 44%, rgb(69, 150, 216) 88%);
  height: 800px;
}

.data-header {
  padding: 20px;
}

.data-header .input {
  width: 300px;
}

.data-table {
  padding: 20px;
}

.page {
  position: fixed;
  right: 10px;
  bottom: 10px;
}
</style>

更多推荐

CentOS7平台命令安装Anaconda3、配置Python3开发环境

要在CentOS7上安装Anaconda3，您可以按照以下步骤进行操作：1.下载Anaconda3安装包：首先，访问Anaconda官方网站以获取最新版本的Anaconda3安装包的下载链接。可以使用wget命令来下载安装包。请确保选择适用于CentOS7的版本。wgethttps://repo.anaconda.co

1.centos7安装docker

本文目录：1.docker安装1.安装步骤2.安装是否成功校验3.docker加速配置4.helloworld来袭，验证安装是否ok2.卸载docker3.卸载较旧版本docker使用docker必备的三个官方网站：docker官网：https://www.docker.comdocker官方仓库：https://hu

SpringBoot文件上传-阿里云OSS

1.打开阿里云说明：登录阿里云账号2.点击AccessKey管理3.创建AccessKey说明：记得复制accessKeyId，accessKeySecret并保存起来4.点击对象存储OSS5.创建Bucket说明：创建储存桶6.查看SDK示例7.Java简单上传8.上传文件流说明：以上传图片为例9.copy代码说明：

自动化测试(五)：自动化测试框架的搭建和基于yaml热加载的测试用例的设计

该部分是对自动化测试专栏前四篇的一个补充，本次参考以下文章实现一个完整的谷歌翻译接口自动化测试:[1]【python小脚本】Yaml配置文件动态加载[2]【python做接口测试的学习记录day8——pytest自动化测试框架之热加载和断言封装】目标：框架封装完成后，不需要写python脚本，只需要增加yaml测试用例

LuatOS-SOC接口文档(air780E)--adc - 数模转换

常量常量类型解释adc.ADC_RANGE_3_6numberair105的ADC分压电阻开启，范围0~3.76Vadc.ADC_RANGE_1_8numberair105的ADC分压电阻关闭，范围0~1.88Vadc.ADC_RANGE_3_8numberair780E开启ADC0,1分压电阻，范围0~3.8Vadc

深度融入垂直行业是物联网未来发展必由之路

三年疫情，打断了很多企业的发展进程。但是疫情已过似乎整个业界生态有了一个很大变化。有一个朋友前一段时间参加深圳电子展后有一个感悟，说的很好：“疫情后有很大变化，疫情后，整个环境状态和疫情前有很大不同。无论企业，个人，还是外部环境，感觉都有变化。这种变化是无形的，但有时又感觉能感同身受。”其实这种感觉，就如人大病初愈或者

【计算机网络】——应用层

//图片取自王道仅做交流学习一、基本概念应用层概述协议是网络层次模型中多台主机之间同层之间进行通信的规则。是一个水平概念垂直空间上，向下屏蔽下层细节，向上提供服务接入，多台主机之间同层之间形成一条逻辑信道。应用层的功能:应用层的重要协议:文件传输、访问和管理FTP电子邮件SMTP、POP3虚拟终端HTTP查询服务和远程

easyExcel读取excel文件

简介Java解析、生成Excel比较有名的框架有Apachepoi、jxl。但他们都存在一个严重的问题就是非常的耗内存，poi有一套SAX模式的API可以一定程度的解决一些内存溢出的问题，但POI还是有一些缺陷，比如07版Excel解压缩以及解压后存储都是在内存中完成的，内存消耗依然很大。easyexcel重写了poi

Django系列：Django简介与MTV架构体系概述

Django系列Django简介与MTV架构体系概述作者：李俊才（jcLee95）：https://blog.csdn.net/qq_28550263邮箱：291148484@163.com本文地址：https://blog.csdn.net/qq_28550263/article/details/132890054【

本地电脑搭建SFTP服务器，并实现公网访问

本地电脑搭建SFTP服务器，并实现公网访问文章目录本地电脑搭建SFTP服务器，并实现公网访问1.搭建SFTP服务器1.1下载freesshd服务器软件1.3启动SFTP服务1.4添加用户1.5保存所有配置2.安装SFTP客户端FileZilla测试2.1配置一个本地SFTP站点2.2内网连接测试成功3.使用cpolar

react | react-router-dom v6 结合 antd 面包屑 ｜嵌套路由

大致需求图示如上：需求：1.点击page2默认进入`/page2/中国`2.在中国界面选择省份，进入浙江省3.在浙江省中选择市，进入杭州市4.选择大学，进入浙江大学5.点击面包屑中某个tab，进入对应tab界面，组件/路由切换6.路由携带参数，如面包屑中的数据实现过程：在page2组件内（仅供参考）：<divclass

热文推荐
  1. 十天学完基础数据结构-第一天（绪论）

    1.数据结构的研究内容数据结构的研究主要包括以下核心内容和目标：存储和组织数据：数据结构研究如何高效地存储和组织数据，以便于访问和操作。这包括了在内存或磁盘上的数据存储方式，如何将数据元素组织成有序或无序的集合，以及如何表示复杂的数据关系。数据的操作和处理：数据结构不仅关注数据的存储，还关注如何对数据进行各种操作，如插

  2. 并发编程——ScheduledThreadPoolExecutor

    文章目录ScheduledThreadPoolExecutor介绍ScheduledFutureTask四种方法执行任务execute方法schedule方法scheduleAtFixedRate和scheduleWithFixedDelay分析ScheduledThreadPoolExecutor介绍Schedule

  3. 力扣刷题（简单篇）：两数之和、两数相加、无重复字符的最长子串

    坚持就是胜利一、两数之和题目链接：https://leetcode.cn/problems/two-sum/给定一个整数数组nums和一个整数目标值target，请你在该数组中找出和为目标值target的那两个整数，并返回它们的数组下标。你可以假设每种输入只会对应一个答案。但是，数组中同一个元素在答案里不能重复出现。你

  4. QCA组态如何科学命名？

    前言（一）文献来源文献来源：[1]FurnariS,CrillyD,MisangyiVF,etal.Capturingcausalcomplexity:Heuristicsforconfigurationaltheorizing[J].AcademyofManagementReview,2021,46(4):778-7

  5. Linux下的系统编程——线程同步（十三）

    前言：在多线程编程中，如果多个线程同时访问和修改共享资源，可能会产生竞争条件和数据不一致的问题。同步机制用于协调线程之间的访问和操作，确保数据的正确性和一致性。为了避免多个线程同时访问和操作共享资源导致的问题，可以使用互斥锁（mutex）来实现线程的互斥访问。互斥锁可以保证同一时间只有一个线程访问共享资源、条件变量用于

  6. 读书笔记：多Transformer的双向编码器表示法(Bert)-2

    多Transformer的双向编码器表示法BidirectionalEncoderRepresentationsfromTransformers，即Bert；第2章了解Bert模型（掩码语言模型构建和下句预测）文本嵌入模型Bert，在许多自然语言处理任务上表现优秀，本节主要包括：了解Bert，及与其他嵌入模型的区别；分

  7. Packet Tracer中交换机的配置及Lab2实验

    交换机是计算机网络中的一种网络设备，用于在局域网内传输和转发数据包。它具有数据包转发、数据包过滤、VLAN划分和端口管理等功能，能够实现高速、可靠和安全的数据传输，并支持网络的管理和控制。交换机在网络中发挥着连接终端设备和实现数据交换的重要作用。交换机的基本配置模式：模式提示符作用用户模式>只允许用户访问有限量的基本监

  8. 【Python基础】S01E03 元组

    P01S03元组定义元组元组无法修改定义一个元素的元素修改元组变量方案一：关联新元组方案二：转换为列表列表是可修改的，对于处理网站的用户列表或游戏中的角色列表至关重要。然而我们有时候需要创建一系列不可修改的元素，元组可以满足这种需求。Python中，元组是不可修改的列表，名（tuple）；定义元组元组看起来很像列表，但

  9. c++ this指针与空指针调用类方法以及常函数

    一、this指针说明1、c++的成员变量与成员内函数是分开存储2、每一个非静态成员函数只会诞生一份函数实例，多个同类型的队形公用的是同一份成员函数的代码3、this指向调用这一份成员函数代码的对象实例4、this是一个隐藏的指向对象实例的一个指针,无需定义直接使用即可作用1、可以区别形参与成员变量（当成员函数的形参与类