Dva.js 入门级教学文档-1
Dva.js 入门级教学文档-1
- 简介
- 一、介绍
- 1、什么是 dva
- 2、dva 的作用是什么
- 二、环境搭建和使用
- 1、环境搭建
- 2、创建项目
- 3、使用 antd
- 三、全局架构
- 1、index.js(重点)
- (1)、创建 dva 实例
- (2)、装载插件
- (3)、注册 Model
- (4)、配置路由
- (5)、启动应用
- 2、router.js
- 使用
- 解释一下
- 3、components 包
- 4、routes 包
- 5、services 包
- 6、utils 包
- 6、models 包
简介
你好！
本人为 2019.7 毕业的应届毕业生，目前从事前端工程师的职业。对知识充满渴望。如果本文中有什么错误的地方，还请各位指正。谢谢。
本文的定位为给还没接触过 Dva,想在 Dva 入门的世界里够得到门把的小伙伴们。
本文有参考 Dva.js 官网。想快速入手请看本教程。想正统的学习 Dva 知识，请看官网。
本次教程共分为两个文档，这是第一部分(一、二、三)。
先给小伙伴们看一下本文的目录架构：
- 一、介绍
- 二、环境搭建和使用
- 三、全局架构
- 四、Model 包下文件架构
- 五、connect 连接 Model 和 Route 页面下的数据
- 六、初始化数据 和 Model 数据比对
- 七、数据显示和操作的流程
- 八、稍复杂概念
一、介绍
1、什么是 dva
React 应用级框架，将 React-Router + Redux + Redux-saga 三个 React 工具库包装在一起，简化了 API，让开发 React 应用更加方便和快捷
简单理解：dva = React-Router + Redux + Redux-saga
2、dva 的作用是什么
二、环境搭建和使用
1、环境搭建
$ npm install dva-cli -g
$ dva -v //查看下是否安装成功，显示 dva 的版本号
dva-cli version 0.9.1
2、创建项目
$ dva new dva-1 //dva-1 为你创建项目的名称
安装成功后，cd 进入 dva-1 目录下，通过 npm start 和 yarn start 启动项目
如果启动报错的话，可以先执行 npm i 或者 yarn
3、使用 antd
在进入到项目目录下后，输入如下命令：
$ npm install antd babel-plugin-import --save
通过 npm 安装 antd 和 babel-plugin-import。babel-plugin-import 是用来按需加载 antd 的脚本和样式的。
注意!!!
请在全局目录下找到 .webpackrc 文件，输入以下代码，使 babel-plugin-import 插件生效。
{+ "extraBabelPlugins": [
+ ["import", { "libraryName": "antd", "libraryDirectory": "es", "style": "css" }]
+ ]
}
再次强调：注意上面的插件生效的代码，不输入以上代码，按需加载 antd 插件不生效
三、全局架构
.
├── mock // mock数据文件夹
├── node_modules // 第三方的依赖
├── public // 存放公共public文件的文件夹
├── src // 最重要的文件夹，编写代码都在这个文件夹下
│ ├── assets // 可以放图片等公共资源
│ ├── components // 就是react中的木偶组件
│ ├── models // dva最重要的文件夹，所有的数据交互及逻辑都写在这里
│ ├── routes // 就是react中的智能组件，不要被文件夹名字误导。
│ ├── services // 放请求借口方法的文件夹
│ ├── utils // 自己的工具方法可以放在这边
│ ├── index.css // 入口文件样式
│ ├── index.ejs // ejs模板引擎
│ ├── index.js // 入口文件
│ └── router.js // 项目的路由文件
├── .eslintrc // bower安装目录的配置
├── .editorconfig // 保证代码在不同编辑器可视化的工具
├── .gitignore // git上传时忽略的文件
├── .roadhogrc.js // 项目的配置文件，配置接口转发，css_module等都在这边。
├── .roadhogrc.mock.js // 项目的配置文件
└── package.json // 当前整一个项目的依赖
1、index.js(重点)
import dva from 'dva';// 1、创建 dva 实例
const app = dva();// 2、装载插件 (可选)
app.use(require('dva-loading')());// 3、注册 Model
app.model(require('./models/example'));// 4、配置路由
app.router(require('./router'));// 5、启动应用
app.start('#root');
通过上面的代码块，应该就可以很清楚了了解到 Dva 的5个 API
如果还不清楚，没关系，下面我一一讲解：
(1)、创建 dva 实例
用于创建应用，返回 dva 实例，dva 支持多实例，如：
const app = dva({history,initialState,onError,onAction,onStateChange,onReducer,onEffect,onHmr,extraReducers,extraEnhancers,
});
但是鉴于我只用过 initialState,就拿 initialState 来说。
initialState 为初始化数据，后面会讲解它和 model 中 state 的区别。大家可以在留心观看哈。
每个页面初始化的数据都将放在这里。并且 initialState 对象下的命名方式为：每个 model 的 namespce
如果命名不规范，数据是初始化不到页面上的。
(2)、装载插件
需要任何样式的插件以上面的形式编写代码即可。
如果不需要任何插件，这段代码都可以直接省略。
上面引用的插件是：页面还未加载完毕时显示的 loading 图标，加上了上面那行插件代码，你就不要每个页面都写 showloading 和 hideloading 了。
(3)、注册 Model
你每创建出来的一个 model 都需要来全局 index.js 来注册一下，这样 model 层才能用。
Model 层的代码是重点，会放到下面的第四大点重点讲解。这里只是告诉大家要注册一下。
(4)、配置路由
细心的小伙伴会发现在 index.js 同级目录下有一个 router.js,这里的配置路由就是配置这个页面的东西。下面第2小点马上就讲解，这里只是告诉大家，如何引用配置好的路由。
(5)、启动应用
启动应用不解释。
2、router.js
打开 router.js 你就看到如下的代码：
import IndexPage from './routes/IndexPage';
import HomePage from './routes/HomePage';<Router history={history}><Switch><Route path="/" exact component={IndexPage} />...<Route path="/home" exact component={HomePage} /></Switch>
</Router>
使用
我们每创建出来的一个页面，都需要在这里配置路由。
path:为页面的路径名称,注意：要加上前缀斜杠。命名可以随意，不过一般以创建页面的名字命名，这样比较清楚。
component:为代码最上方导入的页面。
上面我写了一个 home 页面的例子，供大家参考。
解释一下
每个路由器都会创建一个 history 对象，并用其保持追踪当前 location 并在有变化的时候进行重新渲染。
location:是一个含有描述 URL 不同部分属性的对象。
来看一下 Dva官网的解释：这里的路由通常指的是前端路由，由于我们的应用现在通常是单页应用，所以我们需要前端代码来控制路由逻辑，同茶馆浏览器提供的 History API可以监听浏览器url的变化，从而控制路由相关操作。
dva 使用的是 react-router 来控制路由。
小伙伴们如果想深入学习路由这块的内容可以找度娘搜索：react router 学习哈。
3、components 包
一般为我们创建出来的公共组件。
4、routes 包
这里我们可以理解为 pages。你所要显示出来的页面都写在这个下面。
5、services 包
为后台调用服务端接口的包，不做解释。
6、utils 包
这个包可以用来存放一些公共方法。需要使用时，导入 js,直接使用方法即可。
6、models 包
models 包用来存放 所有的 model 文件。
一个完整的 model 文件的架构：
export defalut {namespace:'',state:{},reducers:{},effects:{},subscriptions:{},
}
好了。马上进入我们的 Model 文件结构专题。
接下来，请移步到第二部分~
Dva.js 入门级教学文档-1相关推荐
- Ext JS 6学习文档-第3章-基础组件
Ext JS 6学习文档-第3章-基础组件 基础组件 在本章中,你将学习到一些 Ext JS 基础组件的使用.同时我们会结合所学创建一个小项目.这一章我们将学习以下知识点: 熟悉基本的组件 – 按钮, ...
- Ext JS 6学习文档-第6章-高级组件
Ext JS 6学习文档-第6章-高级组件 高级组件 本章涵盖了高级组件,比如 tree 和 data view.它将为读者呈现一个示例项目为 图片浏览器,它使用 tree 和 data view 组 ...
- 如何查看jsplumb.js的API文档(YUIdoc的基本使用)#华为云·寻找黑马程序员#
[摘要] 介绍前端文档工具YUIdoc 示例代码托管在:http://www.github.com/dashnowords/blogs 一.问题描述 最近向一些同事推荐了网页中实现流程图绘制的工具库j ...
- Sencha Cmd 6 和 Ext JS 6 指南文档（部分官方文档中文翻译）
近期组织了几个程序员网友,正在翻译一部分官方的Sencha Cmd 6 和 Ext JS 6 指南文档. 眼下还没翻译完,大家能够先看看 Sencha Cmd 6 和 Ext JS 6 指南文档 ( ...
- 是的你没看错，js生成word文档
用js生成word文档 查看Demo 你可以生成一份 word 文档,在此文档中可以添加多种元素并设置多种属性. 可添加的元素 段落 超链接 标题 表格 列表 图片 可设置的属性 font:字体,比如 ...
- 浅谈Word.Application，关于js操作word文档的使用
这篇文章只是说个人放个笔记在这里,并没有讲解的意思,但为了进来的朋友能知道我在说啥,写的过程中我还是简单介绍一下. 官网地址:https://docs.microsoft.com/zh-cn/offi ...
- 使用jquery.wordexport.js导出word文档 设置行间距不生效问题
在使用jquery.wordexport.js导出word文档时 在js里设置的style margin-top不生效 生成的doc还是没有行间距 一通百度后 发现没用解决方法 后来发现有位 ...
- js导出word文档 可以兼容IE8+浏览器适配其他浏览器
js导出word文档,兼容IE8浏览器 其他浏览器需要引入两个文件:FileSaver.js 和 jqueryWordExport.js 需要兼容IE8浏览器需要引用:FileSaver.js exc ...
- js 标签距离文档边距_如何控制Google文档中的边距
js 标签距离文档边距 Margins in a document are the white space that surrounds the text in your file. They app ...
最新文章
- python 把2个列表或者2个元组转成字典
- OpenXml编程--去除自动生成的word文档中由分页符和换行符产生的空白页
- linux内核红宝书,Solaris 10红宝书 9.3
- 微信公众平台如何启用开发模式
- 8位数控分频器的设计_8位数控分频器
- 测验8.2 指针与字符串 6-1 函数实现字符串逆序
- 我需要别人承认才快乐吗？
- 2016012072+张济吨+散列函数的应用及其安全性
- [SQL实战]之查找所有员工的last_name和first_name以及对应的dept_name，也包括暂时没有分配部门的员工
- 关于Oracle10g归档参数的研究
- 学习廖雪峰 Git 总结
- Fortify代码扫描工具
- Solidity 教程系列2 - 地址类型介绍
- 计算机主板 华硕 游戏用,华硕Z390-A大师主板，带你畅享极致游戏体验-华硕主板bios设置...
- Web安全班作业 | WireShark抓包ARP报文分析并实施ARP中间人攻击
- ps2022 - ps to dxf
- Centos添加开机启动项【Systemctl方式】
- 华为系统更新后通知栏变大了_华为EMUI又有新变动，通知栏新增多功能，流畅度堪比氢OS！...
- WINDOWS 7全系列验证码
- 中标麒麟系统下（Neokylin7）达梦数据库的安装（DM8）