zdppy+vue3+onlyoffice开发文档系统实战20240807上课笔记 解决了最近文档页面几个遗留的文档

小技巧

vite配置 open: true 可以自动打开浏览器。
在这里插入图片描述

目前

在这里插入图片描述

遗留任务

1、在名称前面,渲染这个文档的图标
2、大小的基本的单位是kb,超过1024kb则换成mb,主要是这两个单位
3、数据按照最近访问时间倒序
4、给文件名价格链接,实现和编辑按钮相同的功能
5、实现编辑的功能
6、实现删除的功能
7、分享的功能暂时往后放,因为目前没有用户,等有了用户之后再考虑做

在名称前面,渲染这个文档的图标

之前实现了一半,但是没有做成根据类型切换动态图标,需要完善。

动态计算的方法:

const getSvg = (typeStr) => {
  switch (typeStr) {
    case "word":
      return docxSvg
    case "ppt":
      return pptSvg
    case "excel":
      return excelSvg
    case "pdf":
      return pdfSvg
    default:
      return otherSvg
  }
}

在模板中使用:

<template v-else-if="column.key === 'name'">
  <div class="flex items-center justify-center">
    <img :src="getSvg(record.category)" class="w-5 h-5 mr-1">
    <span>{{ record[column.key] }}</span>
  </div>
</template>

效果预览:不同的类型,不同图标
在这里插入图片描述

剩下的问题

1、大小的基本的单位是kb,超过1024kb则换成mb,主要是这两个单位
2、数据按照最近访问时间倒序
3、给文件名价格链接,实现和编辑按钮相同的功能
4、实现编辑的功能
5、实现删除的功能
6、分享的功能暂时往后放,因为目前没有用户,等有了用户之后再考虑做

先解决大小的问题

也是定义一个方法,传入size的整数,返回一个字符串,这个字符串格式为1kb,1mb等等。

测试代码

定义方法如下:

const getSizeStr = (size) => {
    return "1kb"
}

const size = 333
console.log(getSizeStr(size))

实现计算kb的算法

const getSizeStr = (size) => {
    // kb 的算法
    size /= 1024;
    if (size < 1024) {
        return size.toFixed(2) + "kb";
    }

    return "1kb"
}

const size = 333
console.log(getSizeStr(size))

在这里插入图片描述

实现计算mb的算法

const getSizeStr = (size) => {
    // kb 的算法
    size /= 1024;
    if (size < 1024) {
        return size.toFixed(2) + "kb";
    }

    // mb 的算法
    size /= 1024;
    if (size < 1024) {
        return size.toFixed(2) + "mb";
    }

    return "1kb"
}

const size = 33333333
console.log(getSizeStr(size))

在这里插入图片描述

实现gb的算法

const getSizeStr = (size) => {
    // kb 的算法
    size /= 1024;
    if (size < 1024) {
        return size.toFixed(2) + " KB";
    }

    // mb 的算法
    size /= 1024;
    if (size < 1024) {
        return size.toFixed(2) + " MB";
    }

    // gb 的算法
    size /= 1024;
    return size.toFixed(2) + " GB";
}

const size = 33333333333
console.log(getSizeStr(size))

在这里插入图片描述

将计算字节大小的算法整合到vue3中

<template v-else-if="column.key === 'size'">
  <span>{{ getSizeStr(record.size) }}</span>
</template>

此时的页面效果预览如下:
在这里插入图片描述

剩下的问题

1、数据按照最近访问时间倒序
2、给文件名价格链接,实现和编辑按钮相同的功能
3、实现编辑的功能
4、实现删除的功能
5、分享的功能暂时往后放,因为目前没有用户,等有了用户之后再考虑做

数据按照最近访问时间倒序

zdppy_amcrud生成的查询接口中,支持传递order这个参数。

我们只需要设置:{order: “-latest_view_time”} 即可。

修改前,页面数据的最近访问时间列呈现无序的状态,如下图:
在这里插入图片描述

修改之前,加载页面数据的代码如下:

onMounted(() => {
  axios({
    method: "get",
    url: "http://192.168.234.138:18888/file",
  }).then(resp => {
    const results = resp.data.data.results
    console.log(results)
    data.value = results
  })
})

改写代码如下:

onMounted(() => {
  axios({
    method: "get",
    url: "http://192.168.234.138:18888/file",
    params: {
      order: "-latest_view_time",
    }
  }).then(resp => {
    const results = resp.data.data.results
    console.log(results)
    data.value = results
  })
})

此时页面的预览效果如下:
在这里插入图片描述

很明显的能够看出来,此时的数据在最近访问时间这一列上,呈现按时间倒序的状态。
在这里插入图片描述

剩下的问题

1、给文件名加个链接,实现和编辑按钮相同的功能
2、实现编辑的功能
3、实现删除的功能
4、分享的功能暂时往后放,因为目前没有用户,等有了用户之后再考虑做

实现编辑功能

本质上而言就是一点击就跳转到文档页面。

定义如下方法:

const editDocument = () => {
  router.push({path: '/document', query: {key: 'abc'}})
}

修改编辑按钮:

<a-button @click="editDocument">编辑</a-button>

修改name列:

<template v-else-if="column.key === 'name'">
  <div class="flex items-center">
    <img :src="getSvg(record.category)" class="w-5 h-5 mr-1">
    <a @click.prevent="editDocument" class="link-text">{{ record[column.key] }}</a>
  </div>
</template>

添加样式:

.link-text {
  color: black;
}

.link-text:hover {
  color: dodgerblue;
}

此时的效果预览:
在这里插入图片描述

点击会跳转到文档页面:
在这里插入图片描述

剩下的问题

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

在这里插入图片描述

在这里插入图片描述

  • 20
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
Django和Vue.js是两个非常流行的开发框架,它们结合使用可以实现全栈开发。下面给出一个关于Django Vue3全栈开发学习文档的简要说明。 首先,学习文档应该从基础开始,介绍Django和Vue.js的基本概念和用法。对于初学者来说,可以先学习Django的核心概念,比如模型、视图和模板。然后,学习如何使用Django建立数据模型、创建RESTful API,并且如何将数据渲染到模板中。 接下来,学习文档应该逐步介绍Vue.js的基础知识,包括Vue的实例、组件和指令等。学习者可以通过编写简单的Vue组件来加深对Vue.js的理解,并学习如何使用Vue.js来处理前端的交互逻辑。 然后,学习文档可以介绍如何将Django和Vue.js结合起来进行全栈开发。这包括如何在Django中配置前后端分离的开发环境,如何使用Django提供的API来处理数据的增删改查操作,以及如何使用Vue.js来渲染和处理前端界面。 除了基础知识外,学习文档还应该提供一些实践项目来帮助学习者巩固所学知识。这些项目可以是基于Django和Vue.js的实际应用,比如一个简单的博客系统或一个任务管理应用。通过实际项目的实践,学习者可以更好地理解和运用所学知识。 最后,学习文档应该补充一些额外的资源和参考资料,比如官方文档、书籍和在线教程等,以帮助学习者进一步扩展自己的知识。 总而言之,一本Django Vue3全栈开发的学习文档应该从基础概念开始,逐步引导学习者掌握Django和Vue.js的用法,并通过实践项目和额外资源提供进一步的学习支持。希望以上的回答对您有所帮助。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Python私教

创业不易,请打赏支持我一点吧

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值