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

本文主要是介绍【SpringBoot3+Vue3】六【完】【番外篇】- （0-1临摹），希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

目录

一、后端

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 {@Autowiredprivate ProjectService projectService;@PostMappingpublic 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*/@GetMappingpublic 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*/@PutMappingpublic 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*/@DeleteMappingpublic 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 {@Autowiredprivate ServerManageService serverManageService;/*** 添加服务器* @param serverManage* @return*/@PostMappingpublic 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*/@GetMappingpublic 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*/@PutMappingpublic 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*/@DeleteMappingpublic 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 = sizegetServerManageList()  // 1
}
//当前页码发生变化，调用此函数
const onCurrentChange = (num) => {pageNum.value = numgetServerManageList()  //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 = sizegetServerManageList()  // 1
}
//当前页码发生变化，调用此函数
const onCurrentChange = (num) => {pageNum.value = numgetServerManageList()  //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 () => {//获取所有服务器IPlet 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 = sizegetProjects()  // 1
}
//当前页码发生变化，调用此函数
const onCurrentChange = (num) => {pageNum.value = numgetProjects() //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 = sizegetProjects()  // 1
}
//当前页码发生变化，调用此函数
const onCurrentChange = (num) => {pageNum.value = numgetProjects() //1
}// 1  搜索查询条件服务器IP 查询
const getServerManageAllList = async () => {//获取所有服务器IPlet 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>

这篇关于【SpringBoot3+Vue3】六【完】【番外篇】- （0-1临摹）的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---