月度归档： 2019年10月

Vue:动态生成表单

开始

  1. 2019-11-04更新: 增加多个组件的测试.

因代码历史背景,无法使用NodeJS.所以这个版本的是纯js调用,不会涉及到NodeJS.

有时候会遇到想动态配置一下表单,根据动态参数自动生成表单并且可以验证.于是想了想,顺便找了找代码..发现只有使用NodeJS是最简单的.但又无法使用,难受…

只有持续鼓捣…还好…

vuejs logo
image-2725

模板部分

代码其实很简单,就是把模板代码定义在一个js文件(组件)中.然后在HTML中引用即可.

文件名: dyform_item.js

var template=`
<div>
  <el-form-item :label="widget.name" :props="dataModel" :label-width="widget.labelwidth" label-width="120px">
    <template v-if="widget.type == 'input'" >
      <el-input 
        v-if="widget.options.dataType == 'number' || widget.options.dataType == 'integer' || widget.options.dataType == 'float'"
        :type="widget.options.dataType"
        v-model="dataModel"
        v-on:change="childData($event)"
        :placeholder="widget.options.placeholder"
        :style="{width: widget.options.width?widget.options.width:'100%'}"
      ></el-input>
      <el-input 
        v-else
        :type="widget.options.dataType"
        v-model="dataModel"
        v-on:change="childData($event)"
        :placeholder="widget.options.placeholder"
        :style="{width: widget.options.width?widget.options.width:'100%'}"
      ></el-input>
    </template>

    <template v-if="widget.type == 'textarea'">
      <el-input type="textarea" :rows="5"
        v-model="dataModel"
        :disabled="widget.options && widget.options.disabled"
        v-on:change="childData($event)"
        :placeholder="(widget.options && widget.options.placeholder) ?widget.options.placeholder:''"
        :style="{width: (widget.options && widget.options.width)?widget.options.width:'100%'}"
      ></el-input>
    </template>

    <template v-if="widget.type == 'number'">
      <el-input-number 
        v-model="dataModel" 
        :style="{width: (widget.options && widget.options.width)?widget.options.width:'100%'}"
        :step="(widget.options && widget.options.step)?widget.options.step:1"
        v-on:change="childData($event)"
        controls-position="right"
      ></el-input-number>
    </template>

    <template v-if="widget.type == 'radio'">
      <el-radio-group v-model="dataModel"
      v-on:change="childData($event)"
        :style="{width: widget.options.width?widget.options.width:'100%'}"
      >
        <el-radio
          :style="{display: widget.options.inline ? 'inline-block' : 'block'}"
          :label="item.value" v-for="(item, index) in (widget.options.remote ? widget.options.remoteOptions : widget.options.options)" :key="index"
        >
          <template v-if="widget.options.remote">{{item.label}}</template>
          <template v-else>{{widget.options.showLabel ? item.label : item.value}}</template>
        </el-radio>
      </el-radio-group>
    </template>

    <template v-if="widget.type == 'checkbox'">
      <el-checkbox-group v-model="checkboxModel" v-on:change="childData($event)"
        :style="{width: widget.options.width?widget.options.width:'100%'}"
      >
     <el-checkbox
        :style="{display: widget.options.inline ? 'inline-block' : 'block'}"
           v-for="(item, index) in ((widget.options.remote && widget.options.remoteOptions) ? widget.options.remoteOptions : widget.options.options)" v-model="dataModel" :label="item.value" :key="index"
        >
          {{widget.options.remote?item.label:widget.options.showLabel?item.label:item.value}}
        </el-checkbox>
      </el-checkbox-group>
    </template>

    <template v-if="widget.type == 'time'">
      <el-time-picker 
        v-model="timePickerModel"
        v-on:change="childData($event)"
        :is-range="(widget.options && widget.options.isRange)?true:false"
        :placeholder="(widget.options && widget.options.placeholder)?widget.options.placeholder:''"
        :start-placeholder="(widget.options && widget.options.startPlaceholder)?widget.options.startPlaceholder:''"
        :end-placeholder="(widget.options && widget.options.endPlaceholder)?widget.options.endPlaceholder:''"
        :readonly="(widget.options && widget.options.readonly)?true:false"
        :disabled="(widget.options && widget.options.disabled)?true:false"
        :editable="(widget.options && widget.options.editable)?true:false"
        :clearable="(widget.options && widget.options.clearable)?true:false"
        :arrowControl="(widget.options && widget.options.arrowControl)?true:false"
        :value-format="(widget.options && widget.options.format)?widget.options.format:''"
        :style="{width: (widget.options && widget.options.width)?widget.options.width:'100%'}"
      >
      </el-time-picker>
    </template>

    <template v-if="widget.type=='date'">
      <el-date-picker
        v-model="dataModel"
        v-on:change="childData($event)"
        :type="(widget.options&&widget.options.type)?widget.options.type:'date'"
        :placeholder="(widget.options && widget.options.placeholder)?widget.options.placeholder:''"
        :start-placeholder="(widget.options && widget.options.startPlaceholder)?widget.options.startPlaceholder:''"
        :end-placeholder="(widget.options && widget.options.endPlaceholder)?widget.options.endPlaceholder:''"
        :readonly="(widget.options && widget.options.readonly)?true:false"
        :disabled="(widget.options && widget.options.disabled)?true:false"
        :editable="(widget.options && widget.options.editable)?true:false"
        :clearable="(widget.options && widget.options.clearable)?true:false"
        :value-format="(widget.options&&widget.options.timestamp) ? 'timestamp' : (widget.options&&widget.options.format)?widget.options.format:null"
        :format="(widget.options && widget.options.format)?widget.options.format:null"
        :style="{width: (widget.options && widget.options.width)?widget.options.width:'100%'}"
      >
      </el-date-picker>
    </template>

    <template v-if="widget.type =='rate'">
      <el-rate v-model="dataModel"
        v-on:change="childData($event)"
        :max="(widget.options && widget.options.max)?widget.options.max:5"
        :disabled="(widget.options && widget.options.disabled)?true:false"
        :allow-half="(widget.options && widget.options.allowHalf)?true:false"
      ></el-rate>
    </template>

    <template v-if="widget.type == 'color'">
      <el-color-picker 
        v-model="dataModel"
        v-on:change="childData($event)"
        :disabled="(widget.options && widget.options.disabled)?true:false"
        :show-alpha="(widget.options && widget.options.showAlpha)?true:false"
      ></el-color-picker>
    </template>

    <template v-if="widget.type == 'select'">
      <el-select
        v-model="dataModel"
        v-on:change="childData($event)"
        :disabled="widget.options.disabled"
        :multiple="widget.options.multiple"
        :clearable="widget.options.clearable"
        :placeholder="widget.options.placeholder"
        :style="{width: widget.options.width?widget.options.width:'100%'}"
      >
        <el-option v-for="item in (widget.options.remote ? widget.options.remoteOptions : widget.options.options)" :key="item.value" :value="item.value" :label="widget.options.showLabel || widget.options.remote?item.label:item.value"></el-option>
      </el-select>
    </template>

    <template v-if="widget.type=='switch'">
      <el-switch
        v-model="dataModel"
        v-on:change="childData($event)"
        :disabled="(widget.options && widget.options.disabled)?true:false"
      >
      </el-switch>
    </template>
  </el-form-item>
  </div>`;

