New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

12 步 30 分钟,完成用户管理的 CURD 应用 (react+dva+antd) #18

Open
sorrycc opened this Issue Dec 21, 2016 · 339 comments

Comments

Projects
None yet
@sorrycc
Owner

sorrycc commented Dec 21, 2016

本文仅适用于 dva@1,dva@2 的文档请移步 #62
本文仅适用于 dva@1,dva@2 的文档请移步 #62
本文仅适用于 dva@1,dva@2 的文档请移步 #62

本文会一步步引导大家如何创建一个 CURD 应用,包含查询、编辑、删除、创建,以及分页处理,数据 mock,自动处理 loading 状态等,基于 react, dvaantd

最终效果:

开始之前:

  • 确保 node 版本是 6.5 +
  • cnpmyarn 能节约你安装依赖的时间

Step 1. 安装 dva-cli 并创建应用

先安装 dva-cli,并确保版本是 0.7.x。

$ npm i dva-cli@0.7 -g
$ dva -v
0.7.0

然后创建应用:

$ dva new user-dashboard
$ cd user-dashboard 

Step 2. 配置 antdbabel-plugin-import

babel-plugin-import 用于按需引入 antd 的 JavaScript 和 CSS,这样打包出来的文件不至于太大。

$ npm i antd --save
$ npm i babel-plugin-import --save-dev

修改 .roadhogrc,在 "extraBabelPlugins" 里加上:

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

Step 3. 配置代理,能通过 RESTFul 的方式访问 http://localhost:8000/api/users

修改 .roadhogrc,加上 "proxy" 配置:

"proxy": {
  "/api": {
    "target": "http://jsonplaceholder.typicode.com/",
    "changeOrigin": true,
    "pathRewrite": { "^/api" : "" }
  }
},

然后启动应用:(这个命令一直开着,后面不需要重启)

$ npm start

浏览器会自动开启,并打开 http://localhost:8000

访问 http://localhost:8000/api/users ,就能访问到 http://jsonplaceholder.typicode.com/users 的数据。(由于 typicode.com 服务的稳定性,偶尔可能会失败。不过没关系,正好便于我们之后对于出错的处理)

Step 4. 生成 users 路由

用 dva-cli 生成路由:

$ dva g route users

然后访问 http://localhost:8000/#/users

Step 5. 构造 users model 和 service

用 dva-cli 生成 Model :

$ dva g model users

修改 src/models/users.js

import * as usersService from '../services/users';

export default {
  namespace: 'users',
  state: {
    list: [],
    total: null,
  },
  reducers: {
    save(state, { payload: { data: list, total } }) {
      return { ...state, list, total };
    },
  },
  effects: {
    *fetch({ payload: { page } }, { call, put }) {
      const { data, headers } = yield call(usersService.fetch, { page });
      yield put({ type: 'save', payload: { data, total: headers['x-total-count'] } });
    },
  },
  subscriptions: {
    setup({ dispatch, history }) {
      return history.listen(({ pathname, query }) => {
        if (pathname === '/users') {
          dispatch({ type: 'fetch', payload: query });
        }
      });
    },
  },
};

新增 src/services/users.js

import request from '../utils/request';

export function fetch({ page = 1 }) {
  return request(`/api/users?_page=${page}&_limit=5`);
}

由于我们需要从 response headers 中获取 total users 数量,所以需要改造下 src/utils/request.js

import fetch from 'dva/fetch';

function checkStatus(response) {
  if (response.status >= 200 && response.status < 300) {
    return response;
  }

  const error = new Error(response.statusText);
  error.response = response;
  throw error;
}

/**
 * Requests a URL, returning a promise.
 *
 * @param  {string} url       The URL we want to request
 * @param  {object} [options] The options we want to pass to "fetch"
 * @return {object}           An object containing either "data" or "err"
 */
export default async function request(url, options) {
  const response = await fetch(url, options);

  checkStatus(response);

  const data = await response.json();

  const ret = {
    data,
    headers: {},
  };

  if (response.headers.get('x-total-count')) {
    ret.headers['x-total-count'] = response.headers.get('x-total-count');
  }

  return ret;
}

切换到浏览器(会自动刷新),应该没任何变化,因为数据虽然好了,但并没有视图与之关联。但是打开 Redux 开发者工具,应该可以看到 users/fetchusers/save 的 action 以及相关的 state 。

