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

2023-09-21 14:51:10

概述

效果图

 

数据库设计

网站类型表
DROP TABLE IF EXISTS `website`;
CREATE TABLE `website` (
  `websiteId` int(11) NOT NULL AUTO_INCREMENT,
  `websiteImg` longtext,
  `websiteName` varchar(255) DEFAULT NULL,
  `websiteUrl` longtext,
  `websiteDesc` varchar(255) DEFAULT NULL,
  `websiteTypeId` int(11) DEFAULT NULL,
  PRIMARY KEY (`websiteId`)
) ENGINE=InnoDB AUTO_INCREMENT=33 DEFAULT CHARSET=utf8mb4;

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

实体类设计

WebsiteType
package jkw.pojo;

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

import java.io.Serializable;
import java.util.List;

/**
 * 网站类型
 */
@Data
public class WebsiteType implements Serializable {
    @TableId
    private Integer websiteTypeId;
    private String websiteTypeName;//类型名
    @TableField(exist = false)
    private List<Website> websites;
}

Website
package jkw.pojo;

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

import java.io.Serializable;

/**
 * 网站
 */
@Data
public class Website implements Serializable {
    @TableId
    private Integer websiteId;
    private String websiteImg;//图片
    private String websiteName;//名称
    private String websiteUrl;//url
    private String websiteDesc;//描述

    private Integer websiteTypeId;//类型
}

Mapper层开发

WebsiteTypeMapper
package jkw.mapper;

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

public interface WebsiteTypeMapper extends BaseMapper<WebsiteType> {
}

WebsiteMapper
package jkw.mapper;

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

public interface WebsiteMapper extends BaseMapper<Website> {
}

Service层开发

WebsiteTypeService
package jkw.service;

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

import java.util.List;

public interface WebsiteTypeService {
    void add(WebsiteType WebsiteType);

    void update(WebsiteType WebsiteType);

    void delete(Integer id);

    WebsiteType findById(Integer id);

