vue-autoui 자체 웹 api 와 일치 하 는 UI 컨트롤 구현

vue-autoui 는vue와element확장 을 기반 으로 하 는 자동화 UI 컨트롤 로 주로 두 개의 컨트롤 패 키 징 을 제공 합 니 다.각각auto-form과auto-grid입 니 다.이 두 컨트롤 을 통 해 대부분의 정보 입력 과 조회 출력 수 요 를 완성 할 수 있 습 니 다.auto-form과auto-grid은json을 통 해 보 여 주 는 구 조 를 설명 합 니 다.처리 에 있어 서html라벨 을 쓰 는 것 보다 편리 하고 간단 합 니 다.그러나 이 컨트롤 의 가장 큰 장점 은 여기 가 아 닙 니 다.가장 중요 한 기능 은webapi의 정 보 를 결합 하여 인터페이스 를 자동 으로 출력 할 수 있 습 니 다.UI 조정webapi의 정보 구조 만 조정 하면 된다.
기초 사용
컨트롤 은 vuejs 기능 에서 직접 사용 할 수 있 으 나json와 결합 하여 구체 적 인 UI 전 시 를 설정 해 야 합 니 다.다음은 간단 한 예 입 니 다.

 <auto-form ref="form" v-model="data" size="mini" :info="info">

  </auto-form>
  <el-button @click="if($refs.form.success()){alert(JSON.stringify(data))}">  </el-button>

기능 은 간단 합 니 다.현재 입력 을 표시 하고 통 과 된 데 이 터 를 검증 하 는 것 입 니 다.다음은 json 으로 정보 입력 원 을 설명 합 니 다.

data(){     
      return {
        info: { items: [] },
        data: { },
      };
    },
    mounted(){
      var items = [];
      items.push({
        name: 'active', label: '    ', rules: [
          { required: true, message: '       ', trigger: 'blur' },
          { min: 3, max: 5, message: '    3   5    ', trigger: 'blur' }
        ]
      });
      items.push({
        name: 'region', label: '    ', type: 'select',
        data: [{ value: '  ' }, { value: '  ' }, { value: '  ' }, { value: '  ' }],
        rules: [{ required: true, message: '       ', trigger: 'change' }],
        eof: true
      });
      items.push({ name: 'starttime', label: '    ', type: 'date', rules: [{ type: 'date', required: true, message: '     ', trigger: 'change' }] });
      items.push({ name: 'endtime', label: '-', type: 'date', eof: true, rules: [{ type: 'date', required: true, message: '     ', trigger: 'change' }] });
      items.push({ name: 'instant', type: 'switch', label: '    ', eof: true });
      items.push({
        name: 'nature', type: 'checkbox', label: '    ',
        rules: [{ type: 'array', required: true, message: '           ', trigger: 'change' }],
        data: [{ value: '  /      ' }, { value: '    ' }, { value: '      ' }, { value: '      ' }], eof: true
      });
      items.push({
        name: 'resource', label: '    ', type: 'radio', rules: [{ required: true, message: '       ', trigger: 'change' }],
        data: [{ value: '       ' }, { value: '      ' }], eof: true
      });
      items.push({ name: 'remark', label: '    ', type: 'remark', rules: [{ required: true, message: '       ', trigger: 'blur' }] })
      this.info = { items: items}
    }

이상 은json를 사용 하여 출력 인터페이스 를 설명 하 는데 구체 적 인 효 과 는 다음 과 같다.
json로 화면 을 묘사 하 는 것 이html보다 편리 하지만 전체적으로 작업량 이 많 고 화면 을 조정 할 때 도 불편 하 다.다음은 어떻게 결합BeetleX.FastHttpApi하여 이런 번 거 로 운 조작 을 더욱 간소화 하 는 지 소개 한다.
Webapi 동적 출력
사실 구축vue-autoui할 때BeetleX.FastHttpApi과 통합 하 는 것 을 고려 해 야 한다.백 엔 드 와 융합 을 통 해 이 UI 들 이 작성 한 작업량 을 크게 절약 하고 개발 을 더욱 간단 하고 편리 하 게 할 수 있다. api 사용 요구 사항:BeetleX.FastHttpApi과 통합 하려 면BeetleX.FastHttpApi.ApiDoc플러그 인 을 참조 해 야 합 니 다.이 플러그 인 은 인터페이스 에 대응 하 는 UIJSON정 보 를 출력 하 는 데 사용 되 기 때 문 입 니 다.다음은 몇 가지 예 시 를 통 해 통합 의 편의 성 을 소개 한다.
상륙 하 다.
로그 인 기능 은 비교적 흔히 볼 수 있 는 것 이다.다음은 사용auto-form을 어떻게 결합webapi하여 이 기능 을 완성 하 는 지 살 펴 보 자.

