# vue-metadata **Repository Path**: liuhangjun/vue-metadata ## Basic Information - **Project Name**: vue-metadata - **Description**: 元数据管理系统（leap metadata）是用于企业内进行元数据管理的Web应用程序。该系统提供直观的用户页面。用户可以使用该系统管理企业所拥有的元数据，如查看元数据基本信息、数据所在位置、数据的血缘关系等。本系统支持管理员和普通用户的分级操作。 - **Primary Language**: Unknown - **License**: Not specified - **Default Branch**: master - **Homepage**: None - **GVP Project**: No ## Statistics - **Stars**: 0 - **Forks**: 25 - **Created**: 2022-08-09 - **Last Updated**: 2023-11-14 ## Categories & Tags **Categories**: Uncategorized **Tags**: None ## README # 元数据资源管理系统 > wherehows ### 简介 元数据管理系统（leap metadata）是用于企业内进行元数据管理的Web应用程序。该系统提供直观的用户页面。用户可以使用该系统管理企业所拥有的元数据，如查看元数据基本信息、数据所在位置、数据的血缘关系等。本系统支持管理员和普通用户的分级操作。 ### 项目说明 这个项目，是我和公司几个前端小伙伴一起完成了，项目比较大，周期比较长（大概用了2年时间）。也更新迭代了很多次，有些功能，是改了又改，所以经常变动。在做这个项目的时间里，学习了很多VUE的知识，也对VUE的数据更新，组件， 指令，混合有了清晰的认识。项目有清晰的文件分类，功能划分，业务层次。比如把业务逻辑和数据持久化(Vuex)拆分开来。比如业务视图模块，文件夹src/components/Business下，Index.vue就是业务视图主页，下面文件夹children就包含 了该模块需要用到子组件，和该路由下包含的子页面。路由和文件夹名称相对应。再如把请求的API，统一到src/components/service/getData.js文件下。把全局接口拦截器，统一到src/config/http.js文件 有了这个大项目的基本，以后使用，运用VUE也更简单，更简易上手。对比以前用的jQuery项目，感觉VUE，方便太多了。 #### vue特别适用的场景： 1. 复杂数据操作的后数据 2. 经常操作DOM的，更新数据的场景。 3. 需要精确的控制，VUE的生命周期是合适的地方。 4. 后台系统页面 #### jquery适用的场景： 1. html5的动画页面， 2. js来操作页面样式的页面。 3. 简单的多页面 4. 官网展示页面 如果二者结合起来一起使用的，vue侧重数据绑定，jquery侧重样式操作，动画效果等，则会更加高效率的完成业务需求。 #### 除了VUE，和它有一样比较优秀的框架React，我总结了一下： react和vue的4点不同 1. 数据是不是可变的 2. 通过js操作一切还是各自的处理方式 3. 类式的组件写法还是声明式的写法 4. 什么功能内置，什么交给社区去做 ### 技术栈 ``` 基于 vue2 + vue-router + vuex + axios + vue-i18n + ES6 + less 并使用webpack打包 ``` ### 使用项目 ``` 1.克隆项目： git clone git@10.100.216.157:LEAP/Metadata.git 2.安装nodejs 3.安装依赖：     npm install 4.启动服务： npm run dev 5.发布代码：     npm run build 6.单元测试： npm run unit 7.e2e测试: npm run e2e 8.测试： npm test ``` ### 部分截图 ![avatar](./src/assets/images/gif/GIF.gif) ![avatar](./src/assets/images/gif/GIF2.gif) ![avatar](./src/assets/images/gif/GIF3.gif) ![avatar](./src/assets/images/gif/GIF4.gif) ![avatar](./src/assets/images/gif/GIF5.gif) ![avatar](./src/assets/images/gif/GIF6.gif) ![avatar](./src/assets/images/gif/GIF7.gif) ![avatar](./src/assets/images/gif/GIF8.gif) ![avatar](./src/assets/images/gif/GIF9.gif) ### 项目目录说明 ``` ├── build // webpack配置文件 ├── config // 项目打包路径 ├── index.html // 入口html文件 ├── package.json //node安装包信息 ├── README.md ├── src //项目源代码目录 │ ├── App.vue //页面入口文件 │ ├── assets //静态资源目录 │ │ ├── css //css目录 │ │ │ ├── common.css //公共样式目录 │ │ │ └── elementUiEdit.less //自定义element UI 组件less样式 │ │ ├── element-theme //element主题样式目录,scss文件 │ │ │ └── element-variables.scss //自定义主题样式 │ │ ├── font //项目上用的一些字体图片 │ │ ├── images //项目用到的图片 │ │ ├── js //js库文件 │ │ │ └── go.js //画血缘关系图用到的库 │ │ ├── less //less文件 │ │ │ ├── Entry.less │ │ │ ├── header.less │ │ │ ├── metaData-nav.less │ │ │ ├── metaData.less │ │ │ ├── mixin.less │ │ │ ├── source.less │ │ │ └── vars.less │ ├── components //所有页面目录，对应路由表 │ │ ├── Business //业务视图模块 │ │ │ ├── children │ │ │ │ ├── AddDataset.vue //业务视图中添加表和数据页面 │ │ │ │ ├── cascader //重新的下拉选择框组件 │ │ │ │ │ └── src │ │ │ │ │ ├── main.vue │ │ │ │ │ └── menu.vue │ │ │ │ └── children │ │ │ │ ├── BusinessTree.vue //表和文件树组件 │ │ │ │ └── BusinessTreeItem.vue //表和文件树的子组件 │ │ │ └── Index.vue //业务视图主页面 │ │ ├── common //公共组件 │ │ │ ├── Cron.vue │ │ │ ├── DatePicker.vue //日期选择公共组件 │ │ │ ├── dialogItemTitle.vue //弹出框公共组件 │ │ │ ├── Error.vue │ │ │ ├── index.js │ │ │ ├── ItemJump.vue //跳转到表和文件超链接子组件 │ │ │ ├── LineChart.vue │ │ │ ├── Loading │ │ │ │ ├── index.js │ │ │ │ └── Loading.vue │ │ │ ├── MoreLoading │ │ │ │ ├── index.js │ │ │ │ └── MoreLoading.vue │ │ │ ├── NoData │ │ │ │ ├── index.js │ │ │ │ └── NoData.vue │ │ │ ├── PieChart.vue │ │ │ ├── RankList.vue │ │ │ ├── Search.vue //搜索公共组件 │ │ │ ├── SplitControler.vue │ │ │ ├── TableHeader │ │ │ │ ├── index.js │ │ │ │ └── TableHeader.vue │ │ │ └── TableItemJump.vue //跳转到表和文件超链接组件 │ │ ├── DataImport //可以忽略些文件夹 │ │ │ ├── DataImport.vue │ │ │ ├── DataImportJob.vue │ │ │ ├── DataImportManual.vue │ │ │ ├── DataImportRecord.vue │ │ │ ├── DataImportTemplate.vue │ │ │ ├── DataTreeDialog.vue │ │ │ └── UploadItem.vue │ │ ├── Files //文件模块 │ │ │ ├── children │ │ │ │ ├── ExportTree.vue //文件导出树组件 │ │ │ │ └── InputTag.vue //文件标签高级搜索组件 │ │ │ └── Index.vue //文件模块主页面 │ │ ├── Footer.vue │ │ ├── Header.vue //页面头组件 │ │ ├── Home //主页模块 │ │ │ ├── Home.vue //主页路由 │ │ │ ├── HomeIndex.vue //主页模块主页面 │ │ │ ├── HomeSearch.vue //主页搜索组件 │ │ │ ├── HomeTopList.vue //主页排行榜组件 │ │ │ ├── HomeUserInfo.vue //主页用户信息组件 │ │ │ ├── TopicTree.vue //废弃组件 │ │ │ └── TopicTreeItem.vue //废弃组件 │ │ ├── ImportExport //导入/导出模块 │ │ │ ├── children │ │ │ │ ├── children │ │ │ │ │ ├── children │ │ │ │ │ │ ├── BlackList.vue //黑名单组件 │ │ │ │ │ │ └── HdfsSource.vue //HDFS配置组件 │ │ │ │ │ ├── CompleteData.vue //已处理数据组件 │ │ │ │ │ ├── CreateTask.vue //创建任务页面 │ │ │ │ │ ├── DataImport.vue //数据导出页面 │ │ │ │ │ ├── HistoryList.vue //历史记录页面 │ │ │ │ │ ├── importHeaderItem.vue │ │ │ │ │ ├── InsertData.vue //增加数据组件 │ │ │ │ │ └── TaskList.vue //任务列表页面 │ │ │ │ ├── Collection.vue //元数据采集路由页面 │ │ │ │ ├── Export.vue //元数据导出路由页面 │ │ │ │ └── Import.vue //元数据Excel模板导入路由页面 │ │ │ └── Index.vue //入/导出组件主页面 │ │ ├── MainNav.vue //左侧导航 │ │ ├── MainPage.vue //右侧路由 │ │ ├── MetaData //表模块 │ │ │ ├── DataImport │ │ │ │ ├── DataImport.vue │ │ │ │ ├── DataImportJob.vue │ │ │ │ ├── DataImportManual.vue │ │ │ │ ├── DataImportRecord.vue │ │ │ │ ├── DataImportTemplate.vue │ │ │ │ ├── DataTreeDialog.vue │ │ │ │ └── UploadItem.vue │ │ │ ├── Dataset //表模块组件 │ │ │ │ ├── chiildren │ │ │ │ │ └── TagDetail.vue //标签详情页 │ │ │ │ ├── Dataset.vue //表左侧树组件 │ │ │ │ ├── DatasetDetail //表详情组件 │ │ │ │ │ ├── BusinessDetail.vue // │ │ │ │ │ ├── BusinessTree.vue │ │ │ │ │ ├── BusinessTreeItem.vue │ │ │ │ │ ├── children │ │ │ │ │ │ └── LifeCycle.vue //tab生命周期 │ │ │ │ │ ├── Comments.vue //tab注释信息 │ │ │ │ │ ├── DatabaseDetail.vue //库详情面 │ │ │ │ │ ├── DataHistory.vue //tab变更历史 │ │ │ │ │ ├── DataPermission.vue //tab权限信息 │ │ │ │ │ ├── DatasourceDetail.vue //数据源详情页 │ │ │ │ │ ├── DataTypeDetail.vue //数据源列表页 │ │ │ │ │ ├── Diagram.vue //tab血缘关系 │ │ │ │ │ ├── Dialog //弹窗组件 │ │ │ │ │ │ ├── CompareDialog.vue //变更历史对比组件 │ │ │ │ │ │ └── TextDialog.vue //属性信息-描述富文本编辑 │ │ │ │ │ ├── PermissionItemL.vue //tab权限信息 子组件 │ │ │ │ │ ├── PermissionItemR.vue //tab权限信息 子组件 │ │ │ │ │ ├── PermissionList.vue //tab权限信息 列表组件 │ │ │ │ │ ├── Properties.vue //基本信息 │ │ │ │ │ ├── PropertiesEditor.vue //基本信息 双击编辑文本框子组件 │ │ │ │ │ ├── PropertyItem.vue //基本信息 编辑,提交,修改组件 │ │ │ │ │ ├── RelationalGraph.vue //血缘关系组件 │ │ │ │ │ ├── SampleData.vue //tab样本数据 │ │ │ │ │ ├── Schema.vue //基本信息 剩余字段 │ │ │ │ │ ├── Storage.vue //存储信息 │ │ │ │ │ ├── TableDetail.vue //表的详情页面,改变Tab页面 │ │ │ │ │ └── VersionControl.vue │ │ │ │ ├── DatasetDetail.vue │ │ │ │ ├── DatasetTree.vue // │ │ │ │ ├── DatasetTreeHeader.vue │ │ │ │ ├── DatasetTreeItem.vue │ │ │ │ └── PhysicalExportTree │ │ │ │ ├── PhysicalExportTree.vue │ │ │ │ └── PhysicalExportTreeItem.vue │ │ │ ├── MetaData.vue │ │ │ ├── Nav.vue │ │ │ ├── Personal //管理专区模块 │ │ │ │ ├── chiildren │ │ │ │ │ └── Search.vue ///管理专区公共搜索组件 │ │ │ │ ├── Personal.vue //管理专区主路由 │ │ │ │ ├── PersonalApproval.vue //权限审核页面 │ │ │ │ ├── PersonalAuthority.vue //我有权限页面 │ │ │ │ ├── PersonalChargeMaintain.vue //我负责的 - 待指定负责人 │ │ │ │ ├── PersonalCollect.vue //我收藏的页面 │ │ │ │ ├── PersonalDel.vue //已删除的元数据页面 │ │ │ │ ├── PersonalMetaMaintain.vue //我负责的 - 待维护元信息表格 │ │ │ │ ├── PersonalOwner.vue //我负责的页面 │ │ │ │ ├── PersonalOwnerTable.vue //我负责的 - 维护的所有实体表格 │ │ │ │ ├── PersonalRecord.vue //申请记录 页面 │ │ │ │ ├── Setting.vue //环境配置 页面 │ │ │ │ ├── Tag.vue //标签页面 │ │ │ │ ├── TagDetail.vue //标签-标签详情子组件 │ │ │ │ └── TagList.vue //标签-标签列表子组件 │ │ │ ├── Search.vue │ │ │ └── SearchResult.vue │ │ └── Source //存储空间模块 │ │ ├── Detail │ │ │ ├── NumberRecord.vue │ │ │ ├── SourceDatabase.vue │ │ │ └── SourceDataset.vue │ │ ├── Source.vue //存储空间主页面 │ │ ├── SourceHome.vue │ │ └── SourceList.vue │ ├── config //全局配置 │ │ ├── env.js //定义全局CODE,文字长度 │ │ ├── fetch.js //fetch模块 │ │ ├── http.js //axios请求和响应拦截器,全局报错提示 │ │ └── mUtils.js //全局工具函数 │ ├── directives //自定义指令 │ │ ├── clickoutside.js │ │ ├── ellipsis.js │ │ ├── hiddenElement.js │ │ └── index.js │ ├── locale //中英文JSON文件 │ │ ├── en.js //英文JSON │ │ ├── international.js //vue-i18n 配置文件 │ │ └── zh.js //中文JSON │ ├── main.js //项目主入口 │ ├── mixins //VUE混合 │ │ └── common.js │ ├── plugins │ │ ├── index.js │ │ └── MessageBox │ │ ├── main.js │ │ └── MessageBox.vue │ ├── router //路由配置 │ │ └── index.js │ ├── service //后台请求数据API │ │ └── getData.js │ ├── store // vuex的状态管理 │ │ ├── actions.js // 配置actions │ │ ├── index.js // 全局状态属性对象 │ │ ├── mutation-types.js //定义常量muations名 │ │ └── mutations.js //配置mutations │ ├── utils //VUE工具函数 │ │ ├── bus.js //VUE 非父子,兄弟之间通信BUS实例 │ │ ├── index.js │ │ └── validator.js //表单验证,公共正则表达式 │ └── vars.less //常量less └── static //静态资源 ├── a.json ├── alert.html //IE11以下,会跳转到这个页面 ├── images //网页图标 │ └── favicon.ico └── outdatedbrowser //中英方语言提示信息 ```