zdppy+vue3+onllyoffice开发文档管理系统项目实战 20240808 上课笔记

遗留的问题

1、实现删除的功能
2、分享的功能暂时往后放，因为目前没有用户，等有了用户之后再考虑做
3、增加新建和导入按钮

在这里插入图片描述

zdppy的学习计划

机器学习平台，QQ音乐的开源项目，https://github.com/tencentmusic/cube-studio，能不能使用zdppy框架进行改造？

在这里插入图片描述

帮助文档：https://github.com/tencentmusic/cube-studio/wiki

单机部署文档：https://github.com/data-infra/cube-studio/wiki/%E5%B9%B3%E5%8F%B0%E5%8D%95%E6%9C%BA%E9%83%A8%E7%BD%B2

1、能部署
2、熟悉代码
3、划分模块
4、按模块尝试改造，先前端，后后端

实现删除的功能

怎么实现删除的功能？

1、给删除按钮绑定事件
2、实现方法
3、调用删除接口，通过amcrud自动生成的

注意：得有确认删除的操作？

实现点击删除按钮弹出确认框

核心代码：

<a-popconfirmtitle="您确认要删除吗？"ok-text="确认"cancel-text="取消"@confirm="onDelete(record.id)"
><a-button>删除</a-button>
</a-popconfirm>

效果预览：
在这里插入图片描述

在这里插入图片描述

当点击确认的时候发送删除请求

const onDelete = id => {axios({method: "delete",url: `/api/file/${id}`}).then(() => {message.success("删除成功！")})
}

虽然实现了删除的功能，但是，我们的数据在删除之后不会自动刷新。所以，前端看起来跟没有删除一样，只有在刷新页面以后，被删除的数据才会消失。

需要解决这个问题！！！

解决删除后数据刷新的问题

最简单的思路，重新GET数据，赋值给表格的数据。

将onMounted里面的数据抽离出来，封装成为函数，在删除成功之后，调用函数。

用同步还是异步？

封装的应该是一个异步的函数，因为Axios是异步操作！！！

先改造onMounted里面的方法：

// 加载数据的方法
const loadTableData = async () => {await axios({method: "get",url: "/api/file",params: {order: "-latest_view_time",}}).then(resp => {data.value = resp.data.data.results})
}onMounted(async () => {await loadTableData()
})

再优化删除方法：

// 删除文档
const onDelete = async (id) => {await axios({method: "delete",url: `/api/file/${id}`}).then(() => {message.success("删除成功！")})await loadTableData()
}

经过实测，问题完美解决。

遗留的问题

1、分享的功能暂时往后放，因为目前没有用户，等有了用户之后再考虑做
2、增加新建和导入按钮
3、操作按钮，可以变小一点
4、删除按钮，变成偏红色的醒目状态

操作按钮，可以变小一点

给每个按钮加上size="small"属性：

<a-space><a-button @click="editDocument" size="small">编辑</a-button><a-popconfirmtitle="您确认要删除吗？"ok-text="确认"cancel-text="取消"@confirm="onDelete(record.id)"><a-button size="small">删除</a-button></a-popconfirm><a-button size="small">分享</a-button></a-space>

删除按钮，变成偏红色的醒目状态

给按钮添加 danger 就行。

<a-button size="small" danger>删除</a-button>

在这里插入图片描述

继续优化：

<a-space><a-button @click="editDocument" size="small" type="primary">编辑</a-button><a-popconfirmtitle="您确认要删除吗？"ok-text="确认"cancel-text="取消"@confirm="onDelete(record.id)"><a-button size="small" type="primary" danger>删除</a-button></a-popconfirm><a-button size="small" type="primary">分享</a-button>
</a-space>

在这里插入图片描述

遗留的问题

1、分享的功能暂时往后放，因为目前没有用户，等有了用户之后再考虑做
2、增加新建和导入按钮

在这里插入图片描述

增加按钮

<a-space class="py-3 mx-3"><a-button type="primary":icon="h(SearchOutlined)"style="display: flex; align-items: center;">新建</a-button><a-button>导入</a-button>
</a-space>