Step 6. 添加界面,让用户列表展现出来

用 dva-cli 生成 component:

$ dva g component Users/Users

然后修改生成出来的 src/components/Users/Users.jssrc/components/Users/Users.css,并在 src/routes/Users.js 中引用他。具体参考这个 Commit

需留意两件事:

  1. 对 model 进行了微调,加入了 page 表示当前页
  2. 由于 components 和 services 中都用到了 pageSize,所以提取到 src/constants.js

改完后,切换到浏览器,应该能看到带分页的用户列表。

Step 7. 添加 layout

添加 layout 布局,使得我们可以在首页和用户列表页之间来回切换。

  1. 添加布局,src/components/MainLayout/MainLayout.js 和 CSS 文件
  2. src/routes 文件夹下的文件中引用这个布局

参考这个 Commit

注意:

  1. 页头的菜单会随着页面切换变化,高亮显示当前页所在的菜单项

Step 8. 通过 dva-loading 处理 loading 状态

dva 有一个管理 effects 执行的 hook,并基于此封装了 dva-loading 插件。通过这个插件,我们可以不必一遍遍地写 showLoading 和 hideLoading,当发起请求时,插件会自动设置数据里的 loading 状态为 true 或 false 。然后我们在渲染 components 时绑定并根据这个数据进行渲染。

先安装 dva-loading :

$ npm i dva-loading --save

修改 src/index.js 加载插件,在合适的地方加入下面两句:

+ import createLoading from 'dva-loading';
+ app.use(createLoading());

然后在 src/components/Users/Users.js 里绑定 loading 数据:

+ loading: state.loading.models.users,

具体参考这个 Commit

切换到浏览器,你的用户列表有 loading 了没?

Step 9. 处理分页

只改一个文件 src/components/Users/Users.js 就好。

处理分页有两个思路:

  1. 发 action,请求新的分页数据,保存到 model,然后自动更新页面
  2. 切换路由 (由于之前监听了路由变化,所以后续的事情会自动处理)

我们用的是思路 2 的方式,好处是用户可以直接访问到 page 2 或其他页面。

参考这个 Commit

Step 10. 处理用户删除

经过前面的 9 步,应用的整体脉络已经清晰,相信大家已经对整体流程也有了一定了解。

后面的功能调整基本都可以按照以下三步进行:

  1. service
  2. model
  3. component

我们现在开始增加用户删除功能。

  1. service, 修改 src/services/users.js
export function remove(id) {
  return request(`/api/users/${id}`, {
    method: 'DELETE',
  });
}
  1. model, 修改 src/models/users.js
*remove({ payload: id }, { call, put, select }) {
  yield call(usersService.remove, id);
  const page = yield select(state => state.users.page);
  yield put({ type: 'fetch', payload: { page } });
},
  1. component, 修改 src/components/Users/Users.js,替换 deleteHandler 内容:
dispatch({
  type: 'users/remove',
  payload: id,
});

切换到浏览器,删除功能应该已经生效。

Step 11. 处理用户编辑

处理用户编辑和前面的一样,遵循三步走:

  1. service
  2. model
  3. component

先是 service,修改 src/services/users.js

export function patch(id, values) {
  return request(`/api/users/${id}`, {
    method: 'PATCH',
    body: JSON.stringify(values),
  });
}

再是 model,修改 src/models/users.js

*patch({ payload: { id, values } }, { call, put, select }) {
  yield call(usersService.patch, id, values);
  const page = yield select(state => state.users.page);
  yield put({ type: 'fetch', payload: { page } });
},

最后是 component,详见 Commit

需要注意的一点是,我们在这里如何处理 Modal 的 visible 状态,有几种选择:

  1. 存 dva 的 model state 里
  2. 存 component state 里

另外,怎么存也是个问题,可以:

  1. 只有一个 visible,然后根据用户点选的 user 填不同的表单数据
  2. 几个 user 几个 visible

此教程选的方案是 2-2,即存 component state,并且 visible 按 user 存。另外为了使用的简便,封装了一个 UserModal 的组件。

完成后,切换到浏览器,应该就能对用户进行编辑了。

Step 12. 处理用户创建

相比用户编辑,用户创建更简单些,因为可以共用 UserModal 组件。和 Step 11 比较类似,就不累述了,详见 Commit


