oneone
oneone

angular2 响应式表单

angular2 响应式表单

要使用响应式表单，我们必须先导入ReactiveFormsModule模块。

@NgModule({
  imports: [
    ReactiveFormsModule,    //<==
    CommonModule
  ],
  ...
})

用FormControl控制表单元素

login-form.component.html

login-form.component.ts

import { FormControl } from '@angular/forms';
import { Component } from '@angular/core';

@Component({
  selector: 'app-login-form',
  templateUrl: './login-form.component.html',
  styleUrls: ['./login-form.component.css']
})
export class LoginFormComponent {
  name:FormControl = new FormControl('jack');
  password:FormControl = new FormControl();

  onSubmit() {
    console.log(this.name.value, this.password.value);
  }
}

几点说明：

  1. formControl是一个指令，它接收一个FormControl的实例，来管理表单元素。
  2. 构造FormControl的实例时，第一个参数是表单元素的初始值，也可传入一个对象{value:'jack', disabled:true}，里面可以包含表单元素的状态，如是否禁用等。
  3. 在提交时，可以通过this.name.value获取表单元素的值。

  4. 有时候我们需要在元素值改变时做一些事情，可以订阅valueChanges。

    this.name.valueChanges.subscribe(() => {
     // do something...
     console.log(this.name);
});

给FormControl添加验证器

password.validator.ts

export const PasswordValidator = (password?:RegExp): ValidatorFn => {
    return (control:AbstractControl): {[key: string]: any}  => {
        let error = null;
        if (password && !password.test(control.value)) {
            error = {
                password:control.value
            }
        }
        return error;
    }
}

login-form.component.html


  
  
  

    
password can not be empty!

    
password is illegal!

login-form.component.ts

password:FormControl = new FormControl('', [Validators.required, PasswordValidator()]);
  1. FormControl的第二个参数可以传入一个ValidatorFn对象或者一个包含ValidatorFn对象的数组。
  2. angular2内置的验证器可以通过Validators取到，如；Validators.required。
  3. 自定义的验证器只需引用我们在模板驱动型表单中构造的验证器工厂函数(PasswordValidator)生成一个ValidatorFn对象的实例即可。
  4. FormControl上包含了表单的验证信息，在模板中可以直接使用它。这里可看到，之前我们在模版驱动型表单中通过模板引用变量#password="ngModel"引用的ngModel实际就是一个FormControl实例。

给FormControl添加异步验证器

name.validator.ts

const userList = [
    'jack',
    'mary',
    'jimi',
    'tom'
];

export const checkNameValidator = () => {
    return (control:AbstractControl) => new Promise(
        (resolve, reject) => {
            setTimeout(() => {
                if (userList.indexOf(control.value) >= 0) {
                    resolve({
                        'checkName':control.value
                    });
                } else {
                    resolve(null);
                }
            }, 2000)
        }
    );
}

login-form.component.html


  
  

    
Name can not be empty!

    
Name is exist!

login-form.component.ts

name:FormControl = new FormControl('jack', Validators.required, checkNameValidator());
  1. FormControl的第三个参数可以传入一个AsyncValidatorFn对象或者一个包含AsyncValidatorFn对象的数组。
  2. 异步验证器只需引用我们在模板驱动型表单中构造的验证器工厂函数(checkNameValidator )生成一个AsyncValidatorFn对象的实例即可。

用FormGroup将表单元素组合起来

当表单变得复杂时，组件中的FormControl对象会很多，我们可以用FormGroup对其进行统一管理。
login-form.component.html


  

    
    
    

      
Name can not be empty!

      
Name is exist!

    

  

  

    
    
    

      
password can not be empty!

      
password is illegal!

login-form.component.ts

import { checkNameValidator } from '../validators/name.validator';
import { PasswordValidator } from '../validators/password.validator';
import { FormControl, FormGroup, Validator, Validators } from '@angular/forms';
import { Component } from '@angular/core';

@Component({
  selector: 'app-login-form',
  templateUrl: './login-form.component.html',
  styleUrls: ['./login-form.component.css']
})
export class LoginFormComponent {
  info:FormGroup = new FormGroup({
    name:new FormControl('jack', Validators.required, checkNameValidator()),
    password:new FormControl('', [Validators.required, PasswordValidator()])
  });

  onSubmit() {
    console.log(this.info.value);
  }
}
  1. 构造FormGroup需传入一个包含有FormControl实例的对象。
  2. 在模板中可以通过[formGroup]="info"指令，管理一个表单组。
  3. 在包含有formGroup指令的元素的子节点上，可以使用formControlName="name"代替[formControl]="name"来控制表单元素，formControlName指令只能在formGroup指令内部使用。
  4. 在FormGroup上可以通过info.get('name')获取FormControl实例。
  5. 在FormGroup上可以通过this.info.value获取表单组的值。
  6. 在FormGroup上可以通过this.info.setValue(newValue)或this.info.patchValue(newValue)设置FormGroup的值，setValue是修改整个FormGroup的值，传入的值必须包含全部的属性，缺少任意一个属性控制台会报错，用patchValue时，可修改部分属性的值。

  7. FormGroup内部可以嵌套FormGroup，如Name可能又包含firstName和lastName，此时我们可以构造嵌套的FormGroup。

    
   
   

    
info:FormGroup = new FormGroup({
   name: new FormGroup({
     first:new FormControl(),
     last:new FormControl()
   })
});

用FormBuilder简化FormGroup的构造

login-form.component.ts

import { checkNameValidator } from '../validators/name.validator';
import { PasswordValidator } from '../validators/password.validator';
import { FormBuilder, FormControl, FormGroup, Validator, Validators } from '@angular/forms';
import { Component } from '@angular/core';

@Component({
  selector: 'app-login-form',
  templateUrl: './login-form.component.html',
  styleUrls: ['./login-form.component.css']
})
export class LoginFormComponent {
  info:FormGroup;

