Dva + React + Mock 搭建项目（主要讲解DvaJs）

最新推荐文章于 2023-10-17 17:10:47 发布

胖达的博客

最新推荐文章于 2023-10-17 17:10:47 发布

阅读量1.2k

点赞数 2

文章标签：前端 reactjs

本文链接：https://blog.youkuaiyun.com/qq_34322905/article/details/104558664

版权

本文详细介绍了如何使用Dva.js、React和Mock搭建项目，包括初始化Dva项目、设置路由、理解model中的reducers、effects、subscriptions以及使用Mock数据。通过实例演示了如何创建新页面、配置browserHistory、调用Api以及处理异步操作。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、初始化dva

1、安装 dva-cli

$ npm install dva-cli -g
$ dva -v
dva-cli version 0.9.1

2、创建新应用

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

$ dva new dva-quickstart

这会创建 dva-quickstart 目录，包含项目初始化目录和文件，并提供开发服务器、构建脚本、数据 mock 服务、代理服务器等功能。

然后我们 cd 进入 dva-quickstart 目录，并启动开发服务器：

$ cd dva-quickstart
$ npm start

几秒钟后，你会看到以下输出：

Compiled successfully!

The app is running at:

  http://localhost:8000/

Note that the development build is not optimized.
To create a production build, use npm run build.

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

打开F12你会看到一个报错，报错来源于node/model下面的依赖包，引入方式问题，可以自行百度解决（不影响使用！）

到此，dva项目就创建完成！

基本目录结构

注意：当我们直接npm start新项目的时候会提示：Would you like to run the app on another port instead?

这个问题是以为默认的8080端口被占用了，所以要换一下端口号。

找到package.json文件，最上面scripts里的start，把他的值改为：set PORT=3000&&roadhog server；再启动，就会从新的端口启动。

PORT=3000后面可以改成你自己喜欢的端口，例如8081等。。。

"start": "set PORT=3000 && roadhog server",

这样就解决了项目启动卡住的问题。

二、dva路由设置

1、创建新页面 src/routes/userPage.js

import React from 'react';

class userPage extends React.Component {
  constructor(props) {
    super(props);
    this.state = {  };
  }
  render() {
    return (
      <div>用户页面</div>
    );
  }
}

export default userPage;

然后可以打开src/index.js看到第4步引入了 ./router.js

2、再打开src/routre.js ,在里面照葫芦画瓢引入userPage.js

import React from 'react';
import { Router, Route, Switch } from 'dva/router';
import IndexPage from './routes/IndexPage';
//引入userpage
import UserPage from './routes/userPage';

function RouterConfig({ history }) {
  return (
    <Router history={history}>
      <Switch>
        <Route path="/" exact component={IndexPage} />
        {/* 添加新路由 */}
        <Route path="/user"  component={UserPage} />
      </Switch>
    </Router>
  );
}

export default RouterConfig;

浏览器页面在输入 http://localhost:8000/#/user 就可以访问到用户页面了

也可以用到Link跳转

//引入Fragment 作为一个根组件
import React,{Fragment} from 'react';
//引入link
import { Link } from 'dva/router';

class userPage extends React.Component {
  constructor(props) {
    super(props);
    this.state = {  };
  }
  render() {
    return (
      <Fragment>
         <div>用户页面</div>
         <br/>
         <Link to="/">跳转首页</Link>
      </Fragment>
    );
  }
}

export default userPage;

再次刷新页