关于dva的一些常规操作
dva与我们的create-react-app创建的两款脚手架是我们写react项目的两款优秀框架,之前一种使用create-react-app这款脚手架进行开发。然后这个框架美中不足的是redux方面着实令人书写麻烦 然而dva框架就对其进行了封装改良 使其看起来vuex相似度十分高 下面给大家介绍下用这两个框架结合起来开发的步骤吧
首先利用create-react-app生成一个脚手架 然后下载一个dva和history包
接着把脚手架生成的src全部删掉 用我们自己的项目目录进行开发
首先 建立一个index.js文件夹 作为我们项目的主入口
import dva from "dva";
2 import App from "./App"
3
4 //注意这种引入方式已经报销 在控制台会报警告
5 // import createHistory from 'history/createBrowserHistory';
6
7 //这种为history路由展示方式
8 //const createHistory=require("history").createBrowserHistory
9
10 //这种为hash路由展示方式
11 const createHistory=require("history").createHashHistory
12
13 //下面是两种注入方式
14 const app = dva({
15 history: createHistory(),
16 });
17
18 //const app=dva(createHistory);
19
20 app.router(App)
21
22 app.start('#root');
然后建立一个App.jsx作为我们项目路由的主出口文件
import React,{Suspense} from 'react'
2
3 import {Router} from "dva/router"
4
5 import RouteView from "./routes/RouteView"
6 import RouteConfig from "./routes/RouteConfig"
7
8 //注意这里一定要注入history不然页面展示不出来 而且是结构出来的history
9 function App({history}){
10 return <Router history={history}>
11 <Suspense fallback={<div>loading...</div>}>
12 <RouteView children={RouteConfig}></RouteView>
13 </Suspense>
14
15 </Router>
16 }
17
18 export default App
为什么使用这个App.jsx呢?
- 原因当然是想使用路由表了 为了让其与vue项目相似度更高些哈哈 下面展示下个人封装的两个路由表
RouteView
import React, { Component } from 'react'
2
3 import {Switch,Redirect,Route} from "dva/router"
4
5 export default class RouteView extends Component {
6 render() {
7 return (
8 <Switch>
9 {this.props.children.map((item,index)=>{
10 if(item.redirect){
11 return <Redirect key={index} from={item.path} to={item.redirect}></Redirect>
12 }else{
13 return <Route key={index} path={item.path} render={(props)=>{
14 return <item.component children={item.children} {...props}></item.component>
15 }}></Route>
16 }
17 })}
18 </Switch>
19 )
20 }
21 }
RouteConfig文件
import React from "react";
2
3 const RouteConfig=[
4 {
5 path:"/main",
6 component:React.lazy(()=>import("../views/main/index.jsx")),
7 children:[
8 {
9 path:"/main/home",
10 component:React.lazy(()=>import("../views/main/home/index.jsx"))
11 },{
12 path:"/main/list",
13 component:React.lazy(()=>import("../views/main/list/index.jsx"))
14 },{
15 path:"/main",
16 redirect:"/main/home"
17 }
18 ]
19 },{
20 path:"/detail/:id",
21 component:React.lazy(()=>import("../views/detail/index.jsx")),
22 },{
23 path:"/",
24 redirect: "/main"
25 }
26 ]
27
28 export default RouteConfig;
然后下面在贴一个antd的按需加载
建造一个.babelrc文件 内容如下
{
2 "presets": [
3 "react-app"
4 ],
5 "plugins": [
6 [
7 "import",
8 {
9 "libraryName": "antd",
10 "libraryDirectory": "es",
11 "style": "css" // `style: true` 会加载 less 文件
12 }
13 ]
14 ]
15 }
注意package.json 不能再有babelrc这个字段了 不然会报错
dva跨域
{
"proxy": {
"/api": {
"target": "localhost",
"changeOrigin": true,
"pathRewrite": { "^/api" : "" }
}
}
}
** 样式问题**
- 局部样式
然后在scss里面正常编写你的样式 - 全局样式
dva请求
源码
- 因为dva里面自带feach,但是我又给他再次封装了一下,以为你要请求数据的时候要携带请求头;代码如下
请求地址
关于网络请求有两种方法;
- 首先在仓库请求
打开services里面的example.js
写请求的接口
,我的接口是/api/messageList
打开models里的inter.js
仓库名:namespace: ‘inte’,
在这里要记住type:“inte/msgList”,inte是仓库名字,msgList是effects里面的方法
第二种请求方法
在组件中引入