前言

写了个类似上篇搜索的封装，但是要考虑的东西更多。

具体业务比展示的代码要复杂，篇幅太长就不引入了。

效果图

  • 2019-04-25

  • 添加了下拉多选的渲染，并搜索默认过滤文本而非值

  • 简化了渲染的子组件的代码

  • 2019-04-28

    • 增加了对input type的控制

实现思路和功能

基础的功能直接配置上来渲染，而上传组件就不大合适了；

所以选择了slot来实现,如何保证传入的form-item的布局一致，则是拿slot-scope

我这边选型用的是vue 2.6 +的版本，所以直接用的是最新的写法

而且作为表单组件，校验这些肯定需要考虑，所以数据的构造改造了下，

对于校验规则这些走的是antd form用的那套，所以在传递的时候把对应的属性拍平了，

到里面再进行数据结构调整，目前部分控件样式依旧需要自己修正！！！

演示的代码用法


  2. <form-list @change="onFormListChange">
  3.        <template #field="{options}">
  4.          <a-form-item label="Upload" v-bind="options">
  5.            <a-upload
  6.              v-decorator="[
  7.                'upload',
  8.                {
  9.                  valuePropName: 'fileList',
  10.                  getValueFromEvent: normFile
  11.                }
  12.              ]"
  13.              name="logo"
  14.              action="/upload.do"
  15.              list-type="picture"
  16.            >
  17.              <a-button> <a-icon type="upload" /> Click to upload </a-button>
  18.            </a-upload>
  19.          </a-form-item>
  20.        </template>
  21.      </form-list>
  23. 复制代码