var dyform_item=Vue.extend({
    template:template,
    props: ['widget'],
    data () {
        return {
          timePickerModel:[],
          checkboxModel:[],
          dataModel: this.widget.value,
        }
    },
    methods: {
      childData:function(value){
        this.$emit('change',this.widget.code,value);
      }
    },
    watch:{
      dataModel:function(newVal,oldVal){
        if(widget.type == 'number'){
          return parseInt(this.dataModel);
        }
        if(widget.options.dataType == 'number' || widget.options.dataType == 'integer' || widget.options.dataType == 'float'){
          return widget.options.dataType == 'float'?parseFloat(this.dataModel):parseInt(this.dataModel)
        }
        return this.dataModel;
      }

    },
    created () {

      },
      watch: {

      }
});

使用示例(HTML)

之后就是在HTML里面使用定义好的模板了.

文件名: index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <title>自动生成表单</title>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link href="https://cdn.bootcss.com/element-ui/2.12.0/theme-chalk/index.css" rel="stylesheet">
    <script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
    <script src="https://cdn.bootcss.com/element-ui/2.12.0/index.js"></script>
</head>

<body>
    <script type="text/javascript" src="dyform_item.js"></script>
    <div id="app">
        <el-row :gutter="20">
            <el-col :span="12">
                <el-form ref="form">
                    <template v-for="item in ExtForm">
                        <form-item :key="item.key" @change="changeData" :ref="item.code" :widget="item"></form-item>
                    </template>
                </el-form>
            </el-col>
            <el-col :span="10">
                 <el-table
                    :data="ExtFormData"
                    border
                    style="width: 100%">
                   
                    <el-table-column
                      prop="name"
                      label="名称"
                      width="180">
                    </el-table-column>
                    <el-table-column
                      prop="value"
                      label="值">
                    </el-table-column>
                  </el-table>
            </el-col>
        </el-row>
    </div>
    <script>
    var cp = {
        data: function() {
            return {
                ExtForm: {},
                ExtFormData: []
            }
        },
        components: {
            'form-item': dyform_item
        },
        methods: {
            // 动态加载数据到右侧表格.
            getDataShow:function() {
                this.ExtFormData=Object.entries(this.ExtForm).map(data=>{
                    return {
                        name:data[1].name,
                        value:data[1].value
                    }
                })
            },
            // 子组件动态修改数据调用.
            changeData: function(itemCode, value) {
                console.log(`[${this.ExtForm[itemCode].name}]更新前的值:${this.ExtForm[itemCode].value}`);
                this.ExtForm[itemCode].value = value;
                console.log(`[${this.ExtForm[itemCode].name}]更新后的值:${this.ExtForm[itemCode].value}`);
                this.getDataShow();
            },
            // 动态初始化表单
            initExtForm: function() {
                var _this = this;
                var items = [
                   
                    {  "XMLID": "940bfdfdsaf2218911c81330d",  "ITEMCODE": "sCheckBox", "ITEMNAME": "渠道1", "ITEMTYPE": "checkbox", "NOTNULL": "", "DEFDATA": "[{\"label\":\"网络\",\"value\":\"1\"},{\"label\":\"线下\",\"value\":\"2\"},{\"label\":\"活动\",\"value\":\"3\"}]", "ACTIVE_STATE": "Y", "ITEMNO": "5", "DEFTYPE": "json" },
                 {  "XMLID": "940bfdsafd2c226c8303911c81330d",  "ITEMCODE": "sName", "ITEMNAME": "姓名2", "ITEMTYPE": "", "NOTNULL": "", "DEFDATA": "", "ACTIVE_STATE": "Y", "ITEMNO": "1", "DEFTYPE": null },
{ "XMLID":"4b0f67616dfdsafdas8106fecbbb1d7e",  "ITEMCODE": "sSex", "ITEMNAME": "性别3", "ITEMTYPE": "select", "NOTNULL": "", "DEFDATA": "[{\"label\":\"男性\",\"value\":\"1\"},{\"label\":\"女性\",\"value\":\"2\"},{\"label\":\"未知\",\"value\":\"3\"}]", "ACTIVE_STATE": "Y", "ITEMNO": "2", "DEFTYPE": "json" }, 
  {  "XMLID": "940bfdsafasd6c8308911c81330d",  "ITEMCODE": "sPhone", "ITEMNAME": "电话4", "ITEMTYPE": "number", "NOTNULL": "", "DEFDATA": "", "ACTIVE_STATE": "Y", "ITEMNO": "3", "DEFTYPE": null }, 
  {  "XMLID": "940bfdfdsoiwoekskkzdcf08911c81330d",  "ITEMCODE": "sRadio", "ITEMNAME": "是否启用5", "ITEMTYPE": "radio", "NOTNULL": "", "DEFDATA": "[{\"label\":\"启用\",\"value\":\"1\"},{\"label\":\"停用\",\"value\":\"2\"},{\"label\":\"未知\",\"value\":\"3\"}]", "ACTIVE_STATE": "Y", "ITEMNO": "3", "DEFTYPE": "json" }, 
 
{  "XMLID": "2040356f36f9dsaze29fc98da3c",  "ITEMCODE": "sZipCode", "ITEMNAME": "邮编6", "ITEMTYPE": "textarea", "NOTNULL": "", "DEFDATA": "", "ACTIVE_STATE": "Y", "ITEMNO": "4", "DEFTYPE": null },
{  "XMLID": "2040356f36f9232daewewda3c",  "ITEMCODE": "sRegTime", "ITEMNAME": "注册时间7", "ITEMTYPE": "time", "NOTNULL": "", "DEFDATA": "", "ACTIVE_STATE": "Y", "ITEMNO": "4", "DEFTYPE": null },
{  "XMLID": "204fdsafdsa2iqkjs98da3c",  "ITEMCODE": "sRegDate", "ITEMNAME": "注册日期8", "ITEMTYPE": "date","ITEMSUBTYPE":"date", "NOTNULL": "", "DEFDATA": "", "ACTIVE_STATE": "Y", "ITEMNO": "4", "DEFTYPE": null },
{  "XMLID": "204fdsafdsawewzjs98da3c",  "ITEMCODE": "sRegDateTo", "ITEMNAME": "有效区间9", "ITEMTYPE": "date","ITEMSUBTYPE":"daterange", "NOTNULL": "", "DEFDATA": "", "ACTIVE_STATE": "Y", "ITEMNO": "4", "DEFTYPE": null },
{  "XMLID": "204fd28iueiww98da3c",  "ITEMCODE": "sRegRate", "ITEMNAME": "服务评分10", "ITEMTYPE": "rate","ITEMSUBTYPE":"", "NOTNULL": "", "DEFDATA": "", "ACTIVE_STATE": "Y", "ITEMNO": "4", "DEFTYPE": null },
{  "XMLID": "2041298siuiqs",  "ITEMCODE": "sColorSelect", "ITEMNAME": "颜色选择11", "ITEMTYPE": "color","ITEMSUBTYPE":"", "NOTNULL": "", "DEFDATA": "", "ACTIVE_STATE": "Y", "ITEMNO": "4", "DEFTYPE": null },
{  "XMLID": "2041298siuiqs",  "ITEMCODE": "sSwitch", "ITEMNAME": "滑块选择12", "ITEMTYPE": "switch","ITEMSUBTYPE":"", "NOTNULL": "", "DEFDATA": "", "ACTIVE_STATE": "Y", "ITEMNO": "4", "DEFTYPE": null }

];
                for (var i in items) {
                    var row = items[i];
                    var optionsSelect = '';
                    switch (row.DEFTYPE) {
                        case 'json':
                            optionsSelect = JSON.parse(row.DEFDATA);
                            console.log(optionsSelect);
                            break;
                    }
                    var value = _this.ExtFormData[row.ITEMCODE] || "";
                    switch (row.ITEMTYPE) {
                        case 'select':
                        case 'radio':
                        case 'checkbox':
                            _this.$set(_this.ExtForm, row.ITEMCODE, { notnull: row.NOTNULL, type: row.ITEMTYPE, model: _this.ExtForm[row.ITEMCODE], code: row.ITEMCODE, name: row.ITEMNAME, value: value, options: { options: optionsSelect, showLabel: true } });
                            break;
                        case 'inputnumber':
                        case 'inputfloat':
                        case 'inputint':
                        _this.$set(_this.ExtForm, row.ITEMCODE, { notnull: row.NOTNULL, type: 'input', model: '0', code: row.ITEMCODE, name: row.ITEMNAME, value: value, options:  { dataType: row.ITEMTYPE.replace('input',''), placeholder: '' } });
                        break;
                        case 'number':
                         _this.$set(_this.ExtForm, row.ITEMCODE, { notnull: row.NOTNULL, type: 'number', model: '0', code: row.ITEMCODE, name: row.ITEMNAME, value: value});
                        break;
                        case 'time':
                         _this.$set(_this.ExtForm, row.ITEMCODE, { notnull: row.NOTNULL, type: 'time', model: _this.ExtForm[row.ITEMCODE],options:{format:'HH:mm:ss'}, code: row.ITEMCODE, name: row.ITEMNAME, value: value});
                        break;
                        case 'date':
                        let optionsType=(row.ITEMSUBTYPE)?row.ITEMSUBTYPE:'date';
                        _this.$set(_this.ExtForm, row.ITEMCODE, { notnull: row.NOTNULL, type: 'date', model: _this.ExtForm[row.ITEMCODE],options:{type:optionsType,format:'yyyy-MM-dd'}, code: row.ITEMCODE, name: row.ITEMNAME, value: value});
                        break;
                        case 'textarea':
                        case 'rate':
                        case 'color':
                        case 'switch':
                        _this.$set(_this.ExtForm, row.ITEMCODE, { notnull: row.NOTNULL, type: row.ITEMTYPE, model: _this.ExtForm[row.ITEMCODE], code: row.ITEMCODE, name: row.ITEMNAME, value: value});
                        break;
                        default:
                            _this.$set(_this.ExtForm, row.ITEMCODE, { notnull: row.NOTNULL, type: 'input', model: _this.ExtForm[row.ITEMCODE], code: row.ITEMCODE, name: row.ITEMNAME, value: value, options: { options: { dataType: 'text', placeholder: '' } } });
                            break;
                    }


                }
            }
        },
        created: function() {

        },
        mounted: function() {
            this.initExtForm();
        }
    }

    var config = Vue.extend(cp);
    var c = new config().$mount('#app');
    </script>
