初探vue3.0 + ts + Arco design pro mock 模拟数据增删改查

arco design pro mock 数据流程

1

/src/mock目录下新建 一个 ts文件 以模块名命名

import Mock from 'mockjs'; // 引入mock模块
// 以及setupMock启动函数  { ... } 是返回参数模板，自定义
import setupMock,{successpageResponseWrap,successdeleteResponseWrap} from '@/utils/setup-mock';


// 模板如下格式    /src/utils/setup-mock  文件中
import debug from './env';

export default ({ mock, setup }: { mock?: boolean; setup: () => void }) => {
  if (mock !== false && debug) setup();
};

export const successResponseWrap = (data: unknown) => {
  return {
    data,
    status: 'ok',
    msg: '请求成功',
    code: 20000,
  };
};
export const successpageResponseWrap = (data: unknown,total:number,msg?:string) => {
  return {
    data,
    total,
    status: 200,
    msg: '请求成功',
    code: 20000,
  };
};
export const successdeleteResponseWrap = (msg:string) => {
  return {
    status: 200,
    msg,
    code: 20000,
  };
};
export const failResponseWrap = (data: unknown, msg: string, code = 50000) => {
  return {
    data,
    status: 'fail',
    msg,
    code,
  };
};

2

在/src/mock/index.ts 中 引入新建的mock模块

import Mock from 'mockjs';

import './user';
import './message-box';
import './userTest' // 新建的mock模块

import '@/views/dashboard/workplace/mock';

Mock.setup({
  timeout: '600-1000',
});

3.数据列表模拟

在新建的mock模块中操作

模拟用户列表

interface Person { // 定义一个 用户 规范接口
  id: number;
  name: string;
  addr: string;
  age: number;
  sex: number;
}

const list: Array<Person> = []; // 定义一个数据源
const count = 40; // 源数据条数   用来配合分页查询
for (let i = 0; i < count; i += 1) { // 动态生成40条随机用户数据
  const person: Person = Mock.mock({
      // 生成规则可以参考文档 ： http://mockjs.com/
    'id': Mock.Random.guid(), 
    'name': Mock.Random.cname(),
    'addr': Mock.mock('@county(true)'),
    'age|18-60': 1,
    'sex': Mock.Random.integer(0, 1),
  });
  list.push(person); // 将生成 接口规范 person 加入列表中
}

// 定义一个分页查询的方法
const getUserList = (config: any) => { 
    // config中的三个参数 
    // body: null
   // type: "GET"
   // url: "http://localhost:8080/api/user/listpage?name=&current=1&size=10"
  const obj = {
    name: '',
    current: 1,
    size: 10,
  };
  const { url } = config;
    // 判断是否存在字符串拼接查询连接
  if (url.indexOf('?') > -1) {
      // 做数据处理，获取查询字段  和 查询数据
    const paramsAry = url.substr(url.indexOf('?') + 1).split('&');
    // 循环数据
    for (let i = 0; i < paramsAry.length; i += 1) {
      const tmp = paramsAry[i].split('=');
      const key = tmp[0];
      const value = tmp[1];
      switch (key) {
        case 'name':
          obj.name = value;
          break;
        case 'current':
          obj.current = parseInt(value, 10);
          break;
        case 'size':
          obj.size = parseInt(value, 10);
          break;
        default:
          break;
      }
    }
  }
    // 获取 总条数 total
  const mockList = list.filter((user) => {
    if (obj.name && user.name.indexOf(obj.name) === -1) return false;
    return true;
  });
// 获取分页查询结果的列表
  const pageList = mockList.filter(
    (item: Person, index: number) =>
      index < obj.size * obj.current && index >= obj.size * (obj.current - 1)
  );
// 通过 返回模板 返回
  return successpageResponseWrap(pageList,mockList.length) 
};

在该模块最后mock地址

setupMock({
  setup() {
    Mock.mock(/\/user\/listpage/, 'get', getUserList); // 在请求前拦截匹配规则的地址，并进行模拟数据
  },
});

并在 api.ts 中 定义调用用户数据列表的方法

export function getUserList(params:Params) {
  return axios.get(`/api/user/listpage?		name=${params.name}&current=${params.current}&size=${params.size}`);
}

在页面引入并调用

根据id删除用户

如上步骤

// 上面的列表已经定义
// 直接编辑已生成的列表进行删除操作
const deleteUser =(config:any) =>{
    // console.log(config,'xxxxx');
    const {url} = config
    if(url.indexOf('?') > -1){
        const query = url.substr(url.indexOf('?') + 1).split('=')
        const id = query[1]
        list.forEach((item,index)=>{
            if(item.id === id){
                list.splice(index,1)
            }
        })
       
    }
    return successdeleteResponseWrap('删除成功')
    
}

// 最后在 setup中一定要   Mock.mock(/\/user\/deleteuser/, 'delete', deleteUser);

添加和更新用户

const updateUser = (config: any) => {
   // config.body  是接口上传的data的json格式，需要转换格式
  const query = JSON.parse(config.body);
    // 判断id （由于id是自动生成的，按照自动生成的id，自己更换判断条件）
    // 没有id的情况下 ，改为添加用户，并在添加之前自动生成一条id
  if (query.id.length === 0) {
    query.id = Mock.Random.guid();
    list.unshift(query);
    return successdeleteResponseWrap('添加成功');
  }
    // 存在id ，就是更新用户
  if (query.id.length > 0) {
    list.forEach((item) => {
      if (item.id === query.id) {
        item = Object.assign(item, query);
      }
    });
    return successdeleteResponseWrap('编辑成功');
  }
  return true
};

setupMock({
  setup() {
			Mock.mock(/\/user\/updateuser/, 'post', updateUser);
      },
});

本人 初学前端，因公司需要使用arco design pro 框架，所以写这篇博客。
如果有大佬有优化建议，可以留言以及私信大家一起交流。