Dva最不佳实践

作者: mah93 | 来源:发表于2019-10-09 16:27 被阅读0次

Dva最不佳实践
dva 2.0中如何使用代码进行路由跳转
轻松学 dva（基础 + 进阶）（32 个视频）
dva - Route Components
dva 升级2.0版本遇到的问题小结
dva 框架介绍
dva抽出数组路由+配置动态路由+配置方法
axios ajax请求实例
Ant Design项目实战
dva-loading 实践用法

前言

由于之前写了几个dva的项目，近期没怎么用有些遗忘了，写个小结记录一下。

dva是基于react、react-router、redux封装的一个轻框架。详细的介绍在 dva官网，这里仅仅摘录部分。项目托管在GitHub上，点击这里。

特性

易学易用：仅有 6 个 api，对 redux 用户尤其友好
elm 概念：通过 reducers, effects 和 subscriptions 组织 model
支持 mobile 和 react-native：跨平台 (react-native 例子)
支持 HMR：目前基于 babel-plugin-dva-hmr 支持 components、routes 和 models 的 HMR
动态加载 Model 和路由：按需加载加快访问速度 (例子)
插件机制：比如 dva-loading 可以自动处理 loading 状态，不用一遍遍地写 showLoading 和 hideLoading
完善的语法分析库 dva-ast：dva-cli 基于此实现了智能创建 model, router 等
支持 TypeScript：通过 d.ts (例子)

准备工作

确保 node 版本是 6.5 +
用 cnpm 或 yarn 能节约你安装依赖的时间

Step1. 安装 dva-cli 并创建应用

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

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

然后创建应用：

$ dva new dva-learning

创建成功后进入该文件夹：

$ cd dva-learning 
`项目的目录结构`
dva_learning
|-----mock                                  # => 前端模拟数据
|-----node_modules                          # => 项目依赖采用npm管理，所有包均在此目录。
|-----public                                # => 存放index.html
|-----src                                   
       |------assets                        # => 项目静态资源文件夹（图片等）
       |------components                    # => 无状态组件文件夹
       |------models                        # => 状态model文件夹
       |------routes                        # => 路由配置文件夹，页面存放在该文件夹下
       |------services                      # => 服务层文件夹
       |------utils                         # => 工具函数文件夹
       |------index.css                     # => 全局通用样式
       |------index.js                      # => 单页引用入口js，dva项目初始化
       |------router.js                     # => 全局路由状态管理文件
|-----package.json                          # => npm包管理文件
|-----.eslintrc                             # => 代码规范配置文件
|-----.roadhogrc                            # => 打包配置文件
|-----.roadhogrc.mock.js                    # => 模拟数据配置文件
|-----README.md
`项目的目录结构`
`运行项目`
$ npm start

如果运行成功的话，浏览器会自动弹出并访问8000端口，看到如下画面：

run_success@2x.png

Step2. 配置 antd 和 babel-plugin-import

antd是由蚂蚁金服开发的一套UI组件，具有学习成本低、上手速度快、实现效果好的特点。十分适合初学者并且与dva无缝接入。如需了解更多请查看 ANT DESIGN。

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

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

修改 .roadhogrc，在 "extraBabelPlugins" 里加上：

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

Step3. 添加新页面

我们的目标是写一个登录的界面，成功之后显示dva默认的首页。所以在src/routes文件夹下，新建Login.js和Login.css文件。js文件用来写组件布局，css文件用来写样式，默认为js文件和css文件一一对应。

在Login.js中：

`Login.js`
import React from 'react';
import { connect } from 'dva';
import { Input, Icon, Button } from 'antd';
import styles from './Login.css';

function Login() {
  return (
    <div className={styles.inputDiv}>
      <div>
        <Input
          placeholder="用户名"
          prefix={<Icon type="user" />}
          size="large"
          className={styles.inputUser}
        />
      </div>
      <div>
        <Input
          placeholder="密码"
          prefix={<Icon type="lock" />}
          size="large"
          className={styles.inputPass}
        />
      </div>
      <Button type="primary" className={styles.button}>
          登录
      </Button>
    </div>
  );
}

Login.propTypes = {
};

export default connect()(Login);

为这个页面添加样式：

