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/平台单机部署

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、分享功能

相关推荐
吴梓穆11 小时前
UE5学习笔记 FPS游戏制作38 继承标准UI
笔记·学习·ue5
V---scwantop---信12 小时前
英文字体:大胆都市街头Y2Y涂鸦风格品牌海报专辑封面服装字体 Chrome TM – Graffiti Font
笔记·字体
Moonnnn.12 小时前
运算放大器(四)滤波电路(滤波器)
笔记·学习·硬件工程
吴梓穆12 小时前
UE5学习笔记 FPS游戏制作37 蓝图函数库 自己定义公共方法
笔记·学习·ue5
吴梓穆12 小时前
UE5学习笔记 FPS游戏制作41 世界模式显示UI
笔记·学习·ue5
s_little_monster13 小时前
【Linux】进程信号的捕捉处理
linux·运维·服务器·经验分享·笔记·学习·学习方法
RedMery14 小时前
论文阅读笔记:Denoising Diffusion Implicit Models (4)
论文阅读·笔记
go_bai14 小时前
Linux环境基础开发工具——(2)vim
linux·开发语言·经验分享·笔记·vim·学习方法
吴梓穆14 小时前
UE5学习笔记 FPS游戏制作35 使用.csv配置文件
笔记·学习·ue5
100分题库小程序14 小时前
2025年机动车授权签字人考试判断题分享
经验分享·笔记