【SpringBoot3+Vue3】六【后续1】【番外篇】- （0-1临摹）

  • 开发
  • 40

目录

一、后端

1、服务器管理

1.1 ProjectController

1.2 ProjectService

1.3 ProjectServiceImpl

1.4 ProjectMapper

1.5 实体类

2、项目管理

2.1 ServerManageController

2.2 ServerManageService

2.3 ServerManageServiceImpl

2.4 ServerManageMapper

2.5 ServerManage实体类

二、前端

1、菜单优化

2、将菜单页面与路径建立关联

3、建立2个页面

3.1 服务器管理project.vue

3.2 项目管理serverManage.vue

4、api下新增project.js 编写服务器列表查询方法

5、实现serverManage.vue

5.1 初始化serverManage.vue

5.2 列表查询

5.2.1 列表查询

5.2.2 当分页条的当前页和每页条数发生变化，重新发送请求获取数据  

5.2.3 搜索按钮绑定点击事件

5.3 添加实现

5.3.1 页面添加抽屉的组件

5.3.2 为添加新增绑定事件

5.3.3 project.js添加函数实现

5.3.4 ServerManage.vue中提供addServerManage函数完成添加接口的调用

5.3.5 添加页面保存按钮绑定事件

5.4 编辑实现

5.4.1 抽屉标题显示 定义标题

5.4.2 在抽屉上绑定标题

5.4.3 为添加文章按钮绑定事件

5.4.4 为编辑按钮绑定事件

5.4.5 数据回显（点击编辑显示数据）

5.4.5.1 回显函数showDrawer

5.4.5.2 编辑按钮绑定事件

5.4.5 project.js实现编辑接口

 5.4.6 调用修改接口实现函数

5.4.7 为保存按钮添加判断是添加保存还是修改保存

 5.4.8 优化修改之后，再添加数据未清空的问题

5.5 删除实现

5.5.1 project.js实现删除接口

5.5.2 添加删除确认弹窗以及删除接口函数deleteserverManage

5.5.3 删除按钮绑定事件

5.6 ServerManage.vue 完整代码

6、实现Project.vue

6.1 初始化Project.vue

6.2 列表查询

6.2.1 project.js添加查询条件服务器IP的查询接口

6.2.2 服务器IP查询条件函数

6.2.3 项目列表查询project.js接口实现

6.2.4 Project.vue中，调用接口获取数据

6.2.5 当分页条的当前页和每页条数发生变化，重新发送请求获取数据

6.2.6 搜索和重置 

 6.3 添加

6.3.1 引入添加组件以及添加表单数据模型

6.3.2 为添加按钮绑定事件

6.3.3 project.js提供添加项目接口

6.3.4 Project.vue中提供addProject函数完成添加项目接口的调用

6.3.5 为保存按钮绑定事件

6.4 编辑

6.4.1 为编辑按钮绑定事件（后面会使用函数替换）

6.4.2 数据回显

 6.4.3 通过插槽的方式得到被点击按钮所在行的数据

6.4.4 project.js中提供修改项目的函数

 6.4.5 调用接口完成修改的函数

6.4.6 保存按钮判断是添加还是修改

6.4.7 解决编辑再添加数据显示问题

6.5 删除

6.5.1 project.js添加删除接口调用

6.5.2 Project.vue添加删除弹窗，当用户点击确认后，调用接口删除

6.5.3 为删除按钮绑定事件

6.5.4 Project.vue全部代码

前言：前面一到五已经完整的实现了一个前后端的开发。本文从0-1的临摹，过程当中前端感觉费劲一点

一、后端

1、服务器管理

1.1 ProjectController

package com.bocai.controller;

import com.bocai.common.Result;
import com.bocai.pojo.PageBean;
import com.bocai.pojo.Project;
import com.bocai.service.ProjectService;
import lombok.extern.slf4j.Slf4j;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.validation.annotation.Validated;
import org.springframework.web.bind.annotation.*;

@RestController
@RequestMapping("/project")
@Slf4j
public class ProjectController {

    @Autowired
    private ProjectService projectService;

    @PostMapping
    public Result add(@RequestBody  @Validated(Project.Add.class) Project project){
        log.info("添加监控项目：{}",project);
        // 判断添加的项目英文名字是否重复
        Project queryProject = projectService.queryProjectByEnglishName(project);
        if (queryProject == null){
            // 不重复
            projectService.add(project);
            return Result.success();
        }else {
            return  Result.error("添加项目英文名重复！");
        }
    }


    /**
     * 条件查询
     * @param pageNum
     * @param pageSize
     * @param englishName
     * @param chineseName
     * @param serverManageId
     * @return
     */
    @GetMapping
    public Result page(@RequestParam(defaultValue = "1") Integer pageNum,
                       @RequestParam(defaultValue = "10") Integer pageSize,
                       String englishName, String chineseName, Integer serverManageId){
        log.info("分页查询参数：当前页：{} 每页条数： {} 英文名：{} 中文名：{} 服务器:{} ",pageNum,pageSize,englishName,chineseName,serverManageId);
        PageBean pageBean = projectService.pageList(pageNum,pageSize,englishName,chineseName,serverManageId);
        return Result.success(pageBean);
    }



    /**
     * 根据id修改
     * @param project
     * @return
     */
    @PutMapping
    public Result update(@RequestBody @Validated(Project.Update.class) Project project){
        log.info("修改的项目为：{}",project);
        // 判断添加的项目英文名字是否重复
        Project queryProject = projectService.queryProjectByEnglishName(project);
        if (queryProject == null){
            // 可以修改
            projectService.updateProjectById(project);
            return Result.success();
        }else {
            return  Result.error("修改的项目英文名称重复！");
        }

    }


    /**
     * 根据id删除
     * @param id
     * @return
     */
    @DeleteMapping
    public Result delete(Integer id){
        log.info("根据id删除：{}",id);
        projectService.deleteById(id);
        return Result.success();
    }


}

1.2 ProjectService

package com.bocai.service;

import com.bocai.pojo.PageBean;
import com.bocai.pojo.Project;
import com.baomidou.mybatisplus.extension.service.IService;

/**
* @author cheng
* @description 针对表【project】的数据库操作Service
* @createDate 2023-11-28 11:52:33
*/
public interface ProjectService extends IService<Project> {

    /**
     * 根据英文名判断是否重复
     * @param project
     * @return
     */
    Project queryProjectByEnglishName(Project project);


    /**
     * 添加项目
     * @param project
     */
    void add(Project project);

    /**
     * 条件查询
     * @param pageNum
     * @param pageSize
     * @param englishName
     * @param chineseName
     * @param serverManageId
     * @return
     */
    PageBean pageList(Integer pageNum, Integer pageSize, String englishName, String chineseName, Integer serverManageId);

    /**
     * 根据id修改
     * @param project
     */
    void updateProjectById(Project project);

    /**
     * 根据id删除
     * @param id ID
     */
    void deleteById(Integer id);



}

1.3 ProjectServiceImpl

求赞助，私聊

1.4 ProjectMapper

package com.bocai.mapper;

import com.bocai.pojo.Project;
import com.baomidou.mybatisplus.core.mapper.BaseMapper;
import org.apache.ibatis.annotations.Mapper;

/**
* @author cheng
* @description 针对表【project】的数据库操作Mapper
* @createDate 2023-11-28 11:52:33
* @Entity com.bocai.pojo.Project
*/
@Mapper
public interface ProjectMapper extends BaseMapper<Project> {

}

1.5 实体类

求赞助，私聊 

2、项目管理

2.1 ServerManageController

package com.bocai.controller;


import com.bocai.common.Result;
import com.bocai.pojo.PageBean;
import com.bocai.pojo.ServerManage;
import com.bocai.service.ServerManageService;
import lombok.extern.slf4j.Slf4j;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.validation.annotation.Validated;
import org.springframework.web.bind.annotation.*;

import java.util.List;

@RestController
@RequestMapping("/serverManage")
@Slf4j
public class ServerManageController {

    @Autowired
    private ServerManageService serverManageService;