</body>

</html>

总结

  1. 定义通用模板(子组件);
  2. 在HTML中引用(父组件),并初始化;
  3. 子组件通过$emit的方式更新父组件中的值,这里使用了一个方法changeData.可以在父组件中自定义需要更新及验证的数据.
  4. 将dyform_item.js和index.html保存成文件,放在同一个目录.之后用浏览器访问index.html即可看到效果.

Fedora:Fedora 31发布

Fedora 31发布了

更新内容,参考: https://www.oschina.net/news/110941/announcing-fedora-31

fedora31发布
image-2718

Fedora 31安装/升级方式

1. 升级

升级前,先备份数据!

升级步骤参考:

  1. dnf upgrade --refresh
  2. dnf install dnf-plugin-system-upgrade
  3. dnf system-upgrade download --refresh --releasever=31
  4. rpm --import /etc/pki/rpm-gpg/RPM-GPG-KEY-fedora-31-primary
  5. dnf system-upgrade reboot

升级具体参考: https://docs.fedoraproject.org/en-US/quick-docs/dnf-system-upgrade/

安装

请参考:

https://docs.fedoraproject.org/en-US/quick-docs/creating-and-using-a-live-installation-image/

Java:Spring Framework中自带类的加载

环境

  • Spring Boot版本: 2.1.4.RELEASE
  • Spring Framework版本: 5.1.6.RELEASE

