1 Star 0 Fork 217

风之源 / ivzone

forked from iteaj / ivzone 
加入 Gitee
与超过 1200万 开发者一起发现、参与优秀开源项目,私有仓库也完全免费 :)
免费加入
克隆/下载
贡献代码
同步代码
取消
提示: 由于 Git 不支持空文件夾,创建文件夹后会生成空的 .keep 文件
Loading...
README
Apache-2.0

新版本已经在开发(基于vue3,antdv2,vite),敬请期待, 主要变动如下

  1. 框架方面升级到vue3, ui框架升级到antdv2
  2. 独立出online表单设计器
  3. 专注于多页面的组件库开发, 不在提供首页,登录页,权限页,404等页面
  4. 将会重新设计组件

ivzone 一个更适合个人开发者、专业后端使用的前端框架(无需编译、可通过在线设计器直接生成页面、非前后端分离(支持), 基于Vue的传统多页面开发方式)

  1. ivzone 是使用vue、antdv开发的多页面组件, 一个视图组件即一个页面(html);一个视图组件包含了增删改查常用功能。充分发挥vue框架数据驱动视图的能力, 使得字典,select等常见组件数据获取到展示的便利性以及表格对这些组件的数据格式展示能力,最大简化了管理端前端的开发。项目采用json数据格式定义一个页面, 这使得创建一个页面只需要定义一些字段的描述性语言
  2. 一个组件一个页面, 一个组件包含增删改查功能, 将增删改查的功能封装在一个组件里面, 将以前增删改查四个html页面变为一个html页面, 且共用一套元数据描述, 此项目最大的特点就是代码极度简洁干净, 一个简单的增删改查不超过80行的代码(一个html页面) . 此项目只包含前端组件库, 不包含后台管理模块, 如果需要使用完整的后台管理(包含前后端, 后端使用spring boot2)请移步izone-sboot管理后台
  3. 学习新框架成本太高吗? 试试使用online可视化生成器, 这是一款可以在线生成ivzone代码的生成器, 可以很直观的看到每个参数改变时ivzone代码的变化
  4. 说在最后, 你们的关注和star是作者最大的动力, 如果喜欢或者能帮到你请顺手star, 同时非常欢迎PR一起维护和完善

项目文档教程 不断更新中

项目预览链接(暂不可用) 用户名:admin 密码:admin123456

online可视化生成器(暂不可用) 一款可以在线学习ivzone框架和在线生成代码的可视化生成器(不断完善中 2020.08.16)

  • 首先, 它是一款可视化的在线表单设计组件, 且支持保存和恢复编辑数据
  • 其次, 它可以生成一个页面的完整功能, 包含增删改查以及自定义功能, 所见即所得
  • 最后, 它支持ivzone的在线学习、设计、预览 ,以及在线调试ivzone框架
  • 支持mock.js的数据模拟, 预览时的数据都是通过mock模拟生成, 可以在预览页面中直接操作诸如:浏览, 新增, 删除, 修改等真实的功能
  • 目前只完成默认视图, 接下去会不断更新、完善
  • 这是一个初略版本, 很多功能还存在bug, 有问题可以qq联系我

最新更新日志(2020.09.13)

  1. 支持对编辑的设计数据进行保存
  2. 支持对保存的设计数据进行修改
  3. 开放设计过的表单数据

(2020.09.05)

  1. 新增列表视图页(开发阶段)
  2. 修改抽屉视图页和默认视图页若干bug

(2020.08.23)

  1. 表单验证新增范围项
  2. 修改rate组件的半选配置
  3. 新增表格列宽设置
  4. 新增data数据对象展示
  5. 调整ivzone整体样式

适用的开发者 列举了以下几种类型:

  1. 喜欢vue的开发方式, 又不需要编译的开发者(或者不熟悉node, webpack等)
  2. 对项目的界面设计没有特殊的要求, 且需要快速开发, 迭代,上线的开发者
  3. 喜欢传统多页面的开发方式, 对spa(单页面)开发方式无感的开发者
  4. 想找一套和后台语言无关的, 且完整包含增删改查功能(一个页级视图组件包含完整的增删改查详情等功能)的开发者
  5. 想简化编写, 通过表单的可视化拖动生成一个完整的页面

说明目录

  1. 最新版本日志
  2. 核心功能介绍
  3. 项目由来和介绍
  4. 开发语言和使用的框架
  5. 开发和安装说明
  6. 部分核心功能代码
  7. 组件界面截图