    /**
     * 添加服务器
     * @param serverManage
     * @return
     */
    @PostMapping
    public Result add(@RequestBody @Validated(ServerManage.Add.class) ServerManage serverManage){
        log.info("新增服务器{}",serverManage);
        // 查询服务IP地址是否重复
        ServerManage queryServerManage = serverManageService.queryServerManageByIpAddress(serverManage);
        if (queryServerManage == null){
            //没有重复的服务器ip，可以新增
            serverManageService.add(serverManage);
            return Result.success();
        }else{
            // 存在重复文章标题
            return Result.error("IP地址重复！");
        }

    }

    /**
     * 条件查询
     * @param pageNum
     * @param pageSize
     * @param serverName
     * @param ipAddress
     * @return
     */
    @GetMapping
    public Result page(@RequestParam(defaultValue = "1") Integer pageNum,
                       @RequestParam(defaultValue = "10") Integer pageSize,
                       String serverName, String ipAddress){
        log.info("分页查询参数：当前页：{} 每页条数： {} 名称：{}  IP：{} ",pageNum,pageSize,serverName,ipAddress);
        PageBean pageBean = serverManageService.pageList(pageNum,pageSize,serverName,ipAddress);
        return Result.success(pageBean);
    }

    /**
     * 列表全部服务器。不翻页，主要用于其他页面作为查询条件
     * @return
     */
    @GetMapping("/all")
    public Result list(){
        log.info("列表全部服务器。不翻页，主要用于其他页面作为查询条件");
        List list = serverManageService.serverManagelist();
        return Result.success(list);
    }


    /**
     * 修改更新服务
     * @param serverManage
     * @return
     */
    @PutMapping
    public Result update(@RequestBody @Validated(ServerManage.Update.class) ServerManage serverManage){
        log.info("根据id更新服务器属性{}",serverManage);
        // 查询服务IP地址是否重复
        ServerManage queryServerManage = serverManageService.queryServerManageByIpAddress(serverManage);
        if(queryServerManage == null){
            serverManageService.updateServerManageById(serverManage);
            return Result.success();
        }else {
            return Result.error("不能修改为IP重复名称");
        }
    }

    /**
     * 根据id删除
     * @param id
     * @return
     */
    @DeleteMapping
    public Result delete(Integer id){
        log.info("要删除的服务器是：{}",id);
        serverManageService.deleteById(id);
        return Result.success();
    }

}

2.2 ServerManageService

package com.bocai.service;

import com.bocai.pojo.PageBean;
import com.bocai.pojo.ServerManage;
import com.baomidou.mybatisplus.extension.service.IService;

import java.util.List;

/**
* @author cheng
* @description 针对表【server_manage】的数据库操作Service
* @createDate 2023-11-28 10:23:52
*/
public interface ServerManageService extends IService<ServerManage> {
    /**
     * 查询ip地址是否重复
     * @param serverManage
     * @return
     */
    ServerManage queryServerManageByIpAddress(ServerManage serverManage);

    /**
     * 添加服务器
     * @param serverManage
     */
    void add(ServerManage serverManage);

    /**
     * 条件查询
     * @param pageNum
     * @param pageSize
     * @param serverName
     * @param ipAddress
     * @return
     */
    PageBean pageList(Integer pageNum, Integer pageSize, String serverName, String ipAddress);

    /**
     * 更新服务
     * @param serverManage
     */
    void updateServerManageById(ServerManage serverManage);


    /**
     * 根据id删除
     * @param id
     */
    void deleteById(Integer id);

    /**
     * 列表全部服务器。不翻页，主要用于其他页面作为查询条件
     * @return
     */
    List serverManagelist();
}

2.3 ServerManageServiceImpl

求赞助，私聊

2.4 ServerManageMapper

package com.bocai.mapper;

import com.bocai.pojo.ServerManage;
import com.baomidou.mybatisplus.core.mapper.BaseMapper;
import org.apache.ibatis.annotations.Mapper;

/**
* @author cheng
* @description 针对表【server_manage】的数据库操作Mapper
* @createDate 2023-11-28 10:23:52
* @Entity com.bocai.pojo.ServerManage
*/
@Mapper
public interface ServerManageMapper extends BaseMapper<ServerManage> {

}

2.5 ServerManage实体类

求赞助，私聊

二、前端

1、菜单优化

修改Layout.vue 新增下拉菜单

  <el-sub-menu >
                    <template #title>
                        <el-icon>
                            <Management />
                        </el-icon>
                        <span>基础信息</span>
                    </template>
                    <el-menu-item index="/project/serverManage">  
                        <el-icon>
                            <EditPen />
                        </el-icon>
                        <span>服务器管理</span>
                    </el-menu-item>
                    <el-menu-item index="/project/project">  
                        <el-icon>
                            <EditPen />
                        </el-icon>
                        <span>项目管理</span>
                    </el-menu-item>
                    
                </el-sub-menu>

2、将菜单页面与路径建立关联

修改index.js

import ArticleCategoryVue from '@/views/article/ArticleCategory.vue'
import ArticleManageVue from '@/views/article/ArticleManage.vue'
import UserAvatarVue from '@/views/user/UserAvatar.vue'
import UserInfoVue from '@/views/user/UserInfo.vue'
import UserResetPasswordVue from '@/views/user/UserResetPassword.vue'
import ServerManageVue from '@/views/project/ServerManage.vue'  // 新增菜单1
import ProjectVue from '@/views/project/Project.vue'  // 新增菜单2

//定义路由关系
const routes = [
    { path: '/login', component: LoginVue },
    {
        path: '/', component: LayoutVue,redirect:'/article/manage', children: [
            { path: '/article/category', component: ArticleCategoryVue },
            { path: '/article/manage', component: ArticleManageVue },
            { path: '/user/info', component: UserInfoVue },
            { path: '/user/avatar', component: UserAvatarVue },
            { path: '/user/resetPassword', component: UserResetPasswordVue },
            { path: '/project/serverManage', component: ServerManageVue }, // 新增菜单1
            { path: '/project/project', component: ProjectVue }, // 新增菜单2
        ]
    }
]

3、建立2个页面

在views下新建文件夹project，然后新增两个页面

3.1 服务器管理project.vue

<script setup>


</script>
<template>
    <h1>服务器管理页面</h1>
</template>

3.2 项目管理serverManage.vue

<script setup>


</script>
<template>
    <h1>项目管理页面</h1>
</template>

4、api下新增project.js 编写服务器列表查询方法

//导入request.js请求工具
import request from '@/utils/request.js'

// 1  服务器列表查询
export const ServerManageListService = (params) => {
    return request.get('/serverManage', { params: params })
   }

5、实现serverManage.vue

5.1 初始化serverManage.vue

<script setup>
import {
    Edit,
    Delete
} from '@element-plus/icons-vue'

import { ref } from 'vue'




//搜索输入的服务器名称
const serverName = ref('')

// 搜索输入的服务器IP
const ipAddress = ref('')

//服务列表数据模型
const servers = ref([
    {
        "id": 1,
        "serverName": "服务器11",
        "serverDescribe": "主服务11",
        "ipAddress": "192.168.1.11",        
        "createTime": "2023-09-03 11:55:30",
        "updateTime": "2023-09-03 11:55:30"
    },
    {
        "id": 5,
        "serverName": "服务器12",
        "serverDescribe": "主服务12",
        "ipAddress": "192.168.1.12", 
        "createTime": "2023-09-03 11:55:30",
        "updateTime": "2023-09-03 11:55:30"
    },
    {
        "id": 5,
        "serverName": "服务器13",
        "serverDescribe": "主服务13",
        "ipAddress": "192.168.1.13", 
        "createTime": "2023-09-03 11:55:30",
        "updateTime": "2023-09-03 11:55:30"
    },
])

//分页条数据模型
const pageNum = ref(1)//当前页
const total = ref(20)//总条数
const pageSize = ref(10)//每页条数

//当每页条数发生了变化，调用此函数
const onSizeChange = (size) => {
    pageSize.value = size
    
}
//当前页码发生变化，调用此函数
const onCurrentChange = (num) => {
    pageNum.value = num
 
}