<div>
  <auto-form ref="login" url="/login" v-model="login.data" size="mini">

  </auto-form>
  <el-button size="mini" @click="if($refs.login.success())login.post()">
      
  </el-button>
</div>

이상 은 로그 인 기능 UI 의 정의 입 니 다.간단 하지 않 습 니까?지정url한 webapi 연결 을 통 해 UI 에 자동 으로 적응 할 수 있 습 니 다.이 때 로그 인 인터페이스 에 대한 정의 만 있 으 면 됩 니 다.

[Input(Label = "   ", Name = "name", Eof = true)]
    [Required("       ", Name = "name")]
    [Input(Label = "  ", Name = "pwd", Type = "password", Eof = true)]
    [Required("        ", Name = "pwd")]
    [Input(Label = "    ", Value = true, Name = "saveStatus")]
    public bool Login(string name, string pwd, bool saveStatus)
    {
      Console.WriteLine($"name:{name} pwd:{pwd} saveStatus:{saveStatus}");
      return name == "admin";
    }

책.
다음은 정보 가 많은 등록 인터페이스 를 정의 합 니 다.

<div>
  <auto-form ref="login" url="/register" v-model="register.data" size="mini" @completed="onCompleted">

  </auto-form>
  <el-button size="mini" @click="if($refs.login.success())register.post()">
      
  </el-button>
</div>

UI 정의 에 있어 서 아무런 변화 가 없습니다.대응 하 는url주 소 를 조정 할 뿐 입 니 다.여기 서completed이벤트 가 더 많아 졌 습 니 다.이 이 벤트 는 주로 인터페이스 로 UI 정 보 를 불 러 와 야 발생 합 니 다.대응 기능javascript코드

data(){
      return {
        register: new beetlexAction('/register', {}),
        checkConfirmPassword: (rule, value, callback) => {
          var password = this.$refs.login.getField('Password');
          var cpassword = this.$refs.login.getField('ConfirmPassword');
          if (password.value != cpassword.value)
            callback(new Error('       !'));
          else
            callback();
        },
      }
    },
    methods: {
      onCompleted(){
        this.$refs.login.getField('ConfirmPassword').rules.push({ validator: this.checkConfirmPassword, trigger: 'blur' });
      },
    },
    mounted() {

      this.register.requested = (r) => {
        alert(JSON.stringify(r));
      };
    }

코드 는 주로 비밀 번 호 를 정 하고 비밀 번 호 를 확인 하 는 비교 검증 입 니 다.다음은 배경 등록 에 대응 하 는 인 터 페 이 스 를 보 겠 습 니 다.

[Post]
  public RegisterDto Register(RegisterDto register)
  {
      Console.WriteLine(Newtonsoft.Json.JsonConvert.SerializeObject(register));
      return register;
  }
  public class RegisterDto
  {
    [Input(Label = "   ", Eof = true)]
    [Required("       ")]
    [DataRange("        3   ", Min = 3)]
    public string Name { get; set; }

    [Input(Label = "    ", Eof = true)]
    [Required("      ", Type = "email")]
    public string Email { get; set; }

    [Input(Label = "  ", Eof = true, Type = "password")]
    [Required("    ")]
    public string Password { get; set; }

    [Input(Label = "    ", Eof = true, Type = "password")]
    [Required("      ")]
    public string ConfirmPassword { get; set; }

    [GenderInput(Label = "  ", Value = " ", Eof = true)]
    public string Gender { get; set; }

    [Required("      ")]
    [CityInput(Label = "  ", Eof = true)]
    public string City { get; set; }

    [HobbyInput(Label = "  ")]
    [Required("    ", Type = "array", Trigger = "change")]
    public string[] Hobby { get; set; }
  }

