antd pro的底层基础框架使用的是dva,dva采用effect的方式来管理同步化异步

在dva中主要分为3层 services  models  components

models层用于存放数据以及对数据进行操作,services层调用请求后台接口的方法,components层用于书写页面逻辑代码

services层

import request from '@/utils/request';

export async function doit(payload) {

  const {id} = payload;

  let url = `/api/v2/.../${id}`;

  return request(url,{

    mode: 'cors',

    method: 'GET',

  })

    .then(res => {

      return res;

    })

    .catch(err => console.log(err));

}

models层中的effects是与后台交互、处理数据逻辑的地方

import {doit} from '../../'

export default {

  namespace: 'test',

  effects: {

    *fetchNum ({payload,callback},{call,put}) {

      const res = yield call (doit,payload)

      //doit是引入services层那个js文件的doit方法,payload是后台要求传递的参数,res就是后台返过来的数据

      yield put ({

        type: 'addNum', //这就是reducer的addNum方法,put用来出发reducer中的方法,payload是传过去的参数。同时也能触发同等级effects中的方法

        payload: {

           num: res.data    //把后台返回的数据赋值给num,假如哪个reducer中的方法是由这里effects去触发的,哪个num名必须是这里的名字num,如果reducer中的方法不是这触发,那名字可以随意取

        }

      })

    }

  }

  reducers: {

    addNum (state,{payload:{num}}) {

      return {...state,num}

     }

  }

}

components层

页面如果需要使用models层的数据,要用connect进行连接,即在页面在引入import {connect} from 'dva';@connect(state => ({test:state.test})) 通过this.props获取数据

this.props.dispatch({

  type: 'test/fetchNum',   test对应models层的命名空间namespace

  payload: {

    numCount: ++1

  }

})

使用mock数据主要包括以下几步:

1、添加mock接口

2、添加service文件

3、添加model(需引入service函数)

4、页面链接model

5、页面调用model中的effect函数

6、model中的effects通过reducer中的函数将数据返回到页面

7、页面通过this.props获取数据

具体操作就是在项目根目录下,mock文件夹中新建record.js文件,用于存放mock数据

export default {
'GET /love/record':{
message: 'Succeed',
code:0,
data: [
{
key: '1',
Name: '违规操作',
age: '口腔科',
address: '人民医院',
tags: '2019-03-21 12:56:12',
questions: '温度'
},
{
key: '2',
Name: '违规操作',
age: '皮肤科',
address: '人民医院',
tags: '2019-03-21 12:56:12',
questions: '压力'
},
]
}
}

然后在src目录下的services文件夹中新建一个record.js文件,用来创建请求数据的函数,框架已经为我们封装好了request函数(可能需要我们对request.js文件进行补充),我们可以直接进行使用