    List<WebsiteType> findAll();

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

WebsiteTypeServiceImpl
package jkw.service.impl;

import com.baomidou.mybatisplus.core.conditions.query.QueryWrapper;
import com.baomidou.mybatisplus.extension.plugins.pagination.Page;
import jkw.mapper.WebsiteTypeMapper;
import jkw.pojo.WebsiteType;
import jkw.service.WebsiteTypeService;
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 WebsiteTypeServiceImpl implements WebsiteTypeService {
    @Autowired
    private WebsiteTypeMapper WebsiteTypeMapper;

    @Override
    public void add(WebsiteType WebsiteType) {
        WebsiteTypeMapper.insert(WebsiteType);
    }

    @Override
    public void update(WebsiteType WebsiteType) {
        WebsiteTypeMapper.updateById(WebsiteType);
    }

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

    @Override
    public WebsiteType findById(Integer id) {
        return WebsiteTypeMapper.selectById(id);
    }

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

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

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

WebsiteService
package jkw.service;

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

import java.util.List;

public interface WebsiteService {
    void add(Website Website);

    void update(Website Website);

    void delete(Integer id);

    Website findById(Integer id);

    List<Website> findAll();

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

    //根据typeId查询
    List<Website> findAllByWebsiteTypeId(Integer id);
}

WebsiteServiceImpl
package jkw.service.impl;

import com.baomidou.mybatisplus.core.conditions.query.QueryWrapper;
import com.baomidou.mybatisplus.extension.plugins.pagination.Page;
import jkw.pojo.Website;
import jkw.service.WebsiteService;
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 WebsiteServiceImpl implements WebsiteService {
    @Autowired
    private jkw.mapper.WebsiteMapper WebsiteMapper;

    @Override
    public void add(Website Website) {
        WebsiteMapper.insert(Website);
    }

    @Override
    public void update(Website Website) {
        WebsiteMapper.updateById(Website);
    }

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

    @Override
    public Website findById(Integer id) {
        return WebsiteMapper.selectById(id);
    }

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

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

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

    @Override
    public List<Website> findAllByWebsiteTypeId(Integer id) {
        QueryWrapper<Website> queryWrapper = new QueryWrapper<>();
        queryWrapper.eq("websiteTypeId", id);
        return WebsiteMapper.selectList(queryWrapper);
    }
}

控制层开发

WebsiteTypeCon
package jkw.controller.back;

import com.baomidou.mybatisplus.extension.plugins.pagination.Page;
import jkw.pojo.WebsiteType;
import jkw.service.WebsiteTypeService;
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/websiteType")
@RestController
@CrossOrigin
public class WebsiteTypeCon {
    @Autowired
    private WebsiteTypeService WebsiteTypeService;

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

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

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

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

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

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

WebsiteCon
package jkw.controller.back;

import com.baomidou.mybatisplus.extension.plugins.pagination.Page;
import jkw.pojo.Website;
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;

@RestController
@RequestMapping("/back/website")
@CrossOrigin
public class WebsiteCon {
    @Autowired
    private jkw.service.WebsiteService WebsiteService;

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

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

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

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

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

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

FrontWebsiteCon
package jkw.controller.front;

import jkw.pojo.Website;
import jkw.pojo.WebsiteType;
import jkw.service.WebsiteService;
import jkw.service.WebsiteTypeService;
import jkw.vo.BaseResult;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.CrossOrigin;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;

import java.util.List;

@RequestMapping("/front/website")
@RestController
@CrossOrigin
public class FrontWebsiteCon {
    @Autowired
    private WebsiteService websiteService;
    @Autowired
    private WebsiteTypeService websiteTypeService;

    /**
     * 查询所有网站类型以及对应的网站
     *
     * @return
     */
    @GetMapping("/findAllTypes")
    public BaseResult findAllTypeWithWebsite() {
        List<WebsiteType> websiteTypeList = websiteTypeService.findAll();
        for (WebsiteType websiteType : websiteTypeList) {
            List<Website> websiteList = websiteService.findAllByWebsiteTypeId(websiteType.getWebsiteTypeId());
            websiteType.setWebsites(websiteList);
        }
        return BaseResult.ok(websiteTypeList);
    }

}

后台ui设计

WebsiteType.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="websiteTypeName" 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.websiteTypeName"></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.websiteTypeName"></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({
  websiteTypeName: "",
})
//编辑对话框控制器
const dialogEditorVisible = ref(false)
//初始化编辑对话框状态
const editorFormInfo = reactive({
  websiteTypeId: '',
  websiteTypeName: "",
})
/**
 * 网路请求：分页查询
 *  */
const http = (search, page, size) => {
  axios.website_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.website_type_add({
    websiteTypeName: addFormInfo.websiteTypeName,
  }).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.website_type_findById({
    websiteTypeId: row.websiteTypeId
  }).then(res => {
    if (res.data.code == 200) {
      editorFormInfo.websiteTypeId = res.data.data.websiteTypeId;
      editorFormInfo.websiteTypeName = res.data.data.websiteTypeName;
    } else {
      ElMessage.error(res.data.data.message)
    }
  })

}
/**
 * 编辑对话框 确定事件
 */
const sureEditorHandler = () => {
  axios.website_type_update({
    websiteTypeId: editorFormInfo.websiteTypeId,
    websiteTypeName: editorFormInfo.websiteTypeName,
  }).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.website_type_delete({
      websiteTypeId: row.websiteTypeId
    }).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>

Website.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: 1100px;">
        <el-table-column label="图片" prop="websiteImg" align="center">
          <template #default="scope">
            <img :src="scope.row.websiteImg" style="height:60px"/>
          </template>
        </el-table-column>
        <el-table-column label="类型" prop="websiteTypeId" align="center">
          <template #default="scope">
                  <span v-for="item in typeList.list" :key="item.websiteTypeId">
                      {{ scope.row.websiteTypeId == item.websiteTypeId ? item.websiteTypeName : '' }}
                  </span>
          </template>
        </el-table-column>
        <el-table-column show-overflow-tooltip label="名称" prop="websiteName" align="center"></el-table-column>
        <el-table-column show-overflow-tooltip label="url" prop="websiteUrl" align="center"></el-table-column>
        <el-table-column show-overflow-tooltip label="描述" prop="websiteDesc" 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.websiteTypeId" placeholder="请选择类型" size="large">
            <el-option v-for="item in typeList.list" :key="item.websiteTypeId"
                       :label="item.websiteTypeName"
                       :value="item.websiteTypeId">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="名称">
          <el-input v-model="addFormInfo.websiteName"></el-input>
        </el-form-item>
        <el-form-item label="url">
          <el-input v-model="addFormInfo.websiteUrl"></el-input>
        </el-form-item>
        <el-form-item label="描述">
          <el-input type="textarea" rows="6" style="width: 200px" v-model="addFormInfo.websiteDesc"></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.websiteImg"/>

          </el-upload>
        </el-form-item>
        <el-form-item label="类型">
          <el-select v-model="editorFormInfo.websiteTypeId" placeholder="请选择类型" size="large">
            <el-option v-for="item in typeList.list" :key="item.websiteTypeId"
                       :label="item.websiteTypeName"
                       :value="item.websiteTypeId">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="名称">
          <el-input v-model="editorFormInfo.websiteName"></el-input>
        </el-form-item>
        <el-form-item label="url">
          <el-input v-model="editorFormInfo.websiteUrl"></el-input>
        </el-form-item>
        <el-form-item label="描述">
          <el-input type="textarea" rows="6" style="width: 200px" v-model="editorFormInfo.websiteDesc"></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(5)
//搜索初始化状态
const searchInfo = ref("")
//添加添加对话框控制器
const dialogAddVisible = ref(false)
//初始化添加对话框状态
const addFormInfo = reactive({
  websiteImg: "",
  websiteName: "",
  websiteUrl: "",
  websiteDesc: "",
  websiteTypeId: ''
})
//编辑对话框控制器
const dialogEditorVisible = ref(false)
//初始化编辑对话框状态
const editorFormInfo = reactive({
  websiteId: '',
  websiteImg: "",
  websiteName: "",
  websiteUrl: "",
  websiteDesc: "",
  websiteTypeId: ''
})
/**
 * 网路请求：分页查询
 *  */
const http = (search, page, size) => {
  axios.website_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.website_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.websiteImg = response.data
  ElMessage.success("上传成功")
}
//移除图片的钩子
const onHeadImageAddRemove = (response, uploadFile) => {
  axios.fastdfs_delete({

    filePath: addFormInfo.websiteImg

  }).then(res => {
    if (res.data.code == 200) {
      ElMessage.success("移除成功")
    }
  })
}
/**
 * 添加对话框 确定事件
 */
const sureHandler = () => {
  axios.website_add({
    websiteImg: addFormInfo.websiteImg,
    websiteName: addFormInfo.websiteName,
    websiteUrl: addFormInfo.websiteUrl,
    websiteDesc: addFormInfo.websiteDesc,
    websiteTypeId: addFormInfo.websiteTypeId,
  }).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.website_findById({
    websiteId: row.websiteId
  }).then(res => {
    if (res.data.code == 200) {
      editorFormInfo.websiteId = res.data.data.websiteId;
      editorFormInfo.websiteImg = res.data.data.websiteImg;
      editorFormInfo.websiteName = res.data.data.websiteName;
      editorFormInfo.websiteUrl = res.data.data.websiteUrl;
      editorFormInfo.websiteDesc = res.data.data.websiteDesc;
      editorFormInfo.websiteTypeId = res.data.data.websiteTypeId;
    } else {
      ElMessage.error(res.data.data.message)
    }
  })

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

        filePath: editorFormInfo.websiteImg

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

    }
/**
 * 编辑对话框 确定事件
 */
const sureEditorHandler = () => {
  axios.website_update({
    websiteId: editorFormInfo.websiteId,
    websiteImg: editorFormInfo.websiteImg,
    websiteName: editorFormInfo.websiteName,
    websiteUrl: editorFormInfo.websiteUrl,
    websiteDesc: editorFormInfo.websiteDesc,
    websiteTypeId: editorFormInfo.websiteTypeId,

  }).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.website_delete({
      websiteId: row.websiteId
    }).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>

更多推荐

手动开发-实现SpringMVC底层机制--小试牛刀

文章目录前端控制器Controller注解RequestMapping注解自定义容器LingWebApplicationContext设计handlerList完成分发请求Service注解和AutoWired注解RequestParam注解完整代码在这里说的底层机制的实现主要是指：前端控制器、Controller、S

Appium混合页面点击方法tap的使用

原生应用开发，是在Android、IOS等移动平台上利用官方提供的开发语言、开发类库、开发工具进行App开发；HTML5（h5）应用开发，是利用Web技术进行的App开发。目前，市面上很多app都是原生和h5混合开发，这样做的好处在于：1）开发效率高，节约时间同一套代码Android和IOS基本都可用。2）更新和部署比

北大王选实验室 | 摘要已死？

深度学习自然语言处理原创作者：Winnie最新一篇研究里探索了大型语言模型（LLMs）在文本摘要这一领域的表现。他们设计了新的数据集，通过一系列人类评估实验评估LLMs在不同摘要任务中的表现。惊人的是，大多数人类评估者实际更倾向于选择LLM生成的摘要，甚至超过了参考摘要（人工编写）的标准。这个结果意味着，LLMs的介入

《红警3》因计算机中丢失d3dx9_35.dll无法打开游戏怎么办?最新解决方法推荐

d3dx9_35.dll是DirectX9.0c的一部分，它是一个动态链接库(DLL)，包含了许多用于支持DirectX9.0c功能的函数和类。DirectX是一种由微软开发的游戏和多媒体应用程序编程接口，它提供了许多功能，如3D图形、音频、输入等，以便开发人员能够更轻松地创建高质量的游戏和多媒体应用程序。1、d3dx

lambda

一个lambda表达式表示一个可调用的代码单元。可以将其理解为一个未命名的内联函数。与普通函数类似，一个lambda具有一个返回类型、一个参数列表和一个函数体。与普通函数不同的是，lambda可以定义在其他函数内部。一个lambda表达式具有如下形式：[capturelist](parameterlist)->retu

骨髓小游戏

欢迎来到程序小院骨髓玩法：骨髓推塔小游戏，敌方士兵进入到我方高塔会毁坏建筑，我方可派兵前去迎战，我方：骑兵、长枪兵、弓兵、敌法：骷髅骑兵、骷髅长枪兵、骷髅弓兵,快去消灭敌人吧^^。开始游戏https://www.ormcc.com/play/gameStart/184html<divid="game"></div>cs

【EI会议】第三届大数据、人工智能与风险管理国际学术会议 (ICBAR 2023)

第三届大数据、人工智能与风险管理国际学术会议(ICBAR2023)20233rdInternationalConferenceonBigData,ArtificialIntelligenceandRiskManagement第三届大数据、人工智能与风险管理国际学术会议（ICBAR2023）将于2023年11月24-26

华为云云服务器评测 [Vue3 博物馆管理系统] 使用Vue3、Element-plus菜单组件构建轮播图

系列文章目录华为云云服务器评测第一章[linux实战]华为云耀云服务器L实例Java、node环境配置华为云云服务器评测第二章[linux实战]Unbutnu添加SSHKey、启动Springboot项目华为云云服务器评测第三章[linux实战]使用Vue3、Element-plus菜单组件构建轮播图华为云云服务器评测

Windows10怎么清除运行框中历史记录？电脑中怎么清除活动历史记录？

Windows10怎么清除运行框中历史记录？电脑中怎么清除活动历史记录？Win10怎么清除运行框中历史记录?那小编就来给大家解答一下吧，希望可以帮助到大家吧。清除运行框中历史记录1、在Win10系统下，按住键盘的“Win+R”快捷组合键，打开“运行”对话狂。2、在打开的“运行”对话框中，输入“regedit”命令，然后

计算机IO原理

一、中断机制在IO处理中有2种思路，一种就是轮训（polling）机制，一种是中断(interrupt)机制，前置是一种同步的通信机制，不是计算机中IO采用的机制，我们重点来说明中断机制。CPU停下当前的工作任务，去处理其他事情，处理完后回来继续执行刚才的任务，这一过程便是中断。中断分为外部中断和内部中断。外部中断可屏

移动 Web 第一天

目标：使用位移、缩放、旋转、渐变效果丰富网页元素的呈现方式。文章目录01-平面转换简介平移定位居中案例-双开门旋转转换原点案例-时钟多重转换缩放案例-播放特效倾斜02-渐变线性渐变案例-产品展示径向渐变03-综合案例导航-频道箭头旋转频道列表渐变按钮搜索按钮登录按钮客户端按钮轮播图猜你喜欢01-平面转换简介作用：为元素

热文推荐
  1. 嵌入式Linux驱动开发（I2C专题）（七）

    使用GPIO操作I2C设备_IMX6ULL参考资料：Linux文档Linux-5.4\Documentation\devicetree\bindings\i2c\i2c-gpio.yamlLinux-4.9.88\Documentation\devicetree\bindings\i2c\i2c-gpio.txtLin

  2. Selenium-介绍下其他骚操作

    ChromeDevTools简介ChromeDevTools是一组直接内置在基于Chromium的浏览器（如Chrome、Opera和MicrosoftEdge）中的工具，用于帮助开发人员调试和研究网站。借助ChromeDevTools，开发人员可以更深入地访问网站，并能够：检查DOM中的元素即时编辑元素和CSS检查和

  3. 【Java 基础篇】Java UDP通信详解

    UDP（UserDatagramProtocol）是一种无连接的网络传输协议，它不像TCP那样需要建立连接和维护状态，因此更加轻量级。UDP适用于那些对数据传输的实时性要求较高，可以容忍一定数据丢失的场景。本文将详细介绍Java中如何使用UDP协议进行网络通信，包括UDP套接字、数据传输、服务器和客户端的创建等。1.U

  4. 云可观测性：提升云环境中应用程序可靠性

    随着云计算的兴起和广泛应用，越来越多的企业将其应用程序和服务迁移到云环境中。在这个高度动态的环境中，确保应用程序的可靠性和可管理性成为了一个迫切的需求。云可观测性作为一种解决方案，针对这一需求提供了有效的方法和工具。本文将介绍云可观测性的概念、优势以及它如何提升云环境中应用程序的可靠性和可管理性。一、云可观测性概述掌动

  5. ADB环境搭建和抓取Crash日志实践总结

    一、adb下载1.1直接点击下载即可：http://adbshell.com/upload/adb.zip1.2网盘获取链接：https://pan.baidu.com/s/1P9nlRN0RQhPCPDaYg7Cgrg提取码：deng下载到本地解压，双击下图应用程序进行安装，其他文件不用动（与普通应用程序不同，adb

  6. 人工智能：ChatGPT与其他同类产品的优缺点对比

    引言：自然语言处理技术的快速发展推动了聊天机器人的广泛应用。ChatGPT作为一种强大的语言模型，具有出色的生成能力和上下文理解能力。本文将对比ChatGPT与其他同类产品的优缺点，并展示使用ChatGPT进行对话生成的示例代码。ChatGPT简介ChatGPT是由OpenAI开发的语言模型，基于大规模的预训练数据和深

  7. K8S pod资源、探针

    目录一.pod资源限制1.pod资源限制方式2.pod资源限制指定时指定的参数（1）request资源（2）limit资源（3）两种资源匹配方式3.资源限制的示例（1）官网示例2）Pod和容器的资源请求和限制格式（3）CPU资源单位介绍（4）内存资源单位（5）资源限制示例1：（6）资源限制示例2：2.Probe支持三种

  8. 模式分类与“组件协作模式”

    1.GOF-23模式分类从目的来看：创建型（Creational）模式：将对象的部分创建工作延迟到子类或者其他对象，从而应对需求变化为对象创建时具体类型实现引来的冲击。结构型（Structural）模式：通过类继承或者对象组合获得更灵活的结构，从而应对需求变化为对象的结构带来的冲击。行为型（Behavioral）模式：

  9. Python+Requests+Pytest+YAML+Allure实现接口自动化

    本项目实现接口自动化的技术选型：Python+Requests+Pytest+YAML+Allure，主要是针对之前开发的一个接口项目来进行学习，通过Python+Requests来发送和处理HTTP协议的请求接口，使用Pytest作为测试执行器，使用YAML来管理测试数据，使用Allure来生成测试报告一、项目说明本