欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

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

程序员文章站 2022-06-17 17:20:01
...

一、拦截工具

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、操作演示

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

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

修改编辑内容,然后保存:

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

重新刷新页面:HZERO前端拦截工具和mock工具的使用及实现增删改查接口测试

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

二、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:
HZERO前端拦截工具和mock工具的使用及实现增删改查接口测试
HZERO前端拦截工具和mock工具的使用及实现增删改查接口测试

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

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

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

HZERO前端拦截工具和mock工具的使用及实现增删改查接口测试
返回结果
HZERO前端拦截工具和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、调用演示

查询演示:

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

新增演示:

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

修改演示:

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

修改后

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

删除演示:

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

删除后

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

到这里增删改查演示完成