到这里,我们已经完成了一个完整的 CURD 应用。但仅仅是完成,并不完善,比如:

  • 如何处理错误,比如请求等
  • 如何处理请求超时
  • 如何根据路由动态加载 JS 和 CSS
  • ...

请期待下一篇。

(完)

@sorrycc sorrycc added the DvaJS label Dec 21, 2016

@sorrycc sorrycc changed the title from 12 步 30 分钟,完成用户管理的 CURD 应用 (React+Dva+Antd) to 12 步 30 分钟,完成用户管理的 CURD 应用 (react+dva+antd) Dec 21, 2016

@afc163 afc163 referenced this issue Dec 21, 2016

Closed

scaffold market #4219

@JimmyLv

This comment has been minimized.

Show comment
Hide comment
@JimmyLv

JimmyLv Dec 21, 2016

简直好用到哭,😂

JimmyLv commented Dec 21, 2016

简直好用到哭,😂

@wuyunge

This comment has been minimized.

Show comment
Hide comment
@wuyunge

wuyunge Dec 22, 2016

这就是我想要的东西~👍👍👍

wuyunge commented Dec 22, 2016

这就是我想要的东西~👍👍👍

@wuyunge

This comment has been minimized.

Show comment
Hide comment
@wuyunge

wuyunge Dec 22, 2016

期待下一篇~

wuyunge commented Dec 22, 2016

期待下一篇~

@MaYing929

This comment has been minimized.

Show comment
Hide comment
@MaYing929

MaYing929 Dec 23, 2016

dispatch(routerRedux.push({
pathname: '/users',
query: { page },
}));

routerRedux 可以直接切换路由?
如果是这样的话 也太方便的吧 之前是从最终的组件一直disptach行为

MaYing929 commented Dec 23, 2016

dispatch(routerRedux.push({
pathname: '/users',
query: { page },
}));

routerRedux 可以直接切换路由?
如果是这样的话 也太方便的吧 之前是从最终的组件一直disptach行为

@sorrycc

This comment has been minimized.

Show comment
Hide comment
@sorrycc

sorrycc Dec 23, 2016

Owner

routerRedux.push() 返回的是 action,然后把他让 dispatch 调用下就可以切换路由了。

Owner

sorrycc commented Dec 23, 2016

routerRedux.push() 返回的是 action,然后把他让 dispatch 调用下就可以切换路由了。

@haobingwang

This comment has been minimized.

Show comment
Hide comment
@haobingwang

haobingwang Dec 23, 2016

👍 最近文档更新的越来越易读了

haobingwang commented Dec 23, 2016

👍 最近文档更新的越来越易读了

@linyongping

This comment has been minimized.

Show comment
Hide comment
@linyongping

linyongping Dec 24, 2016

期待新作,,,

linyongping commented Dec 24, 2016

期待新作,,,

@linyongping

This comment has been minimized.

Show comment
Hide comment
@linyongping

linyongping Dec 24, 2016

现在的项目在用是 dva 0.60,,可以直接升级到0.70吗

linyongping commented Dec 24, 2016

现在的项目在用是 dva 0.60,,可以直接升级到0.70吗

@sorrycc

This comment has been minimized.

Show comment
Hide comment
@sorrycc

sorrycc Dec 24, 2016

Owner

@linyongping dva-cli@0.6 ? 到 0.7 主要是工具的变动,要换到 roadhog,可以参考 #17

Owner

sorrycc commented Dec 24, 2016

@linyongping dva-cli@0.6 ? 到 0.7 主要是工具的变动,要换到 roadhog,可以参考 #17

@gitoneman

This comment has been minimized.

Show comment
Hide comment
@gitoneman

gitoneman Dec 25, 2016

image
请问要支持await还需要配置什么吗

gitoneman commented Dec 25, 2016

image
请问要支持await还需要配置什么吗

@sorrycc

This comment has been minimized.

Show comment
Hide comment
@sorrycc

sorrycc Dec 25, 2016

Owner

@gitoneman await 必须在 async 函数里。

Owner

sorrycc commented Dec 25, 2016

@gitoneman await 必须在 async 函数里。

@gitoneman

This comment has been minimized.

Show comment
Hide comment
@gitoneman

gitoneman Dec 25, 2016

@sorrycc 谢谢,对await不熟悉