java

1. 加载类和方法说明

所有Spring框架自带的类,均通过下面的方法加载:

所在类:

AbstractAutowireCapableBeanFactory.java:550

所属方法:

org.springframework.beans.factory.support.AbstractAutowireCapableBeanFactory.doCreateBean

2. 使用的Maven的pom.xml文件

<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0"
       xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
       xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
   <modelVersion>4.0.0</modelVersion>

   <groupId>xyz.suancaiyu</groupId>
   <artifactId>SpringBootVueJSTest</artifactId>
   <version>1.0-SNAPSHOT</version>
   <description>Spring Boot + Thymeleaf + VueJS (Element-UI)</description>

   <parent>
      <groupId>org.springframework.boot</groupId>
      <artifactId>spring-boot-starter-parent</artifactId>
      <version>2.1.4.RELEASE</version>
   </parent>
   <dependencies>
      <dependency>
         <groupId>org.springframework.boot</groupId>
         <artifactId>spring-boot-starter-actuator</artifactId>
      </dependency>
      <dependency>
         <groupId>org.springframework.boot</groupId>
         <artifactId>spring-boot-starter-web</artifactId>
      </dependency>
      <dependency>
         <groupId>org.springframework.boot</groupId>
         <artifactId>spring-boot-starter-thymeleaf</artifactId>
      </dependency>
   </dependencies>
</project>

3. 使用的IDEA调试参数截图:

idea调试Spring Boot截图
image-2712

Java:Spring Bean注入点

1. 实现org.springframework.beans.factory.InitializingBean接口,可以注册bean.

java

public class AnotherExampleBean implements InitializingBean {

    public void afterPropertiesSet() {
        // do some initialization work
    }
}

1.1 实现org.springframework.beans.factory.DisposableBean接口,可以在bean销毁前执行某些操作.

public class AnotherExampleBean implements DisposableBean {

    public void destroy() {
        // do some destruction work (like releasing pooled connections)
    }
}

2. 实现ApplicationContextAware 或者 BeanNameAware 接口.

3. 其他Ware接口

Spring 其他Ware接口