c# 根据配置生成表单_一个很好的配置生成表单的方式

最新推荐文章于 2024-06-20 16:36:46 发布

cuk5239

最新推荐文章于 2024-06-20 16:36:46 发布

阅读量1.1k

点赞数

文章标签： python java vue javascript 大数据 ViewUI

原文链接：https://vuejsexamples.com/a-very-nice-configuration-generation-way-to-develop-form/

版权

ncform是一个用于C#的表单开发工具，它通过配置文件生成表单UI和交互。该工具有标准组件和验证规则，支持灵活的控件交互。ncform旨在提高开发效率，减少错误，提供丰富的验证规则和扩展性，适用于多种UI实现，如Vue的ElementUI主题。

摘要由CSDN通过智能技术生成

c# 根据配置生成表单

ncform (ncform)

ncform, a nice form development way that generates form UIs and their interactions with just configuration.

ncform，一种不错的表单开发方式，它仅通过配置即可生成表单UI及其交互。

Comes with standard components and validation rules, out of the box.

随附标准组件和验证规则。

Have powerful control interaction and extension capabilities, do what you want.

具有强大的控件交互和扩展功能，可随心所欲。

View Demo 查看演示 Download Source 下载源

操场 (Playground)

Experience the charm of ncform on the Playground to deepen your understanding of ncform

在操场上体验ncform的魅力，以加深您对ncform的了解

Playground shows the examples of ncform most of the use of the scene ( I believe the examples are the best document ), it is recommended to carefully browse the examples, the configuration of the examples can be used directly in the actual development

Playground展示了ncform实例的大部分使用场景(相信实例是最好的文档)，建议仔细浏览实例，实例的配置可以在实际开发中直接使用

快速开始 (Quick Start)

在node.js中 (In node.js)

1.install

1.安装

npm i @ncform/ncform @ncform/ncform-common --save
npm i @ncform/ncform-theme-elementui element-ui axios --save

2.import

2.进口

import Vue from 'vue';
import vueNcform from '@ncform/ncform';

import Element from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import ncformStdComps from '@ncform/ncform-theme-elementui';
import axios from 'axios';

Vue.use(Element);
Vue.use(vueNcform, { extComponents: ncformStdComps, /*lang: 'zh-cn'*/ });
window.$http = Vue.prototype.$http = axios;

3.usage

3.用法

# demo.vue

<template>
  <div>
    <ncform :form-schema="formSchema" form-name="your-form-name" v-model="formSchema.value" @submit="submit()"></ncform>
    <el-button @click="submit()">Submit</el-button>
  </div>
</template>
<script>
export default {
  data () {
    return {
      formSchema: {
        type: 'object',
        properties: {
          name: {
            type: 'string'
          }
        }
      }
    }
  },
  methods: {
    submit () {
      this.$ncformValidate('your-form-name').then(data => {
        if (data.result) {
          console.log(this.$data.formSchema.value)
          // do what you like to do
        }
      })
    }
  }
}
</script>

You can refer to the ncform-demo project

您可以参考ncform-demo项目

在浏览器中 (In browser)

<html>

<head>
  <link rel="stylesheet" href="https://unpkg.com/[email protected]/lib/theme-chalk/index.css">
</head>

<body>
  <div id="demo">
    <ncform :form-schema="formSchema" form-name="your-form-name" v-model="formSchema.value" @submit="submit()"></ncform>
    <el-button @click="submit()">Submit</el-button>
  </div>

  <script type="text/javascript" src="https://unpkg.com/vue/dist/vue.min.js"></script>
  <script type="text/javascript" src="https://unpkg.com/axios/dist/axios.min.js"></script>

  <script type="text/javascript" src="https://unpkg.com/@ncform/ncform-common/dist/ncformCommon.min.js"></script>
  <script type="text/javascript" src="https://unpkg.com/@ncform/ncform/dist/vueNcform.min.js"></script>

  <script type="text/javascript" src="https://unpkg.com/element-ui/lib/index.js"></script>
  <script type="text/javascript" src="https://unpkg.com/@ncform/ncform-theme-elementui/dist/ncformStdComps.min.js"></script>

  <script type="text/javascript">
    Vue.use(vueNcform, { extComponents: ncformStdComps, /*lang: 'zh-cn'*/ });

    // Bootstrap the app
    new Vue({
      el: '#demo',
      data: {
        formSchema: {
          type: 'object',
          properties: {
            name: {
              type: 'string'
            }
          }
        }
      },
      methods: {
        submit() {
          this.$ncformValidate('your-form-name').then(data => {
            if (data.result) {
              // do what you like to do
            }
          });
        }
      }
    });
  </script>
</body>

</html>

特征 (Features)

Configuration generation: A JSON data structure completely describes the UI of a form and its interaction behavior, and the development of the form is completed.

配置生成：JSON数据结构完全描述了表单的UI及其交互行为，从而完成了表单的开发。
Flexible interaction: Form controls flexibly interact with each other with powerful dx expressions

灵活的交互：表单控件通过强大的dx expressions彼此灵活地交互
Standard components: ncform defines a standard set of form component configuration specifications that can meet more than 90% of your form development needs without extensions.

标准组件：ncform定义了一组标准的表单组件配置规范，可以满足您90％以上的表单开发需求，而无需扩展。
Rich verification: ncform comes with more than ten commonly used verification rules to meet more than 90% of your form validation requirements

丰富的验证：ncform带有十多种常用验证规则，可以满足90％以上的表单验证要求
Extended friendliness: Form components and validation rules can be flexible extended and provide tools to simplify extension work

扩展友好性：表单组件和验证规则可以灵活扩展，并提供简化扩展工作的工具

解决痛点 (Solve Pain Points)

Most of the features in the management system are not the query list, that is, the form. The development of the form is a boring, nutrient-free, high-consumption repetitive physical activity that takes time and effort. The interaction between the form controls and the validation rules of the form items are very easy to produce bugs. So, in order to improve the efficiency of form development, reduce bugs, improve form development specifications and robustness, and most importantly, improve the development happiness of developers, the project is born

管理系统中的大多数功能不是查询列表，即表单。这种形式的发展是一种无聊，无营养，高消耗的重复性体育活动，需要时间和精力。表单控件和表单项的验证规则之间的交互非常容易产生错误。因此，为了提高表单开发的效率，减少错误，改进表单开发规范和健壮性，最重要的是，提高开发人员的开发满意度，该项目诞生了

重复轮子？ (Repeat the wheel?)

A similarly well-known scheme in the community ( listed in the reference projects ) has one or more of the following problems:

社区中类似的知名方案(在参考项目中列出)存在以下一个或多个问题：

Basically designed in accordance with json-schema, but it is not appropriate to use json-schmea to describe a form.

基本上是根据json-schema设计的，但是使用json-schmea描述形式是不合适的。
For the interaction between form items, complex verification logic, there is no good solution

对于表单项之间的交互，复杂的验证逻辑，没有好的解决方案
Can't complete all the UI and interaction behavior of the form with just one configuration ( meaning the configuration can be stored )

仅使用一种配置就无法完成表单的所有UI和交互行为(意味着可以存储配置)
The underlying components provided by default are not rich enough to cover the form components commonly used in actual development.

默认情况下提供的基础组件不够丰富，无法覆盖实际开发中常用的表单组件。
Long time no maintenance, code writing style is too old and is difficult to expand

长时间不用维护，代码编写风格太旧，难以扩展
Component extension problem: There is no friendly extension solution for the current hot component implementations like Vue and React.

组件扩展问题：对于当前的热门组件实现(如Vue和React)，没有友好的扩展解决方案。

In order to solve the above problems, embarked on the road of making wheels. . .

为了解决上述问题，走上了车轮制造之路。。。

为什么不使用标准的json模式？ (Why not use the standard json-schema?)

Because json-schema is data-oriented rather than form (ui), it is not very friendly for declaring a form.

因为json-schema是面向数据的而不是表单(ui)，所以声明表单不是很友好。

For a form, care about what the form items are, what the form items look like, what are the validation rules, all these are related to the fields. The most intuitive management is in one place

对于表单，请注意表单项是什么，表单项是什么样，验证规则是什么，所有这些都与字段相关。最直观的管理集中在一处

Come to a simple comparison:

进行简单的比较：

json-schema example：
json模式示例：

ncform example：
ncform示例：

Json-schema for validation rules, declared in various places, not well managed. And ncform is concentrated in rules field. This design is also convenient for later development of form development IDE

验证规则的Json模式在不同地方声明，管理不善。 ncform集中在规则领域。此设计也方便以后进行表单开发IDE的开发

dx表达式： (dx expression：)

With dx expressions, you can get the value of the specified field with {{$root.xxx}} and then write your arbitrary logical expression with the native JS.

使用dx表达式，您可以使用{{$root.xxx}}获取指定字段的值，然后使用本机JS编写任意逻辑表达式。

Specify the attribute value in the object, for example：
在对象中指定属性值，例如：

disabled: 'dx: {{$root.person.age}} < 18'

Specify the value of an item in the array, for example:
指定数组中一项的值，例如：

disabled: 'dx: {{$root.persons[0].age}} < 18'

Specify the properties of the same item in the array, for example:
指定数组中同一项目的属性，例如：

disabled: 'dx: {{$root.persons[i].age}} < 18'
disabled: 'dx: {{$root.persons[i + 1].age}} < 18'

Access constant data in the global configuration, for example:
在全局配置中访问常量数据，例如：

disabled: 'dx: {{$root.person.age}} === {{$const.max}}'

// The global configuration is as follows
globalConfig: {
  constants: { max: 18 }
}

设计思维 (Design Thinking)

ncform = ncform container + ncform theme standard component

ncform = ncform容器+ ncform主题标准组件

A system project generally uses a UI library (such as vue) and a UI implementation (such as elementui) In order to live in peace with it, ncform's standard components can use the same UI implementation

一个系统项目通常使用一个UI库(例如vue)和一个UI实现(例如elementui)。为了与之和谐相处，ncform的标准组件可以使用相同的UI实现。

The ncform Vue version provides the standard components of the elementui theme by default [Click to view]

ncform Vue版本默认提供elementui主题的标准组件[单击以查看]

If you are a fan of iview, you can develop standard components of the iview theme by following the specifications of the ncform standard components.

如果您是iview的粉丝，则可以按照ncform标准组件的规范来开发iview主题的标准组件。

Thought: "Throw in" the standard components of various themes into the ncform container, which is a nice tool for developing forms.

思想：将各种主题的标准组件“扔进” ncform容器中，这是开发表单的好工具。

翻译自: https://vuejsexamples.com/a-very-nice-configuration-generation-way-to-develop-form/

c# 根据配置生成表单

cuk5239

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
c# 根据配置生成表单_一个很好的配置生成表单的方式

c# 根据配置生成表单 ncform (ncform)ncform, a nice form development way that generates form UIs and their interactions with just configuration. ncform，一种不错的表单开发方式，它仅通过配置即可生成表单UI及其交互。 Comes with standard co...
复制链接

扫一扫