</script>
<template>
    <el-card class="page-container">
        <template #header>
            <div class="header">
                <span>服务器管理</span>
                <div class="extra">
                    <el-button type="primary">添加</el-button>
                </div>
            </div>
        </template>
        <!-- 搜索表单 -->
        <el-form inline>
            <el-form-item label="服务名称：">
                <el-input v-model="serverName" placeholder="请输入服务器名称" />
            </el-form-item>

            <el-form-item label="服务IP:">
                <el-input v-model="ipAddress" placeholder="请输入服务器IP" />
            </el-form-item>
            <el-form-item>
                <el-button type="primary" >搜索</el-button>                
            </el-form-item>
        </el-form>
        <!-- 文章列表 -->
        <el-table :data="servers" style="width: 100%">
            <el-table-column label="服务器名" width="400" prop="serverName"></el-table-column>           
            <el-table-column label="IP地址" prop="ipAddress"> </el-table-column>
            <el-table-column label="描述" prop="serverDescribe"></el-table-column>
            <el-table-column label="创建时间" prop="createTime"></el-table-column>
            <el-table-column label="更新时间" prop="updateTime"></el-table-column>
            <el-table-column label="操作" width="100">
                <template #default="{ row }">
                    <el-button :icon="Edit" circle plain type="primary"></el-button>
                    <el-button :icon="Delete" circle plain type="danger"></el-button>
                </template>
            </el-table-column>
            <template #empty>
                <el-empty description="没有数据" />
            </template>
        </el-table>
        <!-- 分页条 -->
        <el-pagination v-model:current-page="pageNum" v-model:page-size="pageSize" :page-sizes="[3, 5 ,10, 15]"
            layout="jumper, total, sizes, prev, pager, next" background :total="total" @size-change="onSizeChange"
            @current-change="onCurrentChange" style="margin-top: 20px; justify-content: flex-end" />
    </el-card>