`Login.css`
.inputDiv {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 200px;
  height: 220px;
  margin: -110px 0 0 -100px;
}
.inputUser {
  width: 200px;
}
.inputPass {
  width: 200px;
  margin-top: 20px;
}
.button {
  width: 200px;
  margin-top: 20px;
}

然后修改router.js页面，将新写的登录页面，放到默认显示页面

`router.js`
import React from 'react';
import { Router, Route } from 'dva/router';
import IndexPage from './routes/IndexPage';
import Login from './routes/Login';

function RouterConfig({ history }) {
  return (
    <Router history={history}>
      <Route path="/" component={Login} />
      <Route path="/home" component={IndexPage} />
    </Router>
  );
}

export default RouterConfig;

然后运行，会看到你完成的页面

dva登录@2x.png

Step4. 添加事件

之前完成的页面还没有添加点击事件，接下来添加几行代码，让它可以编辑，可以输入和点击

页面中使用的Input, Icon, Button均是Antd中基本的组件，在 ANT DESIGN有对它们详细的介绍。

为Button添加一个单击事件

`点击button时触发`
const submit = () => {
  alert('here')
};
`在Button中添加这个方法`
<Button type="primary" className={styles.button} onClick={submit}>
登录
</Button>

再次运行项目，点击登录按钮会显示

dva单击事件@2x.png

Step.5 处理逻辑

如果需要这个登录界面更加真实的话，需要处理一些登录中的逻辑，比如点击登录按钮的时候，判断输入框中是否输入了数据等。

dva中有专门的文件夹存放这些处理页面内逻辑的代码。查看src/models/example.js文件，这是一个标准的模版，每个处理逻辑的文件都包含下面几部分

export default {

  namespace: 'example',                                 # => 唯一标识，应用中唯一

  state: {},                                            # => 需要存储的值，每次修改会刷新界面

  subscriptions: {                                      # => 订阅
    setup({ dispatch, history }) {  
    },
  },

  effects: {                                            # => 副作用，一般用来发起请求
    *fetch({ payload }, { call, put }) {  
      yield put({ type: 'save' });
    },
  },

  reducers: {                                           # => 只有在这里才能修改state的值
    save(state, action) {
      return { ...state, ...action.payload };
    },
  },

};

更多关于dva的api，请查看dva APIs

在src/models中新建login.js文件

`login.js`
export default {

  namespace: 'login',

  state: {
    loading: false,
  },

  subscriptions: {
  },

  effects: {
  },

  reducers: {
    save(state, action) {
      return { ...state, ...action.payload };
    }
  },
};

然后在Login.js中调用save方法

`Login.js`
const userName = (e) => {
  dispatch({
    type: 'login/save',
    payload: {
      user: e.target.value,
    },
  });
};

这个方法的意思是：当输入用户名的时候，调用save方法，并将输入的值，保存在state.user中。

Step.6 发送请求

输入完用户名以及密码之后，单击登录按钮，将输入的值发送至后台校验，校验通过之后跳转到下一个页面。

现在已经有了输入的用户名和密码，分别是login.user和login.password，现在需要将这两个数据发送到后台。由于现在并没有后台服务支持，dva支持mock数据，所以先在前台模拟一个后台服务。

在项目根目录下新建.roadhogrc.mock.js并添加：

`.roadhogrc.mock.js`
const mock = {}
require('fs').readdirSync(require('path').join(__dirname + '/mock')).forEach(function(file) {
  Object.assign(mock, require('./mock/' + file))
})
module.exports = mock

之后在mock文件夹中新建login.js并添加：

`login.js`
const qs = require('qs');

module.exports = {
  'POST /login' (req, res) {
    console.log(req.body);
    console.log('接受到请求');
    setTimeout(()=>res.json({code:'200',message:'从mock/example.js请求成功'}),2000)
  },
};

这个的意思是说，监听本地的8000端口，当访问http://localhost:8000/login的时候，会延迟2秒并返回数据。

模拟的后台服务已经完成，现在要在button中添加点击事件，去请求这个接口。

首先改造一下fetch请求，在utils/request.js中：

export default function request(url, method, params) {
  if (method === 'POST') {
    const formData = new FormData();

    for (const key in params) {
      if (params[key] != null) {
        const value = params[key];
        formData.append(key, value);
      }
    }
    return fetch(url, {
      method: method,
      body: formData,
    }).then(checkStatus)
      .then(parseJSON)
      .then(data => ({ data }))
      .catch(err => ({ err }));
  }
  if (method === 'GET') {
    return fetch(url)
      .then(checkStatus)
      .then(parseJSON)
      .then(data => ({ data }))
      .catch(err => ({ err }));
  }
}