gitoneman commented Dec 25, 2016

@sorrycc 谢谢,对await不熟悉

@kernelogic

This comment has been minimized.

Show comment
Hide comment
@kernelogic

kernelogic Dec 27, 2016

请问npm start出现这个错误

`npm start

@ start /Users/feiya200/Documents/user-dashboard
roadhog server

/Users/feiya200/Documents/user-dashboard/node_modules/roadhog/bin/roadhog.js:9
const [major, minor] = nodeVersion.split('.');
^

SyntaxError: Unexpected token [
at exports.runInThisContext (vm.js:53:16)
at Module._compile (module.js:373:25)
at Object.Module._extensions..js (module.js:416:10)
at Module.load (module.js:343:32)
at Function.Module._load (module.js:300:12)
at Function.Module.runMain (module.js:441:10)
at startup (node.js:139:18)
at node.js:990:3

npm ERR! Darwin 15.6.0
npm ERR! argv "/usr/local/Cellar/node@4/4.7.0/bin/node" "/usr/local/bin/npm" "start"
npm ERR! node v4.7.0
npm ERR! npm v2.15.9
npm ERR! code ELIFECYCLE
npm ERR! @ start: roadhog server
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the @ start script 'roadhog server'.
npm ERR! This is most likely a problem with the package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR! roadhog server
npm ERR! You can get information on how to open an issue for this project with:
npm ERR! npm bugs
npm ERR! Or if that isn't available, you can get their info via:
npm ERR!
npm ERR! npm owner ls
npm ERR! There is likely additional logging output above.

npm ERR! Please include the following file with any support request:
npm ERR! /Users/feiya200/Documents/user-dashboard/npm-debug.log
`

kernelogic commented Dec 27, 2016

请问npm start出现这个错误

`npm start

@ start /Users/feiya200/Documents/user-dashboard
roadhog server

/Users/feiya200/Documents/user-dashboard/node_modules/roadhog/bin/roadhog.js:9
const [major, minor] = nodeVersion.split('.');
^

SyntaxError: Unexpected token [
at exports.runInThisContext (vm.js:53:16)
at Module._compile (module.js:373:25)
at Object.Module._extensions..js (module.js:416:10)
at Module.load (module.js:343:32)
at Function.Module._load (module.js:300:12)
at Function.Module.runMain (module.js:441:10)
at startup (node.js:139:18)
at node.js:990:3

npm ERR! Darwin 15.6.0
npm ERR! argv "/usr/local/Cellar/node@4/4.7.0/bin/node" "/usr/local/bin/npm" "start"
npm ERR! node v4.7.0
npm ERR! npm v2.15.9
npm ERR! code ELIFECYCLE
npm ERR! @ start: roadhog server
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the @ start script 'roadhog server'.
npm ERR! This is most likely a problem with the package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR! roadhog server
npm ERR! You can get information on how to open an issue for this project with:
npm ERR! npm bugs
npm ERR! Or if that isn't available, you can get their info via:
npm ERR!
npm ERR! npm owner ls
npm ERR! There is likely additional logging output above.

npm ERR! Please include the following file with any support request:
npm ERR! /Users/feiya200/Documents/user-dashboard/npm-debug.log
`

@sorrycc

This comment has been minimized.

Show comment
Hide comment
@sorrycc

sorrycc Dec 27, 2016

Owner

node 版本要求 6.5 或以上。

Owner

sorrycc commented Dec 27, 2016

node 版本要求 6.5 或以上。

@kernelogic

This comment has been minimized.

Show comment
Hide comment
@kernelogic

kernelogic commented Dec 27, 2016

oops

@llqgit

This comment has been minimized.

Show comment
Hide comment
@llqgit

llqgit Dec 28, 2016

请问,我想配置端口怎么设置?因为本地想开多个 dva 项目,但是改不了端口。
npm start 改成这个了:

"start": "dora --plugins \"proxy?port=8089&watchDirs=./mock,webpack,webpack-hmr\""

但是还有个 8000 端口

...
          proxy: listened on 8089
Caught exception: Error: listen EADDRINUSE :::8000
...

@sorrycc

llqgit commented Dec 28, 2016

请问,我想配置端口怎么设置?因为本地想开多个 dva 项目,但是改不了端口。
npm start 改成这个了:

