教程11 Vue3 + Django前后端分离项目——Element Plus Table 表格（数据增、删、改、除、分页）_网站优化分享

一、查询公告信息表中的数据，并绑定到表格中

教程11 Vue3 + Django前后端分离项目——Element Plus Table 表格（数据增、删、改、除、分页）,第1张

1. 后端接口（http://127.0.0.1:8000/notices）

教程11 Vue3 + Django前后端分离项目——Element Plus Table 表格（数据增、删、改、除、分页）,第2张

2. utils/api.ts中增加如下函数，用于调用后端接口查询所有公告信息

// 获得所有公告信息
export function getAllNoticesUrl() {
    return request({
        url: 'api/notices/',
        method: 'get',
    })
}

3. views文件夹中新建一个NoticesManagement.vue文件

二、实现分页

教程11 Vue3 + Django前后端分离项目——Element Plus Table 表格（数据增、删、改、除、分页）,第3张

1. 后端接口（http://127.0.0.1:8000/notices/1/2/）

教程11 Vue3 + Django前后端分离项目——Element Plus Table 表格（数据增、删、改、除、分页）,第4张

2. utils/api.ts中增加函数，用于调用后端接口根据页码查询公告信息

// 分页
export function getNoticesByPageUrl(params: any) {
    return request({
        url: 'api/notices/' + Number(params['currentPage']) + '/' + Number(params['pageSize']) + '/',
        method: 'get',
    })
}

3. 修改NoticesManagement.vue文件

三、删除

教程11 Vue3 + Django前后端分离项目——Element Plus Table 表格（数据增、删、改、除、分页）,第5张

1. 后端接口（http://127.0.0.1:8000/delete_notice/1）

教程11 Vue3 + Django前后端分离项目——Element Plus Table 表格（数据增、删、改、除、分页）,第6张

2. utils/api.ts中增加函数，用于调用后端接口根据公告id删除公告信息

// 删除公告
export function deleteNoticeUrl(params:any) {
    return request({
        url: 'api/delete_notice/' + params + "/",
        method: 'delete',
    })
}

3. 修改NoticesManagement.vue文件

4. 添加删除对话框

教程11 Vue3 + Django前后端分离项目——Element Plus Table 表格（数据增、删、改、除、分页）,第7张

四、新增公告

教程11 Vue3 + Django前后端分离项目——Element Plus Table 表格（数据增、删、改、除、分页）,第8张

教程11 Vue3 + Django前后端分离项目——Element Plus Table 表格（数据增、删、改、除、分页）,第9张

1. 后端接口（http://127.0.0.1:8000/add_notice）

{
    "title": "会议通知",
    "content": "今天上午10：00，会议室开会，地点信息楼210",
    "user_id":"11"
}

教程11 Vue3 + Django前后端分离项目——Element Plus Table 表格（数据增、删、改、除、分页）,第10张

2. utils/api.ts中增加函数，用于调用后端接口增加公告信息

// 新增公告
export function addNoticeUrl(data:any) {
    return request({
        url: 'api/add_notice/',
        method: 'post',
        data: data,
    })
}

3. 修改NoticesManagement.vue文件

五、编辑公告

教程11 Vue3 + Django前后端分离项目——Element Plus Table 表格（数据增、删、改、除、分页）,第11张

教程11 Vue3 + Django前后端分离项目——Element Plus Table 表格（数据增、删、改、除、分页）,第12张

教程11 Vue3 + Django前后端分离项目——Element Plus Table 表格（数据增、删、改、除、分页）,第13张

1. 后端接口（http://127.0.0.1:8000/edit_notice/）

{
    "id":19,
    "title": "会议通知",
    "content": "abcccccc"
}

教程11 Vue3 + Django前后端分离项目——Element Plus Table 表格（数据增、删、改、除、分页）,第14张

2. utils/api.ts中增加函数，用于调用后端接口编辑公告信息

// 编辑公告
export function editNoticeUrl(data:any) {
    return request({
        url: 'api/edit_notice/',
        method: 'put',
        data: data,
    })
}