  constructor(private fb:FormBuilder){
    this.createForm();
  }

  createForm() {
    this.info = this.fb.group({
      name: ['jack', Validators.required, checkNameValidator()],
      password: ['', [Validators.required, PasswordValidator()]]
    });
  }

  onSubmit() {
    console.log(this.info.value);
  }
}
  1. 我们需要先在构造函数中注入FormBuilder, 最好新建一个方法来初始化表单，这里我们在createForm方法中初始化表单。
  2. 借助FormBuilder我们可以通过参数来构建表单组，参数的结构与使用new基本一致，就不需要重复的写new FormGroup(...)、new FormControl(...)了。

用FormArray处理动态表单

有时候我们可能需要动态表单，如一个用户可能有多个地址，FormArray可以帮助我们处理这种需求。
address.component.html


  

    
Address

    

    

      

        Provience:
        City:

address.component.ts

import { FormArray, FormBuilder, FormControl, FormGroup } from '@angular/forms';
import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-address',
  templateUrl: './address.component.html',
  styleUrls: ['./address.component.css']
})
export class AddressComponent{
  address:FormArray;
  info:FormGroup;

  constructor(private fb:FormBuilder) {
    this.createForm();
  }

  /**
   * 初始化表单
   */
  createForm() {
    this.address = this.fb.array([]);
    this.info = this.fb.group({
      address:this.address
    });
  }

  /**
   * 添加地址
   */
  addAddress() {
    this.address.push(new FormGroup({
      provience:new FormControl(),
      city:new FormControl()
    }));
  }

  /**
   * 移除地址
   * @param index 
   */
  removeAddress(index) {
    this.address.removeAt(index);
  }

  /**
   * 获取表单值
   */
  getInfo() {
    console.log(this.info.value);
  }
}

几点说明：

  1. 构造FormArray时需传入一个数组，数组里面可以包含FormControl，FormGroup，FormArray。
  2. 可以通过push(...)方法往FormArray中添加值。
  3. 可以通过removeAt(index)移除FormArray中指定位置的值。
  4. 这里是借助FormBuilder.array来构建FormArray，同样我们也可以使用new FormArray([...])来构建表单。

构建 form-error 组件来简化验证信息的展示

angular2 响应式表单_第1张图片
从上图可以看到表单里的错误信息的展示结构基本类似，我们需要通过info.get('name')获取到FormControl的实例，然后把FormControl上的验证信息来展示到页面上。当验证项较多时，书写修改都变得很繁琐。我们可以考虑将错误信息的展示提取成一个组件。
假设组件需要两个参数：

  1. control是一个FormControl实例，我们可以通过他获取表单元素的有效性和详细的错误信息。
  2. errors是一个数组，包含每一个验证项的名称以及对应的提示信息。格式如下：
[
    {
        name: 'required',
        msg: 'Name can not be empty!',
    },
    {
        name: 'checkName',
        msg: 'Name is exist!'
    }
    ],

组件代码：
form-error.component.html


    

        
{{ error.msg }}

form-error.component.ts

import { FormControl } from '@angular/forms';
import { Component, Input, OnInit } from '@angular/core';

@Component({
  selector: 'app-form-error',
  templateUrl: './form-error.component.html',
  styleUrls: ['./form-error.component.css']
})
export class FormErrorComponent{

  // 表单元素的FormControl实例
  @Input()
  control:FormControl;

  // 包含错误信息的数组
  @Input()
  errors:any [];
}

使用form-error组件简化后的模板
login-form.component.html

login-form.component.ts

createForm() {
    this.info = this.fb.group({
      name: ['jack', Validators.required, checkNameValidator()],
      password: ['', [Validators.required, PasswordValidator()]]
    });

    this.errors = {
      name: [{
        name: 'required',
        msg: 'Name can not be empty!',
      },{
        name: 'checkName',
        msg: 'Name is exist!'
      }],
      password: [
        {
          name: 'required',
          msg: 'Password can not be empty!'
        },
        {
          name: 'password',
          msg: 'Password is illegal!'
        }
      ]
    }
  }

构建 form-widget 组件来整合每一个表单项

angular2 响应式表单_第2张图片

观察使用form-error组件整合后的表单，我们可以看到每一个表单项的结构也是基本类似的，我们需要一个表单控件(Input, Select..)和一个form-error组件。
我们可以考虑通过构建一个通用的表单控件组件来循环输出每一个表单元素，这样我们的模板将会进一步精简。
构建form-widget组件，我们依赖一些数据：

  1. 需要一个FormControl对象，来帮助我们控制表单元素，这可以通过FormGroup的get(...)方法拿到。
  2. 需要一个表示组件类型变量，如：text,password,checkbox,radio,select等等，用它来确定表单元素的模板。
  3. 由于form-error组件是form-widget组件的子组件，我们也需要能得到errors参数。

组件代码：
form-widget.component.html


  

    {{ options.name }}:

form-widget.component.ts

import { FormControl } from '@angular/forms';
import { Component, Input } from '@angular/core';

@Component({
  selector: 'app-form-widget',
  templateUrl: './form-widget.component.html',
  styleUrls: ['./form-widget.component.css']
})
export class FormWidgetComponent {
  /**
   * 表单控制项
   */
  @Input()
  control;

  /**
   * 组件配置项
   * {
   *    name: '...' // 配置项名称
   *    type: '...' // 表单类型
   *    errors: '...' // 错误提示信息
   * }
   */
  @Input()
  options:{};
}

我们把LoginComponent的配置项调整成如下格式：