"start": "dora --plugins \"proxy?port=8089&watchDirs=./mock,webpack,webpack-hmr\""

但是还有个 8000 端口

...
          proxy: listened on 8089
Caught exception: Error: listen EADDRINUSE :::8000
...

@sorrycc

@sorrycc

This comment has been minimized.

Show comment
Hide comment
@sorrycc

sorrycc Dec 28, 2016

Owner

@llqgit 参考 #17 切换到 roadhog,然后 PORT=8001 npm start 就好了。

Owner

sorrycc commented Dec 28, 2016

@llqgit 参考 #17 切换到 roadhog,然后 PORT=8001 npm start 就好了。

@llqgit

This comment has been minimized.

Show comment
Hide comment
@llqgit

llqgit commented Dec 28, 2016

@sorrycc 好,谢谢

@MelissaHu

This comment has been minimized.

Show comment
Hide comment
@MelissaHu

MelissaHu Dec 28, 2016

报错,npm start之后~~~
Failed to compile.
Error in ./src/index.js
Module build failed: Error: Plugin 3 specified in "base" provided an invalid property of "libraryName"
at Array.map (native)
@ multi index

MelissaHu commented Dec 28, 2016

报错,npm start之后~~~
Failed to compile.
Error in ./src/index.js
Module build failed: Error: Plugin 3 specified in "base" provided an invalid property of "libraryName"
at Array.map (native)
@ multi index

@sorrycc

This comment has been minimized.

Show comment
Hide comment
Owner

sorrycc commented Dec 28, 2016

@TFous

This comment has been minimized.

Show comment
Hide comment
@TFous

TFous Dec 29, 2016

想问下,为什么打包之后页面不能正常访问了。

TFous commented Dec 29, 2016

想问下,为什么打包之后页面不能正常访问了。

@sorrycc

This comment has been minimized.

Show comment
Hide comment
@sorrycc

sorrycc Dec 29, 2016

Owner

@TFous 如果是用的 browserHistory,打包后需要放根目录路由才会匹配到。

Owner

sorrycc commented Dec 29, 2016

@TFous 如果是用的 browserHistory,打包后需要放根目录路由才会匹配到。

@leduold

This comment has been minimized.

Show comment
Hide comment
@leduold

leduold Dec 29, 2016

payload的传参不知道到怎么在model里面获取到的。

leduold commented Dec 29, 2016

payload的传参不知道到怎么在model里面获取到的。

@xuya227939

This comment has been minimized.

Show comment
Hide comment
@xuya227939

xuya227939 Mar 23, 2018

step 4的时候提示了这个 😢 dva generate is disabled since we don't have enough time currently. 请问这个是什么意思?

xuya227939 commented Mar 23, 2018

step 4的时候提示了这个 😢 dva generate is disabled since we don't have enough time currently. 请问这个是什么意思?

@suxu

This comment has been minimized.

Show comment
Hide comment
@suxu

suxu Mar 29, 2018

😢 dva generate is disabled since we don't have enough time currently.

suxu commented Mar 29, 2018

😢 dva generate is disabled since we don't have enough time currently.

@Performm

This comment has been minimized.

Show comment
Hide comment
@Performm

Performm commented Mar 31, 2018

好用

@HJkevin

This comment has been minimized.

Show comment
Hide comment
@HJkevin

HJkevin Apr 3, 2018

到第六步了 为什么我的没有样式呢?各位大佬可否有解决办法

HJkevin commented Apr 3, 2018

到第六步了 为什么我的没有样式呢?各位大佬可否有解决办法

@manuo123

This comment has been minimized.

Show comment
Hide comment
@manuo123

manuo123 Apr 9, 2018

可以将这个项目加入ssr功能吗?目前网上存在的ssr看着很吃力啊

manuo123 commented Apr 9, 2018

可以将这个项目加入ssr功能吗?目前网上存在的ssr看着很吃力啊

@22Adonia

This comment has been minimized.

Show comment
Hide comment
@22Adonia

22Adonia Apr 19, 2018

dva g 功能不维护了,会影响后续使用吗

22Adonia commented Apr 19, 2018

dva g 功能不维护了,会影响后续使用吗

@lyl1994

This comment has been minimized.

Show comment
Hide comment
@lyl1994

lyl1994 May 11, 2018

