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、操作演示
演示前:
启用拦截:
修改编辑内容,然后保存:
重新刷新页面:
如此就实现了拦截操作了。
二、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、调用演示
查询演示:
新增演示:
修改演示:
修改后
删除演示:
删除后
到这里增删改查演示完成
上一篇: 详解mysql表数据压缩
下一篇: VS code使用