antd 进行ajax请求,react+dva+antd接口调用方式

一丶 安装

通过 npm 安装 dva-cli 并确保版本是0.8.1或以上。

$ npm install dva-cli -g

$ dva -v

0.8.1

二丶创建新应用

安装完dva-cli之后，就可以在命令行里访问到dva命令(不能访问？)。现在，你可以通过dva new创建新应用。

$ dva new dva-quickstart

$ npm start

之后浏览器就会打开 http://localhost:8000，你会看到dva的欢迎界面。

三丶使用antd组件库

通过 npm 安装 antd 和 babel-plugin-import。babel-plugin-import 是用来按需加载 antd 的脚本和样式的

$ npm install antd babel-plugin-import --save

编辑.roadhogrc，使 babel-plugin-import 插件生效。

"extraBabelPlugins": [

- "transform-runtime"

+ "transform-runtime",

+ ["import", { "libraryName": "antd", "style": "css" }]

],

注：dva-cli 基于 roadhog 实现 build 和 server，更多.roadhogrc的配置详见 roadhog#配置

四丶准备工作以及文件之间的对应关系

首先在创建文件之前(一般安装的时候系统会自动生成一个默认的services文件下 Example.js 和 model文件下 example.js，两者都是一一对应)

react项目的推荐目录结构(如果使用dva脚手架创建，则自动生成如下)

|── /mock/ # 数据mock的接口文件

|── /src/ # 项目源码目录(我们开发的主要工作区域)

| |── /components/ # 项目组件(用于路由组件内引用的可复用组件)

| |── /routes/ # 路由组件(页面维度)

| | |── route1.js

| | |── route2.js # 根据router.js中的映射，在不同的url下，挂载不同的路由组件

| | └── route3.js