</template>
<style lang="scss" scoped>
.page-container {
    min-height: 100%;
    box-sizing: border-box;

    .header {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
}
</style>

5.2 列表查询

5.2.1 列表查询
//1、服务器列表查询
import { ServerManageListService } from '@/api/project.js'

// 1、 定义服务器列表查询函数
const getServerManageList = async () => {
    let params = {
        pageNum: pageNum.value,
        pageSize: pageSize.value,
        serverName: serverName.value ? serverName.value : null,
        ipAddress: ipAddress.value ? ipAddress.value : null
    }
    let result = await ServerManageListService(params);
    //渲染列表数据
    servers.value = result.data.items
    
    //渲染总条数
    total.value=result.data.total
}

getServerManageList();
5.2.2 当分页条的当前页和每页条数发生变化，重新发送请求获取数据  
//当每页条数发生了变化，调用此函数
const onSizeChange = (size) => {
    pageSize.value = size
    getServerManageList()  // 1
}
//当前页码发生变化，调用此函数
const onCurrentChange = (num) => {
    pageNum.value = num
    getServerManageList()  //1 
}
5.2.3 搜索按钮绑定点击事件
  <el-form-item>
                <el-button type="primary" @click="getServerManageList">搜索</el-button>                
            </el-form-item>

5.3 添加实现

5.3.1 页面添加抽屉的组件
import {Plus} from '@element-plus/icons-vue'
// 2 控制抽屉是否显示
const visibleDrawer = ref(false)
// 2 添加表单数据模型
const serverManageModel = ref({
    serverName: '',
    serverDescribe: '',
    ipAddress: ''
})

添加页面组件抽屉

 <el-drawer v-model="visibleDrawer" title="添加" direction="rtl" size="50%">
            <!-- 添加服务器表单 -->
            <el-form :model="serverManageModel" label-width="100px" >
                <el-form-item label="服务器名称" >
                    <el-input v-model="serverManageModel.serverName" placeholder="请输入服务器名称"></el-input>
                </el-form-item>
                <el-form-item label="服务器IP" >
                    <el-input v-model="serverManageModel.ipAddress" placeholder="请输入服务器IP"></el-input>
                </el-form-item>
                <el-form-item label="描述" >
                    <!-- <el-input v-model="serverManageModel.serverDescribe" placeholder="请输入描述"></el-input> -->
                    <el-input v-model="serverManageModel.serverDescribe" :rows="2" type="textarea" placeholder="请输入描述" />
                </el-form-item>
                <el-form-item>
                    <el-button type="primary">保存</el-button>                    
                </el-form-item>
            </el-form>
        </el-drawer>
5.3.2 为添加新增绑定事件
<el-button type="primary" @click="visibleDrawer = true">添加</el-button>
5.3.3 project.js添加函数实现
//导入request.js请求工具
import request from '@/utils/request.js'

// 1  服务器列表查询
export const ServerManageListService = (params) => {
    return request.get('/serverManage', { params: params })
   }


// 2 添加服务器
export const serverManageAddService = (serverManageModel)=>{ 
    return request.post('/serverManage',serverManageModel)}
5.3.4 ServerManage.vue中提供addServerManage函数完成添加接口的调用

//1、服务器列表查询 2、添加
import { ServerManageListService,serverManageAddService } from '@/api/project.js'
import { ElMessage,ElMessageBox } from 'element-plus'

//2 添加服务器接口调用
const addServerManage=async ()=>{    
    let result = await serverManageAddService(serverManageModel.value);
    ElMessage.success(result.message? result.message:'添加成功')
    //getServerManageList,获取服务列表
    getServerManageList()
    //隐藏抽屉
    visibleDrawer.value=false
}
5.3.5 添加页面保存按钮绑定事件
<el-button type="primary" @click="addServerManage()">保存</el-button>

5.4 编辑实现

编辑与添加共用页面

5.4.1 抽屉标题显示 定义标题
// 3 标题//抽屉标题
const title=ref('')
5.4.2 在抽屉上绑定标题
<el-drawer v-model="visibleDrawer"  :title="title" direction="rtl" size="50%">
5.4.3 为添加文章按钮绑定事件
<el-button type="primary" @click="title='添加服务器';visibleDrawer = true">添加</el-button>
5.4.4 为编辑按钮绑定事件
<el-button :icon="Edit" circle plain type="primary" @click="title='修改服务器';visibleDrawer = true"></el-button>
5.4.5 数据回显（点击编辑显示数据）
5.4.5.1 回显函数showDrawer
// 3  点击编辑的回显函数
const showDrawer = (row)=>{
    title.value = '修改服务器';visibleDrawer.value = true
    //数据拷贝
    serverManageModel.value.serverName = row.serverName;
    serverManageModel.value.ipAddress = row.ipAddress;
    serverManageModel.value.serverDescribe = row.serverDescribe;    
    //扩展id属性，将来需要传参给后台完成数据的修改
    serverManageModel.value.id = row.id
}
5.4.5.2 编辑按钮绑定事件
<el-button :icon="Edit" circle plain type="primary" @click="showDrawer(row)"></el-button>
5.4.5 project.js实现编辑接口
//导入request.js请求工具
import request from '@/utils/request.js'

// 1  服务器列表查询
export const ServerManageListService = (params) => {
    return request.get('/serverManage', { params: params })
   }


// 2 添加服务器
export const serverManageAddService = (serverManageModel)=>{ 
    return request.post('/serverManage',serverManageModel)
}


//3 修改服务器
export const serverManageUpdateService = (serverManageModel)=>{
    return request.put('/serverManage',serverManageModel)
}
 5.4.6 调用修改接口实现函数
//1、服务器列表查询 2、添加 3修改
import { ServerManageListService,serverManageAddService,serverManageUpdateService } from '@/api/project.js'


//3 修改保存
const updateServerManage=async ()=>{
    let result = await serverManageUpdateService(serverManageModel.value)
    ElMessage.success(result.message? result.message:'修改成功')
    //隐藏抽屉
    visibleDrawer.value=false
    //再次访问后台接口，查询所有列表数据
    getServerManageList()
}
5.4.7 为保存按钮添加判断是添加保存还是修改保存
<el-button type="primary" @click="title==='添加服务器'? addServerManage():updateServerManage()">保存</el-button>
 5.4.8 优化修改之后，再添加数据未清空的问题
//3  修改再添加之后进行 清空模型数据
const clearServerManageModel = ()=>{
    serverManageModel.value.serverName='',
    serverManageModel.value.ipAddress='',
    serverManageModel.value.serverDescribe=''    
}

为添加按钮绑定事件

 <el-button type="primary" @click="title='添加服务器';visibleDrawer = true;clearServerManageModel()">添加</el-button>

5.5 删除实现

5.5.1 project.js实现删除接口
//导入request.js请求工具
import request from '@/utils/request.js'

// 1  服务器列表查询
export const ServerManageListService = (params) => {
    return request.get('/serverManage', { params: params })
   }


// 2 添加服务器
export const serverManageAddService = (serverManageModel)=>{ 
    return request.post('/serverManage',serverManageModel)
}


//3 修改服务器
export const serverManageUpdateService = (serverManageModel)=>{
    return request.put('/serverManage',serverManageModel)
}

//4 删除服务器
export const serverManageDeleteService = (id) => {
    return request.delete('/serverManage?id='+id)

}
5.5.2 添加删除确认弹窗以及删除接口函数deleteserverManage
//1、服务器列表查询 2、添加 3修改 4删除
import { ServerManageListService,serverManageAddService,serverManageUpdateService,serverManageDeleteService } from '@/api/project.js'
//2  添加 4删除弹窗
import { ElMessage,ElMessageBox } from 'element-plus'


// 4 删除（记得引用ElMessageBox）  给删除按钮绑定事件
const deleteserverManage = (row) => {
    // 提示用户 确认框
    ElMessageBox.confirm(
        '你确认删除该服务器吗？',
        '温馨提示',
        {
            confirmButtonText: '确认',
            cancelButtonText: '取消',
            type: 'warning',
        }
    )
        .then(async() => {
            //用户点击了确认
            let result = await serverManageDeleteService(row.id)
            // 给出提示
            ElMessage({
                type: 'success',
                message: '删除成功',
            })
            //刷新列表//再次访问后台接口，查询所有数据
            getServerManageList()
        })
        .catch(() => {
            //用户点击了取消
            ElMessage({
                type: 'info',
                message: '取消删除',
            })
        })
    }
5.5.3 删除按钮绑定事件
  <el-button :icon="Delete" circle plain type="danger" @click="deleteserverManage(row)"></el-button>

5.6 ServerManage.vue 完整代码

<script setup>
import {
    Edit,
    Delete
} from '@element-plus/icons-vue'

import { ref } from 'vue'

//1、服务器列表查询 2、添加 3修改 4删除
import { ServerManageListService,serverManageAddService,serverManageUpdateService,serverManageDeleteService } from '@/api/project.js'

//2  添加 4删除弹窗
import { ElMessage,ElMessageBox } from 'element-plus'
import {Plus} from '@element-plus/icons-vue'


//搜索输入的服务器名称
const serverName = ref('')

// 搜索输入的服务器IP
const ipAddress = ref('')

//服务列表数据模型
const servers = ref([
    {
        "id": 1,
        "serverName": "服务器11",
        "serverDescribe": "主服务11",
        "ipAddress": "192.168.1.11",        
        "createTime": "2023-09-03 11:55:30",
        "updateTime": "2023-09-03 11:55:30"
    },
    {
        "id": 5,
        "serverName": "服务器12",
        "serverDescribe": "主服务12",
        "ipAddress": "192.168.1.12", 
        "createTime": "2023-09-03 11:55:30",
        "updateTime": "2023-09-03 11:55:30"
    },
    {
        "id": 5,
        "serverName": "服务器13",
        "serverDescribe": "主服务13",
        "ipAddress": "192.168.1.13", 
        "createTime": "2023-09-03 11:55:30",
        "updateTime": "2023-09-03 11:55:30"
    },
])

//分页条数据模型
const pageNum = ref(1)//当前页
const total = ref(20)//总条数
const pageSize = ref(10)//每页条数

//当每页条数发生了变化，调用此函数
const onSizeChange = (size) => {
    pageSize.value = size
    getServerManageList()  // 1
}
//当前页码发生变化，调用此函数
const onCurrentChange = (num) => {
    pageNum.value = num
    getServerManageList()  //1 
}

// 1、 定义服务器列表查询函数
const getServerManageList = async () => {
    let params = {
        pageNum: pageNum.value,
        pageSize: pageSize.value,
        serverName: serverName.value ? serverName.value : null,
        ipAddress: ipAddress.value ? ipAddress.value : null
    }
    let result = await ServerManageListService(params);
    //渲染列表数据
    servers.value = result.data.items
    
    //渲染总条数
    total.value=result.data.total
}

getServerManageList();


// 2 控制抽屉是否显示
const visibleDrawer = ref(false)
// 2 添加表单数据模型
const serverManageModel = ref({
    serverName: '',
    serverDescribe: '',
    ipAddress: ''
})

//2 添加服务器接口调用
const addServerManage=async ()=>{    
    let result = await serverManageAddService(serverManageModel.value);
    ElMessage.success(result.message? result.message:'添加成功')
    //getServerManageList,获取服务列表
    getServerManageList()
    //隐藏抽屉
    visibleDrawer.value=false
}

// 3 // 3 标题//抽屉标题
const title=ref('')

// 3  点击编辑的回显函数
const showDrawer = (row)=>{
    title.value = '修改服务器';visibleDrawer.value = true
    //数据拷贝
    serverManageModel.value.serverName = row.serverName;
    serverManageModel.value.ipAddress = row.ipAddress;
    serverManageModel.value.serverDescribe = row.serverDescribe;    
    //扩展id属性，将来需要传参给后台完成数据的修改
    serverManageModel.value.id = row.id
}



//3 修改保存
const updateServerManage=async ()=>{
    let result = await serverManageUpdateService(serverManageModel.value)
    ElMessage.success(result.message? result.message:'修改成功')
    //隐藏抽屉
    visibleDrawer.value=false
    //再次访问后台接口，查询所有列表数据
    getServerManageList()
}

//3  修改再添加之后进行 清空模型数据
const clearServerManageModel = ()=>{
    serverManageModel.value.serverName='',
    serverManageModel.value.ipAddress='',
    serverManageModel.value.serverDescribe=''    
}




// 4 删除（记得引用ElMessageBox）  给删除按钮绑定事件
const deleteserverManage = (row) => {
    // 提示用户 确认框
    ElMessageBox.confirm(
        '你确认删除该服务器吗？',
        '温馨提示',
        {
            confirmButtonText: '确认',
            cancelButtonText: '取消',
            type: 'warning',
        }
    )
        .then(async() => {
            //用户点击了确认
            let result = await serverManageDeleteService(row.id)
            // 给出提示
            ElMessage({
                type: 'success',
                message: '删除成功',
            })
            //刷新列表//再次访问后台接口，查询所有数据
            getServerManageList()
        })
        .catch(() => {
            //用户点击了取消
            ElMessage({
                type: 'info',
                message: '取消删除',
            })
        })
    }

</script>
<template>
    <el-card class="page-container">
        <template #header>
            <div class="header">
                <span>服务器管理</span>
                <div class="extra">
                    <el-button type="primary" @click="title='添加服务器';visibleDrawer = true;clearServerManageModel()">添加</el-button>
                </div>
            </div>
        </template>
        <!-- 搜索表单 -->
        <el-form inline>
            <el-form-item label="服务名称：">
                <el-input v-model="serverName" placeholder="请输入服务器名称" />
            </el-form-item>

            <el-form-item label="服务IP:">
                <el-input v-model="ipAddress" placeholder="请输入服务器IP" />
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="getServerManageList">搜索</el-button>                
            </el-form-item>
        </el-form>
        <!-- 文章列表 -->
        <el-table :data="servers" style="width: 100%">
            <el-table-column label="服务器名" width="400" prop="serverName"></el-table-column>           
            <el-table-column label="IP地址" prop="ipAddress"> </el-table-column>
            <el-table-column label="描述" prop="serverDescribe"></el-table-column>
            <el-table-column label="创建时间" prop="createTime"></el-table-column>
            <el-table-column label="更新时间" prop="updateTime"></el-table-column>
            <el-table-column label="操作" width="100">
                <template #default="{ row }">
                    <el-button :icon="Edit" circle plain type="primary" @click="showDrawer(row)"></el-button>
                    <el-button :icon="Delete" circle plain type="danger" @click="deleteserverManage(row)"></el-button>
                </template>
            </el-table-column>
            <template #empty>
                <el-empty description="没有数据" />
            </template>
        </el-table>
        <!-- 分页条 -->
        <el-pagination v-model:current-page="pageNum" v-model:page-size="pageSize" :page-sizes="[3, 5 ,10, 15]"
            layout="jumper, total, sizes, prev, pager, next" background :total="total" @size-change="onSizeChange"
            @current-change="onCurrentChange" style="margin-top: 20px; justify-content: flex-end" />
    </el-card>


    <!-- 2 抽屉 -->
    <el-drawer v-model="visibleDrawer" :title="title" direction="rtl" size="50%">
            <!-- 添加服务器表单 -->
            <el-form :model="serverManageModel" label-width="100px" >
                <el-form-item label="服务器名称" >
                    <el-input v-model="serverManageModel.serverName" placeholder="请输入服务器名称"></el-input>
                </el-form-item>
                <el-form-item label="服务器IP" >
                    <el-input v-model="serverManageModel.ipAddress" placeholder="请输入服务器IP"></el-input>
                </el-form-item>
                <el-form-item label="描述" >
                    <!-- <el-input v-model="serverManageModel.serverDescribe" placeholder="请输入描述"></el-input> -->
                    <el-input v-model="serverManageModel.serverDescribe" :rows="2" type="textarea" placeholder="请输入描述" />
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="title==='添加服务器'? addServerManage():updateServerManage()">保存</el-button>                    
                </el-form-item>
            </el-form>
        </el-drawer>

</template>
<style lang="scss" scoped>
.page-container {
    min-height: 100%;
    box-sizing: border-box;

    .header {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
}


.editor {
  width: 100%;
  :deep(.ql-editor) {
    min-height: 200px;
  }
}
</style>

6、实现Project.vue

6.1 初始化Project.vue

<script setup>
import {
    Edit,
    Delete
} from '@element-plus/icons-vue'

import { ref } from 'vue'

//服务器数据模型
const serverManages = ref([
    {
        "id": 3,
        "ServerName": "11",
        "ipAddress": "192.168.1.11",
        "createTime": "2023-09-02 12:06:59",
        "updateTime": "2023-09-02 12:06:59"
    },
    {
        "id": 4,
        "ServerName": "12",
        "ipAddress": "192.168.1.12",
        "createTime": "2023-09-02 12:08:16",
        "updateTime": "2023-09-02 12:08:16"
    },
    {
        "id": 5,
        "ServerName": "13",
        "ipAddress": "192.168.1.13",
        "createTime": "2023-09-02 12:08:33",
        "updateTime": "2023-09-02 12:08:33"
    }
])

//用户搜索时选中服务器id
const serverManageId=ref('')

//用户搜索时输入的英文名称
const englishName=ref('')

//用户搜索时输入的中文名称
const chineseName=ref('')

//列表数据模型
const projects= ref([
    {
        "id": 5,
        "englishName": "analysis",
        "chineseName": "能耗服务",
        "ipAddress": "192.168.1.11",
        "instances": 1,
        "projectDescribe": "333",
        "createTime": "2023-09-03 11:55:30",
        "updateTime": "2023-09-03 11:55:30",
        "isEnable":1
    },
    {
        "id": 5,
        "englishName": "dispatch-platform",
        "chineseName": "通讯平台",
        "ipAddress": "192.168.1.12",
        "instances": 1,
        "projectDescribe": "4545",
        "createTime": "2023-09-03 11:55:30",
        "updateTime": "2023-09-03 11:55:30",
        "isEnable":1
    },
    {
        "id": 5,
        "englishName": "app",
        "chineseName": "app服务",
        "ipAddress": "192.168.1.13",
        "instances": 1,
        "projectDescribe": "443",
        "createTime": "2023-09-03 11:55:30",
        "updateTime": "2023-09-03 11:55:30",
        "isEnable":1
    },
])

//分页条数据模型
const pageNum = ref(1)//当前页
const total = ref(20)//总条数
const pageSize = ref(3)//每页条数

//当每页条数发生了变化，调用此函数
const onSizeChange = (size) => {
    pageSize.value = size
}
//当前页码发生变化，调用此函数
const onCurrentChange = (num) => {
    pageNum.value = num
}
</script>
<template>
    <el-card class="page-container">
        <template #header>
            <div class="header">
                <span>项目管理</span>
                <div class="extra">
                    <el-button type="primary">添加</el-button>
                </div>
            </div>
        </template>
        <!-- 搜索表单 -->
        <el-form inline>
            <el-form-item label="服务器IP：">
                <el-select placeholder="请选择" v-model="serverManageId">
                    <el-option 
                        v-for="c in serverManages" 
                        :key="c.id" 
                        :label="c.ipAddress"
                        :value="c.id">
                    </el-option>
                </el-select>
            </el-form-item>

            <el-form-item label="英文名称：">
                <el-input v-model="englishName" placeholder="请输入英文名称" />
            </el-form-item>

            <el-form-item label="中文名称:">
                <el-input v-model="chineseName" placeholder="请输入中文名称" />
            </el-form-item>
            <el-form-item>
                <el-button type="primary">搜索</el-button>
                <el-button>重置</el-button>
            </el-form-item>
        </el-form>
        <!-- 文章列表 -->
        <el-table :data="projects" style="width: 100%">
            <el-table-column label="英文名称"  prop="englishName"></el-table-column>
            <el-table-column label="中文名称"  prop="chineseName"></el-table-column>
            <el-table-column label="服务器IP" prop="ipAddress"></el-table-column>
            <el-table-column label="实例数" prop="instances"></el-table-column>
            <el-table-column label="描述" prop="projectDescribe"></el-table-column>           
            <el-table-column label="创建时间" prop="createTime"> </el-table-column>
            <el-table-column label="更新时间" prop="updateTime"></el-table-column>
            <el-table-column label="启用/禁用" prop="isEnable"></el-table-column>
            <el-table-column label="操作" width="100">
                <template #default="{ row }">
                    <el-button :icon="Edit" circle plain type="primary"></el-button>
                    <el-button :icon="Delete" circle plain type="danger"></el-button>
                </template>
            </el-table-column>
            <template #empty>
                <el-empty description="没有数据" />
            </template>
        </el-table>
        <!-- 分页条 -->
        <el-pagination v-model:current-page="pageNum" v-model:page-size="pageSize" :page-sizes="[3, 5 ,10, 15]"
            layout="jumper, total, sizes, prev, pager, next" background :total="total" @size-change="onSizeChange"
            @current-change="onCurrentChange" style="margin-top: 20px; justify-content: flex-end" />
    </el-card>
</template>
<style lang="scss" scoped>
.page-container {
    min-height: 100%;
    box-sizing: border-box;

    .header {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
}
</style>

6.2 列表查询

6.2.1 project.js添加查询条件服务器IP的查询接口
//导入request.js请求工具
import request from '@/utils/request.js'

// 1  服务器列表查询
export const ServerManageListService = (params) => {
    return request.get('/serverManage', { params: params })
   }


// 2 添加服务器
export const serverManageAddService = (serverManageModel)=>{ 
    return request.post('/serverManage',serverManageModel)
}


//3 修改服务器
export const serverManageUpdateService = (serverManageModel)=>{
    return request.put('/serverManage',serverManageModel)
}

//4 删除服务器
export const serverManageDeleteService = (id) => {
    return request.delete('/serverManage?id='+id)

}

// 1  服务器列表查询(项目管理页面调用 搜索框  添加页面的下拉选择)
export const ServerManageAllListService = () => {
    return request.get('/serverManage/all')
   }
6.2.2 服务器IP查询条件函数
//1、服务器IP动态查询 
import { ServerManageAllListService } from '@/api/project.js'
// 1  搜索查询条件服务器IP 查询
const getServerManageAllList = async () => {
    //获取所有服务器IP
    let result = await ServerManageAllListService();
    serverManages.value = result.data
}
getServerManageAllList();
6.2.3 项目列表查询project.js接口实现
//导入request.js请求工具
import request from '@/utils/request.js'

// 1  服务器列表查询
export const ServerManageListService = (params) => {
    return request.get('/serverManage', { params: params })
   }


// 2 添加服务器
export const serverManageAddService = (serverManageModel)=>{ 
    return request.post('/serverManage',serverManageModel)
}


//3 修改服务器
export const serverManageUpdateService = (serverManageModel)=>{
    return request.put('/serverManage',serverManageModel)
}

//4 删除服务器
export const serverManageDeleteService = (id) => {
    return request.delete('/serverManage?id='+id)

}

// 1  服务器列表查询(项目管理页面调用 搜索框  添加页面的下拉选择)
export const ServerManageAllListService = () => {
    return request.get('/serverManage/all')
   }

// 1 项目列表查询
export const projectListService = (params) => {
    return request.get('/project', { params: params })
}
6.2.4 Project.vue中，调用接口获取数据
//1、服务器IP动态查询  \项目列表查询projectListService
import { ServerManageAllListService,projectListService} from '@/api/project.js'

// 1 项目列表查询
const getProjects = async () => {
    let params = {
        pageNum: pageNum.value,
        pageSize: pageSize.value,
        serverManageId: serverManageId.value ? serverManageId.value : null,
        englishName: englishName.value ? englishName.value : null,
        chineseName: chineseName.value ? chineseName.value : null
    }
    let result = await projectListService(params);
    //渲染列表数据
    projects.value = result.data.items
    //为列表中添加iPAddress属性
    for(let i=0;i<projects.value.length;i++){
        let project = projects.value[i];
        for(let j=0;j<serverManages.value.length;j++){
            if(project.serverManageId===serverManages.value[j].id){
                project.ipAddress=serverManages.value[j].ipAddress
            }
        }
    }
    //渲染总条数
    total.value=result.data.total
}
getProjects()
6.2.5 当分页条的当前页和每页条数发生变化，重新发送请求获取数据
//当每页条数发生了变化，调用此函数
const onSizeChange = (size) => {
    pageSize.value = size
    getProjects()  // 1
}
//当前页码发生变化，调用此函数
const onCurrentChange = (num) => {
    pageNum.value = num
    getProjects() //1
}
6.2.6 搜索和重置 

为搜索按钮绑定单击事件，调用getArticles函数即可,为重置按钮绑定单击事件，清除serverManageId、chineseName和englishName的值即可

<el-button type="primary" @click="getProjects">搜索</el-button>
                <el-button @click="serverManageId='';englishName='';chineseName=''">重置</el-button>

 6.3 添加

6.3.1 引入添加组件以及添加表单数据模型
// 2  引入添加、修改的抽屉组件
import {Plus} from '@element-plus/icons-vue'
//  2 控制抽屉是否显示
const visibleDrawer = ref(false)

// 2添加表单数据模型
const projectModel = ref({
    englishName: '',
    chineseName: '',
    instances: '',
    serverManageId:'',
    projectDescribe:''
})

抽屉组件

<!-- 抽屉 -->
    <el-drawer v-model="visibleDrawer" :title="title" direction="rtl" size="50%">
            <!-- 添加/修改表单 -->
            <el-form :model="projectModel" label-width="100px" >
                <el-form-item label="英文名称" >
                    <el-input v-model="projectModel.englishName" placeholder="请输入英文名称"></el-input>
                </el-form-item>
                <el-form-item label="中文名称" >
                    <el-input v-model="projectModel.chineseName" placeholder="请输入中文名称"></el-input>
                </el-form-item>
                <el-form-item label="实例数" >
                    <el-input v-model="projectModel.instances" placeholder="请输入实例数"></el-input>
                </el-form-item>
                <el-form-item label="服务器IP">
                    <el-select placeholder="请选择" v-model="projectModel.serverManageId">
                        <el-option v-for="c in serverManages" :key="c.id" :label="c.ipAddress" :value="c.id">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="描述" >
                    <!-- <el-input v-model="projectModel.projectDescribe" placeholder="请输入描述数"></el-input> -->
                    <el-input v-model="projectModel.projectDescribe" :rows="2" type="textarea" placeholder="请输入描述" />
                </el-form-item>
                
                <el-form-item>
                    <el-button type="primary">保存</el-button>
                 
                </el-form-item>
            </el-form>
        </el-drawer>
6.3.2 为添加按钮绑定事件
<el-button type="primary" @click="visibleDrawer = true;title='添加项目'">添加</el-button>
6.3.3 project.js提供添加项目接口
//导入request.js请求工具
import request from '@/utils/request.js'

// 1  服务器列表查询
export const ServerManageListService = (params) => {
    return request.get('/serverManage', { params: params })
   }


// 2 添加服务器
export const serverManageAddService = (serverManageModel)=>{ 
    return request.post('/serverManage',serverManageModel)
}


//3 修改服务器
export const serverManageUpdateService = (serverManageModel)=>{
    return request.put('/serverManage',serverManageModel)
}

//4 删除服务器
export const serverManageDeleteService = (id) => {
    return request.delete('/serverManage?id='+id)

}

// 1  服务器列表查询(项目管理页面调用 搜索框  添加页面的下拉选择)
export const ServerManageAllListService = () => {
    return request.get('/serverManage/all')
   }

// 1 项目列表查询
export const projectListService = (params) => {
    return request.get('/project', { params: params })
}
    
// 2添加项目
export const projectAddService = (projectModel)=>{
    return request.post('/project',projectModel)
}
6.3.4 Project.vue中提供addProject函数完成添加项目接口的调用
//1、服务器IP动态查询  \项目列表查询projectListService 2 添加projectAddService
import { ServerManageAllListService,projectListService,projectAddService} from '@/api/project.js'
//2  添加成功提示框  4 \删除弹窗
import { ElMessage,ElMessageBox } from 'element-plus'

// 2 添加项目
const addProject=async ()=>{    
    let result = await projectAddService(projectModel.value);
    ElMessage.success(result.message? result.message:'添加成功')
    //再次调用getProjects(),获取列表数据
    getProjects()
    //隐藏抽屉
    visibleDrawer.value=false
}
6.3.5 为保存按钮绑定事件
<el-button type="primary" @click="addProject()">保存</el-button>

6.4 编辑

6.4.1 为编辑按钮绑定事件（后面会使用函数替换）
<el-button :icon="Edit" circle plain type="primary" @click="title='修改项目';visibleDrawer='true'"></el-button>
6.4.2 数据回显

当点击修改文章按钮时，需要把当前这一条数据的详细信息显示到修改文章的抽屉上，这个叫回显

const showDrawer = (row)=>{
    title.value = '修改项目';visibleDrawer.value = true
    //数据拷贝
    projectModel.value.englishName = row.englishName;
    projectModel.value.chineseName = row.chineseName;
    projectModel.value.instances = row.instances;
    projectModel.value.serverManageId = row.serverManageId;
    projectModel.value.projectDescribe = row.projectDescribe;
    //扩展id属性，将来需要传参给后台完成文章的修改
    projectModel.value.id = row.id
}
 6.4.3 通过插槽的方式得到被点击按钮所在行的数据
<el-button :icon="Edit" circle plain type="primary" @click="showDrawer(row)"></el-button>
6.4.4 project.js中提供修改项目的函数
//导入request.js请求工具
import request from '@/utils/request.js'

// 1  服务器列表查询
export const ServerManageListService = (params) => {
    return request.get('/serverManage', { params: params })
   }


// 2 添加服务器
export const serverManageAddService = (serverManageModel)=>{ 
    return request.post('/serverManage',serverManageModel)
}


//3 修改服务器
export const serverManageUpdateService = (serverManageModel)=>{
    return request.put('/serverManage',serverManageModel)
}

//4 删除服务器
export const serverManageDeleteService = (id) => {
    return request.delete('/serverManage?id='+id)

}

// 1  服务器列表查询(项目管理页面调用 搜索框  添加页面的下拉选择)
export const ServerManageAllListService = () => {
    return request.get('/serverManage/all')
   }

// 1 项目列表查询
export const projectListService = (params) => {
    return request.get('/project', { params: params })
}
    
// 2添加项目
export const projectAddService = (projectModel)=>{
    return request.post('/project',projectModel)
}


//3 修改项目
export const projectUpdateService = (projectModel)=>{
    return request.put('/project',projectModel)
}
 6.4.5 调用接口完成修改的函数

//1、服务器IP动态查询  \项目列表查询projectListService 2 添加projectAddService 3\projectUpdateService
import { ServerManageAllListService,projectListService,projectAddService,projectUpdateService} from '@/api/project.js'

//3 保存调用修改接口
const updateProject=async ()=>{
    let result = await projectUpdateService(projectModel.value)
    ElMessage.success(result.message? result.message:'修改成功')
    //隐藏抽屉
    visibleDrawer.value=false
    //再次访问后台接口，查询所有列表数据
    getProjects()
}
6.4.6 保存按钮判断是添加还是修改
<el-button type="primary" @click="title==='添加项目'? addProject():updateProject()">保存</el-button>
6.4.7 解决编辑再添加数据显示问题

由于现在修改和新增共用了一个数据模型，所以在点击添加文章后，有时候会显示数据，此时可以将articleModel中的数据清空

const clearProjectModel = ()=>{
    projectModel.value.englishName='',
    projectModel.value.chineseName='',
    projectModel.value.instances='',
    projectModel.value.projectDescribe='',
    projectModel.value.serverManageId=''
}

添加绑定事件

<el-button type="primary" @click="visibleDrawer = true;title='添加项目';clearProjectModel()">添加</el-button>

6.5 删除

6.5.1 project.js添加删除接口调用
//导入request.js请求工具
import request from '@/utils/request.js'

// 1  服务器列表查询
export const ServerManageListService = (params) => {
    return request.get('/serverManage', { params: params })
   }


// 2 添加服务器
export const serverManageAddService = (serverManageModel)=>{ 
    return request.post('/serverManage',serverManageModel)
}


//3 修改服务器
export const serverManageUpdateService = (serverManageModel)=>{
    return request.put('/serverManage',serverManageModel)
}

//4 删除服务器
export const serverManageDeleteService = (id) => {
    return request.delete('/serverManage?id='+id)

}

// 1  服务器列表查询(项目管理页面调用 搜索框  添加页面的下拉选择)
export const ServerManageAllListService = () => {
    return request.get('/serverManage/all')
   }

// 1 项目列表查询
export const projectListService = (params) => {
    return request.get('/project', { params: params })
}
    
// 2添加项目
export const projectAddService = (projectModel)=>{
    return request.post('/project',projectModel)
}


//3 修改项目
export const projectUpdateService = (projectModel)=>{
    return request.put('/project',projectModel)
}

//4 删除项目
export const projectDeleteService = (id) => {
    return request.delete('/project?id='+id)
}
6.5.2 Project.vue添加删除弹窗，当用户点击确认后，调用接口删除
//1、服务器IP动态查询  \项目列表查询projectListService 2 添加projectAddService 3\projectUpdateService 4\projectDeleteService
import { ServerManageAllListService,projectListService,projectAddService,projectUpdateService,projectDeleteService} from '@/api/project.js'

//2  添加成功提示框  4 \删除弹窗
import { ElMessage,ElMessageBox } from 'element-plus'

// 4 删除项目（记得引用ElMessageBox）  给删除按钮绑定事件
const deleteProject= (row) => {
    // 提示用户 确认框
    ElMessageBox.confirm(
        '你确认删除该项目吗？',
        '温馨提示',
        {
            confirmButtonText: '确认',
            cancelButtonText: '取消',
            type: 'warning',
        }
    )
        .then(async() => {
            //用户点击了确认
            let result = await projectDeleteService(row.id)
            // 给出提示
            ElMessage({
                type: 'success',
                message: '删除成功',
            })
            //刷新列表//再次访问后台接口，查询所有列表数据
            getProjects()
        })
        .catch(() => {
            //用户点击了取消
            ElMessage({
                type: 'info',
                message: '取消删除',
            })
        })
}
6.5.3 为删除按钮绑定事件
<el-button :icon="Delete" circle plain type="danger" @click="deleteProject(row)"></el-button>
6.5.4 Project.vue全部代码
<script setup>
import {
    Edit,
    Delete
} from '@element-plus/icons-vue'

import { ref } from 'vue'

//1、服务器IP动态查询  \项目列表查询projectListService 2 添加projectAddService 3\projectUpdateService 4\projectDeleteService
import { ServerManageAllListService,projectListService,projectAddService,projectUpdateService,projectDeleteService} from '@/api/project.js'
// 2  引入添加、修改的抽屉组件
import {Plus} from '@element-plus/icons-vue'
//2  添加成功提示框  4 \删除弹窗
import { ElMessage,ElMessageBox } from 'element-plus'
//服务器数据模型
const serverManages = ref([
    {
        "id": 3,
        "ServerName": "11",
        "ipAddress": "192.168.1.11",
        "createTime": "2023-09-02 12:06:59",
        "updateTime": "2023-09-02 12:06:59"
    },
    {
        "id": 4,
        "ServerName": "12",
        "ipAddress": "192.168.1.12",
        "createTime": "2023-09-02 12:08:16",
        "updateTime": "2023-09-02 12:08:16"
    },
    {
        "id": 5,
        "ServerName": "13",
        "ipAddress": "192.168.1.13",
        "createTime": "2023-09-02 12:08:33",
        "updateTime": "2023-09-02 12:08:33"
    }
])

//用户搜索时选中服务器id
const serverManageId=ref('')

//用户搜索时输入的英文名称
const englishName=ref('')

//用户搜索时输入的中文名称
const chineseName=ref('')

//列表数据模型
const projects = ref([
    {
        "id": 5,
        "englishName": "analysis",
        "chineseName": "能耗服务",
        "ipAddress": "192.168.1.11",
        "instances": 1,
        "projectDescribe": "333",
        "createTime": "2023-09-03 11:55:30",
        "updateTime": "2023-09-03 11:55:30",
        "isEnable":1
    },
    {
        "id": 5,
        "englishName": "dispatch-platform",
        "chineseName": "通讯平台",
        "ipAddress": "192.168.1.12",
        "instances": 1,
        "projectDescribe": "4545",
        "createTime": "2023-09-03 11:55:30",
        "updateTime": "2023-09-03 11:55:30",
        "isEnable":1
    },
    {
        "id": 5,
        "englishName": "app",
        "chineseName": "app服务",
        "ipAddress": "192.168.1.13",
        "instances": 1,
        "projectDescribe": "443",
        "createTime": "2023-09-03 11:55:30",
        "updateTime": "2023-09-03 11:55:30",
        "isEnable":1
    },
])

//分页条数据模型
const pageNum = ref(1)//当前页
const total = ref(20)//总条数
const pageSize = ref(10)//每页条数

//当每页条数发生了变化，调用此函数
const onSizeChange = (size) => {
    pageSize.value = size
    getProjects()  // 1
}
//当前页码发生变化，调用此函数
const onCurrentChange = (num) => {
    pageNum.value = num
    getProjects() //1
}

// 1  搜索查询条件服务器IP 查询
const getServerManageAllList = async () => {
    //获取所有服务器IP
    let result = await ServerManageAllListService();
    serverManages.value = result.data
}
getServerManageAllList();

// 1 项目列表查询
const getProjects = async () => {
    let params = {
        pageNum: pageNum.value,
        pageSize: pageSize.value,
        serverManageId: serverManageId.value ? serverManageId.value : null,
        englishName: englishName.value ? englishName.value : null,
        chineseName: chineseName.value ? chineseName.value : null
    }
    let result = await projectListService(params);
    //渲染列表数据
    projects.value = result.data.items    
    //为列表中添加iPAddress属性
    for(let i=0;i<projects.value.length;i++){
        let project = projects.value[i];        
        
        for(let j=0;j<serverManages.value.length;j++){
            if(project.serverManageId===serverManages.value[j].id){
                project.ipAddress=serverManages.value[j].ipAddress
            }
        }
    }
    //渲染总条数
    total.value=result.data.total
}
getProjects()


//  2 控制抽屉是否显示
const visibleDrawer = ref(false)


// 2添加表单数据模型
const projectModel = ref({
    englishName: '',
    chineseName: '',
    instances: '',
    serverManageId:'',
    projectDescribe:''
})

// 2 标题//抽屉标题
const title=ref('')


// 2 添加项目
const addProject=async ()=>{    
    let result = await projectAddService(projectModel.value);
    ElMessage.success(result.message? result.message:'添加成功')
    //再次调用getProjects(),获取列表数据
    getProjects()
    //隐藏抽屉
    visibleDrawer.value=false
}

// 3 点击修改数据回显

const showDrawer = (row)=>{
    title.value = '修改项目';visibleDrawer.value = true
    //数据拷贝
    projectModel.value.englishName = row.englishName;
    projectModel.value.chineseName = row.chineseName;
    projectModel.value.instances = row.instances;
    projectModel.value.serverManageId = row.serverManageId;
    projectModel.value.projectDescribe = row.projectDescribe;
    //扩展id属性，将来需要传参给后台完成文章的修改
    projectModel.value.id = row.id
}

//3 保存调用修改接口
const updateProject=async ()=>{
    let result = await projectUpdateService(projectModel.value)
    ElMessage.success(result.message? result.message:'修改成功')
    //隐藏抽屉
    visibleDrawer.value=false
    //再次访问后台接口，查询所有列表数据
    getProjects()
}



//3 清空模型数据
const clearProjectModel = ()=>{
    projectModel.value.englishName='',
    projectModel.value.chineseName='',
    projectModel.value.instances='',
    projectModel.value.projectDescribe='',
    projectModel.value.serverManageId=''
}


// 4 删除项目（记得引用ElMessageBox）  给删除按钮绑定事件
const deleteProject = (row) => {
    // 提示用户 确认框
    ElMessageBox.confirm(
        '你确认删除该项目吗？',
        '温馨提示',
        {
            confirmButtonText: '确认',
            cancelButtonText: '取消',
            type: 'warning',
        }
    )
        .then(async() => {
            //用户点击了确认
            let result = await projectDeleteService(row.id)
            // 给出提示
            ElMessage({
                type: 'success',
                message: '删除成功',
            })
            //刷新列表//再次访问后台接口，查询所有列表数据
            getProjects()
        })
        .catch(() => {
            //用户点击了取消
            ElMessage({
                type: 'info',
                message: '取消删除',
            })
        })
}
 




</script>
<template>
    <el-card class="page-container">
        <template #header>
            <div class="header">
                <span>项目管理</span>
                <div class="extra">
                    <el-button type="primary" @click="visibleDrawer = true;title='添加项目';clearProjectModel()">添加</el-button>
                </div>
            </div>
        </template>
        <!-- 搜索表单 -->
        <el-form inline>
            <el-form-item label="服务器IP:">
                <el-select placeholder="请选择" v-model="serverManageId">
                    <el-option 
                        v-for="c in serverManages" 
                        :key="c.id" 
                        :label="c.ipAddress"
                        :value="c.id">
                    </el-option>
                </el-select>
            </el-form-item>

            <el-form-item label="英文名称:">
                <el-input v-model="englishName" placeholder="请输入英文名称" />
            </el-form-item>

            <el-form-item label="中文名称:">
                <el-input v-model="chineseName" placeholder="请输入中文名称" />
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="getProjects">搜索</el-button>
                <el-button @click="serverManageId='';englishName='';chineseName=''">重置</el-button>
            </el-form-item>
        </el-form>
        <!-- 文章列表 -->
        <el-table :data="projects" style="width: 100%">
            <el-table-column label="英文名称"  prop="englishName"></el-table-column>
            <el-table-column label="中文名称"  prop="chineseName"></el-table-column>
            <el-table-column label="服务器IP" prop="ipAddress"></el-table-column>
            <el-table-column label="实例数" prop="instances"></el-table-column>
            <el-table-column label="描述" prop="projectDescribe"></el-table-column>           
            <el-table-column label="创建时间" prop="createTime"> </el-table-column>
            <el-table-column label="更新时间" prop="updateTime"></el-table-column>
            <el-table-column label="启用/禁用" prop="isEnable"></el-table-column>
            <el-table-column label="操作" width="100">
                <template #default="{ row }">
                    <el-button :icon="Edit" circle plain type="primary" @click="showDrawer(row)"></el-button>
                    <el-button :icon="Delete" circle plain type="danger" @click="deleteProject(row)"></el-button>
                </template>
            </el-table-column>
            <template #empty>
                <el-empty description="没有数据" />
            </template>
        </el-table>
        <!-- 分页条 -->
        <el-pagination v-model:current-page="pageNum" v-model:page-size="pageSize" :page-sizes="[3, 5 ,10, 15]"
            layout="jumper, total, sizes, prev, pager, next" background :total="total" @size-change="onSizeChange"
            @current-change="onCurrentChange" style="margin-top: 20px; justify-content: flex-end" />
    </el-card>

    <!-- 抽屉 -->
    <el-drawer v-model="visibleDrawer" :title="title" direction="rtl" size="50%">
            <!-- 添加/修改表单 -->
            <el-form :model="projectModel" label-width="100px" >
                <el-form-item label="英文名称" >
                    <el-input v-model="projectModel.englishName" placeholder="请输入英文名称"></el-input>
                </el-form-item>
                <el-form-item label="中文名称" >
                    <el-input v-model="projectModel.chineseName" placeholder="请输入中文名称"></el-input>
                </el-form-item>
                <el-form-item label="实例数" >
                    <el-input v-model="projectModel.instances" placeholder="请输入实例数"></el-input>
                </el-form-item>
                <el-form-item label="服务器IP">
                    <el-select placeholder="请选择" v-model="projectModel.serverManageId">
                        <el-option v-for="c in serverManages" :key="c.id" :label="c.ipAddress" :value="c.id">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="描述" >
                    <!-- <el-input v-model="projectModel.projectDescribe" placeholder="请输入描述数"></el-input> -->
                    <el-input v-model="projectModel.projectDescribe" :rows="2" type="textarea" placeholder="请输入描述" />
                </el-form-item>
                
                <el-form-item>
                    <el-button type="primary" @click="title==='添加项目'? addProject():updateProject()">保存</el-button>                                       
                </el-form-item>
            </el-form>
        </el-drawer>

</template>
<style lang="scss" scoped>
.page-container {
    min-height: 100%;
    box-sizing: border-box;

    .header {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
}
</style>

阅读全部

相关推荐

  1. 【SpringBoot3+Vue3】六【后续1】【番外篇】- （0-1临摹）

    2023-12-07 04:02:02       41 阅读

  6. 【flink番外篇】1、flink的23种常用算子介绍及详细示例（3）-window、distinct、join等

    2023-12-07 04:02:02       47 阅读

最近更新

  3. docker php8.1+nginx base 镜像 dockerfile 配置

    2023-12-07 04:02:02       91 阅读

  4. Could not load dynamic library ‘cudart64_100.dll‘

    2023-12-07 04:02:02       97 阅读

  9. 在Django里面运行非项目文件

    2023-12-07 04:02:02       78 阅读

  19. Python语言-面向对象

    2023-12-07 04:02:02       88 阅读

  20. 如何分清楚常见的 Git 分支管理策略Git Flow、GitHub Flow 和 GitLab Flow

    2023-12-07 04:02:02       81 阅读

热门阅读

  2. Oracle官网 账号及密码 -- 笔记

    2023-12-07 04:02:02       61 阅读

  6. 将元胞添加到元胞数组

    2023-12-07 04:02:02       49 阅读

  7. PTA 6-143 密码转换

    2023-12-07 04:02:02       62 阅读

  9. 2023亚太地区五岳杯量子计算挑战赛

    2023-12-07 04:02:02       62 阅读

  10. 前端面试题【构建工具篇】

    2023-12-07 04:02:02       47 阅读

  12. ROS 欧拉角

    2023-12-07 04:02:02       62 阅读

  13. FAQ：Constructors篇

    2023-12-07 04:02:02       43 阅读

  14. HG/T 5367.2-2022 轨道交通车辆耐电弧绝缘涂料检测

    2023-12-07 04:02:02       44 阅读

  15. rocketMQ-发送消息

    2023-12-07 04:02:02       52 阅读

  16. 获取图像大小 - 编程指南

    2023-12-07 04:02:02       55 阅读

  17. MongoDB导入导出命令

    2023-12-07 04:02:02       43 阅读

  21. C# Solidworks二次开发：创建坐标系方法和获取零件质心坐标方法详解

    2023-12-07 04:02:02       127 阅读

  24. 将Linux 标准输出，错误输出重定向到文件

    2023-12-07 04:02:02       54 阅读

  30. 二：C语言-数据类型和变量

    2023-12-07 04:02:02       61 阅读