您好,我是在win7环境下安装的项目,并且node版本是在6.5+, 但还是有下面这个问题。
0of6i9v9tcu0 p3gwsf 7l

lyl1994 commented May 11, 2018

您好,我是在win7环境下安装的项目,并且node版本是在6.5+, 但还是有下面这个问题。
0of6i9v9tcu0 p3gwsf 7l

@luoyy2013

This comment has been minimized.

Show comment
Hide comment
@luoyy2013

luoyy2013 May 17, 2018

我是写服务器的,我想问下,形如
image
这种API,服务器怎么处理啊?进来的是一个POST然后body里面又有method,怎么拿到body内容啊?

luoyy2013 commented May 17, 2018

我是写服务器的,我想问下,形如
image
这种API,服务器怎么处理啊?进来的是一个POST然后body里面又有method,怎么拿到body内容啊?

@joriewong

This comment has been minimized.

Show comment
Hide comment
@joriewong

joriewong May 18, 2018

@luoyy2013 new FormData() or JSON.stringify()

joriewong commented May 18, 2018

@luoyy2013 new FormData() or JSON.stringify()

@luoyy2013

This comment has been minimized.

Show comment
Hide comment
@luoyy2013

luoyy2013 May 18, 2018

java后台服务器啊,我试了很多拿参数的方法,都没拿到。

luoyy2013 commented May 18, 2018

java后台服务器啊,我试了很多拿参数的方法,都没拿到。

@luoyy2013

This comment has been minimized.

Show comment
Hide comment
@luoyy2013

luoyy2013 commented May 18, 2018

@joriewong

This comment has been minimized.

Show comment
Hide comment
@joriewong

joriewong May 18, 2018

@luoyy2013 request有问题

joriewong commented May 18, 2018

@luoyy2013 request有问题

@zhangjianglong

This comment has been minimized.

Show comment
Hide comment
@zhangjianglong

zhangjianglong May 25, 2018

电脑 Mac
版本
dva-cli version 0.9.2
dva version 2.2.3
roadhog version 2.4.2
第三步 报错

@ start /Users/long/Desktop/joinsoft/test/user-dashboard
roadhog server

Failed to compile.

Cannot read property '0' of undefined

zhangjianglong commented May 25, 2018

电脑 Mac
版本
dva-cli version 0.9.2
dva version 2.2.3
roadhog version 2.4.2
第三步 报错

@ start /Users/long/Desktop/joinsoft/test/user-dashboard
roadhog server

Failed to compile.

Cannot read property '0' of undefined

@xiaohuoni

This comment has been minimized.

Show comment
Hide comment
@xiaohuoni

xiaohuoni May 25, 2018

@zhangjianglong 把roadhog装到项目中,应该可以解决这个问题

xiaohuoni commented May 25, 2018

@zhangjianglong 把roadhog装到项目中,应该可以解决这个问题

@kwzm

This comment has been minimized.

Show comment
Hide comment
@kwzm

kwzm May 29, 2018

您好,我想问下,我用dva-cli@0.9.2创建项目,没有找到.roadhogrc,是不是新版本移除了这个配置文件呢,那要配置antd组件按需加载去哪配置呢?

kwzm commented May 29, 2018

您好,我想问下,我用dva-cli@0.9.2创建项目,没有找到.roadhogrc,是不是新版本移除了这个配置文件呢,那要配置antd组件按需加载去哪配置呢?

@joriewong

This comment has been minimized.

Show comment
Hide comment
@joriewong

joriewong May 29, 2018

@kwzm .webpackrc

"extraBabelPlugins": [
    ["import", { "libraryName": "antd", "style": true }]
  ]

joriewong commented May 29, 2018

@kwzm .webpackrc

"extraBabelPlugins": [
    ["import", { "libraryName": "antd", "style": true }]
  ]
@Mojianshou

This comment has been minimized.

Show comment
Hide comment
@Mojianshou

Mojianshou Jun 1, 2018

step 4的时候提示了这个 cry dva generate is disabled since we don't have enough time currently. 请问这个是什么意思?谢谢大牛

Mojianshou commented Jun 1, 2018

step 4的时候提示了这个 cry dva generate is disabled since we don't have enough time currently. 请问这个是什么意思?谢谢大牛

@russellzhd

This comment has been minimized.

Show comment
Hide comment
@russellzhd

