Vue主动检测文件是否存在 模块管理用

Vue 验证文件是否存在

最近写项目时遇到一个情况:使用管理系统管理模块时,输入想要关联的组件时如果填写错误,会导致一些异常。
于是乎,找到了一个解决方法。
在这里插入图片描述

  • 创建配置信息文件
    在这里插入图片描述如图在此处创建两个js文件
    _import_development.js
    _import_production.js

我这里内容写的是一样的

module.exports = file => () => import('@/views' + file + '.vue')
  • 创建配置信息文件

页面里引入这个文件
在这里插入图片描述

const _import = require('@/router/_import_development.js')
  • 检查文件存在方法定义
	isFileExist() {
        var filePath = this.formData.ModuleComponent;

        try {
          var isfile = _import(filePath);
          return true;
        } catch (e) {
          if (filePath == "Layout") {
            return true;
          }
          return false;
        }
      },
  • 调用方法,由于此处用的是elementui的表单验证,所以自定义了一个验证规则,用法可以参考elementUI Fom
          var checkFile = (rule, value, callback) => {
        if (!value) {
          return callback(new Error('组件不允许为空'));
        }
        setTimeout(() => {
          var isExist = this.isFileExist();

          if (!isExist) {
            callback(new Error('系统检测到组件不存在!'));
          } else {
            callback();
          }
        }, 100);
      };

在这里插入图片描述

  • 总结
    总体思路为模拟导出输入的组件地址,用try catch捕捉保存信息。由于导入时如果没有这个文件会导致报错,所以用此“曲线救国”的方式来解决这个需求。
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue可以实现文件管理,通过Vue组件化开发特性,可以将整个文件管理系统按照功能模块化,方便管理和维护。下面就各模块进行简述: 一、文件上传模块文件上传功能是文件管理系统中最基础的功能,可以使用第三方库,如Axios来进行异步上传。也可以使用Vue.js提供的v-model以及$refs等方法,实现文件上传的验证、进度条展示等功能。 二、文件管理模块文件管理模块包含了创建、修改、删除文件夹的功能。可以使用Vue.js提供的组件化开发,将文件夹看做组件,如Foder.vue,在该组件中通过数据绑定的方式更新文件夹的名称、展示状态等。同时,使用Vuex进行状态管理,保证文件夹的变更不容易发生错乱。 三、文件列表模块文件列表模块主要用于展示已上传文件文件夹。可以使用Vue.js的列表渲染方式,通过v-for指令来遍历渲染所有的文件文件夹。同时在监听文件文件夹状态的同时,根据不同状态展示相应的样式,以增加可视性。 四、文件搜索模块: 在文件管理系统中,文件搜索功能是很重要的功能之一。可以通过Vue.js提供的computed计算属性监听搜索关键字,触发业务逻辑进行搜索,并将搜索结果展现在文件列表中,同时可以给予一些动态交互和提醒。 五、文件下载模块: 在文件管理系统中,需要为用户提供文件下载的功能。可以通过Vue.js体系中自带的组件或者第三方库进行下载。例如:el-table-column中的type属性设为'index'。同时,也可以对用户进行文件下载的权限管理,如不允许下载、只允许部分用户下载等方式,提高文件的安全性。 六、文件分享模块文件分享模块可以将文件文件夹标记为公开或私有,或者通过一些特定的方式分享文件。可以使用Vue.js组件化开发特性,将分享功能看做组件,如Share.vue,并通过事件传递的方式,将组件内的逻辑绑定到文件文件夹中,实现公开、私有分享等功能。 以上就是Vue实现文件管理的基本功能模块,在实际开发中,需要根据实际业务需求对这些功能进行调整和扩展,实现属于自己的文件管理系统。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值