login-form.component.ts

  /**
   * 创建表单
   */
  createForm() {
    this.info = this.fb.group({
      name: ['jack', Validators.required, checkNameValidator()],
      password: ['', [Validators.required, PasswordValidator()]]
    });

    this.options = [
      {
        name: 'name',       // 表单控制项的名字，便于我们从formGroup上找到formControl
        type: 'text',       // 表单控制项的类型
        errors: [{          // 错误提示信息
          name: 'required',
          msg: 'Name can not be empty!',
        },{
          name: 'checkName',
          msg: 'Name is exist!'
        }]
      },
      {
        name: 'password',
        type: 'password',
        errors:  [
          {
            name: 'required',
            msg: 'Password can not be empty!'
          },
          {
            name: 'password',
            msg: 'Password is illegal!'
          }
        ]
      }
    ];
  }

login-form.component.html

这里我们给form-widget组件设置了两个输入参数control和options, options上面包含了控件名称（name）,控件类型（type）,控件错误提示信息（errors）等属性。在模板中我们通过*ngSwitch指令来处理不同的控件类型。

上面调整后的模板已经简化了很多了，接下来我们考虑这样一个问题：
现在我们的模板只支持input和password两种类型，怎么样让它支持更多类型呢？

使用动态加载组件让form-widget支持更多的控件类型

在form-widget组件中，我们使用了ngSwitch指令和ngSwitchCase指令，根据配置项的type值来处理不同的控件类型，对于一些简单的控件，如：select, checkbox, radio等等，我们只需要添加几个ngSwitchCase匹配项就好了，这里很好的完成了我们的需求，但是有几个弊端：

  1. 我们难免会有一些复杂的控件，全部加到form-widget组件模板中会使模板变得臃肿。
  2. 每次扩展类型，我们都需要修改form-widget组件模板，这是很繁琐的一件事，多人合作开发时也很容易造成冲突。

我们能不能将每一种类型的控件都提取成组件，扩展控件时只需写好组件，form-widget组件根据配置项里的控件类型动态加载组件呢？
是可以的，动态加载组件的详细的介绍可以参考angular2文档，Angular 4.x 动态创建组件。

控件代码：

控件基类

widget.base.component.ts

import { Component, Input } from '@angular/core';

@Component({
    selector: 'form-widget-base',
    template: ''
})
export class FormWidgetBaseComponent{
    @Input()
    controls;

    @Input()
    options;
}

密码控件

input.password.component.ts

import { FormWidgetBaseComponent } from '../base/widget.base.component';
import { Component, Input } from '@angular/core';

@Component({
    selector: 'form-widget-password',
    template: `

                    
                    
                
`
})
export class FormWidgetPassword extends FormWidgetBaseComponent{
    
}

文本控件

input.text.component.ts

import { FormWidgetBaseComponent } from '../base/widget.base.component';
import { Component, Input } from '@angular/core';

@Component({
    selector: 'form-widget-text',
    template: `

                    
                    
                
`
})
export class FormWidgetText extends FormWidgetBaseComponent{

}

更新后的form-widget组件

form-widget.component.ts

import { FormWidgetPassword } from './widgets/password/input.password.component';
import { FormWidgetText } from './widgets/text/input.text.component';
import { FormErrorComponent } from '../form-error/form-error.component';
import { FormControl } from '@angular/forms';
import { Component, ComponentFactoryResolver, Input, ViewChild, ViewContainerRef } from '@angular/core';


@Component({
  selector: 'app-form-widget',
  templateUrl: './form-widget.component.html',
  styleUrls: ['./form-widget.component.css'],
  entryComponents: [FormWidgetText,FormWidgetPassword,FormErrorComponent]
})
export class FormWidgetComponent {
  /**
   * 表单控制项
   */
  @Input()
  control;

  /**
   * 组件配置项
   * {
   *    name: '...' // 配置项名称
   *    type: '...' // 表单类型
   *    errors: '...' // 错误提示信息
   * }
   */
  @Input()
  options:{};

  /**
   * 组件视图容器
   */
  @ViewChild('widget', {read: ViewContainerRef})
  widget;

  /**
   * 表单控件组件的引用
   */
  controlRef;
  
  /**
   * 错误组件的引用
   */
  errorsRef;

  constructor(private componentFactoryResolver: ComponentFactoryResolver) {
  }

  ngAfterViewInit() {
    setTimeout(() => {
      this.loadComponent();
    }, 0);
  }

  loadComponent() {
    // 加载表单控件
    const controlComponentFactory = this.componentFactoryResolver.resolveComponentFactory(this.options['type']);
    this.controlRef = this.widget.createComponent(controlComponentFactory);
    this.controlRef.instance.control = this.control;
    this.controlRef.instance.options = this.options;
    // 加载错误组件
    const errorsComponentFactory = this.componentFactoryResolver.resolveComponentFactory(FormErrorComponent);
    this.errorsRef = this.widget.createComponent(errorsComponentFactory);
    this.errorsRef.instance.control = this.control;
    this.errorsRef.instance.errors = this.options['errors'];
  }

}

form-widget.component.html

几点说明

  1. 在定义控件时，我们首先定义了一个FormWidgetBaseComponent基组件，里面包含了基础的配置项，我们可以使用组件继承来扩展不同的类型，在扩展的组件中就不需要重复定义配置项了，对于一些简单的模板，我们只需要继该组件，然后设置模板即可。关于组件的继承可参考angular2文档，Angular 2 Component Inheritance。
  2. 之前配置项中的type是text,password等值。采用动态加载组件的方法，我们需要将type类型改为我们所定义的组件，如：FormWidgetText，FormWidgetPassword等等。
  3. 扩展组件的时候，我们只需要实现好组件，然后将其加入到entryComponents即可。

构建dynamic-form组件，通过配置项生成FormGroup，简化表单构建

将构建FormGroup的参数整合进配置项里能让我们根据一个配置项就能构建好表单，进一步简化表单的构建。

我们需要一个转换函数，我们将它定义到一个服务里。
form.service.ts

import { FormBuilder } from '@angular/forms';
import { Injectable } from '@angular/core';

@Injectable()
export class FormService {
    constructor(private fb:FormBuilder) {

    }
    
