• 月木学途开发 6.网址模块

    概述

    效果图

     

    数据库设计

    网站类型表
    1. DROP TABLE IF EXISTS `website`;
    2. CREATE TABLE `website` (
    3.   `websiteId` int(11) NOT NULL AUTO_INCREMENT,
    4.   `websiteImg` longtext,
    5.   `websiteName` varchar(255) DEFAULT NULL,
    6.   `websiteUrl` longtext,
    7.   `websiteDesc` varchar(255) DEFAULT NULL,
    8.   `websiteTypeId` int(11) DEFAULT NULL,
    9.   PRIMARY KEY (`websiteId`)
    10. ) ENGINE=InnoDB AUTO_INCREMENT=33 DEFAULT CHARSET=utf8mb4;

    网站表
    1. DROP TABLE IF EXISTS `website_type`;
    2. CREATE TABLE `website_type` (
    3.   `websiteTypeId` int(11) NOT NULL AUTO_INCREMENT,
    4.   `websiteTypeName` varchar(255) DEFAULT NULL,
    5.   PRIMARY KEY (`websiteTypeId`)
    6. ) ENGINE=InnoDB AUTO_INCREMENT=15 DEFAULT CHARSET=utf8mb4;

    实体类设计

    WebsiteType
    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. import java.util.List;
    9.  
    10. /**
    11.  * 网站类型
    12.  */
    13. @Data
    14. public class WebsiteType implements Serializable {
    15.     @TableId
    16.     private Integer websiteTypeId;
    17.     private String websiteTypeName;//类型名
    18.     @TableField(exist = false)
    19.     private List websites;
    20. }

    Website
    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 Website implements Serializable {
    13.     @TableId
    14.     private Integer websiteId;
    15.     private String websiteImg;//图片
    16.     private String websiteName;//名称
    17.     private String websiteUrl;//url
    18.     private String websiteDesc;//描述
    19.  
    20.     private Integer websiteTypeId;//类型
    21. }

    Mapper层开发

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

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

    Service层开发

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

    WebsiteTypeServiceImpl
    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.WebsiteTypeMapper;
    6. import jkw.pojo.WebsiteType;
    7. import jkw.service.WebsiteTypeService;
    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 WebsiteTypeServiceImpl implements WebsiteTypeService {
    17.     @Autowired
    18.     private WebsiteTypeMapper WebsiteTypeMapper;
    19.  
    20.     @Override
    21.     public void add(WebsiteType WebsiteType) {
    22.         WebsiteTypeMapper.insert(WebsiteType);
    23.     }
    24.  
    25.     @Override
    26.     public void update(WebsiteType WebsiteType) {
    27.         WebsiteTypeMapper.updateById(WebsiteType);
    28.     }
    29.  
    30.     @Override
    31.     public void delete(Integer id) {
    32.         WebsiteTypeMapper.deleteById(id);
    33.     }
    34.  
    35.     @Override
    36.     public WebsiteType findById(Integer id) {
    37.         return WebsiteTypeMapper.selectById(id);
    38.     }
    39.  
    40.     @Override
    41.     public List<WebsiteType> findAll() {
    42.         return WebsiteTypeMapper.selectList(null);
    43.     }
    44.  
    45.     @Override
    46.     public Page<WebsiteType> search(String search, int page, int size) {
    47.         QueryWrapper queryWrapper = new QueryWrapper();
    48.         if (search != null) {
    49.  
    50.         }
    51.         return WebsiteTypeMapper.selectPage(new Page<>(page, size), queryWrapper);
    52.     }
    53. }

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

    WebsiteServiceImpl
    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.pojo.Website;
    6. import jkw.service.WebsiteService;
    7. import org.springframework.beans.factory.annotation.Autowired;
    8. import org.springframework.stereotype.Service;
    9. import org.springframework.transaction.annotation.Transactional;
    10.  
    11. import java.util.List;
    12.  
    13. @Service
    14. @Transactional
    15. public class WebsiteServiceImpl implements WebsiteService {
    16.     @Autowired
    17.     private jkw.mapper.WebsiteMapper WebsiteMapper;
    18.  
    19.     @Override
    20.     public void add(Website Website) {
    21.         WebsiteMapper.insert(Website);
    22.     }
    23.  
    24.     @Override
    25.     public void update(Website Website) {
    26.         WebsiteMapper.updateById(Website);
    27.     }
    28.  
    29.     @Override
    30.     public void delete(Integer id) {
    31.         WebsiteMapper.deleteById(id);
    32.     }
    33.  
    34.     @Override
    35.     public Website findById(Integer id) {
    36.         return WebsiteMapper.selectById(id);
    37.     }
    38.  
    39.     @Override
    40.     public List<Website> findAll() {
    41.         return WebsiteMapper.selectList(null);
    42.     }
    43.  
    44.     @Override
    45.     public Page<Website> search(String search, int page, int size) {
    46.         QueryWrapper queryWrapper = new QueryWrapper();
    47.         if (search != null) {
    48.  
    49.         }
    50.         return WebsiteMapper.selectPage(new Page<>(page, size), queryWrapper);
    51.     }
    52.  
    53.     @Override
    54.     public List<Website> findAllByWebsiteTypeId(Integer id) {
    55.         QueryWrapper<Website> queryWrapper = new QueryWrapper<>();
    56.         queryWrapper.eq("websiteTypeId", id);
    57.         return WebsiteMapper.selectList(queryWrapper);
    58.     }
    59. }

    控制层开发

    WebsiteTypeCon
    1. package jkw.controller.back;
    2.  
    3. import com.baomidou.mybatisplus.extension.plugins.pagination.Page;
    4. import jkw.pojo.WebsiteType;
    5. import jkw.service.WebsiteTypeService;
    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/websiteType")
    14. @RestController
    15. @CrossOrigin
    16. public class WebsiteTypeCon {
    17.     @Autowired
    18.     private WebsiteTypeService WebsiteTypeService;
    19.  
    20.     /**
    21.      * 新增
    22.      *
    23.      * @param WebsiteType
    24.      * @return
    25.      */
    26.     @PostMapping("/add")
    27.     @PreAuthorize("hasAnyAuthority('/website/website')")
    28.     public BaseResult add(WebsiteType WebsiteType) {
    29.         WebsiteTypeService.add(WebsiteType);
    30.         return BaseResult.ok();
    31.     }
    32.  
    33.     /**
    34.      * 修改
    35.      *
    36.      * @param WebsiteType
    37.      * @return
    38.      */
    39.     @PostMapping("/update")
    40.     @PreAuthorize("hasAnyAuthority('/website/website')")
    41.     public BaseResult update(WebsiteType WebsiteType) {
    42.         WebsiteTypeService.update(WebsiteType);
    43.         return BaseResult.ok();
    44.     }
    45.  
    46.     /**
    47.      * 删除
    48.      *
    49.      * @param websiteTypeId
    50.      * @return
    51.      */
    52.     @DeleteMapping("/delete")
    53.     @PreAuthorize("hasAnyAuthority('/website/website')")
    54.     public BaseResult delete(Integer websiteTypeId) {
    55.         WebsiteTypeService.delete(websiteTypeId);
    56.         return BaseResult.ok();
    57.     }
    58.  
    59.     /**
    60.      * 根据id查询
    61.      *
    62.      * @param websiteTypeId
    63.      * @return
    64.      */
    65.     @GetMapping("/findById")
    66.     @PreAuthorize("hasAnyAuthority('/website/website')")
    67.     public BaseResult findById(Integer websiteTypeId) {
    68.         WebsiteType WebsiteType = WebsiteTypeService.findById(websiteTypeId);
    69.         return BaseResult.ok(WebsiteType);
    70.     }
    71.  
    72.     /**
    73.      * 查询所有
    74.      *
    75.      * @return
    76.      */
    77.     @GetMapping("/findAll")
    78.     @PreAuthorize("hasAnyAuthority('/website/website')")
    79.     public BaseResult findAll() {
    80.         List<WebsiteType> all = WebsiteTypeService.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/website')")
    93.     public BaseResult search(String search, int page, int size) {
    94.         Page<WebsiteType> brandPage = WebsiteTypeService.search(search, page, size);
    95.         return BaseResult.ok(brandPage);
    96.     }
    97. }

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

    FrontWebsiteCon
    1. package jkw.controller.front;
    2.  
    3. import jkw.pojo.Website;
    4. import jkw.pojo.WebsiteType;
    5. import jkw.service.WebsiteService;
    6. import jkw.service.WebsiteTypeService;
    7. import jkw.vo.BaseResult;
    8. import org.springframework.beans.factory.annotation.Autowired;
    9. import org.springframework.web.bind.annotation.CrossOrigin;
    10. import org.springframework.web.bind.annotation.GetMapping;
    11. import org.springframework.web.bind.annotation.RequestMapping;
    12. import org.springframework.web.bind.annotation.RestController;
    13.  
    14. import java.util.List;
    15.  
    16. @RequestMapping("/front/website")
    17. @RestController
    18. @CrossOrigin
    19. public class FrontWebsiteCon {
    20.     @Autowired
    21.     private WebsiteService websiteService;
    22.     @Autowired
    23.     private WebsiteTypeService websiteTypeService;
    24.  
    25.     /**
    26.      * 查询所有网站类型以及对应的网站
    27.      *
    28.      * @return
    29.      */
    30.     @GetMapping("/findAllTypes")
    31.     public BaseResult findAllTypeWithWebsite() {
    32.         List websiteTypeList = websiteTypeService.findAll();
    33.         for (WebsiteType websiteType : websiteTypeList) {
    34.             List websiteList = websiteService.findAllByWebsiteTypeId(websiteType.getWebsiteTypeId());
    35.             websiteType.setWebsites(websiteList);
    36.         }
    37.         return BaseResult.ok(websiteTypeList);
    38.     }
    39.  
    40. }

    后台ui设计

    WebsiteType.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="websiteTypeName" 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.websiteTypeName"></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.websiteTypeName"></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.   websiteTypeName: "",
    99. })
    100. //编辑对话框控制器
    101. const dialogEditorVisible = ref(false)
    102. //初始化编辑对话框状态
    103. const editorFormInfo = reactive({
    104.   websiteTypeId: '',
    105.   websiteTypeName: "",
    106. })
    107. /**
    108.  * 网路请求：分页查询
    109.  *  */
    110. const http = (search, page, size) => {
    111.   axios.website_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.website_type_add({
    152.     websiteTypeName: addFormInfo.websiteTypeName,
    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.website_type_findById({
    169.     websiteTypeId: row.websiteTypeId
    170.   }).then(res => {
    171.     if (res.data.code == 200) {
    172.       editorFormInfo.websiteTypeId = res.data.data.websiteTypeId;
    173.       editorFormInfo.websiteTypeName = res.data.data.websiteTypeName;
    174.     } else {
    175.       ElMessage.error(res.data.data.message)
    176.     }
    177.   })
    178.  
    179. }
    180. /**
    181.  * 编辑对话框 确定事件
    182.  */
    183. const sureEditorHandler = () => {
    184.   axios.website_type_update({
    185.     websiteTypeId: editorFormInfo.websiteTypeId,
    186.     websiteTypeName: editorFormInfo.websiteTypeName,
    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.website_type_delete({
    209.       websiteTypeId: row.websiteTypeId
    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>

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

  • 相关阅读:
    无涯教程-JavaScript - LOG函数
    嵌入式中C++ 编程习惯与编程要点分析
    Qt编写跨平台RTSP/RTMP/HTTP视频流播放器
    高可用技术
    SDL2 简单介绍以及Windows开发环境搭建
    【图像处理】关于颜色的万花筒（RGB--HSV）
    内网横向移动——SNMP获取信息
    python项目实战——银行取款机系统（八）
    智能化嵌入式设备设计：人工智能与物联网的融合创新
    从0到1手把手教你ASP.NET Core Web API项目配置接口文档Swagger（一）
  • 原文地址：https://blog.csdn.net/m0_63040701/article/details/133134323