import request from '../utils/request' ;
export async function getRecord (payload) {
return request('/love/record',{
//如果路径中有参数,需要用字符串模板进行拼接``
method: 'GET'
})
.then(res => {
return res;
}
.catch(err => console.log(err))
}

src目录下的models文件夹是store文件夹,用来定义state

新建record.js文件

引入我们在services文件夹中创建的请求数据的函数

import { getRecord } from '../services/record' ;
export default {
namespace: 'demo',
state:{
record: [],
},
  effects: {
   *getRecord(payload,{call,put}) {
   const res = yield call(getRecord,payload)
   yield put({
   type: 'updateToView',
   payload:{record:res.data}
   });
  }
  },
  reducers: {
   updateToView(state, { payload }) {
   return {
   ...state,
   ...payload,
   }
   }
  }
}

最后在page页面中,通过this.props就可以得到我们想要的数据

import { connect } from 'dva' ;
@connect(state=> ({
demo:state.demo
})
componentDidMount(){
const { dispatch } = this.props;
dispatch({
//需要调用对于namespace下effects中的该函数
type: 'record/getRecord',
})
}
console.log(this.props)就可以得到结果
const { demo } = this.props

我的request.js文件

import fetch from 'dva/fetch';
import { message } from 'antd';
import { error } from '@/utils/error';
const checkStatus = response => {
if (response.status >= 200 && response.status < 300) {
return response;
}
const errortext = error[response.status] || response.statusText;
let isLogin = response.url.search('/unsecure/login') != -1;
if (response.status === 401) {
if (isLogin) {
message.error(`请求错误 ${response.status}: ${errortext}`);
} else {
console.log('gogogo')
router.push('/user/login');
}
} else {
if (!isLogin) {
message.error(`请求错误 ${response.status}: ${errortext}`);
}
}
return response;
};
export default function request(url, option) {
//获取token
let token = localStorage.getItem('token');
const options = {
...option,
headers: {
'X-Authorization': token,
'x-language': 'chinese',
},
};
const newOptions = { ...options, credentials: 'include' };
if (
newOptions.method === 'POST' ||
newOptions.method === 'PUT' ||
newOptions.method === 'DELETE'
) {
if (!(newOptions.body instanceof FormData)) {
newOptions.headers = {
Accept: 'application/json',
'Content-Type': 'application/json; charset=utf-8',
...newOptions.headers,
};
if (newOptions.dataType != 'string') {
newOptions.body = JSON.stringify(newOptions.body);
}
} else {
newOptions.headers = {
Accept: 'application/json',
...newOptions.headers,
};
}
}
return (
fetch(url, newOptions)
.then(checkStatus)
.then(response => {
if (newOptions.responseType === 'blob') {
return response.blob();
}
let type = typeof response;
switch (type) {
case 'object':
return response.json();
case 'string':
return response.text();
}
return response.json();
})
.then(res => {
return res;
})
.catch(e => { })
);
} error.js文件
export default {
 40101: '再输错两次将锁住',
 40200: '用户不存在',
  200: '服务器成功返回请求的数据。',
  201: '新建或修改数据成功。',
  202: '一个请求已经进入后台排队(异步任务)。',
  204: '删除数据成功。',
  400: '发出的请求有错误,服务器没有进行新建或修改数据的操作。',
  401: '用户权限错误。',
  403: '权限信息错误。',
  404: '发出的请求针对的是不存在的记录,服务器没有进行操作。',
  406: '请求的格式不可得。',
  410: '请求的资源被永久删除,且不会再得到的。',
  422: '当创建一个对象时,发生一个验证错误。',
  500: '服务器发生错误,请检查服务器。',
  502: '网关错误。',
  503: '服务不可用,服务器暂时过载或维保。',
  504: '网关超时。',
}

  

antd pro中如何使用mock数据以及调用接口的更多相关文章

  1. yii中的restful方式输出并调用接口和判断用户是否登录状态

    //创建一个控制器接口 返回的是restful方式 <?php namespace frontend\controllers; use frontend\models\Fenlei; use f ...

  2. vue-cli3.x中使用axios发送请求,配合webpack中的devServer编写本地mock数据接口(get/post/put/delete)

    vue-cli3.x中使用axios发送请求,配合webpack中的devServer编写本地mock数据接口(get/post/put/delete) 手把手式笔记 Axios配置 安装 axios ...

  3. 强大的table组件-antd pro table

    概述 antd pro table antd pro table 的主要部分 表格显示的配置(绿色框内) 检索的配置(红色框内) 是否显示检索部分 检索的内容是如何生效的 工具栏的配置(黄色框内) 表 ...

  4. antd pro 路由

    概要 antd pro 路由简介 路由, 菜单和面包屑 页面之间的路由 带参数的路由 总结 概要 路由配置是单页应用的核心之一, antd pro 将所有的路由配置集中在一个文件中, 可以更好的对应用 ...

  5. antd pro table中的文件上传

    概述 示例代码 列表页面 form 页面 model.js service.js 总结 概述 项目中经常会遇到在表格中展示图片的需求(比如展示用户信息时, 有一列是用户的头像). antd pro t ...

  6. vue-cli项目中怎么mock数据

    在vue项目中, mock数据可以使用 node 的 express模块搭建服务 1. 在根目录下创建 test 目录, 用来存放模拟的 json 数据, 在 test 目录下创建模拟的数据 data ...

  7. GPS模块输出的NMEA数据ddmm.mmmm转换成dd.ddddd并在google Earth Pro中描点

      GPS模块输出的数据是NMEA格式,其中GPGGA字段包含我们需要的经纬度信息. 例:$GPGGA,092204.999,4250.5589,S,14718.5084,E,1,04,24.4,12 ...

  8. Electron-vue实战(三)— 如何在Vuex中管理Mock数据

    Electron-vue实战(三)— 如何在Vuex中管理Mock数据 作者:狐狸家的鱼 本文链接:Vuex管理Mock数据 GitHub:sueRimn 在vuex中管理mock数据 关于vuex的 ...

  9. mock 数据 解决方案

    前端工程化之--Mock解决方案   https://www.jianshu.com/p/720b12b5d120 一.为什么要使用mock数据: 1.后端接口数据没有的时候,前端根据接口文档,使用 ...

随机推荐

  1. VS2010下编译配置Boost_1.53

    一.准备工作 1.下载最新版本的boost库.所在地址:boost_1_53_0.zip.官方推荐7z压缩格式的,因为其压缩效率更好,相应包的大小也比较小. 2.解压缩到指定目录,如C:\boost_ ...

  2. 递归导致的StackOverflow的分析

    递归在多层次遍历时尤为重要,这里我们不讲递归的实现,来谈谈递归的内存占用情况. 如下代码,当我们运行时很简单,StackOverflowException瞬间抛出:这里确实是“瞬间”出错了,线程堆栈溢 ...

  3. 多进程界面开发-Qt试玩儿

    目录 一.概述 二.效果展示 三.使用方法 1.启动外部进程 2.创建Qt窗口 3.加入到主进程布局 四.嵌入NotePad 五.调用Ping命令 六.嵌入其他QWidget窗体 七.相关文章 一.概 ...

  4. ChannelPipeline----贯穿io事件处理的大动脉

    ChannelPipeline贯穿io事件处理的大动脉 上一篇,我们分析了NioEventLoop及其相关类的主干逻辑代码,我们知道netty采用线程封闭的方式来避免多线程之间的资源竞争,最大限度地减 ...

  5. asp.net core系列 66 Dapper介绍--Micro-ORM

    一.概述 目前对于.net的数据访问ORM工具很多,EF和EF Core是一个重量级的框架.最近在搭建新的项目架构,来学习一下轻量级的数据访问ORM工具Dapper.Dapper支持SQL Serve ...

  6. Laravel --- 【转】安装调试利器 Laravel Debugbar

    [转]http://www.tuicool.com/articles/qYfmmur 1.简介 Laravel Debugbar 在 Laravel 5 中集成了 PHP Debug Bar ,用于显 ...

  7. .NET开发框架(二)-框架功能简述

    若视频播放不了,请点击 这里查看 本框架为响应式SPA框架,支持PC与手机端的屏幕自适应.手机展示效果视频在文章末尾查看. 框架入口地址:http://letyouknow.net/ 1.框架登录界面 ...

  8. 在java项目启动时就执行某操作

    在java启动时大概有四种,此处只介绍3种 1.在启动的方法上使用通过@PostConstruct方法实现初始化bean进行操作 2.通过bean实现InitializingBean接口 @Overr ...

  9. 从零开始实现ASP.NET Core MVC的插件式开发(二) - 如何创建项目模板

    标题:从零开始实现ASP.NET Core MVC的插件式开发(二) - 如何创建项目模板 作者:Lamond Lu 地址:https://www.cnblogs.com/lwqlun/p/11155 ...

  10. 【原创】面试官:讲讲mysql表设计要注意啥

    引言 近期由于复习了一下mysql的内容,有些心得.随手讲其中一部分知识,都是一些烟哥自己平时工作的总结以及经验.大家看完,其实能避开很多坑.而且很多问题,都是面试中实打实会问到的! 比如 OK,具体 ...