    /**
     * 根据配置项生成FormGroup
     * @param options 
     */
    transform(options:any []) {
        const group = {};
        options.forEach((option) => {
            if (option.controlType === 'group') {
                group[option.name] = this.transform(option.control);
            } else if (option.controlType === 'array') {
                group[option.name] = this.fb.array(option.control);
            } else {
                group[option.name] = option.control;
            }
        });
        return this.fb.group(group);
    }
}

组件代码
dynamic-form.component.ts

import { FormService } from '../services/form.service';
import { FormGroup } from '@angular/forms';
import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';

@Component({
  selector: 'app-dynamic-form',
  templateUrl: './dynamic-form.component.html',
  styleUrls: ['./dynamic-form.component.css']
})
export class DynamicFormComponent {
  group:FormGroup;

  @Input()
  options:any [];

  @Output()
  submitEvent:EventEmitter = new EventEmitter();

  constructor(private formService:FormService) {
    
  }

  ngOnInit() {
    this.group = this.formService.transform(this.options);
  }

  onSubmit() {
    this.submitEvent.emit(this.group.value);
  }
}

dynamic-form.component.html

login-form组件调用
login-form.component.html

login-form.component.ts

/**
   * 创建表单
   */
  createForm() {

    // 表单配置项
    this.options = [
      {
        name: 'name',               // 表单控制项的名字，便于我们从formGroup上找到formControl
        control: ['jack', Validators.required, checkNameValidator()], // 表单配置项的构建参数
        type: FormWidgetText,       // 表单控制项的类型
        errors: [{                  // 错误提示信息
          name: 'required',
          msg: 'Name can not be empty!',
        },{
          name: 'checkName',
          msg: 'Name is exist!'
        }]
      },
      ...
    ];
  }
  1. 在dynamic-form组件里我们通过Output暴露了一个提交事件的接口，如有需要可以通过这个方法暴露更多接口。
    自此我们的组件已经基本完成了，我们可以通过一个配置项很快捷的构建表单了。

小结

  1. 借助响应式表单，我们能将使用代码实现表单初始化，表单验证，获取表单值等等操作。我们可以用FormControl控制单个表单元素，用FormGroup将表单元素分组，用FormArray处理需要动态添加的表单。在模板中我们只需要展示表单和验证信息即可，从而实现模板和业务逻辑的分离。
  2. 通过FormBuilder，我们可以使用配置项来简化响应式表单的构造。
  3. 对于结构类似的表单，我们可以考虑构建动态表单组件，来避免重复的劳动，提升开发效率。

