目录
4、api下新增project.js 编写服务器列表查询方法
5.2.2 当分页条的当前页和每页条数发生变化,重新发送请求获取数据
5.3.4 ServerManage.vue中提供addServerManage函数完成添加接口的调用
5.5.2 添加删除确认弹窗以及删除接口函数deleteserverManage
6.2.1 project.js添加查询条件服务器IP的查询接口
6.2.5 当分页条的当前页和每页条数发生变化,重新发送请求获取数据
6.3.4 Project.vue中提供addProject函数完成添加项目接口的调用
6.5.2 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>