【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 {

    @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 {

    /**
     * 根据英文名判断是否重复
     * @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 {

}

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 {
    /**
     * 查询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 {

}

 

2.5 ServerManage实体类

求赞助，私聊

二、前端

1、菜单优化

修改Layout.vue 新增下拉菜单

  
                    
                      
                        
                            
                        
                        服务器管理
                    
                      
                        
                            
                        
                        项目管理
                    
                    
                

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

3.2 项目管理serverManage.vue

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

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 搜索按钮绑定点击事件

  
                搜索                
            

5.3 添加实现

5.3.1 页面添加抽屉的组件

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

添加页面组件抽屉

 
            
            
                
                    
                
                
                    
                
                
                    
                    
                
                
                    保存                    
                
            
        

5.3.2 为添加新增绑定事件

添加

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 添加页面保存按钮绑定事件

保存   

5.4 编辑实现

编辑与添加共用页面

5.4.1 抽屉标题显示 定义标题

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

5.4.2 在抽屉上绑定标题

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

添加

5.4.4 为编辑按钮绑定事件

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 编辑按钮绑定事件

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 为保存按钮添加判断是添加保存还是修改保存

保存

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

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

为添加按钮绑定事件

 添加

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 删除按钮绑定事件

5.6 ServerManage.vue 完整代码

6、实现Project.vue

6.1 初始化Project.vue

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

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的值即可

搜索
                重置

 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:''
})

抽屉组件

    
            
            
                
                    
                
                
                    
                
                
                    
                
                
                    
                        
                        
                    
                
                
                    
                    
                
                
                
                    保存
                 
                
            
        

6.3.2 为添加按钮绑定事件

添加

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 为保存按钮绑定事件

保存

6.4 编辑

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

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 通过插槽的方式得到被点击按钮所在行的数据

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 保存按钮判断是添加还是修改

保存

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

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

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

添加绑定事件

添加

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 为删除按钮绑定事件

6.5.4 Project.vue全部代码