核心功能说明

  1. 一个组件代表一个页面(包含增删改查、查看详情页), 其中有两种格式 1. 普通纯表单编辑 2. 表格行嵌套表单编辑
  2. 支持单向绑定(使用bind()), 以及双向绑定
  3. 元数据field支持嵌套写法:如对象嵌套{field: 'a.b'} 列表(数组)嵌套{field: 'a[0].b'}
  4. 支持通过元数据dictType声明,直接获取字典数据(1. 在表单下拉框直接展示 2. 在表格直接显示) {dictType: 'status'}
  5. 支持通过元数据url声明, 直接获取后台的数据(1. 在表单下拉框直接展示 2. 在表格直接显示) {url: '/user/list'}
  6. 基于3和4的基础上, 支持在table里面直接显示以下组件对应的字段值:radio、checkbox、select、date、stree、tree

在线表单设计界面预览

主界面 多列设计 自定义功能 功能预览 编辑页预览 sql语句预览 详情页预览

项目由来和介绍

  1. 项目的由来:提炼于开发过程中常用功能点的简化以及开发时碰到的一些痛点(繁琐、麻烦、通用)
  2. 项目的目标:希望以最简单的方式, 最少的代码实现一个页面最基础的增删改查功能, 且提供灵活、强大的可扩展性
  3. 项目已提供的组件:ivz-basic-view(基础列表组件+默认编辑组件+抽屉详情组件)、ivz-drawer-view(基础列表组件+抽屉编辑组件+抽屉详情组件)、ivz-edit-view(可编辑的表格页)、ivz-drawer-edit-table(可编辑的列表组件 抽屉下拉方式) 这些组件基本可以覆盖80%的业务功能
  4. 已提供的页面:首页、登录页 后期将提供404、500、未授权等页面
  5. 项目的特点:使用传统的前端开发方式一个功能一个页面,有别于常用的vue单页面应用, 使用此项目可以用传统的开发方式再配合vue框架提供的数据驱动、组件模块化的能力, 解决了单页面在测试的时候更新一个功能点需要重新测试其他功能点的痛苦(此项目是多页面项目, 各个功能点之间没有关联) 、以及每次新增一个功能点或者修改一个bug之后都需要重新编译、发布整个项目

使用语言及框架

  1. js,html,css 前端标准语言
  2. vue、axios、qs、mockjs 等前端框架
  3. antdv组件库

开发和安装说明

测试环境

  1. 使用ide开发工具克隆源代码 或者使用git命令:git clone https://gitee.com/iteaj/ivzone.git
  2. 安装依赖:npm install
  3. 启动项目, 默认端口是8080,
    开发测试环境直接访问:http://localhost:8080/index.html
    正式环境 暂时请使用izone-sboot后台脚手架开发sboot管理后台

部分核心功能代码

下面通过一些简短的代码片段说明一些开发中常用的功能 核心功能

一对一关系
{field: 'dept.name', title: '部门名称', dictType: 'user_dept', type: 'select'}
一对多关系
{field: 'role[0].name', title: '角色名称', url: '/admin/role/tree', type: 'stree'}
  1. 引用字典数据到下拉框
{field: 'status', title: '订单状态', dictType: 'pay_status', type: 'select', width: 80}
  1. 时间格式化
{field: 'createTime', title: '创建时间', type: 'date', config: {
                        format: 'YYYY-MM-DD'
                    }
                }
  1. 自定义表单验证
{field: 'account', title: '帐号', placeholder: '帐号只能是手机号或邮箱', required: true
                    , validator: function (rule, val, callback) {
                    if(!email(val) && !phone(val)){
                        callback(new Error('账号只能是手机号或邮箱'));
                    } else {
                        callback();
                    }
             }},
  1. 树类型下拉选择框
{field: 'pid', title: '父级代理', isTable: false, type: 'stree', url: '/pay/agent/stree'}
  1. 自定义插槽用法 表单项slot:
<ivz-basic-view ref="vbt" :metas="mates" :config="config" :search-metas="searchMetas">
    <template #perm_type_f="params">
        <a-input v-decorator="[params.meta.field, params.meta['decorate']]"
                 :disabled="params.meta.disabled">
            <a-select slot="addonAfter" :options="PermTypeOptions"
                style="width: 88px" :value="typeValue" :disabled="typeDisabled"
                @change="permTypeHandler"></a-select>
        </a-input>
    </template>