代码

  • FieldRender.vue

  2. <template>
  3. <a-form-item
  4.   :label="fieldOptions.labelText"
  5.   :label-col="fieldOptions.labelCol"
  6.   :wrapper-col="fieldOptions.wrapperCol"
  7. >
  8.   <a-input
  9.     v-if="fieldOptions.fieldName && fieldOptions.type === 'text'"
  10.     :size="fieldOptions.size ? fieldOptions.size : 'default'"
  11.     v-decorator="[
  12.       fieldOptions.fieldName,
  13.       {
  14.         initialValue: fieldOptions.defaultValue ? fieldOptions.defaultValue : '',
  15.         rules: Array.isArray(fieldOptions.rules) && fieldOptions.rules.length > 0 ? fieldOptions.rules : []
  16.       }
  17.     ]"
  18.     :placeholder="fieldOptions.placeholder"
  19.   />
  20.   <a-select
  21.     v-else-if="fieldOptions.fieldName && fieldOptions.type === 'select'"
  22.     style="width: 100%"
  23.     showSearch
  24.     :options="fieldOptions.options"
  25.     :filterOption="selectFilterOption"
  26.     :size="fieldOptions.size ? fieldOptions.size : 'default'"
  27.     allowClear
  28.     v-decorator="[
  29.       fieldOptions.fieldName,
  30.       {
  31.         initialValue: fieldOptions.defaultValue ? fieldOptions.defaultValue : undefined,
  32.         rules: Array.isArray(fieldOptions.rules) && fieldOptions.rules.length > 0 ? fieldOptions.rules : []
  33.       }
  34.     ]"
  35.     :placeholder="fieldOptions.placeholder"
  36.   />
  37.   <a-input-number
  38.     v-else-if="fieldOptions.fieldName && fieldOptions.type === 'number'"
  39.     :size="fieldOptions.size ? fieldOptions.size : 'default'"
  40.     :min="fieldOptions.min ? fieldOptions.min : 1"
  41.     style="width: 100%"
  42.     v-decorator="[
  43.       fieldOptions.fieldName,
  44.       {
  45.         initialValue: fieldOptions.defaultValue ? fieldOptions.defaultValue : '',
  46.         rules: Array.isArray(fieldOptions.rules) && fieldOptions.rules.length > 0 ? fieldOptions.rules : []
  47.       }
  48.     ]"
  49.     :placeholder="fieldOptions.placeholder"
  50.   />
  51.   <a-radio-group
  52.     v-else-if="fieldOptions.fieldName && fieldOptions.type === 'radio' && Array.isArray(fieldOptions.options)"
  53.     :size="fieldOptions.size ? fieldOptions.size : 'default'"
  54.     buttonStyle="solid"
  55.     v-decorator="[
  56.       fieldOptions.fieldName,
  57.       {
  58.         initialValue: fieldOptions.defaultValue ? fieldOptions.defaultValue : '',
  59.         rules: Array.isArray(fieldOptions.rules) && fieldOptions.rules.length > 0 ? fieldOptions.rules : []
  60.       }
  61.     ]"
  62.   >
  63.     <template v-for="(item, index) in fieldOptions.options">
  64.       <a-radio-button :key="index" :value="item.value">{{ item.label }} </a-radio-button>
  65.     </template>
  66.   </a-radio-group>
  68.   <a-date-picker
  69.     v-else-if="fieldOptions.fieldName && fieldOptions.type === 'datetime'"
  70.     :size="fieldOptions.size ? fieldOptions.size : 'default'"
  71.     :placeholder="fieldOptions.placeholder"
  72.     v-decorator="[
  73.       fieldOptions.fieldName,
  74.       {
  75.         initialValue: fieldOptions.defaultValue ? fieldOptions.defaultValue : null,
  76.         rules: Array.isArray(fieldOptions.rules) && fieldOptions.rules.length > 0 ? fieldOptions.rules : []
  77.       }
  78.     ]"
  79.   />
  80.   <a-range-picker
  81.     v-else-if="fieldOptions.fieldName && fieldOptions.type === 'datetimeRange'"
  82.     :size="fieldOptions.size ? fieldOptions.size : 'default'"
  83.     v-decorator="[
  84.       fieldOptions.fieldName,
  85.       {
  86.         initialValue: fieldOptions.defaultValue ? fieldOptions.defaultValue : null,
  87.         rules: Array.isArray(fieldOptions.rules) && fieldOptions.rules.length > 0 ? fieldOptions.rules : []
  88.       }
  89.     ]"
  90.     :placeholder="fieldOptions.placeholder"
  91.   />
  92.   <a-cascader
  93.     v-else-if="fieldOptions.fieldName && fieldOptions.type === 'cascader'"
  94.     :size="fieldOptions.size ? fieldOptions.size : 'default'"
  95.     :options="fieldOptions.options"
  96.     :showSearch="{ cascaderFilter }"
  97.     v-decorator="[
  98.       fieldOptions.fieldName,
  99.       { initialValue: fieldOptions.defaultValue ? fieldOptions.defaultValue : [] }
  100.     ]"
  101.     :placeholder="fieldOptions.placeholder"
  102.   />
  103.   <a-time-picker
  104.     v-else-if="fieldOptions.fieldName && fieldOptions.type === 'timepicker'"
  105.     v-decorator="[
  106.       fieldOptions.fieldName,
  107.       {
  108.         initialValue: fieldOptions.defaultValue ? fieldOptions.defaultValue : null,
  109.         rules: Array.isArray(fieldOptions.rules) && fieldOptions.rules.length > 0 ? fieldOptions.rules : []
  110.       }
  111.     ]"
  112.     :size="fieldOptions.size ? fieldOptions.size : 'default'"
  113.   />
  114.   <a-textarea
  115.     :placeholder="fieldOptions.placeholder"
  116.     v-else-if="fieldOptions.fieldName && fieldOptions.type === 'textarea'"
  117.     v-decorator="[
  118.       fieldOptions.fieldName,
  119.       {
  120.         initialValue: fieldOptions.defaultValue ? fieldOptions.defaultValue : null,
  121.         rules: Array.isArray(fieldOptions.rules) && fieldOptions.rules.length > 0 ? fieldOptions.rules : []
  122.       }
  123.     ]"
  124.     :autosize="{ minRows: 6, maxRows: 24 }"
  125.   />
  126.   <a-select
  127.     mode="multiple"
  128.     :size="fieldOptions.size ? fieldOptions.size : 'default'"
  129.     optionFilterProp="children"
  130.     v-else-if="fieldOptions.fieldName && fieldOptions.type === 'multiple'"
  131.     :placeholder="fieldOptions.placeholder"
  132.     style="width: 100%"
  133.     :options="fieldOptions.options"
  134.     v-decorator="[
  135.       fieldOptions.fieldName,
  136.       {
  137.         initialValue: fieldOptions.defaultValue ? fieldOptions.defaultValue : [],
  138.         rules: Array.isArray(fieldOptions.rules) && fieldOptions.rules.length > 0 ? fieldOptions.rules : []
  139.       }
  140.     ]"
  141.   />
  142. </a-form-item>
  143. </template>
  145. <script>
  146. export default {
  147. props: {
  148.   fieldOptions: {
  149.     // 待渲染的对象
  150.     type: Object,
  151.     default: function() {
  152.       return {};
  153.     }
  154.   }
  155. },
  156. methods: {
  157.   selectFilterOption(input, option) {
  158.     // 下拉框过滤函数
  159.     return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0;
  160.   },
  161.   cascaderFilter(inputValue, path) {
  162.     // 级联过滤函数
  163.     return path.some(option => option.label.toLowerCase().indexOf(inputValue.toLowerCase()) > -1);
  164.   }
  165. }
  166. };
  167. </script>
  169. 复制代码
  • FormList.vue

  2. <template>
  3.  <div class="form-list-wrapper">
  4.    <a-form :layout="formLayout" :form="form">
  5.      <template v-for="(item, index) in renderDataSource">
  6.        <template v-if="item.type && item.fieldName">
  7.          <field-render :fieldOptions="item" :key="item.fieldName" />
  8.        </template>
  9.      </template>
  10.      <slot name="field" :options="GlobalOptions" />
  12.      <a-form-item :wrapper-col="buttonItemLayout.wrapperCol">
  13.        <a-tooltip placement="bottom">
  14.          <template slot="title">
  15.            <span>提交表单</span>
  16.          </template>
  17.          <a-button type="primary" :size="size" @click="handleSubmit">提交</a-button>
  18.        </a-tooltip>
  20.        <a-tooltip placement="bottom">
  21.          <template slot="title">
  22.            <span>清空所有控件的值</span>
  23.          </template>
  24.          <a-button :size="size" style="margin-left: 8px" @click="resetSearchForm">重置</a-button>
  25.        </a-tooltip>
  26.      </a-form-item>
  27.    </a-form>
  28.  </div>
  29. </template>
  31. <script>
  32. import FieldRender from './FieldRender';
  33. export default {
  34.  name: 'FormList',
  35.  components: {
  36.    FieldRender
  37.  },
  38.  props: {
  39.    formLayout: {
  40.      // 表单布局
  41.      type: String, // 'horizontal'|'vertical'|'inline'
  42.      default: 'horizontal'
  43.    },
  44.    datetimeTotimeStamp: {
  45.      // 是否把时间控件的返回值全部转为时间戳
  46.      type: Boolean,
  47.      default: false
  48.    },
  49.    size: {
  50.      // 全局控件大小
  51.      type: String,
  52.      default: 'default'
  53.    },
  54.    responsive: {
  55.      // 表单项的响应布局
  56.      type: Object,
  57.      default: function() {
  58.        return {
  59.          labelCol: { span: 5 },
  60.          wrapperCol: { span: 16 }
  61.        };
  62.      }
  63.    },
  64.    dataSource: {
  65.      type: Array,
  66.      default: function() {
  67.        return [
  68.          {
  69.            type: 'text', // 控件类型
  70.            labelText: '控件名称', // 控件显示的文本
  71.            fieldName: 'formField1',
  72.            placeholder: '文本输入区域', // 默认控件的空值文本
  73.            rules: [
  74.              {
  75.                required: true,
  76.                message: '必填'
  77.              }
  78.            ]
  79.          },
  80.          {
  81.            labelText: '数字输入框',
  82.            type: 'number',
  83.            fieldName: 'formField2',
  84.            placeholder: '这只是一个数字的文本输入框'
  85.          },
  86.          {
  87.            labelText: '单选框',
  88.            type: 'radio',
  89.            fieldName: 'formField3',
  90.            defaultValue: '0',
  91.            options: [
  92.              {
  93.                label: '选项1',
  94.                value: '0'
  95.              },
  96.              {
  97.                label: '选项2',
  98.                value: '1'
  99.              }
  100.            ]
  101.          },
  102.          {
  103.            labelText: '日期选择',
  104.            type: 'datetime',
  105.            fieldName: 'formField4',
  106.            placeholder: '选择日期'
  107.          },
  108.          {
  109.            labelText: '日期范围',
  110.            type: 'datetimeRange',
  111.            fieldName: 'formField5',
  112.            placeholder: ['开始日期', '选择日期']
  113.          },
  114.          {
  115.            labelText: '时刻选择',
  116.            type: 'timepicker',
  117.            fieldName: 'formField8',
  118.            placeholder: '请选择时刻(时间)'
  119.          },
  120.          {
  121.            labelText: '文本区域',
  122.            type: 'textarea',
  123.            fieldName: 'formField9',
  124.            placeholder: '请输入文本了内容'
  125.          },
  126.          {
  127.            type: 'multiple',
  128.            labelText: '角色',
  129.            fieldName: 'role',
  130.            defaultValue: [],
  131.            rules: [
  132.              {
  133.                required: true,
  134.                message: '必须选择一种角色'
  135.              }
  136.            ],
  137.            options: [
  138.              {
  139.                label: '系统管理员',
  140.                value: '0'
  141.              },
  142.              {
  143.                label: '风控管理员',
  144.                value: '1'
  145.              },
  146.              {
  147.                label: '催收管理员',
  148.                value: '2'
  149.              },
  150.              {
  151.                label: '催收员',
  152.                value: '3'
  153.              },
  154.              {
  155.                label: '审核员',
  156.                value: '4'
  157.              },
  158.              {
  159.                label: '财务',
  160.                value: '5'
  161.              }
  162.            ]
  163.          },
  164.          {
  165.            labelText: '下拉框',
  166.            type: 'select',
  167.            fieldName: 'formField7',
  168.            placeholder: '下拉选择你要的',
  169.            options: [
  170.              {
  171.                label: 'text1',
  172.                value: '0'
  173.              },
  174.              {
  175.                label: 'text2',
  176.                value: '1'
  177.              }
  178.            ]
  179.          },
  180.          {
  181.            labelText: '联动',
  182.            type: 'cascader',
  183.            fieldName: 'formField6',
  184.            placeholder: '级联选择',
  185.            options: [
  186.              {
  187.                value: 'zhejiang',
  188.                label: 'Zhejiang',
  189.                children: [
  190.                  {
  191.                    value: 'hangzhou',
  192.                    label: 'Hangzhou',
  193.                    children: [
  194.                      {
  195.                        value: 'xihu',
  196.                        label: 'West Lake'
  197.                      },
  198.                      {
  199.                        value: 'xiasha',
  200.                        label: 'Xia Sha',
  201.                        disabled: true
  202.                      }
  203.                    ]
  204.                  }
  205.                ]
  206.              },
  207.              {
  208.                value: 'jiangsu',
  209.                label: 'Jiangsu',
  210.                children: [
  211.                  {
  212.                    value: 'nanjing',
  213.                    label: 'Nanjing',
  214.                    children: [
  215.                      {
  216.                        value: 'zhonghuamen',
  217.                        label: 'Zhong Hua men'
  218.                      }
  219.                    ]
  220.                  }
  221.                ]
  222.              }
  223.            ]
  224.          }
  225.        ];
  226.      }
  227.    }
  228.  },
  229.  beforeCreate() {
  230.    this.form = this.$form.createForm(this);
  231.  },
  232.  computed: {
  233.    GlobalOptions() {
  234.      // 全局配置
  235.      return {
  236.        size: this.size,
  237.        ...this.formItemLayout
  238.      };
  239.    },
  240.    renderDataSource() {
  241.      // 重组传入的数据，合并全局配置，子项的配置优先全局
  242.      return this.dataSource.map(item => ({ ...this.GlobalOptions, ...item }));
  243.    },
  244.    formItemLayout() {
  245.      // 更改布局项目的尺寸
  246.      const { formLayout } = this;
  247.      if (formLayout === 'horizontal') {
  248.        return this.responsive;
  249.      } else {
  250.        return {};
  251.      }
  252.    },
  253.    buttonItemLayout() {
  254.      // 提交按钮布局
  255.      const { formLayout } = this;
  256.      return formLayout === 'horizontal'
  257.        ? {
  258.            wrapperCol: { span: 14, offset: 4 }
  259.          }
  260.        : {};
  261.    }
  262.  },
  263.  methods: {
  264.    handleParams(obj) {
  265.      // 判断必须为obj
  266.      if (!(Object.prototype.toString.call(obj) === '[object Object]')) {
  267.        return {};
  268.      }
  269.      let tempObj = {};
  270.      for (let [key, value] of Object.entries(obj)) {
  271.        if (Array.isArray(value) && value.length <= 0) continue;
  272.        if (Object.prototype.toString.call(value) === '[object Function]') continue;
  274.        if (this.datetimeTotimeStamp) {
  275.          // 若是为true,则转为时间戳
  276.          if (Object.prototype.toString.call(value) === '[object Object]' && value._isAMomentObject) {
  277.            // 判断moment
  278.            value = value.valueOf();
  279.          }
  280.          if (Array.isArray(value) && value[0]._isAMomentObject && value[1]._isAMomentObject) {
  281.            // 判断moment
  282.            value = value.map(item => item.valueOf());
  283.          }
  284.        }
  285.        // 若是为字符串则清除两边空格
  286.        if (value && typeof value === 'string') {
  287.          value = value.trim();
  288.        }
  289.        tempObj[key] = value;
  290.      }
  292.      return tempObj;
  293.    },
  294.    handleSubmit(e) {
  295.      // 触发表单提交，也就是搜索按钮
  296.      e.preventDefault();
  297.      this.form.validateFields((err, values) => {
  298.        if (!err) {
  299.          console.log('处理前的表单数据', values);
  300.          const queryParams = this.handleParams(values);
  301.          this.$emit('change', queryParams);
  302.        }
  303.      });
  304.    },
  305.    resetSearchForm() {
  306.      // 重置整个查询表单
  307.      this.form.resetFields();
  308.      this.$emit('change', null);
  309.    }
  310.  }
  311. };
  312. </script>
  314. <style lang="scss">
  315. .form-list-wrapper {
  316.  .ant-form-inline {
  317.    .ant-form-item {
  318.      display: flex;
  319.      margin-bottom: 12px;
  320.      margin-right: 0;
  322.      .ant-form-item-control-wrapper {
  323.        flex: 1;
  324.        display: inline-block;
  325.        vertical-align: middle;
  326.      }
  328.      > .ant-form-item-label {
  329.        line-height: 32px;
  330.        padding-right: 8px;
  331.        width: auto;
  332.      }
  333.      .ant-form-item-control {
  334.        height: 32px;
  335.        line-height: 32px;
  336.        display: flex;
  337.        justify-content: flex-start;
  338.        align-items: center;
  339.        .ant-form-item-children {
  340.          min-width: 160px;
  341.        }
  342.      }
  343.    }
  344.  }
  346.  .table-page-search-submitButtons {
  347.    display: block;
  348.    margin-bottom: 24px;
  349.    white-space: nowrap;
  350.  }
  351. }
  352. </style>
  354. 复制代码

