HZERO前端拦截工具和mock工具的使用及实现增删改查接口测试

一、拦截工具

1、安装拦截工具

yarn add @smock/umi-plugin-sproxy -D -W

2、配置

先运行父项目模块生成.smockrc.js文件。

配置该文件，将代理目标改成真实的接口：

 target: "http://172.28.8.102:8080",

配置父项目src/config/env.yml文件；将接口改成拦截工具的接口，允许代理

API_HOST: 'http://localhost:10011'
NO_PROXY: false

3、操作演示

演示前：

启用拦截：

修改编辑内容，然后保存：

重新刷新页面：

如此就实现了拦截操作了。

二、mock工具

1、安装工具

yarn add @smock/umi-plugin-smock -W

2、配置

配置父项目src/config/env.yml文件；将接口改成拦截工具的接口，允许代理

API_HOST: 'http://localhost:8000'
NO_PROXY: false

3、演示操作

自定义mock案例并导入工具中，编辑_mock/index.js:

打开客户端进入测试界面：

使用集成的工具测试_mock文件夹下的自定义mock案例接口

返回结果

调用成功.

三、利用mock工具实现增删改查操作

1、mock案例

文件_mock/mydemo/index.js

const mockjs = require('mockjs');

global.mockdataDS  = [{
  userid: 1,
  age: 25,
  sex: 'F',
  organizationId: 0,
  name: '超级管理员',
  enable: true,
  tenantId: 0
}];

module.exports = {
  'GET /mydemo/hzero/v1/users/self': (req, res) => {
    res.setHeader(
      'Access-Control-Allow-Headers',
      'Content-Type, X-Requested-With,Access-Control-Allow-Headers'
    );

    const d = mockjs.mock(global.mockdataDS);
    res.json(d);
  },
  'PUT /mydemo/hzero/v1/users/put': (req, res) => {
    if (req !== undefined && req !== null) {
      console.log('req------------------------->', req.body, req.url);
      global.mockdataDS=[ ...global.mockdataDS, ...req.body];
    }
    res.json([]);
  },
  'POST /mydemo/hzero/v1/users/put/:tid': (req, res) => {
    if (req !== undefined && req !== null) {
      console.log('req------------------------->', req.body, req.url, req.params.tid);
      for(let i in global.mockdataDS){
        if(global.mockdataDS[i].userid===req.params.tid){
          global.mockdataDS[i] = req.body;
        }
      }
    }
    res.json([]);
  },
  'DELETE /mydemo/hzero/v1/users/delete': (req, res) => {
    if (req !== undefined && req !== null) {
      console.log('req------------------------->', req.body, req.url, req.params.tid);
      for(let j in req.body){
        global.mockdataDS = global.mockdataDS.filter(res => res.userid !== req.body[j].userid);
      }
    }
    res.json([]);
  },
};

2、表格控件案例

案例表绑定的DateSet

import { FieldType } from 'choerodon-ui/pro/lib/data-set/enum';
import { DataSet } from 'choerodon-ui/pro';

const sexOptionDs = new DataSet({
  selection: 'single',
  data: [
      {value: 'F', meaning: '女'},
      {value: 'M', meaning: '男'},
  ],
});

const getTableDsProps = () => ({
  primaryKey: 'userid',
  autoQuery: true,
  pageSize: 5,
  transport: {
    read: {
      url: '/mydemo/hzero/v1/users/self',
      method: 'get'
    },
    create: {
      url: '/mydemo/hzero/v1/users/put',
      method: 'put',
    },
    update: ({ data }) =>
      data.length
        ? {
            url: `/mydemo/hzero/v1/users/put/${data[0].userid}`,
            data: data[0],
          }
        : null,
    destroy: {
      url: '/mydemo/hzero/v1/users/delete',
      method: 'delete',
    },
  },
  queryFields: [
    {
      name: 'userid',
      type: FieldType.string,
      label: '编号',
    },
    {
      name: 'name',
      type: FieldType.string,
      label: '姓名',
    },
  ],
  fields: [
    {
      name: 'userid',
      type: FieldType.string,
      label: '编号',
      required: true,
    },
    {
      name: 'name',
      type: FieldType.string,
      label: '姓名',
    },
    {
      name: 'age',
      type: FieldType.number,
      label: '年龄',
      max: 100,
      step: 1,
    },
    {
      name: 'sex',
      type: FieldType.string,
      label: '性别',
      options: sexOptionDs,
      required: true,
    },
    {
      name: 'enable',
      type: FieldType.boolean,
      label: '是否开启',
    },
  ],
  events: {
    submit: ({ data }) => console.log('submit data', data),
    query: ({ params, data }) =>
      console.log('user query parameter', params, data),
  },
});

export default getTableDsProps;

对应控件

import { Table, DataSet } from 'choerodon-ui/pro';
import React, { useMemo } from 'react';
import {
  ColumnLock,
  ColumnAlign,
  TableButtonType,
  TableCommandType,
  TableEditMode,
} from 'choerodon-ui/pro/lib/table/enum';
import getTableDSProps from './tableDataSet';

const TableList = () => {
  const tableDs = useMemo(() => new DataSet(getTableDSProps()), []);
  return (
    <Table
      dataSet={tableDs}
      editMode={TableEditMode.inline}
      buttons={[TableButtonType.delete,TableButtonType.add]}
      queryFieldsLimit={2}
      columns={[
        {
          name: 'userid',
          editor: true,
        },
        {
          name: 'name',
          editor: true,
        },
        {
          name: 'age',
          editor: true,
        },
        {
          name: 'sex',
          editor: true,
        },
        {
          name: 'enable',
          editor: true,
        },
        {
          header: '操作',
          align: ColumnAlign.center,
          command: [TableCommandType.edit],
          lock: ColumnLock.right,
        },
      ]}
    />
  );
};

export default TableList;

3、调用演示

查询演示：

新增演示：

修改演示：

修改后

删除演示：

删除后

到这里增删改查演示完成