然后在services中新建login.js，这里可以理解为转发，从点击事件中传递到request里请求：

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

export function login(params) {
  console.log('services处理');
  return request('/login', 'POST', params);
}

之后在models/login.js，发起这个请求：

  effects: {
    *fetch({ payload }, { call, put }) {  // eslint-disable-line
      if(!payload.userName || !payload.passWord) {
        message.error('请输入账号密码');
        return;
      }
      const { data } = yield call(service.login, payload);
    },
  },

最后在界面的button的点击事件中，调用models里的事件：

  const submit = () => {
    dispatch({
      type: 'login/fetch',
      payload: {
        userName: login.user,
        passWord: login.password,
      },
    });
  };

所有的都完成之后，重启项目，点击button之后可以在命令行中看到：

dva的mock@2x.png

undefined的原因是，roadhog的版本问题，获取不到从前台传递过来的参数。

Step.7 完善细节

整体的流程已经完成，现在要为它添加一些细节，让它看起来更加的真实

添加一个加载等待的圈圈，在点击button的同时显示，后台反馈结果后消失并跳转到下一个界面。

<Spin spinning={login.loading}>
...
</Spin>

用Spin标签将其他的标签包起来，当它显示的时候，会出现在被包裹的标签之上。

通过控制login.loading来控制Spin的显示与消失。

  reducers: {
    ...
    loadingShow(state) {
      return { ...state, loading: true};
    },
    loadingHide(state) {
      return { ...state, loading: false};
    }
  },

最后在请求的时候完成这个流程

  effects: {
    *fetch({ payload }, { call, put }) { 
      if(!payload.userName || !payload.passWord) {
        message.error('请输入账号密码');
        return;
      }
      yield put({ type: 'loadingShow' });
      const { data } = yield call(service.login, payload);
      if(data.code === '200') {
        yield put({ type: 'loadingHide' });
        browserHistory.push('/home');
      }else {
        yield put({ type: 'loadingHide' });
        message.error('登录失败');
      }
    },
  },

如果需要在显示登录页面之前执行某些操作，可以在subscriptions中订阅：

  subscriptions: {
    setup({ dispatch, history }) {
      history.listen((location) => {
        if (location.pathname === '/') {
          message.info('进入了登录页');
        }
      });
    },
  },

总结

这个登录页面，展示了从页面到请求的整个过程，虽然看起来有点绕，涉及了很多的页面。但�是当文件多了，就会体现出dva这样分层的好处：各个文件夹各司其职，功能单一。

最后实现的效果：

dva-learning.gif

Dva最不佳实践
前言由于之前写了几个dva的项目，近期没怎么用有些遗忘了，写个小结记录一下。 dva是基于react、react...
dva 2.0中如何使用代码进行路由跳转
概述在上篇 dva router4.0 使用实践总结中主要介绍了 dva 中使用 react-router@4...
轻松学 dva（基础 + 进阶）（32 个视频）
dva 是 React 的国产最佳实践框架，本套课程是讲解 dva 的最全入门指引教程，从入门，到进阶，讲解 dv...
dva - Route Components
dva实践学习react,快速入门的练习创建引用可以直接使用dva-cli的各项命令快速创建项目. 项目开始前...
dva 升级2.0版本遇到的问题小结
1. 使用 browserHistory dva 配置 browserHistory 实践总结 2. 在 rout...
dva 框架介绍
dva 是基于 redux 最佳实践实现的 framework，简化使用 redux 和 redux-saga ...
dva抽出数组路由+配置动态路由+配置方法
[TOC] 参考文章 React最佳实践系列 —— Dva 进阶之路由和动态加载：https://blog.cs...
axios ajax请求实例
说明该实例是以dva命令创建的项目：$ dva new dva-quickstart技术栈：dva + axio...
Ant Design项目实战
创建新应用:dva new dva-quickstartcd dva-quickstartnpm start 使用...
dva-loading 实践用法
dva 中页面过渡效果封装的很好，下面介绍常用的两个 js 库。之前对 dva-loading 理解存在误区，认...