Ng-Alain-mock application

Of-Alain

Ng-AlianIt is based on Antda front end of the implement frame. It is based on Angularand NG-ZORROcarried out on the basis of further package, it is in the background of front-end solutions that provide more versatility for our module business, so we can better focus on business.

Separate back-end scenario developed in the previous agreement may have been a good data structure, APIspecific business logic not written, often using front-end development to fake data, to ensure that front-end development will not be hindered. Wait until APIafter the true definition of a good initiation request.

False data can achieve some proficiency test, such as "page formatting issues test", "test the boundaries", "Error return test".

Mock Data is analog data, false data.

By Alain-Mock

Ng-Alain MockSolve some of the pain points, no doubt, is to use the Ng-Alainmost frequently used functions of one frame.

Ng-Alain MockSupport GET(such as access to a list of details), POST(eg new projects), PUT(such as modifying the project), DELETE(such as deleting items) request
need only a simple configuration, you can achieve the simulation request, and returns the data. But it does not really initiate Http request.

Angular used in the project Ng-Alain Mock

To use Ng-Alainfirst need to install the dependencies.

1. Install Mockdependencies, see the official website installation method .

2. Under the new project root _mockdirectory, the new task.tsfilling false data, the new index.tsfile is used to export the simulation data file and export task.ts.

_task.ts

export const TASK = {
  'GET /tasks': [
    {
      create_time: '2019-12-10 17:54:53',
      desc: 'test-1',
      id: 1,
      last_update_time: '2019-12-10 17:54:53',
      task_name: 'test-1'
    },
    {
      create_time: '2019-12-10 17:55:53',
      desc: 'test-2',
      id: 2,
      last_update_time: '2019-12-10 17:55:53',
      task_name: 'test-2'
    }
  ],
  '/tasks/1': {
    create_time: '2019-12-10 17:54:53',
    desc: 'test-1',
    id: 1,
    last_update_time: '2019-12-10 17:54:53',
    task_name: 'test-1'
  },
  'POST /tasks': {
    message: '任务创建成功'
  },
  'PUT /tasks/1': {
    message: '任务修改成功'
  },
  'DELETE /tasks/1': {
    message: '任务删除成功'
  },
};

1. New taskcomponents for testing. The key components of the code:

<div>
  <nz-card nzTitle="任务管理">
    <nz-row [nzGutter]="8">
      <button nz-button (click)="createMock()" [nzType]="'primary'">
        <i class="anticon anticon-plus"></i>模拟新建任务
      </button>
    </nz-row>
  </nz-card>

  <nz-card>
    <nz-table
      #nzTable
      nzShowSizeChanger
      [nzData]="_dataSet"
    >
      <thead>
        <tr>
          <th>任务ID</th>
          <th>任务名称</th>
          <th>备注说明</th>
          <th>更新时间</th>
          <th>操作</th>
        </tr>
      </thead>
      <tbody>
        <tr *ngFor="let item of nzTable.data">
          <td>{{ item.id }}</td>
          <td>{{ item.task_name }}</td>
          <td>{{ item.desc }}</td>
          <td>{{ item.last_update_time }}</td>
          <td>
            <a (click)="viewMock(item)">模拟查看任务详情</a>
            <nz-divider nzType="vertical"></nz-divider>
            <a (click)="editMock(item)">模拟编辑任务</a>
            <nz-divider nzType="vertical"></nz-divider>
            <a nz-popconfirm nzTitle="是否删除该任务？" (nzOnConfirm)="deleteMock(item)"
            >模拟删除任务</a
            >
          </td>
        </tr>
      </tbody>
    </nz-table>
  </nz-card>
</div>

1. In taskthe assembly @delon/themeimport _HttpClientservices.

import { _HttpClient } from '@delon/theme';

And injection services.

  ngOnInit() {
    this.getMocks();
  }

  getMocks() {
    this._http.get('/tasks').subscribe(
      res => {
        this._dataSet = res;
      },
      error => {
        this.msg.error('获取模拟任务列表失败');
      }
    );
  }

  createMock() {
    this._http.post('/tasks').subscribe(
      res => {
        this.msg.success(res.message);
      },
      error => {
        this.msg.error('新建模拟任务失败');
      }
    );
  }

  viewMock(item) {
    const viewModal = this.modalService.create({
      nzTitle: `查看任务"${item.task_name}"详情`,
      nzComponentParams: {
        item: item,
      },
      nzContent: ViewComponent
    });
  }

  editMock(item) {
    this._http.put(`/tasks/${item.id}`).subscribe(
      res => {
        this.msg.success(res.message);
      },
      error => {
        this.msg.error('编辑模拟任务失败');
      }
    );
  }

  deleteMock(item) {
    this._http.delete(`/tasks/${item.id}`).subscribe(
      res => {
        this.msg.success(res.message);
      },
      error => {
        this.msg.error('删除模拟任务失败');
      }
    );
  }

1. test

Click to "simulate new task" button as an example, the browser networkdoes not initiate the request, consolethe console has a 'POST /tasks'request and response messages.

In this way, we do not really initiate httpthe request, also implements the business logic. If the data structure prepared in accordance with the agreed specifications, until APIready, comment out _mockthe directory index.tsexported _task.tsfile can initiate a real request.