你可能感兴趣的:(表单验证,响应式,angular2)

  • 《HTML 与 CSS—— 响应式设计》 陈在天box htmlcss前端
    一、引言在当今数字化时代，人们使用各种不同的设备访问互联网，包括智能手机、平板电脑、笔记本电脑和台式机等。为了确保网站在不同设备上都能提供良好的用户体验，响应式设计成为了网页开发的关键。HTML和CSS作为网页开发的基础技术，在实现响应式设计方面发挥着重要作用。本文将深入探讨HTML与CSS中的响应式设计原理、方法和最佳实践。二、响应式设计的概念与重要性（一）概念响应式设计是一种网页设计方法，旨在
  • 如何在Flask中处理表单数据 ac-er8888 flaskpython后端
    在Flask中处理表单数据是一个常见的任务，它涉及从客户端接收数据并在服务器端进行解析和处理。Flask本身不直接提供表单验证的功能，但它可以与WTForms等库结合使用来简化表单处理过程。不过，即使没有WTForms，你仍然可以直接通过Flask的request对象来处理表单数据。以下是在Flask中处理表单数据的基本步骤：1.创建HTML表单首先，你需要在HTML中创建一个表单，并将其meth
  • 《Android进阶之光》— Android 书籍 王睿丶 Android永无止境《Android进阶之光》Android书籍Androidphoenix移动开发
    文章目录第1章Android新特性1第2章MaterialDesign48第3章View体系与自定义View87第4章多线程编程165第5章网络编程与网络框架204第6章设计模式271第7章事件总线308第8章函数响应式编程333第9章注解与依赖注入框架382第10章应用架构设计422第11章系统架构与MediaPlayer框架460出版年:2017-7简介：《Android进阶之光》是一本And
  • 【Vue3源码实现】Ref isRef unRef proxyRefs实现 ZhaiMou vue.jsjavascript前端数据结构前端框架开发语言
    前言在上篇文章中我们了解了响应式原理，并在最后实现了reactive。上文链接Vue3响应式原理实现与track和trigger依赖收集和触发依赖在我们的日常业务中，我们有可能需要将一个基础数据类型的值也转换成响应式的，而reactive只能代理对象，我们需要对基础数据类型的值也进行读写操作的拦截，但Proxy无法实现对基础数据类型值读写操作的拦截。所以Vue设计了Ref,以及相关api本篇文章实
  • vue3 响应性API weixin_44747590 vue3vuejs
    toRef可以用来为源响应式对象上的property性创建一个ref。然后可以将ref传递出去，从而保持对其源property的响应式连接。本质类似指针引用。举例：conststate=reactive({foo:1,bar:2})constfooRef=toRef(state,'foo')fooRef.value++console.log(state.foo)//2state.foo++cons
  • 手撸vue3核心源码——响应式原理(isRef和unRef) 前端不是渣男 前端vue.js
    今天来实现一下ref的功能函数，isRef与unRefisRefisRef和isReactive一样，都是用于检测数据类型，isRef是检测是不是一个ref对象,跟isReactive函数实现起来一样,我们先来写一个单元测试这里要实现的功能是，检测ref对象肯定就通过返回true，检测普通类型数据以及reactive对象都是falseit("itshouldreturnaboolean",()=>
  • [深入vue3之refs] ref、unref、toRef、toRefs、isRef、customRef、shallowRef、triggerRef等使用与讲解 oumae-kumiko vue前端vue.js前端javascript
    本章涉及的compositionapi：ref、unref、toRef、toRefs、isRef、customRef、shallowRef、triggerRefrefsapi中的重点为：ref、toRefs、shallowRef、customRef，其次是isRef等。ref接受一个内部值并返回一个响应式且可变的ref对象。ref对象仅有一个`.value`property，指向该内部值。如果将对
  • vue3-响应式API(工具函数)-unRef hx_1199 vue3前端javascriptvue.js
    unRef作用：如果参数是ref，则返回内部值，否则返回参数本身。理解：val=isRef(val)?val.value:val应用：sortField=unref(tableRef)?.getSortFields()
  • vue3 响应式API customRef() fishmemory7sec vue3javascriptvue.js前端
    使用ref()定义响应式数据：{{inputValue}}import{ref}from'vue';constinputValue=ref('hello')使用Vue提供的默认ref()定义响应式数据，当数据发生变化时，Vue的响应式系统会自动检测到变化，并立即更新相关的页面部分。现在，实现如下图所示的需求：当在输入框输入123时，输入结束1秒后，页面才更新。将输入框与inputValue进行双向
  • Vue 和 React 的对比 淘淘是只狗 vueReactvue.jsreact.jsjavascript
    React和Vue有许多相似之处：使用VirtualDOM提供了响应式(Reactive)和组件化(Composable)的视图组件。将注意力集中保持在核心库，而将其他功能如路由和全局状态管理交给相关的库。运行时性能React在React应用中，当某个组件的状态发生变化时，它会以该组件为根，重新渲染整个组件子树。如要避免不必要的子组件的重渲染，你需要在所有可能的地方使用PureComponent，
  • 使用sass的混合插入模式进行@media响应式媒体查询做自适应开发 miao_zz csssass媒体前端
    使用sass的混合插入模式进行@media响应式媒体查询做自适应开发//定义混合指令并传参数@mixinrespond($breakname){//控制指令@if$breakname=='phone'{//手机端=1201@media(min-width:1201px){//向混合样式中导入内容@content;}}}.mz-col{border:1pxsolid$borderColor;@inc
  • vue2与vue3的区别 longfan_ vue
    1.vue2和vue3响应式原理发生了改变vue2的响应式原理是利⽤es5的⼀个API，Object.defineProperty()对数据进⾏劫持结合发布订阅模式的⽅式来实现的。vue3中使⽤了es6的proxyAPI对数据代理，通过reactive()函数给每⼀个对象都包⼀层Proxy，通过Proxy监听属性的变化，从⽽实现对数据的监控。这⾥是引相⽐于vue2版本，使⽤proxy的优势如下1.
  • web前端达到什么水平，才能找到工作？ cj瑾瑜 前端htmljavascriptcsscss3
    一、前端是什么？前端即网站前台部分，也叫前端开发，运行在PC端，移动端等浏览器上展现给用户浏览的网页。随着互联网技术的发展，HTML5，CSS3，前端框架的应用，跨平台响应式网页设计能够适应各种屏幕分辨率，完美的动效设计，给用户带来极高的用户体验。（核心技术：HTML、CSS、JavaScript）核心技术是前端开发中最基本也是最必须的三个技能。前端的开发中，在页面的布局时，HTML将元素进行定义
  • ref 和 reactive 区别 有一个好名字 Vuevue.jsjavascript前端
    前言ref和reactive是Vue3中响应式编程的核心。在Vue中，响应式编程是一种使数据与UI保持同步的方式。当数据变化时，UI会自动更新，反之亦然。这种机制大大简化了前端开发，使我们能够专注于数据和用户界面的交互，而不必手动处理DOM更新。refref是Vue3中的一个简单响应式API，用于创建一个包装基本数据类型的响应式引用(也可以包装复杂类型，只不过底层还是由reactive的方式实现的
  • cross-plateform 跨平台应用程序-06-uni-app 介绍 知识分享官 uni-app
    详细介绍一下uni-app？whatuni-app是一个使用Vue.js开发所有前端应用的框架，开发者编写一次代码，可发布到iOS、Android、Web（响应式）、以及各种小程序（微信/支付宝/百度/头条/飞书/QQ/快手/京东/美团/钉钉/淘宝）、快应用等多个平台。以下是uni-app的一些核心特性和优势：使用Vue.js开发：uni-app基于Vue.js，这意味着如果你已经熟悉Vue.js
  • Vue2和vue3有哪些区别？ IT 前端 张 vue.js前端javascript
    1.语法差异1.Vue2中，一个组件需要使用Vue.component方法进行注册，并使用exportdefault导出组件对象。2.Vue3中，组件的导出和注册可以使用新的语法糖，只需将组件的配置放在标签中，并使用defineComponent方法导出组件对象2.数据定义1.Vue2中，数据需要在data选项中定义，并且只有在data中定义的数据才会被Vue的响应式系统追踪和更新。1.1：Vue
  • 深度长文解析SpringWebFlux响应式框架15个核心组件源码 快乐非自愿 javaspring
    SpringWebFlux介绍SpringWebFlux是SpringFramework5.0版本引入的一个响应式Web框架，它与SpringMVC并存，提供了一种全新的编程范式，支持异步非阻塞的Web应用开发。WebFlux完全基于响应式编程模型，支持ReactiveStreams规范，可以在诸如Netty、Undertow以及Servlet3.1+容器上运行。WebFlux的核心控制器是Dis
  • 移动WEB开发（第四天）__响应式布局 加蓓努力我先飞 5.移动web开发资料前端
    移动WEB开发（第四天）__响应式布局移动端WEB开发之响应式布局1.0响应式开发原理1.1响应式开发原理1.2响应式布局容器2.0bootstrap的介绍2.1Bootstrap简介2.2bootstrap优点2.3版本简介2.4bootstrap基本使用2.5bootstrap布局容器2.6bootstrap栅格系统3.0阿里百秀案例制作3.1技术选型移动端WEB开发之响应式布局1.0响应式开
  • html css网页制作成品 A_aspectJ项目开发 JavaWeb技术html
    前言在HTML和CSS中创建一个网页是一个简单的过程，但是要创建一个成品级的网页，你需要考虑更多的因素，例如：响应式设计：确保你的网页在不同的设备和屏幕尺寸上都能良好显示。访问性：确保你的网页对于大多数的用户都很友好。标准的遵从性：遵循HTML和CSS的最佳实践，以便更容易维护和更新。以下是一个简单的HTML和CSS结合的成品级网页示例：一、html代码header我的网站链接1链接2链接3链接4
  • vue缓存事件的方法有什么 芥子纳须弥1116 vue.js缓存前端javascriptecmascript
    Vue可以使用多种方法缓存事件。一些常见的方法包括：使用计算属性：在事件处理程序中，可以通过将数据存储在计算属性中来缓存事件。使用Vuex：Vuex是Vue的状态管理模式，可以存储应用程序状态并以统一的方式进行管理。使用本地存储：可以使用浏览器的本地存储(如localStorage或sessionStorage)缓存事件。使用Vue实例的响应式对象：可以将数据存储在Vue实例的响应式对象中以便在事
  • vuex快速入门 弓弓弓長 vue
    vuex是什么*1.Vuex的状态存储是响应式的2.你不能直接改变store中的状态。改变store中的状态的唯一途径就是显式地提交(commit)mutation。vuex是一个专门为vue.js应用程序开发的状态管理模式。vuex中，有默认的五种基本的对象：state：存储状态（变量）getters：对数据获取之前的再次编译，可以理解为state的计算属性。mutations：修改状态，并且是
  • Vuex快速入门 m0_66357705 vue.jsjavascript前端
    Vuex是什么复杂场景组件之间通信vuex是vue的一个状态管理工具,状态就是数据大白话:vuex是一个插件,可以帮助我们管理vue通用数据(多组件数据共享)场景某个状态在多个组件使用(个人信息)多个组件共同维护一份数据(购物车)优势数据集中化管理响应式vuex遵循单向数据流初始配置安装vuexnpminstallvuex@next--save#对于Vue3npminstallvuex--save
  • vue3入门知识点 眼缘丶 javascriptvue.js开发语言
    vue2与vue3的区别1.响应式原理vue2响应式原理采用Object.defineProperties监听对象的getter与settervue3pxoy代理的方式监听对象2.启动方式在main.js文件夹中vue2vue2newVue({store,routerrender:h=>(App)}).$mount("#app")vue3import{createApp}from'vue'crea
  • Vue3 全文知识点 清风ꦿ vue.jsjavascriptecmascript
    vue全文知识点vue3学习1关于项目初始化2vue3语法setup3vue3语法和vue2语法兼容4setup语法糖5响应式数据-基础6响应式数据-ref定义对象类型数据6toRef，toRefs将多个非响应式数据转变为响应式数据refImpl7computed计算属性8watch监听[ref对象（包含计算属性），getter方法（对象属性），响应式对象，数组（包含前三类）]9ref绑定10pr
  • java reactor框架_关于java:Java反应式框架Reactor中的Mono和Flux 中一贝爷 javareactor框架
    1.前言最近写对于响应式编程的货色有点多，很多同学反映对Flux和Mono这两个Reactor中的概念有点懵逼。然而目前Java响应式编程中咱们对这两个对象的接触又最多，诸如SpringWebFlux、RSocket、R2DBC。我开始也对这两个对象头疼，所以明天咱们就简略来探讨一下它们。2.响应流的特点要搞清楚这两个概念，必须说一下响应流标准。它是响应式编程的基石。他具备以下特点：响应流必须是无
  • 前端进阶：JavaScript实现优雅遮罩层下的表单验证技巧 VaporGas 前端前端javascripthtmlhtml5ecmascript开发语言
    表单验证的高级特性本次介绍的重点如下：动态改变样式属性className属性的用法遮罩层特效的制作动态输入的提示特性实现当文本框获得焦点时改变背景颜色，失去焦点时恢复白色使用元素的style属性访问样式规则object.style.property;例如:访问字体的颜色color使用obj.style.color访问字体的大小属性使用obj.style.fontSizefont-size变换成fo
  • Vue——v-model双向绑定数据原理及用法 樱丸小桃子啊 Vue前端vuevue.js
    vue中双向绑定是一个指令v-model，所谓的双绑就是可以绑定一个响应式数据到视图，同时视图中变化能改变该值。v-model是语法糖，默认情况下相当于:value和@input。使用v-model可以减少大量繁琐的事件处理代码，提高开发效率。通常在表单项上使用v-model，还可以在自定义组件上使用，表示某个值的输入和输出控制。比如说我们在input上使用时，我们将xxx的值绑定到表单元素val
  • Vue解說 白总Server vue.js前端javascript数据库架构网络协议ssl网络
    Vue.js（通常简称为Vue）是一个开源的JavaScript框架，用于构建用户界面和单页应用程序（SPA）。它由前谷歌工程师尤雨溪（EvanYou）创建，并首次发布于2014年。Vue被设计为易于上手、灵活且高效，它允许开发者通过组件化的方式构建复杂的前端应用。Vue.js的关键特点：渐进式框架：Vue可以从简单的界面元素开始，逐步扩展到复杂的单页应用。响应式数据绑定：Vue使用双向数据绑定，
  • vue源码分析-挂载流程和模板编译 yyzzabc123 vue.js
    前面几节我们从newVue创建实例开始，介绍了创建实例时执行初始化流程中的重要两步，配置选项的资源合并,以及响应式系统的核心思想，数据代理。在合并章节，我们对Vue丰富的选项合并策略有了基本的认知，在数据代理章节我们又对代理拦截的意义和使用场景有了深入的认识。按照Vue源码的设计思路，初始化过程还会进行很多操作，例如组件之间创建关联，初始化事件中心，初始化数据并建立响应式系统等，并最终将模板和数据
  • AJAX实时表单验证系统 三年九班蓝同学
    本文还有配套的精品资源，点击获取简介：在网页开发中，"ajax验证表单"是一项关键任务，确保数据符合格式和规则，提升数据质量和用户体验。本应用通过使用JavaScript和XMLHttpRequest对象实现后台验证，无需页面刷新。它包括前端验证、事件处理、Ajax调用、服务器端处理、响应处理、用户体验和安全性等关键步骤，以jQuery库简化开发流程，创建高效、安全的表单验证系统。1.表单验证的重
  • java短路运算符和逻辑运算符的区别 3213213333332132 java基础
    /* * 逻辑运算符——不论是什么条件都要执行左右两边代码 * 短路运算符——我认为在底层就是利用物理电路的“并联”和“串联”实现的 * 原理很简单，并联电路代表短路或（||），串联电路代表短路与（&&）。 * * 并联电路两个开关只要有一个开关闭合，电路就会通。 * 类似于短路或（||），只要有其中一个为true（开关闭合）是
  • Java异常那些不得不说的事 白糖_ javaexception
    一、在finally块中做数据回收操作 比如数据库连接都是很宝贵的，所以最好在finally中关闭连接。 JDBCAgent jdbc = new JDBCAgent(); try{ jdbc.excute("select * from ctp_log"); }catch(SQLException e){ ... }finally{ jdbc.close();
  • utf-8与utf-8(无BOM)的区别 dcj3sjt126com PHP
    BOM——Byte Order Mark，就是字节序标记   在UCS 编码中有一个叫做"ZERO WIDTH NO-BREAK SPACE"的字符，它的编码是FEFF。而FFFE在UCS中是不存在的字符，所以不应该出现在实际传输中。UCS规范建议我们在传输字节流前，先传输 字符"ZERO WIDTH NO-BREAK SPACE"。这样如
  • JAVA Annotation之定义篇 周凡杨 java注解annotation入门注释
        Annotation: 译为注释或注解 An annotation, in the Java computer programming language, is a form of syntactic metadata that can be added to Java source code. Classes, methods, variables, pa
  • tomcat的多域名、虚拟主机配置 g21121 tomcat
    众所周知apache可以配置多域名和虚拟主机，而且配置起来比较简单，但是项目用到的是tomcat，配来配去总是不成功。查了些资料才总算可以，下面就跟大家分享下经验。 很多朋友搜索的内容基本是告诉我们这么配置： 在Engine标签下增面积Host标签，如下： <Host name="www.site1.com" appBase="webapps"
  • Linux SSH 错误解析（Capistrano 的cap 访问错误 Permission ） 510888780 linuxcapistrano
    1.ssh -v [email protected] 出现 Permission denied (publickey,gssapi-keyex,gssapi-with-mic,password). 错误 运行状况如下： OpenSSH_5.3p1, OpenSSL 1.0.1e-fips 11 Feb 2013 debug1: Reading configuratio
  • log4j的用法 Harry642 javalog4j
    一、前言：     log4j 是一个开放源码项目，是广泛使用的以Java编写的日志记录包。由于log4j出色的表现，     当时在log4j完成时，log4j开发组织曾建议sun在jdk1.4中用log4j取代jdk1.4 的日志工具类，但当时jdk1.4已接近完成，所以sun拒绝使用log4j，当在java开发中
  • mysql、sqlserver、oracle分页，java分页统一接口实现 aijuans oraclejave
    定义：pageStart 起始页，pageEnd 终止页,pageSize页面容量 oracle分页： 　　　　select * from ( select mytable.*,rownum num from (实际传的SQL) where rownum<=pageEnd) where num>=pageStart sqlServer分页：  
  • Hessian 简单例子 antlove javaWebservicehessian
    hello.hessian.MyCar.java package hessian.pojo; import java.io.Serializable; public class MyCar implements Serializable { private static final long serialVersionUID = 473690540190845543
  • 数据库对象的同义词和序列 百合不是茶 sql序列同义词ORACLE权限
    回顾简单的数据库权限等命令; 解锁用户和锁定用户 alter user scott account lock/unlock; //system下查看系统中的用户 select * dba_users; //创建用户名和密码 create user wj identified by wj; identified by //授予连接权和建表权 grant connect to
  • 使用Powermock和mockito测试静态方法 bijian1013 持续集成单元测试mockitoPowermock
            实例： package com.bijian.study; import static org.junit.Assert.assertEquals; import java.io.IOException; import org.junit.Before; import org.junit.Test; import or
  • 精通Oracle10编程SQL(6)访问ORACLE bijian1013 oracle数据库plsql
    /* *访问ORACLE */ --检索单行数据 --使用标量变量接收数据 DECLARE v_ename emp.ename%TYPE; v_sal emp.sal%TYPE; BEGIN select ename,sal into v_ename,v_sal from emp where empno=&no; dbms_output.pu
  • 【Nginx四】Nginx作为HTTP负载均衡服务器 bit1129 nginx
     Nginx的另一个常用的功能是作为负载均衡服务器。一个典型的web应用系统，通过负载均衡服务器，可以使得应用有多台后端服务器来响应客户端的请求。一个应用配置多台后端服务器，可以带来很多好处：   负载均衡的好处 增加可用资源 增加吞吐量 加快响应速度，降低延时 出错的重试验机制 Nginx主要支持三种均衡算法： round-robin l
  • jquery-validation备忘 白糖_ jquerycssF#Firebug
    留点学习jquery validation总结的代码：   function checkForm(){ validator = $("#commentForm").validate({// #formId为需要进行验证的表单ID errorElement :"span",// 使用"div"标签标记错误， 默认:&
  • solr限制admin界面访问（端口限制和http授权限制） ronin47 限定Ip访问
    solr的管理界面可以帮助我们做很多事情，但是把solr程序放到公网之后就要限制对admin的访问了。 可以通过tomcat的http基本授权来做限制，也可以通过iptables防火墙来限制。 我们先看如何通过tomcat配置http授权限制。 第一步： 在tomcat的conf/tomcat-users.xml文件中添加管理用户，比如： <userusername="ad
  • 多线程-用JAVA写一个多线程程序，写四个线程，其中二个对一个变量加1，另外二个对一个变量减1 bylijinnan java多线程
    public class IncDecThread { private int j=10; /* * 题目:用JAVA写一个多线程程序，写四个线程，其中二个对一个变量加1，另外二个对一个变量减1 * 两个问题： * 1、线程同步--synchronized * 2、线程之间如何共享同一个j变量--内部类 */ public static
  • 买房历程 cfyme
        2015-06-21: 万科未来城，看房子   2015-06-26: 办理贷款手续，贷款73万，贷款利率5.65=5.3675   2015-06-27: 房子首付,签完合同   2015-06-28，央行宣布降息 0.25，就2天的时间差啊，没赶上。   首付，老婆找他的小姐妹接了5万，另外几个朋友借了1-
  • [军事与科技]制造大型太空战舰的前奏 comsci 制造
           天气热了........空调和电扇要准备好..........        最近,世界形势日趋复杂化,战争的阴影开始覆盖全世界..........        所以,我们不得不关
  • dateformat dai_lm DateFormat
    "Symbol Meaning Presentation Ex." "------ ------- ------------ ----" "G era designator (Text) AD" "y year
  • Hadoop如何实现关联计算 datamachine mapreducehadoop关联计算
        选择Hadoop，低成本和高扩展性是主要原因，但但它的开发效率实在无法让人满意。     以关联计算为例。     假设：HDFS上有2个文件，分别是客户信息和订单信息，customerID是它们之间的关联字段。如何进行关联计算，以便将客户名称添加到订单列表中？   &nbs
  • 用户模型中修改用户信息时，密码是如何处理的 dcj3sjt126com yii
    当我添加或修改用户记录的时候对于处理确认密码我遇到了一些麻烦，所有我想分享一下我是怎么处理的。 场景是使用的基本的那些(系统自带)，你需要有一个数据表(user)并且表中有一个密码字段(password),它使用 sha1、md5或其他加密方式加密用户密码。 面是它的工作流程: 当创建用户的时候密码需要加密并且保存，但当修改用户记录时如果使用同样的场景我们最终就会把用户加密过的密码再次加密，这
  • 中文 iOS/Mac 开发博客列表 dcj3sjt126com Blog
      本博客列表会不断更新维护，如果有推荐的博客，请到此处提交博客信息。 本博客列表涉及的文章内容支持 定制化Google搜索，特别感谢 JeOam 提供并帮助更新。 本博客列表也提供同步更新的OPML文件（下载OPML文件），可供导入到例如feedly等第三方定阅工具中，特别感谢 lcepy 提供自动转换脚本。这里有导入教程。
  • js去除空格，去除左右两端的空格 蕃薯耀 去除左右两端的空格js去掉所有空格js去除空格
    js去除空格，去除左右两端的空格 >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>&g
  • SpringMVC4零配置--web.xml hanqunfeng springmvc4
    servlet3.0+规范后，允许servlet，filter，listener不必声明在web.xml中，而是以硬编码的方式存在，实现容器的零配置。 ServletContainerInitializer：启动容器时负责加载相关配置 package javax.servlet; import java.util.Set; public interface ServletContainer
  • 《开源框架那些事儿21》：巧借力与借巧力 j2eetop 框架UI
    同样做前端UI，为什么有人花了一点力气，就可以做好？而有的人费尽全力，仍然错误百出？我们可以先看看几个故事。 故事1：巧借力，乌鸦也可以吃核桃 有一个盛产核桃的村子，每年秋末冬初，成群的乌鸦总会来到这里，到果园里捡拾那些被果农们遗落的核桃。 核桃仁虽然美味，但是外壳那么坚硬，乌鸦怎么才能吃到呢？原来乌鸦先把核桃叼起，然后飞到高高的树枝上，再将核桃摔下去，核桃落到坚硬的地面上，被撞破了，于是，
  • JQuery EasyUI 验证扩展 可怜的猫 jqueryeasyui验证
      最近项目中用到了前端框架-- EasyUI，在做校验的时候会涉及到很多需要自定义的内容，现把常用的验证方式总结出来，留待后用。   以下内容只需要在公用js中添加即可。   使用类似于如下： <input class="easyui-textbox" name="mobile" id="mobile&
  • 架构师之httpurlconnection----------读取和发送(流读取效率通用类) nannan408
    1.前言.    如题. 2.代码. /* * Copyright (c) 2015, S.F. Express Inc. All rights reserved. */ package com.test.test.test.send; import java.io.IOException; import java.io.InputStream
  • Jquery性能优化 r361251 JavaScriptjquery
    一、注意定义jQuery变量的时候添加var关键字 这个不仅仅是jQuery，所有javascript开发过程中，都需要注意，请一定不要定义成如下： $loading = $('#loading'); //这个是全局定义，不知道哪里位置倒霉引用了相同的变量名，就会郁闷至死的 二、请使用一个var来定义变量 如果你使用多个变量的话，请如下方式定义： . 代码如下: var page
  • 在eclipse项目中使用maven管理依赖 tjj006 eclipsemaven
    概览: 如何导入maven项目至eclipse中 建立自有Maven  Java类库服务器 建立符合maven代码库标准的自定义类库 Maven在管理Java类库方面有巨大的优势，像白衣所说就是非常“环保”。 我们平时用IDE开发都是把所需要的类库一股脑的全丢到项目目录下，然后全部添加到ide的构建路径中，如果用了SVN/CVS，这样会很容易就 把
  • 中国天气网省市级联页面 x125858805 级联
    1、页面及级联js <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> &l
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他