서비스 코드 도 많이 변 하지 않 았 습 니 다.일부 탭 을 통 해 관련 속성의 데이터 원본 과 입력 요 구 를 표시 할 뿐 입 니 다.구체 적 인 운행 효 과 는 다음 과 같 습 니 다.

데이터 목록
응용 프로그램 에서 데이터 출력 을 제외 한 더 많은 데이터 목록 이 있 습 니 다.auto-grid즉,목록 을 처리 하 는 데 사용 되 는 컨트롤 입 니 다.이 컨트롤 은 페이지,선택,편집,삭제 기능 을 제공 합 니 다.다음은 간단 한 직원 목록 예 를 들 어 보 겠 습 니 다.

<auto-grid url="/employees" @completed="employees.get()"
      @itemchange="onItemChange" 
      @itemdelete="onItemDelete"
      @command="onCommand"
      :data="employees.result" 
      size="mini" height="100%" 
      edit="true" delete="true">
</auto-grid>

이 목록 은 편집 및 삭제 기능 을 제공 합 니 다.관련 스 크 립 트 코드 는 다음 과 같 습 니 다.

data(){
      return {
        employees: new beetlexAction('/employees', {}, [])
      }
    },
    methods: {
      onCommand(e){
        this.$open('models-employee', e.data);
      },
      onItemChange(item){
        if (confirm('     ' + item.data.FirstName + '?')) {
          item.success();
        }
      },
      onItemDelete(item){
        if (confirm('     ' + item.data.FirstName + '?')) {
          item.success();
        }
      },
    },
    mounted() {

    }

다음 작업 은 서버 정의api에서 결 과 를 출력 하 는 것 입 니 다.

[Column("FirstName", Type = "link")]
    [Column("LastName", Read = true)]
    [Column("Title")]
    [Column("HomePhone")]
    [Column("City")]
    [Column("Address")]
    public object Employees()
    {
      return DataHelper.Defalut.Employees;
    }

동적 조회
실제 응용 에서 조회 조건 입력 을 제공 해 야 한다.이 럴 때auto-form와auto-grid를 통합 시 킬 수 있다.다음은 간단 한 주문 조 회 를 통 해 이 두 컨트롤 을 결합 하여 사용 하 는 것 을 보 여 준다.

<auto-form url="/orders" v-model="orders.data" @completed="orders.get()" size="mini" @fieldchange="orders.get()">

  </auto-form>
  <auto-grid url="/orders" height="300" :data="orders.result.items" :pages="orders.result.pages" :currentpage="orders.result.index" @pagechange="onPageChange" size="mini">

  </auto-grid>

auto-form의fieldchange이벤트 에서 자동 으로 조 회 를 실행 할 수 있 습 니 다.해당 하 는 스 크 립 트 코드 는 다음 과 같 습 니 다.

data(){
      return {
        orders: new beetlexAction("/orders", {}, { index: 0, pages: 0, items: [] })
      };
    },
    methods: {
      onPageChange(page){
        this.orders.data.index = page;
        this.orders.get();
      },
    },
    mounted(){

    }

다음은 서버 코드 를 실현 해 야 합 니 다.입력 과 목록 을 설명 하 는 방법 이 필요 하기 때문에 해당 하 는 탭 이 많 습 니 다.

data(){
      return {
        orders: new beetlexAction("/orders", {}, { index: 0, pages: 0, items: [] })
      };
    },
    methods: {
      onPageChange(page){
        this.orders.data.index = page;
        this.orders.get();
      },
    },
    mounted(){

    }

플러그 인 상세 코드https://github.com/IKende/BeetleX-Samples/tree/master/Web.AutoUI
https://github.com/IKende/vue-autoui
vue-autoui 가 웹 api 와 일치 하 는 UI 컨트롤 을 실현 하 는 것 에 관 한 이 글 은 여기까지 소개 되 었 습 니 다.더 많은 vue-autoui 가 웹 api 와 일치 하 는 UI 컨트롤 내용 은 이전 글 을 검색 하거나 아래 의 관련 글 을 계속 찾 아 보 세 요.앞으로 도 많은 지원 바 랍 니 다!