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

相关推荐
刘婉晴3 小时前
【信息安全工程师备考笔记】第三章 密码学基本理论
笔记·安全·密码学
晓数5 小时前
【硬核干货】JetBrains AI Assistant 干货笔记
人工智能·笔记·jetbrains·ai assistant
我的golang之路果然有问题5 小时前
速成GO访问sql,个人笔记
经验分享·笔记·后端·sql·golang·go·database
lwewan5 小时前
26考研——存储系统(3)
c语言·笔记·考研
搞机小能手6 小时前
六个能够白嫖学习资料的网站
笔记·学习·分类
nongcunqq6 小时前
爬虫练习 js 逆向
笔记·爬虫
汐汐咯6 小时前
终端运行java出现???
笔记
无敌小茶8 小时前
Linux学习笔记之环境变量
linux·笔记
帅云毅9 小时前
Web3.0的认知补充(去中心化)
笔记·学习·web3·去中心化·区块链
豆豆9 小时前
day32 学习笔记
图像处理·笔记·opencv·学习·计算机视觉