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

    概述

    效果图

     

    数据库设计

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

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

    实体类设计

    轮播图
    1. package jkw.pojo;
    2.  
    3. import com.baomidou.mybatisplus.annotation.TableField;
    4. import com.baomidou.mybatisplus.annotation.TableId;
    5. import lombok.Data;
    6.  
    7. import java.io.Serializable;
    8.  
    9. /**
    10.  * 轮播图
    11.  */
    12. @Data
    13. public class Banner implements Serializable {
    14.     @TableId
    15.     private Integer bannerId;
    16.     private String bannerUrl;//图片
    17.     private String bannerDesc;//描述
    18.  
    19.     private Integer bannerTypeId;//类型
    20.     @TableField(exist = false)
    21.     private BannerType bannerType;
    22. }

    轮播图类型
    1. package jkw.pojo;
    2.  
    3. import com.baomidou.mybatisplus.annotation.TableId;
    4. import lombok.Data;
    5.  
    6. import java.io.Serializable;
    7.  
    8. /**
    9.  * 轮播图类型
    10.  */
    11. @Data
    12. public class BannerType implements Serializable {
    13.     @TableId
    14.     private Integer bannerTypeId;
    15.     private String bannerTypeName;//类型名
    16. }

    Mapper层开发

    BannerTypeMapper
    1. package jkw.mapper;
    2.  
    3. import com.baomidou.mybatisplus.core.mapper.BaseMapper;
    4. import jkw.pojo.BannerType;
    5.  
    6. public interface BannerTypeMapper extends BaseMapper<BannerType> {
    7. }

    BannerMapper
    1. package jkw.mapper;
    2.  
    3. import com.baomidou.mybatisplus.core.mapper.BaseMapper;
    4. import jkw.pojo.Banner;
    5.  
    6. public interface BannerMapper extends BaseMapper<Banner> {
    7. }

    Service层开发

    BannerTypeService
    1. package jkw.service;
    2.  
    3. import com.baomidou.mybatisplus.extension.plugins.pagination.Page;
    4. import jkw.pojo.BannerType;
    5.  
    6. import java.util.List;
    7.  
    8. public interface BannerTypeService {
    9.     void add(BannerType BannerType);
    10.  
    11.     void update(BannerType BannerType);
    12.  
    13.     void delete(Integer id);
    14.  
    15.     BannerType findById(Integer id);
    16.  
    17.     List findAll();
    18.  
    19.     Page search(String search, int page, int size);
    20. }

    BannerTypeServiceImpl
    1. package jkw.service.impl;
    2.  
    3. import com.baomidou.mybatisplus.core.conditions.query.QueryWrapper;
    4. import com.baomidou.mybatisplus.extension.plugins.pagination.Page;
    5. import jkw.mapper.BannerTypeMapper;
    6. import jkw.pojo.BannerType;
    7. import jkw.service.BannerTypeService;
    8. import org.springframework.beans.factory.annotation.Autowired;
    9. import org.springframework.stereotype.Service;
    10. import org.springframework.transaction.annotation.Transactional;
    11.  
    12. import java.util.List;
    13.  
    14. @Service
    15. @Transactional
    16. public class BannerTypeServiceImpl implements BannerTypeService {
    17.     @Autowired
    18.     private BannerTypeMapper bannerTypeMapper;
    19.  
    20.     @Override
    21.     public void add(BannerType BannerType) {
    22.         bannerTypeMapper.insert(BannerType);
    23.     }
    24.  
    25.     @Override
    26.     public void update(BannerType BannerType) {
    27.         bannerTypeMapper.updateById(BannerType);
    28.     }
    29.  
    30.     @Override
    31.     public void delete(Integer id) {
    32.         bannerTypeMapper.deleteById(id);
    33.     }
    34.  
    35.     @Override
    36.     public BannerType findById(Integer id) {
    37.         return bannerTypeMapper.selectById(id);
    38.     }
    39.  
    40.     @Override
    41.     public List<BannerType> findAll() {
    42.         return bannerTypeMapper.selectList(null);
    43.     }
    44.  
    45.     @Override
    46.     public Page<BannerType> search(String search, int page, int size) {
    47.         QueryWrapper queryWrapper = new QueryWrapper();
    48.         if (search != null) {
    49.  
    50.         }
    51.         return bannerTypeMapper.selectPage(new Page<>(page, size), queryWrapper);
    52.     }
    53. }

    BannerService
    1. package jkw.service;
    2.  
    3. import com.baomidou.mybatisplus.extension.plugins.pagination.Page;
    4. import jkw.pojo.Banner;
    5.  
    6. import java.util.List;
    7.  
    8. public interface BannerService {
    9.     void add(Banner Banner);
    10.  
    11.     void update(Banner Banner);
    12.  
    13.     void delete(Integer id);
    14.  
    15.     Banner findById(Integer id);
    16.  
    17.     List findAll();
    18.  
    19.     Page search(String search, int page, int size);
    20. }

    BannerServiceImpl
    1. package jkw.service.impl;
    2.  
    3. import com.baomidou.mybatisplus.core.conditions.query.QueryWrapper;
    4. import com.baomidou.mybatisplus.extension.plugins.pagination.Page;
    5. import jkw.mapper.BannerMapper;
    6. import jkw.pojo.Banner;
    7. import jkw.service.BannerService;
    8. import org.springframework.beans.factory.annotation.Autowired;
    9. import org.springframework.stereotype.Service;
    10. import org.springframework.transaction.annotation.Transactional;
    11.  
    12. import java.util.List;
    13.  
    14. @Service
    15. @Transactional
    16. public class BannerServiceImpl implements BannerService {
    17.     @Autowired
    18.     private BannerMapper bannerMapper;
    19.  
    20.     @Override
    21.     public void add(Banner Banner) {
    22.         bannerMapper.insert(Banner);
    23.     }
    24.  
    25.     @Override
    26.     public void update(Banner Banner) {
    27.         bannerMapper.updateById(Banner);
    28.     }
    29.  
    30.     @Override
    31.     public void delete(Integer id) {
    32.         bannerMapper.deleteById(id);
    33.     }
    34.  
    35.     @Override
    36.     public Banner findById(Integer id) {
    37.         return bannerMapper.selectById(id);
    38.     }
    39.  
    40.     @Override
    41.     public List<Banner> findAll() {
    42.         return bannerMapper.selectList(null);
    43.     }
    44.  
    45.     @Override
    46.     public Page<Banner> search(String search, int page, int size) {
    47.         QueryWrapper queryWrapper = new QueryWrapper();
    48.         if (search != null) {
    49.  
    50.         }
    51.         return bannerMapper.selectPage(new Page<>(page, size), queryWrapper);
    52.     }
    53. }

    控制层开发

    BannerTypeCon
    1. package jkw.controller.back;
    2.  
    3. import com.baomidou.mybatisplus.extension.plugins.pagination.Page;
    4. import jkw.pojo.BannerType;
    5. import jkw.service.BannerTypeService;
    6. import jkw.vo.BaseResult;
    7. import org.springframework.beans.factory.annotation.Autowired;
    8. import org.springframework.security.access.prepost.PreAuthorize;
    9. import org.springframework.web.bind.annotation.*;
    10.  
    11. import java.util.List;
    12.  
    13. @CrossOrigin
    14. @RestController
    15. @RequestMapping("/back/bannerType")
    16. public class BannerTypeCon {
    17.     @Autowired
    18.     private BannerTypeService bannerTypeService;
    19.  
    20.     /**
    21.      * 新增
    22.      *
    23.      * @param bannerType
    24.      * @return
    25.      */
    26.     @PostMapping("/add")
    27.     @PreAuthorize("hasAnyAuthority('/website/banner')")
    28.     public BaseResult add(BannerType bannerType) {
    29.         bannerTypeService.add(bannerType);
    30.         return BaseResult.ok();
    31.     }
    32.  
    33.     /**
    34.      * 修改
    35.      *
    36.      * @param bannerType
    37.      * @return
    38.      */
    39.     @PostMapping("/update")
    40.     @PreAuthorize("hasAnyAuthority('/website/banner')")
    41.     public BaseResult update(BannerType bannerType) {
    42.         bannerTypeService.update(bannerType);
    43.         return BaseResult.ok();
    44.     }
    45.  
    46.     /**
    47.      * 删除
    48.      *
    49.      * @param bannerTypeId
    50.      * @return
    51.      */
    52.     @DeleteMapping("/delete")
    53.     @PreAuthorize("hasAnyAuthority('/website/banner')")
    54.     public BaseResult delete(Integer bannerTypeId) {
    55.         bannerTypeService.delete(bannerTypeId);
    56.         return BaseResult.ok();
    57.     }
    58.  
    59.     /**
    60.      * 根据id查询
    61.      *
    62.      * @param bannerTypeId
    63.      * @return
    64.      */
    65.     @GetMapping("/findById")
    66.     @PreAuthorize("hasAnyAuthority('/website/banner')")
    67.     public BaseResult findById(Integer bannerTypeId) {
    68.         BannerType bannerType = bannerTypeService.findById(bannerTypeId);
    69.         return BaseResult.ok(bannerType);
    70.     }
    71.  
    72.     /**
    73.      * 查询所有
    74.      *
    75.      * @return
    76.      */
    77.     @GetMapping("/findAll")
    78.     @PreAuthorize("hasAnyAuthority('/website/banner')")
    79.     public BaseResult findAll() {
    80.         List<BannerType> all = bannerTypeService.findAll();
    81.         return BaseResult.ok(all);
    82.     }
    83.  
    84.     /**
    85.      * 分页查询
    86.      *
    87.      * @param page
    88.      * @param size
    89.      * @return
    90.      */
    91.     @GetMapping("/search")
    92.     @PreAuthorize("hasAnyAuthority('/website/banner')")
    93.     public BaseResult search(String search, int page, int size) {
    94.         Page<BannerType> brandPage = bannerTypeService.search(search, page, size);
    95.         return BaseResult.ok(brandPage);
    96.     }
    97. }

    BannerCon
    1. package jkw.controller.back;
    2.  
    3. import com.baomidou.mybatisplus.extension.plugins.pagination.Page;
    4. import jkw.pojo.Banner;
    5. import jkw.service.BannerService;
    6. import jkw.vo.BaseResult;
    7. import org.springframework.beans.factory.annotation.Autowired;
    8. import org.springframework.security.access.prepost.PreAuthorize;
    9. import org.springframework.web.bind.annotation.*;
    10.  
    11. import java.util.List;
    12.  
    13. @RequestMapping("/back/banner")
    14. @CrossOrigin
    15. @RestController
    16. public class BannerCon {
    17.     @Autowired
    18.     private BannerService bannerService;
    19.  
    20.     /**
    21.      * 新增
    22.      *
    23.      * @param banner
    24.      * @return
    25.      */
    26.     @PostMapping("/add")
    27.     @PreAuthorize("hasAnyAuthority('/website/banner')")
    28.     public BaseResult add(Banner banner) {
    29.         bannerService.add(banner);
    30.         return BaseResult.ok();
    31.     }
    32.  
    33.     /**
    34.      * 修改
    35.      *
    36.      * @param banner
    37.      * @return
    38.      */
    39.     @PostMapping("/update")
    40.     @PreAuthorize("hasAnyAuthority('/website/banner')")
    41.     public BaseResult update(Banner banner) {
    42.         bannerService.update(banner);
    43.         return BaseResult.ok();
    44.     }
    45.  
    46.     /**
    47.      * 删除
    48.      *
    49.      * @param bannerId
    50.      * @return
    51.      */
    52.     @DeleteMapping("/delete")
    53.     @PreAuthorize("hasAnyAuthority('/website/banner')")
    54.     public BaseResult delete(Integer bannerId) {
    55.         bannerService.delete(bannerId);
    56.         return BaseResult.ok();
    57.     }
    58.  
    59.     /**
    60.      * 根据id查询
    61.      *
    62.      * @param bannerId
    63.      * @return
    64.      */
    65.     @GetMapping("/findById")
    66.     @PreAuthorize("hasAnyAuthority('/website/banner')")
    67.     public BaseResult findById(Integer bannerId) {
    68.         Banner banner = bannerService.findById(bannerId);
    69.         return BaseResult.ok(banner);
    70.     }
    71.  
    72.     /**
    73.      * 查询所有
    74.      *
    75.      * @return
    76.      */
    77.     @GetMapping("/findAll")
    78.     @PreAuthorize("hasAnyAuthority('/website/banner')")
    79.     public BaseResult findAll() {
    80.         List<Banner> all = bannerService.findAll();
    81.         return BaseResult.ok(all);
    82.     }
    83.  
    84.     /**
    85.      * 分页查询
    86.      *
    87.      * @param page
    88.      * @param size
    89.      * @return
    90.      */
    91.     @GetMapping("/search")
    92.     @PreAuthorize("hasAnyAuthority('/website/banner')")
    93.     public BaseResult search(String search, int page, int size) {
    94.         Page<Banner> brandPage = bannerService.search(search, page, size);
    95.         return BaseResult.ok(brandPage);
    96.     }
    97. }

    后台ui设计

    BannerType.vue
    1. <template>
    2.   <div class="data-container">
    3.     <!--添加 start-->
    4.     <div class="data-header">
    5.       <el-input class="input" @keyup.enter="searchHandle" v-model="searchInfo" size="large"
    6.                 placeholder="请输入关键字"></el-input>
    7.       <el-button @click="searchHandle" class="button" size="large" type="primary" plain>搜索</el-button>
    8.       <el-button round @click="addHander" size="large" type="primary">
    9.         <el-icon>
    10.           <DocumentAdd/>
    11.         </el-icon>
    12.         <span>新增</span>
    13.       </el-button>
    14.     </div>
    15.     <!--添加 end-->
    16.     <!--表格数据展示 start-->
    17.     <div class="data-table">
    18.       <el-table :data="dataList.list" style="width: 550px;">
    19.         <el-table-column show-overflow-tooltip label="类型名" prop="bannerTypeName" align="center" width="300"></el-table-column>
    20.         <el-table-column label="操作" align="center" width="220">
    21.           <template #default="scope">
    22.             <el-button size="small" type="primary" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
    23.             <el-button size="small" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
    24.           </template>
    25.         </el-table-column>
    26.       </el-table>
    27.       <!--分页 start-->
    28.       <div class="page">
    29.         <el-pagination background
    30.                        layout="prev,pager,next,jumper"
    31.                        :default-page-size="defaultPageSize"
    32.                        :total="totalData"
    33.                        @current-change="currentChangeHaddler"></el-pagination>
    34.       </div>
    35.       <!--分页 end-->
    36.     </div>
    37.     <!--表格数据展示 end-->
    38.     <!--添加对话框 start-->
    39.     <el-dialog draggable destroy-on-close v-model="dialogAddVisible" title="添加" width="35%" center>
    40.       <el-form inline :model="addFormInfo" label-width="150px">
    41.         <el-form-item label="类型名">
    42.           <el-input v-model="addFormInfo.bannerTypeName"></el-input>
    43.         </el-form-item>
    44.       </el-form>
    45.       <template #footer>
    46.             <span class="dialog-footer">
    47.                 <el-button @click="dialogAddVisible = false">取消</el-button>
    48.                 <el-button type="primary" @click="sureHandler">确定</el-button>
    49.             </span>
    50.       </template>
    51.     </el-dialog>
    52.     <!--添加对话框 end-->
    53.     <!--编辑对话框 start-->
    54.     <!--destroy-on-close:每次关闭对话框时直接销毁对话框，没有缓存-->
    55.     <el-dialog
    56.         draggable
    57.         destroy-on-close
    58.         v-model="dialogEditorVisible"
    59.         title="编辑"
    60.         width="35%"
    61.         center>
    62.       <el-form inline :model="editorFormInfo" label-width="150px">
    63.         <el-form-item label="类型名">
    64.           <el-input v-model="editorFormInfo.bannerTypeName"></el-input>
    65.         </el-form-item>
    66.       </el-form>
    67.       <template #footer>
    68.             <span class="dialog-footer">
    69.                 <el-button @click="dialogEditorVisible = false">取消</el-button>
    70.                 <el-button type="primary" @click="sureEditorHandler">确定</el-button>
    71.             </span>
    72.       </template>
    73.     </el-dialog>
    74.     <!--编辑对话框 end-->
    75.   </div>
    76. </template>
    77.  
    78. <script setup>
    79. import axios from "../../api/index.js"
    80. import {onMounted, reactive, ref} from "vue";
    81. import {ElMessage} from "element-plus";
    82. //初始化分页查询数据
    83. const dataList = reactive({
    84.   list: []
    85. })
    86. //初始化总条数
    87. const totalData = ref(0)
    88. //当前页
    89. const currentPage = ref(1)
    90. //初始化分页显示条数
    91. const defaultPageSize = ref(10)
    92. //搜索初始化状态
    93. const searchInfo = ref("")
    94. //添加添加对话框控制器
    95. const dialogAddVisible = ref(false)
    96. //初始化添加对话框状态
    97. const addFormInfo = reactive({
    98.   bannerTypeName: "",
    99. })
    100. //编辑对话框控制器
    101. const dialogEditorVisible = ref(false)
    102. //初始化编辑对话框状态
    103. const editorFormInfo = reactive({
    104.   bannerTypeId: '',
    105.   bannerTypeName: "",
    106. })
    107. /**
    108.  * 网路请求：分页查询
    109.  *  */
    110. const http = (search, page, size) => {
    111.   axios.banner_type_search({
    112.     search: search,
    113.     page: page,
    114.     size: size
    115.   }).then(res => {
    116.     if (res.data.code == 200) {
    117.       dataList.list = res.data.data.records
    118.       totalData.value = res.data.data.total
    119.     } else {
    120.       ElMessage.error(res.data.message)
    121.     }
    122.  
    123.   })
    124. }
    125. onMounted(() => {
    126.   http(searchInfo.value, currentPage.value, defaultPageSize.value)
    127. })
    128. /**
    129.  * 分页
    130.  */
    131. const currentChangeHaddler = (nowPage) => {
    132.   http(searchInfo.value, nowPage, defaultPageSize.value)
    133.   currentPage.value = nowPage
    134. }
    135. /**
    136.  * 搜索按钮
    137.  */
    138. const searchHandle = () => {
    139.   http(searchInfo.value, currentPage.value, defaultPageSize.value)
    140. }
    141. /**
    142.  * 添加对话框弹出事件
    143.  */
    144. const addHander = () => {
    145.   dialogAddVisible.value = true
    146. }
    147. /**
    148.  * 添加对话框 确定事件
    149.  */
    150. const sureHandler = () => {
    151.   axios.banner_type_add({
    152.     bannerTypeName: addFormInfo.bannerTypeName,
    153.   }).then(res => {
    154.     if (res.data.code == 200) {
    155.       dialogAddVisible.value = false
    156.       http(searchInfo.value, currentPage.value, defaultPageSize.value)
    157.     } else {
    158.       ElMessage.error(res.data.message)
    159.     }
    160.   })
    161. }
    162. /**
    163.  * 编辑对话框 弹出事件
    164.  *  */
    165. const handleEdit = (index, row) => {
    166.  
    167.   dialogEditorVisible.value = true
    168.   axios.banner_type_findById({
    169.     bannerTypeId: row.bannerTypeId
    170.   }).then(res => {
    171.     if (res.data.code == 200) {
    172.       editorFormInfo.bannerTypeId = res.data.data.bannerTypeId;
    173.       editorFormInfo.bannerTypeName = res.data.data.bannerTypeName;
    174.     } else {
    175.       ElMessage.error(res.data.data.message)
    176.     }
    177.   })
    178.  
    179. }
    180. /**
    181.  * 编辑对话框 确定事件
    182.  */
    183. const sureEditorHandler = () => {
    184.   axios.banner_type_update({
    185.     bannerTypeId: editorFormInfo.bannerTypeId,
    186.     bannerTypeName: editorFormInfo.bannerTypeName,
    187.   }).then(res => {
    188.     if (res.data.code == 200) {
    189.       dialogEditorVisible.value = false
    190.       http(searchInfo.value, currentPage.value, defaultPageSize.value)
    191.     } else {
    192.       ElMessage.error(res.data.message)
    193.     }
    194.   })
    195. }
    196. /**删除 */
    197. const handleDelete = (index, row) => {
    198.   ElMessageBox.confirm(
    199.       '确定删除么',
    200.       '删除',
    201.       {
    202.         confirmButtonText: '确定',
    203.         cancelButtonText: '取消',
    204.         type: 'warning',
    205.       }
    206.   ).then(() => {
    207.     //确认删除
    208.     axios.banner_type_delete({
    209.       bannerTypeId: row.bannerTypeId
    210.     }).then(res => {
    211.       if (res.data.code == 200) {
    212.         ElMessage({
    213.           type: 'success',
    214.           message: "删除成功！！！",
    215.         })
    216.         //刷新
    217.         http(searchInfo.value, currentPage.value, defaultPageSize.value)
    218.       } else {
    219.         ElMessage({
    220.           type: 'error',
    221.           message: res.data.message,
    222.         })
    223.       }
    224.     })
    225.   }).catch(error => {
    226.     ElMessage({
    227.       type: 'info',
    228.       message: "取消删除",
    229.     })
    230.   })
    231.  
    232.  
    233. }
    234. </script>
    235. <style scoped>
    236. .data-container {
    237.   background: linear-gradient(left, rgb(89, 234, 233) 27%, rgb(131, 231, 218) 44%, rgb(69, 150, 216) 88%);
    238.   background: -o-linear-gradient(left, rgb(89, 234, 233) 27%, rgb(131, 231, 218) 44%, rgb(69, 150, 216) 88%);
    239.   background: -ms-linear-gradient(left, rgb(89, 234, 233) 27%, rgb(131, 231, 218) 44%, rgb(69, 150, 216) 88%);
    240.   background: -moz-linear-gradient(left, rgb(89, 234, 233) 27%, rgb(131, 231, 218) 44%, rgb(69, 150, 216) 88%);
    241.   background: -webkit-linear-gradient(left, rgb(89, 234, 233) 27%, rgb(131, 231, 218) 44%, rgb(69, 150, 216) 88%);
    242.   height: 800px;
    243. }
    244.  
    245. .data-header {
    246.   padding: 20px;
    247. }
    248.  
    249. .data-header .input {
    250.   width: 300px;
    251. }
    252.  
    253. .data-table {
    254.   padding: 20px;
    255. }
    256.  
    257. .page {
    258.   position: fixed;
    259.   right: 10px;
    260.   bottom: 10px;
    261. }
    262. </style>

    Banner.vue
    1. <template>
    2.   <div class="data-container">
    3.     <!--添加 start-->
    4.     <div class="data-header">
    5.       <el-input class="input" @keyup.enter="searchHandle" v-model="searchInfo" size="large"
    6.                 placeholder="请输入关键字"></el-input>
    7.       <el-button @click="searchHandle" class="button" size="large" type="primary" plain>搜索</el-button>
    8.       <el-button round @click="addHander" size="large" type="primary">
    9.         <el-icon>
    10.           <DocumentAdd/>
    11.         </el-icon>
    12.         <span>新增</span>
    13.       </el-button>
    14.     </div>
    15.     <!--添加 end-->
    16.     <!--表格数据展示 start-->
    17.     <div class="data-table">
    18.       <el-table :data="dataList.list" style="width: 800px;">
    19.         <el-table-column label="图片" prop="bannerUrl" align="center">
    20.           <template #default="scope">
    21.             <img :src="scope.row.bannerUrl" style="height:60px"/>
    22.           </template>
    23.         </el-table-column>
    24.         <el-table-column label="类型" prop="bannerTypeId" align="center">
    25.           <template #default="scope">
    26.                   <span v-for="item in typeList.list" :key="item.bannerTypeId">
    27.                       {{ scope.row.bannerTypeId == item.bannerTypeId ? item.bannerTypeName : '' }}
    28.                   </span>
    29.           </template>
    30.         </el-table-column>
    31.         <el-table-column show-overflow-tooltip label="描述" prop="bannerDesc" align="center"></el-table-column>
    32.         <el-table-column label="操作" align="center" width="220">
    33.           <template #default="scope">
    34.             <el-button size="small" type="primary" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
    35.             <el-button size="small" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
    36.           </template>
    37.         </el-table-column>
    38.       </el-table>
    39.       <!--分页 start-->
    40.       <div class="page">
    41.         <el-pagination background
    42.                        layout="prev,pager,next,jumper"
    43.                        :default-page-size="defaultPageSize"
    44.                        :total="totalData"
    45.                        @current-change="currentChangeHaddler"></el-pagination>
    46.       </div>
    47.       <!--分页 end-->
    48.     </div>
    49.     <!--表格数据展示 end-->
    50.     <!--添加对话框 start-->
    51.     <el-dialog draggable destroy-on-close v-model="dialogAddVisible" title="添加" width="35%" center>
    52.       <el-form inline :model="addFormInfo" label-width="150px">
    53.         <el-form-item label="图片">
    54.           <el-upload list-type="picture-card"
    55.                      :action="uploadStore.fastdfsUploadUrl"
    56.                      :on-success="onHeadImageAddSuccess"
    57.                      :on-remove="onHeadImageAddRemove">
    58.             <el-icon>
    59.             </el-icon>
    60.           </el-upload>
    61.         </el-form-item>
    62.         <el-form-item label="类型">
    63.           <el-select v-model="addFormInfo.bannerTypeId" placeholder="请选择类型" size="large">
    64.             <el-option v-for="item in typeList.list" :key="item.bannerTypeId"
    65.                        :label="item.bannerTypeName"
    66.                        :value="item.bannerTypeId">
    67.             </el-option>
    68.           </el-select>
    69.         </el-form-item>
    70.         <el-form-item label="描述">
    71.           <el-input type="textarea" rows="6" style="width: 200px" v-model="addFormInfo.bannerDesc"></el-input>
    72.         </el-form-item>
    73.       </el-form>
    74.       <template #footer>
    75.             <span class="dialog-footer">
    76.                 <el-button @click="dialogAddVisible = false">取消</el-button>
    77.                 <el-button type="primary" @click="sureHandler">确定</el-button>
    78.             </span>
    79.       </template>
    80.     </el-dialog>
    81.     <!--添加对话框 end-->
    82.     <!--编辑对话框 start-->
    83.     <!--destroy-on-close:每次关闭对话框时直接销毁对话框，没有缓存-->
    84.     <el-dialog
    85.         draggable
    86.         destroy-on-close
    87.         v-model="dialogEditorVisible"
    88.         title="编辑"
    89.         width="35%"
    90.         center>
    91.       <el-form inline :model="editorFormInfo" label-width="150px">
    92.         <el-form-item label="头图">
    93.           <el-upload list-type="picture-card"
    94.                      :action="uploadStore.fastdfsUploadUrl"
    95.                      :on-success="onHeadImageEditSuccess"
    96.           >
    97.             <el-image :src="editorFormInfo.bannerUrl"/>
    98.  
    99.           </el-upload>
    100.         </el-form-item>
    101.         <el-form-item label="类型">
    102.           <el-select v-model="editorFormInfo.bannerTypeId" placeholder="请选择类型" size="large">
    103.             <el-option v-for="item in typeList.list" :key="item.bannerTypeId"
    104.                        :label="item.bannerTypeName"
    105.                        :value="item.bannerTypeId">
    106.             </el-option>
    107.           </el-select>
    108.         </el-form-item>
    109.         <el-form-item label="描述">
    110.           <el-input type="textarea" rows="6" style="width: 200px" v-model="editorFormInfo.bannerDesc"></el-input>
    111.         </el-form-item>
    112.       </el-form>
    113.       <template #footer>
    114.             <span class="dialog-footer">
    115.                 <el-button @click="dialogEditorVisible = false">取消</el-button>
    116.                 <el-button type="primary" @click="sureEditorHandler">确定</el-button>
    117.             </span>
    118.       </template>
    119.     </el-dialog>
    120.     <!--编辑对话框 end-->
    121.   </div>
    122. </template>
    123.  
    124. <script setup>
    125. import axios from "../../api/index.js"
    126. import {onMounted, reactive, ref} from "vue";
    127. import {ElMessage} from "element-plus";
    128. import {useUploadStore} from "../../stores/uploadStore.js"
    129.  
    130. const uploadStore = useUploadStore()
    131. //初始化分页查询数据
    132. const dataList = reactive({
    133.   list: []
    134. })
    135. //初始化类型列表
    136. const typeList = reactive({
    137.   list: []
    138. })
    139. //初始化总条数
    140. const totalData = ref(0)
    141. //当前页
    142. const currentPage = ref(1)
    143. //初始化分页显示条数
    144. const defaultPageSize = ref(10)
    145. //搜索初始化状态
    146. const searchInfo = ref("")
    147. //添加添加对话框控制器
    148. const dialogAddVisible = ref(false)
    149. //初始化添加对话框状态
    150. const addFormInfo = reactive({
    151.   bannerUrl: "",
    152.   bannerDesc: "",
    153.   bannerTypeId: ''
    154. })
    155. //编辑对话框控制器
    156. const dialogEditorVisible = ref(false)
    157. //初始化编辑对话框状态
    158. const editorFormInfo = reactive({
    159.   bannerId: '',
    160.   bannerUrl: "",
    161.   bannerDesc: "",
    162.   bannerTypeId: ''
    163. })
    164. /**
    165.  * 网路请求：分页查询
    166.  *  */
    167. const http = (search, page, size) => {
    168.   axios.banner_search({
    169.     search: search,
    170.     page: page,
    171.     size: size
    172.   }).then(res => {
    173.     if (res.data.code == 200) {
    174.       dataList.list = res.data.data.records
    175.       totalData.value = res.data.data.total
    176.     } else {
    177.       ElMessage.error(res.data.message)
    178.     }
    179.  
    180.   })
    181. }
    182. onMounted(() => {
    183.   http(searchInfo.value, currentPage.value, defaultPageSize.value)
    184.   axios.banner_type_findAll().then(res => {
    185.     if (res.data.code == 200) {
    186.       typeList.list = res.data.data
    187.     }
    188.   })
    189. })
    190. /**
    191.  * 分页
    192.  */
    193. const currentChangeHaddler = (nowPage) => {
    194.   http(searchInfo.value, nowPage, defaultPageSize.value)
    195.   currentPage.value = nowPage
    196. }
    197. /**
    198.  * 搜索按钮
    199.  */
    200. const searchHandle = () => {
    201.   http(searchInfo.value, currentPage.value, defaultPageSize.value)
    202. }
    203. /**
    204.  * 添加对话框弹出事件
    205.  */
    206. const addHander = () => {
    207.   dialogAddVisible.value = true
    208. }
    209. //上传成功的钩子
    210. const onHeadImageAddSuccess = (response, uploadFile) => {
    211.   addFormInfo.bannerUrl = response.data
    212.   ElMessage.success("上传成功")
    213. }
    214. //移除图片的钩子
    215. const onHeadImageAddRemove = (response, uploadFile) => {
    216.   axios.fastdfs_delete({
    217.  
    218.     filePath: addFormInfo.bannerUrl
    219.  
    220.   }).then(res => {
    221.     if (res.data.code == 200) {
    222.       ElMessage.success("移除成功")
    223.     }
    224.   })
    225. }
    226. /**
    227.  * 添加对话框 确定事件
    228.  */
    229. const sureHandler = () => {
    230.   axios.banner_add({
    231.     bannerUrl: addFormInfo.bannerUrl,
    232.     bannerDesc: addFormInfo.bannerDesc,
    233.     bannerTypeId: addFormInfo.bannerTypeId,
    234.   }).then(res => {
    235.     if (res.data.code == 200) {
    236.       dialogAddVisible.value = false
    237.       http(searchInfo.value, currentPage.value, defaultPageSize.value)
    238.     } else {
    239.       ElMessage.error(res.data.message)
    240.     }
    241.   })
    242. }
    243. /**
    244.  * 编辑对话框 弹出事件
    245.  *  */
    246. const handleEdit = (index, row) => {
    247.  
    248.   dialogEditorVisible.value = true
    249.   axios.banner_findById({
    250.     bannerId: row.bannerId
    251.   }).then(res => {
    252.     if (res.data.code == 200) {
    253.       editorFormInfo.bannerId = res.data.data.bannerId;
    254.       editorFormInfo.bannerUrl = res.data.data.bannerUrl;
    255.       editorFormInfo.bannerDesc = res.data.data.bannerDesc;
    256.       editorFormInfo.bannerTypeId = res.data.data.bannerTypeId;
    257.     } else {
    258.       ElMessage.error(res.data.data.message)
    259.     }
    260.   })
    261.  
    262. }
    263. /**
    264.  * 编辑对话框 头图修改时图片上传成功事件
    265.  */
    266.     //上传成功的钩子
    267. const onHeadImageEditSuccess = (response, uploadFile) => {
    268.       //删除以前图片
    269.       axios.fastdfs_delete({
    270.  
    271.         filePath: editorFormInfo.bannerUrl
    272.  
    273.       }).then(res => {
    274.         if (res.data.code == 200) {
    275.           ElMessage.success("fastdfs移除原图片成功")
    276.         }
    277.       })
    278.       //替换为现在的图片
    279.       editorFormInfo.bannerUrl = response.data
    280.       ElMessage.success("上传成功")
    281.  
    282.     }
    283. /**
    284.  * 编辑对话框 确定事件
    285.  */
    286. const sureEditorHandler = () => {
    287.   axios.banner_update({
    288.     bannerId: editorFormInfo.bannerId,
    289.     bannerUrl: editorFormInfo.bannerUrl,
    290.     bannerDesc: editorFormInfo.bannerDesc,
    291.     bannerTypeId: editorFormInfo.bannerTypeId,
    292.  
    293.   }).then(res => {
    294.     if (res.data.code == 200) {
    295.       dialogEditorVisible.value = false
    296.       http(searchInfo.value, currentPage.value, defaultPageSize.value)
    297.     } else {
    298.       ElMessage.error(res.data.message)
    299.     }
    300.   })
    301. }
    302. /**删除 */
    303. const handleDelete = (index, row) => {
    304.   ElMessageBox.confirm(
    305.       '确定删除么',
    306.       '删除',
    307.       {
    308.         confirmButtonText: '确定',
    309.         cancelButtonText: '取消',
    310.         type: 'warning',
    311.       }
    312.   ).then(() => {
    313.     //确认删除
    314.     axios.banner_delete({
    315.       bannerId: row.bannerId
    316.     }).then(res => {
    317.       if (res.data.code == 200) {
    318.         ElMessage({
    319.           type: 'success',
    320.           message: "删除成功！！！",
    321.         })
    322.         //刷新
    323.         http(searchInfo.value, currentPage.value, defaultPageSize.value)
    324.       } else {
    325.         ElMessage({
    326.           type: 'error',
    327.           message: res.data.message,
    328.         })
    329.       }
    330.     })
    331.   }).catch(error => {
    332.     ElMessage({
    333.       type: 'info',
    334.       message: "取消删除",
    335.     })
    336.   })
    337.  
    338.  
    339. }
    340. </script>
    341. <style scoped>
    342. .data-container {
    343.   background: linear-gradient(left, rgb(89, 234, 233) 27%, rgb(131, 231, 218) 44%, rgb(69, 150, 216) 88%);
    344.   background: -o-linear-gradient(left, rgb(89, 234, 233) 27%, rgb(131, 231, 218) 44%, rgb(69, 150, 216) 88%);
    345.   background: -ms-linear-gradient(left, rgb(89, 234, 233) 27%, rgb(131, 231, 218) 44%, rgb(69, 150, 216) 88%);
    346.   background: -moz-linear-gradient(left, rgb(89, 234, 233) 27%, rgb(131, 231, 218) 44%, rgb(69, 150, 216) 88%);
    347.   background: -webkit-linear-gradient(left, rgb(89, 234, 233) 27%, rgb(131, 231, 218) 44%, rgb(69, 150, 216) 88%);
    348.   height: 800px;
    349. }
    350.  
    351. .data-header {
    352.   padding: 20px;
    353. }
    354.  
    355. .data-header .input {
    356.   width: 300px;
    357. }
    358.  
    359. .data-table {
    360.   padding: 20px;
    361. }
    362.  
    363. .page {
    364.   position: fixed;
    365.   right: 10px;
    366.   bottom: 10px;
    367. }
    368. </style>

  • 相关阅读:
    一次性分清zip、gzip、bzip2、tar命令
    （二）kafka的事务性和幂等性
    全流量安全分析的重要性
    【树莓派不吃灰】搭建emqx MQTT Broker
    巴特沃斯滤波器的设计
    依赖倒转原则&接口隔离原则&迪米特法则&合成复用原则
    解决 net core 3.x 跨域问题
    第一个vue-cli程序
    关于wParam和lParam
    【C#】vs2022 .net8
  • 原文地址：https://blog.csdn.net/m0_63040701/article/details/133134187