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

目录

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

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

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

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

二、实现分页

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

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

3.  修改NoticesManagement.vue文件

三、删除

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

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

3.  修改NoticesManagement.vue文件

四、新增公告 

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

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

3.  修改NoticesManagement.vue文件

五、编辑公告 

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

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

3.  修改NoticesManagement.vue文件

六、筛选公告

​编辑​1.  修改NoticesManagement.vue文件

七、多选

1.  修改NoticesManagement.vue文件

八、全选、清除、批量删除 

1.  修改NoticesManagement.vue文件

九、Excel导入导出

1. Excel导入

2. Excel导出

3. 安装依赖包

4.  Excel模板template.xlsx放入public文件夹中

5.   修改NoticesManagement.vue文件

---

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

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

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

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

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

二、实现分页

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

​

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文件

三、删除

​

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

​

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

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

3.  修改NoticesManagement.vue文件

4. 添加删除对话框

四、新增公告 

​

 ​

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

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

​

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

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

3.  修改NoticesManagement.vue文件

五、编辑公告 

​

​

​

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

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

​

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

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

3.  修改NoticesManagement.vue文件

六、筛选公告

​1.  修改NoticesManagement.vue文件

七、多选

​

1.  修改NoticesManagement.vue文件

八、全选、清除、批量删除 

​

1.  修改NoticesManagement.vue文件

九、Excel导入导出

1. Excel导入

​

 ​

​

2. Excel导出

​

​

3. 安装依赖包

npm install xlsx

4.  Excel模板template.xlsx放入public文件夹中

​

5.   修改NoticesManagement.vue文件