russellzhd Jun 11, 2018

这个如何指定默认的路由跳转,就是npm start后指定跳转其他的路由而不是'/'路由 @sorrycc

russellzhd commented Jun 11, 2018

这个如何指定默认的路由跳转,就是npm start后指定跳转其他的路由而不是'/'路由 @sorrycc

@joriewong

This comment has been minimized.

Show comment
Hide comment
@joriewong

joriewong Jun 25, 2018

请问如果是离线react、react-dom要怎么引入呢?

joriewong commented Jun 25, 2018

请问如果是离线react、react-dom要怎么引入呢?

@joriewong

This comment has been minimized.

Show comment
Hide comment
@joriewong

joriewong Jun 26, 2018

<script src="https://unpkg.com/react@16.0.0/umd/react.production.min.js"></script>
<script>!window.React && document.write("<script src=\"react.production.min.js\">" + "<\/script>")</script>
<script src="https://unpkg.com/react-dom@16.0.0/umd/react-dom.production.min.js"></script>
<script>!window.ReactDOM && document.write("<script src=\"react-dom.production.min.js\">" + "<\/script>")</script>

joriewong commented Jun 26, 2018

<script src="https://unpkg.com/react@16.0.0/umd/react.production.min.js"></script>
<script>!window.React && document.write("<script src=\"react.production.min.js\">" + "<\/script>")</script>
<script src="https://unpkg.com/react-dom@16.0.0/umd/react-dom.production.min.js"></script>
<script>!window.ReactDOM && document.write("<script src=\"react-dom.production.min.js\">" + "<\/script>")</script>
@wongmeng

This comment has been minimized.

Show comment
Hide comment
@wongmeng

wongmeng Jul 11, 2018

谢谢 分享!您的分享对我的学习很有帮助!

wongmeng commented Jul 11, 2018

谢谢 分享!您的分享对我的学习很有帮助!

@LIUeng

This comment has been minimized.

Show comment
Hide comment
@LIUeng

LIUeng Jul 12, 2018

你好 我没有使用umi框架,单独使用dva脚手架搭建的 我想问一下关于history对象, subscriptions中 history.listen 函数监听 query参数 为undefined,导致无法发送action,求解决办法

LIUeng commented Jul 12, 2018

你好 我没有使用umi框架,单独使用dva脚手架搭建的 我想问一下关于history对象, subscriptions中 history.listen 函数监听 query参数 为undefined,导致无法发送action,求解决办法

@wingsico

This comment has been minimized.

Show comment
Hide comment
@wingsico

wingsico Jul 17, 2018

path: "models/users"
error: " -> subscriptions -> history.listen -> |query|" query 不存在,导致page是undefined

wingsico commented Jul 17, 2018

path: "models/users"
error: " -> subscriptions -> history.listen -> |query|" query 不存在,导致page是undefined

@joriewong

This comment has been minimized.

Show comment
Hide comment
@joriewong

joriewong Jul 17, 2018

@wingsico

subscriptions: {
  setup({ dispatch, history }) {
      return history.listen(({ pathname, search }) => {
        const query = queryString.parse(search);
        if (pathname === '/users') {
          dispatch({ type: 'fetch', payload: query });
        }
      });
    },
  },

joriewong commented Jul 17, 2018

@wingsico

subscriptions: {
  setup({ dispatch, history }) {
      return history.listen(({ pathname, search }) => {
        const query = queryString.parse(search);
        if (pathname === '/users') {
          dispatch({ type: 'fetch', payload: query });
        }
      });
    },
  },
@hahaha12356

This comment has been minimized.

Show comment
Hide comment
@hahaha12356

hahaha12356 Aug 2, 2018

你好··初次使用不太懂··我生成的项目为什么没有.roadhogrc 而是 .webpackrc 呢··这两个打包工具有冲突不能共存吗?求指点·

hahaha12356 commented Aug 2, 2018

你好··初次使用不太懂··我生成的项目为什么没有.roadhogrc 而是 .webpackrc 呢··这两个打包工具有冲突不能共存吗?求指点·

@paddingC

This comment has been minimized.

Show comment
Hide comment
@paddingC

paddingC Sep 7, 2018

image
这个是什么写法呢?文档里好像没有

paddingC commented Sep 7, 2018

image
这个是什么写法呢?文档里好像没有

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment