一分鐘開發一個表單

時間 2019-11-06

標籤一分鐘開發一個表單欄目 HTML 简体版

原文原文鏈接

繼上一篇<<讓前端小姐姐愉快地開發表單>>，咱們解決了「愉快」，今天接着講「效率」哈
<(￣︶￣)>。html

表單，其實就是對一個數據的可視化描述，以友好的形式展示給用戶，達到收集用戶填寫的信息的目的前端

今天咱們拋開傳統的表單開發方式，來了解下嶄新的高效的開發表單的方式（看完也許能讓你今後脫離枯燥無味的表單開發生涯）
╰(￣▽￣)╭vue

表單開發第一步：清晰你的數據結構

如下就是今天要開發的表單的數據結構，不復雜，但也不簡單git

{
  firstname: 'daniel',
  lastname: 'xiao',
  fullname: 'daniel.xiao',
  gender: 'man',
  language: [ 'english', 'chinese' ],
  birthday: '',
  luckyNum: 9,
  luckyColor: '',
  email: 'danieldx666@126.com',
  favoriteMusics: [
    {
      type: '',
      score: 5
    }
  ],
  remarks: ''
}
複製代碼

表單開發第二步：生成 ncform schema

也許你會有疑問，ncform 是什麼鬼啊？別急哈，接着往下看就是了。接下來基本都是動圖，會看得比較輕鬆。最後會給出相關連接的，方便你去體驗一下github

咱們經過 ncform schema 生成器，能夠快速生成 ncform schema 的基本結構json

OK，不到幾秒，唰的一下，一個表單就生成了。數組

固然湊合着用仍是能夠的，但咱們不將就，開始優化之旅吧 <(￣︶￣)↗[GO!]bash

ncform 提供了 playground，你能夠把生成的 ncform schema 複製到 playground 進行優化。如下演示都是在 playground 進行的數據結構

優化 name 字段：能讓用戶填少點就填少點

// 如下是修改後的相關字段的配置信息
    "firstname": {
      "type": "string",
      "ui": {
        "label": "First Name",
        "columns": 6
      }
    },
    "lastname": {
      "type": "string",
      "ui": {
        "label": "Last Name",
        "columns": 6
      }
    },
    "fullname": {
      "type": "string",
      "valueTemplate": "dx: {{$root.firstname}} + '.' + {{$root.lastname}}",
      "ui": {
        "label": "Full Name"
      }
    },
複製代碼

優化 gender 字段：二選一固然用單選框最適合

// 如下是修改後的相關字段的配置信息
    "gender": {
      "type": "string",
      "default": "man",
      "ui": {
        "label": "Gender",
        "widget": "radio",
        "widgetConfig": {
            "enumSource": [
              {
                  "value": "man",
                  "label": "Man"
              },
             {
                  "value": "woman",
                  "label": "Woman"
              }
            ]
        }
      }
    },
複製代碼

優化 language 字段：項很少且多選，複選框是個不錯的選擇

// 如下是修改後的相關字段的配置信息
    "language": {
      "type": "array",
      "ui": {
        "label": "Language",
        "widget": "checkbox",
        "widgetConfig": {
            "enumSource": [
                {
                    "label": "English",
                    "value": "eng"
                },
                {
                    "label": "Chinese",
                    "value": "cn"
                }
            ]
        }
      }
    },
複製代碼

優化 birthday 字段：日期咱們就來個日期選擇器吧

// 如下是修改後的相關字段的配置信息
    "birthday": {
      "type": "string",
      "ui": {
        "label": "Birthday",
        "widget": "date-picker"
      }
    },
複製代碼

優化 luckyNum 和 luckyColor：對於數字和顏色，也是有對應的控件滴

// 如下是修改後的相關字段的配置信息
    "luckyNum": {
      "type": "number",
      "ui": {
        "label": "Lucky Num",
        "widget": "input-number"
      }
    },
    "luckyColor": {
      "type": "string",
      "ui": {
        "label": "lucky Color",
        "widget": "color-picker"
      }
    },
複製代碼

優化 email 字段：對於郵件，加個郵件格式驗證規則是有必要滴。再多此一舉一下吧，來個必填，呵呵。

// 如下是修改後的相關字段的配置信息
    "email": {
      "type": "string",
      "ui": {
        "label": "Email"
      },
      "rules": {
          "required": true,
          "email": true
      }
    },
複製代碼

優化 favoriteMusics 字段：可添加項的數組類，用表格展現形式仍是挺nice的
優化 type 字段：音樂類型會有不少項，因此用下拉框好點
優化 score 字段：打分類的，給幾顆星感受還不錯

// 如下是修改後的相關字段的配置信息
    "favoriteMusics": {
      "type": "array",
      "items": {
        "type": "object",
        "properties": {
          "type": {
            "type": "string",
            "ui": {
              "label": "Type",
              "widget": "select",
              "widgetConfig": {
                  "enumSource": [
                    {
                        "value": "1",
                        "label": "Pop Music"
                    },
                    {
                        "value": "2",
                        "label": "Rock Music"
                    }
                  ]
              }
            }
          },
          "score": {
            "type": "number",
            "ui": {
              "label": "score",
              "widget": "rate"
            }
          }
        },
        "ui": {
          "label": "favoriteMusics"
        }
      },
      "ui": {
        "label": "favoriteMusics",
        "showLegend": false,
        "widget": "array-table"
      }
    },
複製代碼

優化 remarks 字段：備註囉哩囉嗦的人可能會寫得比較多，因此文本框最好了

// 如下是修改後的相關字段的配置信息
    "remarks": {
      "type": "string",
      "ui": {
        "label": "remarks",
        "widget": "textarea"
      }
    }
複製代碼

看到這裏，這個表單的 ncform schema 已經搞定了，來個大合照吧 ♪(^∇^*)測試