问题

暴露的方法和搜索组件一样，@change回来表单数据；

问题：

操作父的props会造成死循环(在有slot的情况下，因slot-scope拿的是父props经过computed后的值)。

解决方案：

已经改用其他实现姿势，抽离成独立组件，再联动数据。

总结

antd vue版本目前的功能复现上，还是有所欠缺，可能vue和react实现的机子不一致导致；

不管怎么说，不考虑极端情况下，目前这个库用起来感觉还好；

至少是可用状态，后续若有修正，会继续更新文章，谢谢阅读

转载于:https://juejin.im/post/5cb5d89af265da03a85ab689

Vue 2.x折腾记 - (17) 基于Ant Design Vue 封装一个配置式的表单组件的更多相关文章

  1. 基于Ant Design Vue封装一个表单控件

    开源代码 https://github.com/naturefwvue/nf-vue3-ant 有缺点本来是写在最后的,但是博文写的似乎有点太长了,估计大家没时间往下看,于是就把有缺点写在前面了,不喜 ...

  2. 文档驱动 —— 表单组件（五）：基于Ant Design Vue 的表单控件的demo，再也不需要写代码了。

    源码 https://github.com/naturefwvue/nf-vue3-ant 特点 只需要更改meta,既可以切换表单 可以统一修改样式,统一升级,以最小的代价,应对UI的升级.切换,应 ...

  3. Ant Design Vue select下拉列表设置默认值

    在项目中需要为Ant Design Vue 的 select 组件设置一个默认值,如下图所示的状态下拉选择框,默认选择全部 代码如下: <a-select v-model="query ...

  4. Ant Design Vue Pro 项目实战-项目初始化（一）

    写在前面 时间真快,转眼又是新的一年.随着前后端技术的不断更新迭代,尤其是前端,在目前前后端分离开发模式这样的一个大环境下,交互性.兼容性等传统的开发模式已经显得有些吃力.之前一直用的是react,随 ...

  5. 使用ant design vue的日历组件，实现一个简单交易日与非交易日的切换

    使用ant design vue的日历组件,实现一个简单交易日与非交易日的切换 需求: 日历区分交易日.非交易日 可以切换面板查看整年交易日信息 可以在手动调整交易日.非交易日 演示实例 序--使用软 ...

  6. 使用npm安装 Ant Design Vue 时报错—ant-design-vue@latest（sha1-qsf / gCIFcRYxyGmOKgx7TmHf1z4 =）seems to be corrupted.

    安装 Ant Design Vue 时报错: npm install ant-design-vue --save ant-design-vue @ latest(sha1-qsf / gCIFcRYx ...

  7. Vue3学习（二）之集成Ant Design Vue

    一.集成Ant Design Vue npm install ant-design-vue@2.0.0-rc.3 --save 兼容性 Ant Design Vue 2.x 支持所有的现代浏览器. 如 ...

  8. 从后端到前端之Vue（六）表单组件

    表单组件 做项目的时候会遇到一个比较头疼的问题,一个大表单里面有好多控件,一个一个做设置太麻烦,更头疼的是,需求还总在变化,一会多选.一会单选.一会下拉的,变来变去的烦死宝宝了. 那么怎么解决这个问题 ...

  9. 封装Vue Element的form表单组件

    前两天封装了一个基于vue和Element的table表格组件,阅读的人还是很多的,看来大家都是很认同组件化.高复用这种开发模式的,毕竟开发效率高,代码优雅,逼格高嘛.虽然这两天我的心情很糟糕,就像& ...

随机推荐

  1. Html 慕课园编程练习10-1

    23:10:25 2019-08-14 自己写的这个好丑.... 题目:利用之前我们学过的JavaScript知识,实现选项卡切换的效果. 效果图: (另外 这个动图是怎么插入的 用url就行 复制就 ...

  2. python学习要点（二）

    我的博客:https://www.luozhiyun.com/archives/269 '==' VS 'is' '=='操作符比较对象之间的值是否相等. 'is'操作符比较的是对象的身份标识是否相等 ...

  3. Golang入门（2）：一天学完GO的基本语法

    摘要 在配置好环境之后,要研究的就是这个语言的语法了.在这篇文章中,作者希望可以简单的介绍一下Golang的各种语法,并与C和Java作一些简单的对比以加深记忆.因为这篇文章只是入门Golang的第二 ...

  4. JavaScript中||和&&的运算

    一般来讲 && 运算和 | | 运算得到的结果都是 true 和 false ,但是 js 中的有点不太一样.当进行 a&&b 和 a| |b (如 1&&am ...

  5. 世界疫情app柱形图显示

    访问云服务器的mysql实现数据的获取.最后通过柱形图的形式将数据显示在页面上: 遇到的主要困难时对于云服务器的mysql连接本地的navicat之间事情,最后通过网上的各种解决办法完成了相关的内容. ...

  6. Python爬虫利器 cURL你用过吗？

    hello,小伙伴们,今天给大家分享的开源项目是一个python爬虫利器,感兴趣的小伙伴看完这篇文章不妨去尝试一下,这个开源项目就是curlconverter,不知道小伙伴们分析完整个网站后去code ...

  7. Python设计模式(2)-策略模式

    # 策略模式和简单工厂模式相比,少了使用switch case 做判断,然后去实例化相应的 # 对象,比简单工厂模式更灵活. 它们代码的区别就在于此处使用了抽象类代替工厂类 # coding=utf- ...

  8. Django-rest-framework 是个什么鬼？

    作者:HelloGitHub-追梦人物 我们首先来回顾一下传统的基于模板引擎的 django 开发工作流: 绑定 URL 和视图函数.当用户访问某个 URL 时,调用绑定的视图函数进行处理. 编写视图 ...

  9. java异常处理：finally中不要return

    java异常处理:finally中不要return 复制代码 public class Ex1 { public static void main(String[] args) { System.ou ...

  10. 视频图文教学 - 用最快的速度把 DotNet Core Blazor 程序安装到 树莓派中 并且用网页控制 GPIO 闪灯

    前言 dotnet core 在3.0时代已经发展得很好. 尤其是在跨平台方面更已经是达到了很实用的阶段. 作为 dotnet 程序员, 应该对 Linux 有充分的了解, 也可以在业余时间玩玩硬件, ...