Giter VIP home page Giter VIP logo

vue-admin's Introduction

vue-admin

本项目提供了一个针对后台admin应用的low code解决方案。

热烈庆祝本项目被awesome-lowcode收录

model

model是对一个后台页面的描述,由以下几部分构成

  • fields 对字段的描述
    • labelName 字段的名称
    • label
    • editor
    • view
    • validator 表单验证用的,底层依赖async-validator,该配置项支持函数,第一个参数为整条记录,第二个参数为当前模式(create | edit),用于支付复杂情况的校验,函数返回值是async-validator的验证配置项。这个参数支持一个特殊的值custom,将验证委托给具体的Editor组建,该组建需要实现一个validate方法,该方法组要返回promise。
    • autoValidate,是否自动表单验证该字段,布尔值或者返回布尔值的函数(函数会被传入一个参数mode,为create或edit)
    • tip tip用在Editor组件中,用于对应字段做些说明,它可以是一个函数(调用时this指向Editor组件实例,被传入一个参数mode(值为create或edit),其返回值作为显示值),也可以是个简单值(直接作为显示值)
    • colspan
    • tableColumnConfig 对应el-table-column的其他配置项 一个对象 展开传递
  • pages关联页面的描述
    • list 列表页配置
    • info 详情页面 配置同DocumentOperatorInfo只是展示为页面级而不是弹窗
    • create 新建页面

documentOperators/collectionOperators/filterOperators在底层都依赖于Operators

声明了一个model后,我们还需要在vue-router配置中指明用了哪个model,因而用到了vue-router的meta属性。

组件命名规则

整体风格为PascalCase。

本系统把组件分为Editor、Filter、View、Label、DocumentOperator、CollectionOperator、FilterOperator七大类,分属于这七大类的组件应以对应的类型作为组件名前缀。

对于Editor、Filter组件,优先描述数据结构,然后是前端特殊功能,最后是前端展示。

对于只会用一次的组件,采用组件类型+model名+字段名的形式

写model的tip

  • 一般而言,一个model对应和一个后端model(对应一张表)对应,但实际上不一定。
  • 一个model的内容不一定要放在一个文件中,可以放在多个文件中最后组合
  • 一个具体的业务系统可能有非常多的相似配置项,可以写成辅助函数来生成这些配置(类似于redux的action,本身只是对象,但是可以有action creator)
  • 如果通过MetaPage页面级组件使用model, 会默认把model深度freeze优化性能。deepFreeze情况下如果model中有同步引用的组件(不是通过动态import),需要手动使用Vue.extend转换为Vue子类,否则Vue自动调用extend将配置对象转换为子类时,由于配置对象被冻结转换为子类失败。

vue-admin's People

Contributors

jiangshanmeta avatar dependabot[bot] avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.