遗留的问题
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/平台单机部署
1、能部署
2、熟悉代码
3、划分模块
4、按模块尝试改造,先前端,后后端
实现删除的功能
怎么实现删除的功能?
1、给删除按钮绑定事件
2、实现方法
3、调用删除接口,通过amcrud自动生成的
注意:得有确认删除的操作?
实现点击删除按钮弹出确认框
核心代码:
html
<a-popconfirm
title="您确认要删除吗?"
ok-text="确认"
cancel-text="取消"
@confirm="onDelete(record.id)"
>
<a-button>删除</a-button>
</a-popconfirm>
效果预览:
当点击确认的时候发送删除请求
js
const onDelete = id => {
axios({
method: "delete",
url: `/api/file/${id}`
}).then(() => {
message.success("删除成功!")
})
}
虽然实现了删除的功能,但是,我们的数据在删除之后不会自动刷新。所以,前端看起来跟没有删除一样,只有在刷新页面以后,被删除的数据才会消失。
需要解决这个问题!!!
解决删除后数据刷新的问题
最简单的思路,重新GET数据,赋值给表格的数据。
将onMounted里面的数据抽离出来,封装成为函数,在删除成功之后,调用函数。
用同步还是异步?
封装的应该是一个异步的函数,因为Axios是异步操作!!!
先改造onMounted里面的方法:
js
// 加载数据的方法
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()
})
再优化删除方法:
js
// 删除文档
const onDelete = async (id) => {
await axios({
method: "delete",
url: `/api/file/${id}`
}).then(() => {
message.success("删除成功!")
})
await loadTableData()
}
经过实测,问题完美解决。
遗留的问题
1、分享的功能暂时往后放,因为目前没有用户,等有了用户之后再考虑做
2、增加新建和导入按钮
3、操作按钮,可以变小一点
4、删除按钮,变成偏红色的醒目状态
操作按钮,可以变小一点
给每个按钮加上size="small"
属性:
html
<a-space>
<a-button @click="editDocument" size="small">编辑</a-button>
<a-popconfirm
title="您确认要删除吗?"
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 就行。
html
<a-button size="small" danger>删除</a-button>
继续优化:
html
<a-space>
<a-button @click="editDocument" size="small" type="primary">编辑</a-button>
<a-popconfirm
title="您确认要删除吗?"
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、增加新建和导入按钮
增加按钮
html
<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>
遗留问题
1、增加新建和导入按钮,有按钮了,但是还没有完善,图标还不对,需要解决
2、登录功能
3、用户管理
4、角色管理
5、权限管理
6、分享功能