</ivz-basic-view>

表格列slot

<ivz-basic-view ref="vbt" :metas="mates" :config="config" :search-metas="searchMetas">
    <template #status_t="{row, index, meta}">
        <span>{{row.status}}</span>
    </template>
</ivz-basic-view>

组件界面截图

以下是系统的一些页面展示, 以及对应的代码,以菜单页为例(使用组件) 菜单管理列表页 菜单列表页

参与贡献

  1. Fork 本仓库
  2. 新建 Feat_xxx 分支
  3. 提交代码
  4. 新建 Pull Request
Apache License Version 2.0, January 2004 http://www.apache.org/licenses/ TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION 1. Definitions. "License" shall mean the terms and conditions for use, reproduction, and distribution as defined by Sections 1 through 9 of this document. "Licensor" shall mean the copyright owner or entity authorized by the copyright owner that is granting the License. "Legal Entity" shall mean the union of the acting entity and all other entities that control, are controlled by, or are under common control with that entity. For the purposes of this definition, "control" means (i) the power, direct or indirect, to cause the direction or management of such entity, whether by contract or otherwise, or (ii) ownership of fifty percent (50%) or more of the outstanding shares, or (iii) beneficial ownership of such entity. "You" (or "Your") shall mean an individual or Legal Entity exercising permissions granted by this License. "Source" form shall mean the preferred form for making modifications, including but not limited to software source code, documentation source, and configuration files. "Object" form shall mean any form resulting from mechanical transformation or translation of a Source form, including but not limited to compiled object code, generated documentation, and conversions to other media types. "Work" shall mean the work of authorship, whether in Source or Object form, made available under the License, as indicated by a copyright notice that is included in or attached to the work (an example is provided in the Appendix below). "Derivative Works" shall mean any work, whether in Source or Object form, that is based on (or derived from) the Work and for which the editorial revisions, annotations, elaborations, or other modifications represent, as a whole, an original work of authorship. For the purposes of this License, Derivative Works shall not include works that remain separable from, or merely link (or bind by name) to the interfaces of, the Work and Derivative Works thereof. "Contribution" shall mean any work of authorship, including the original version of the Work and any modifications or additions to that Work or Derivative Works thereof, that is intentionally submitted to Licensor for inclusion in the Work by the copyright owner or by an individual or Legal Entity authorized to submit on behalf of the copyright owner. For the purposes of this definition, "submitted" means any form of electronic, verbal, or written communication sent to the Licensor or its representatives, including but not limited to communication on electronic mailing lists, source code control systems, and issue tracking systems that are managed by, or on behalf of, the Licensor for the purpose of discussing and improving the Work, but excluding communication that is conspicuously marked or otherwise designated in writing by the copyright owner as "Not a Contribution." "Contributor" shall mean Licensor and any individual or Legal Entity on behalf of whom a Contribution has been received by Licensor and subsequently incorporated within the Work. 2. Grant of Copyright License. Subject to the terms and conditions of this License, each Contributor hereby grants to You a perpetual, worldwide, non-exclusive, no-charge, royalty-free, irrevocable copyright license to reproduce, prepare Derivative Works of, publicly display, publicly perform, sublicense, and distribute the Work and such Derivative Works in Source or Object form. 3. Grant of Patent License. Subject to the terms and conditions of this License, each Contributor hereby grants to You a perpetual, worldwide, non-exclusive, no-charge, royalty-free, irrevocable (except as stated in this section) patent license to make, have made, use, offer to sell, sell, import, and otherwise transfer the Work, where such license applies only to those patent claims licensable by such Contributor that are necessarily infringed by their Contribution(s) alone or by combination of their Contribution(s) with the Work to which such Contribution(s) was submitted. If You institute patent litigation against any entity (including a cross-claim or counterclaim in a lawsuit) alleging that the Work or a Contribution incorporated within the Work constitutes direct or contributory patent infringement, then any patent licenses granted to You under this License for that Work shall terminate as of the date such litigation is filed. 4. Redistribution. You may reproduce and distribute copies of the Work or Derivative Works thereof in any medium, with or without modifications, and in Source or Object form, provided that You meet the following conditions: (a) You must give any other recipients of the Work or Derivative Works a copy of this License; and (b) You must cause any modified files to carry prominent notices stating that You changed the files; and (c) You must retain, in the Source form of any Derivative Works that You distribute, all copyright, patent, trademark, and attribution notices from the Source form of the Work, excluding those notices that do not pertain to any part of the Derivative Works; and (d) If the Work includes a "NOTICE" text file as part of its distribution, then any Derivative Works that You distribute must include a readable copy of the attribution notices contained within such NOTICE file, excluding those notices that do not pertain to any part of the Derivative Works, in at least one of the following places: within a NOTICE text file distributed as part of the Derivative Works; within the Source form or documentation, if provided along with the Derivative Works; or, within a display generated by the Derivative Works, if and wherever such third-party notices normally appear. The contents of the NOTICE file are for informational purposes only and do not modify the License. You may add Your own attribution notices within Derivative Works that You distribute, alongside or as an addendum to the NOTICE text from the Work, provided that such additional attribution notices cannot be construed as modifying the License. You may add Your own copyright statement to Your modifications and may provide additional or different license terms and conditions for use, reproduction, or distribution of Your modifications, or for any such Derivative Works as a whole, provided Your use, reproduction, and distribution of the Work otherwise complies with the conditions stated in this License. 5. Submission of Contributions. Unless You explicitly state otherwise, any Contribution intentionally submitted for inclusion in the Work by You to the Licensor shall be under the terms and conditions of this License, without any additional terms or conditions. Notwithstanding the above, nothing herein shall supersede or modify the terms of any separate license agreement you may have executed with Licensor regarding such Contributions. 6. Trademarks. This License does not grant permission to use the trade names, trademarks, service marks, or product names of the Licensor, except as required for reasonable and customary use in describing the origin of the Work and reproducing the content of the NOTICE file. 7. Disclaimer of Warranty. Unless required by applicable law or agreed to in writing, Licensor provides the Work (and each Contributor provides its Contributions) on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied, including, without limitation, any warranties or conditions of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A PARTICULAR PURPOSE. You are solely responsible for determining the appropriateness of using or redistributing the Work and assume any risks associated with Your exercise of permissions under this License. 8. Limitation of Liability. In no event and under no legal theory, whether in tort (including negligence), contract, or otherwise, unless required by applicable law (such as deliberate and grossly negligent acts) or agreed to in writing, shall any Contributor be liable to You for damages, including any direct, indirect, special, incidental, or consequential damages of any character arising as a result of this License or out of the use or inability to use the Work (including but not limited to damages for loss of goodwill, work stoppage, computer failure or malfunction, or any and all other commercial damages or losses), even if such Contributor has been advised of the possibility of such damages. 9. Accepting Warranty or Additional Liability. While redistributing the Work or Derivative Works thereof, You may choose to offer, and charge a fee for, acceptance of support, warranty, indemnity, or other liability obligations and/or rights consistent with this License. However, in accepting such obligations, You may act only on Your own behalf and on Your sole responsibility, not on behalf of any other Contributor, and only if You agree to indemnify, defend, and hold each Contributor harmless for any liability incurred by, or claims asserted against, such Contributor by reason of your accepting any such warranty or additional liability. END OF TERMS AND CONDITIONS APPENDIX: How to apply the Apache License to your work. To apply the Apache License to your work, attach the following boilerplate notice, with the fields enclosed by brackets "[]" replaced with your own identifying information. (Don't include the brackets!) The text should be enclosed in the appropriate comment syntax for the file format. We also recommend that a file or class name and description of purpose be included on the same "printed page" as the copyright notice for easier identification within third-party archives. Copyright [yyyy] [name of copyright owner] Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0 Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License.

简介

ivzone一款基于vue、antdv开发的多页面前端组件库。提供支持可视化在线生成表单,表格,新增,搜索,等功能、支持在线调试。是一套更加适合个人开发者,后端开发者使用的前端快速开发框架,配合在线表单设计快速生成前端代码,加快前端开发,特点是一个功能一个页面(页级组件)。注: spa是一个应用一个页面, ivzone是一个功能一个页面。其中技术栈使用(vue+antd+axios+qs+moment+codemirror+vuedraggable等)主要、ui框架使用antdv(交流群:616124620) 展开 收起
JavaScript
Apache-2.0
取消

发行版

暂无发行版

贡献者

全部

近期动态

加载更多
不能加载更多了
JavaScript
1
https://gitee.com/the-source-of-wind/ivzone.git
git@gitee.com:the-source-of-wind/ivzone.git
the-source-of-wind
ivzone
ivzone
master

搜索帮助

14c37bed 8189591 565d56ea 8189591