资讯专栏INFORMATION COLUMN

上云采购季！| 爆款云服务器低至4.6元/月，首单享0.9折

免费试用
首页/文章专栏/React框架Umi实战(2)整合dva开发后台管理系统

React框架Umi实战(2)整合dva开发后台管理系统

Anleb / 2218人阅读

摘要：官方推荐结合使用更配哦，其实他们都是同一位开发者开发的，属于阿里内部开源框架。但是名字必须为，不然不能自动注册。只有一个的话，可以不用建目录。可能是我理解有误。

umi官方推荐结合dva使用更配哦，其实他们都是同一位开发者开发的，属于阿里内部开源框架。
1 修改.umirc.js，开启dva支持 
// ref: https://umijs.org/config/
export default {
  plugins: [
    // ref: https://umijs.org/plugin/umi-plugin-react.html
    ["umi-plugin-react", {
      antd: true,
      dva: true,
      dva: {
          immer: true
        },
      dynamicImport: false,
      title: "umis",
      dll: false,
      hardSource: false,
      routes: {
        exclude: [
          /components//,
        ],
      },
    }],
  ],
}
2 修改layouts

先搞一个后台的布局,可以参考ANT DESIGN PRO https://pro.ant.design/
layoutsindex.js

import styles from "./index.less";
import { Layout, Menu, Breadcrumb, Icon } from "antd";
import { Component } from "react";
import Link from "umi/link";
import logo from "../assets/logo.svg";
const {Header, Content, Footer, Sider} = Layout;
const SubMenu = Menu.SubMenu;
class BasicLayout extends Component {

  constructor(props) {
    super(props);
    this.state = {
      collapsed: false,
    };
  }

  toggle = () => {
  this.setState({
    collapsed: !this.state.collapsed,
  });
}

render(){
return (
    
        
        

        
          
          
Ant Design Pro

        
       

          
            
            
              
              Users
              
            

            Team}
            >
              Team 1
              Team 2
            
          
        
        
          

            
          

          
              {/*此处可加面包屑*/}
              { this.props.children }
          
          

            Ant Design ©2018 Created by Ant UED
          

        
      
  );
}
}

export default BasicLayout;

layoutsindex.less

.logo {
  height: 64px;
  position: relative;
  line-height: 64px;
  transition: all 0.3s;
  background: #002140;
  overflow: hidden;
  img {
    display: inline-block;
    vertical-align: middle;
    height: 32px;
  }
  h1 {
    color: white;
    display: inline-block;
    vertical-align: middle;
    font-size: 20px;
    margin: 0 0 0 12px;
    font-family: "Myriad Pro", "Helvetica Neue", Arial, Helvetica, sans-serif;
    font-weight: 600;
  }
}

.trigger {
  font-size: 18px;
  line-height: 64px;
  padding: 0 24px;
  cursor: pointer;
  transition: color .3s;
  .logo {
  height: 32px;
  background: rgba(255,255,255,.2);
  margin: 16px;
}
}

.sider {
  min-height: 100vh;
  box-shadow: 2px 0 6px rgba(0, 21, 41, 0.35);
  position: relative;
  z-index: 10;
  &.ligth {
    background-color: white;
    .logo {
      background: white;
      h1 {
        color: #002140;
      }
    }
  }
}

浏览器访问你会看到如下效果：

3 改造users页面，完成dva整个流程。

在pages下创建users目录

创建index.js 会生成默认路由http://localhost:8000/users

import { connect } from "dva";
import { Table, Pagination, Popconfirm } from "antd";
import styles from "./users.css";
const PAGE_SIZE = 5;

function Users({ list: dataSource, total, page: current }) {
  function deleteHandler(id) {
    console.warn(`TODO: ${id}`);
  }

  const columns = [
    {
      title: "Name",
      dataIndex: "name",
      key: "name",
      render: text => {text},
    },
    {
      title: "Email",
      dataIndex: "email",
      key: "email",
    },
    {
      title: "Website",
      dataIndex: "website",
      key: "website",
    },
    {
      title: "Operation",
      key: "operation",
      render: (text, { id }) => (
        
          Edit
          
            Delete
          
        
      ),
    },
  ];

  return (
    

      

         record.id}
          pagination={false}
        />
        
      
    
  );
}

function mapStateToProps(state) {
  const { list, total, page } = state.users;
  console.log(state.test);
  return {
    list,
    total,
    page,
  };
}

export default connect(mapStateToProps)(Users);

创建对应的model.js,因为只有一个model所以不需要创建models目录。但是名字必须为model.js，不然不能自动注册。


//只有一个model的话，可以不用建models目录。但名字必须为model。js
import * as usersService from "./service";
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} = yield call(usersService.fetch, { page });
      yield put({ type: "save", payload: { data, total: data.length } });
    },
  },
  subscriptions: {
    setup({ dispatch, history }) {
      return history.listen(({ pathname, query }) => {
        if (pathname === "/users") {
          dispatch({ type: "fetch", payload: query });
        }
      });
    },
  },
};


创建service.js 这个不需要约定名称，你随便起名字


import request from "../../utils/request";

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


创建utils目录，封装统一请求api utils
equest.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
  };
  return ret;
}


创建mock假数据 mockuser.js



export default {
  "/api/users": [
  {
    "id": 1,
    "name": "Leanne Graham",
    "username": "Bret",
    "email": "Sincere@april.biz",
    "address": {
      "street": "Kulas Light",
      "suite": "Apt. 556",
      "city": "Gwenborough",
      "zipcode": "92998-3874",
      "geo": {
        "lat": "-37.3159",
        "lng": "81.1496"
      }
    },
    "phone": "1-770-736-8031 x56442",
    "website": "hildegard.org",
    "company": {
      "name": "Romaguera-Crona",
      "catchPhrase": "Multi-layered client-server neural-net",
      "bs": "harness real-time e-markets"
    }
  },
  {
    "id": 2,
    "name": "Ervin Howell",
    "username": "Antonette",
    "email": "Shanna@melissa.tv",
    "address": {
      "street": "Victor Plains",
      "suite": "Suite 879",
      "city": "Wisokyburgh",
      "zipcode": "90566-7771",
      "geo": {
        "lat": "-43.9509",
        "lng": "-34.4618"
      }
    },
    "phone": "010-692-6593 x09125",
    "website": "anastasia.net",
    "company": {
      "name": "Deckow-Crist",
      "catchPhrase": "Proactive didactic contingency",
      "bs": "synergize scalable supply-chains"
    }
  },
  {
    "id": 3,
    "name": "Clementine Bauch",
    "username": "Samantha",
    "email": "Nathan@yesenia.net",
    "address": {
      "street": "Douglas Extension",
      "suite": "Suite 847",
      "city": "McKenziehaven",
      "zipcode": "59590-4157",
      "geo": {
        "lat": "-68.6102",
        "lng": "-47.0653"
      }
    },
    "phone": "1-463-123-4447",
    "website": "ramiro.info",
    "company": {
      "name": "Romaguera-Jacobson",
      "catchPhrase": "Face to face bifurcated interface",
      "bs": "e-enable strategic applications"
    }
  },
  {
    "id": 4,
    "name": "Patricia Lebsack",
    "username": "Karianne",
    "email": "Julianne.OConner@kory.org",
    "address": {
      "street": "Hoeger Mall",
      "suite": "Apt. 692",
      "city": "South Elvis",
      "zipcode": "53919-4257",
      "geo": {
        "lat": "29.4572",
        "lng": "-164.2990"
      }
    },
    "phone": "493-170-9623 x156",
    "website": "kale.biz",
    "company": {
      "name": "Robel-Corkery",
      "catchPhrase": "Multi-tiered zero tolerance productivity",
      "bs": "transition cutting-edge web services"
    }
  },
  {
    "id": 5,
    "name": "Chelsey Dietrich",
    "username": "Kamren",
    "email": "Lucio_Hettinger@annie.ca",
    "address": {
      "street": "Skiles Walks",
      "suite": "Suite 351",
      "city": "Roscoeview",
      "zipcode": "33263",
      "geo": {
        "lat": "-31.8129",
        "lng": "62.5342"
      }
    },
    "phone": "(254)954-1289",
    "website": "demarco.info",
    "company": {
      "name": "Keebler LLC",
      "catchPhrase": "User-centric fault-tolerant solution",
      "bs": "revolutionize end-to-end systems"
    }
  },
  {
    "id": 6,
    "name": "Mrs. Dennis Schulist",
    "username": "Leopoldo_Corkery",
    "email": "Karley_Dach@jasper.info",
    "address": {
      "street": "Norberto Crossing",
      "suite": "Apt. 950",
      "city": "South Christy",
      "zipcode": "23505-1337",
      "geo": {
        "lat": "-71.4197",
        "lng": "71.7478"
      }
    },
    "phone": "1-477-935-8478 x6430",
    "website": "ola.org",
    "company": {
      "name": "Considine-Lockman",
      "catchPhrase": "Synchronised bottom-line interface",
      "bs": "e-enable innovative applications"
    }
  },
  {
    "id": 7,
    "name": "Kurtis Weissnat",
    "username": "Elwyn.Skiles",
    "email": "Telly.Hoeger@billy.biz",
    "address": {
      "street": "Rex Trail",
      "suite": "Suite 280",
      "city": "Howemouth",
      "zipcode": "58804-1099",
      "geo": {
        "lat": "24.8918",
        "lng": "21.8984"
      }
    },
    "phone": "210.067.6132",
    "website": "elvis.io",
    "company": {
      "name": "Johns Group",
      "catchPhrase": "Configurable multimedia task-force",
      "bs": "generate enterprise e-tailers"
    }
  },
  {
    "id": 8,
    "name": "Nicholas Runolfsdottir V",
    "username": "Maxime_Nienow",
    "email": "Sherwood@rosamond.me",
    "address": {
      "street": "Ellsworth Summit",
      "suite": "Suite 729",
      "city": "Aliyaview",
      "zipcode": "45169",
      "geo": {
        "lat": "-14.3990",
        "lng": "-120.7677"
      }
    },
    "phone": "586.493.6943 x140",
    "website": "jacynthe.com",
    "company": {
      "name": "Abernathy Group",
      "catchPhrase": "Implemented secondary concept",
      "bs": "e-enable extensible e-tailers"
    }
  },
  {
    "id": 9,
    "name": "Glenna Reichert",
    "username": "Delphine",
    "email": "Chaim_McDermott@dana.io",
    "address": {
      "street": "Dayna Park",
      "suite": "Suite 449",
      "city": "Bartholomebury",
      "zipcode": "76495-3109",
      "geo": {
        "lat": "24.6463",
        "lng": "-168.8889"
      }
    },
    "phone": "(775)976-6794 x41206",
    "website": "conrad.com",
    "company": {
      "name": "Yost and Sons",
      "catchPhrase": "Switchable contextually-based project",
      "bs": "aggregate real-time technologies"
    }
  },
  {
    "id": 10,
    "name": "Clementina DuBuque",
    "username": "Moriah.Stanton",
    "email": "Rey.Padberg@karina.biz",
    "address": {
      "street": "Kattie Turnpike",
      "suite": "Suite 198",
      "city": "Lebsackbury",
      "zipcode": "31428-2261",
      "geo": {
        "lat": "-38.2386",
        "lng": "57.2232"
      }
    },
    "phone": "024-648-3804",
    "website": "ambrose.net",
    "company": {
      "name": "Hoeger LLC",
      "catchPhrase": "Centralized empowering task-force",
      "bs": "target end-to-end models"
    }
  }
],
}


访问http://localhost:8000/users

4 总结


按umi推荐的方式去创建目录


注意约定名 pages目录下的所有js都回被默认生成路由，可通过配置排出


省略了model的手动注册，至于忽略namespace，我试了不行


各个page的model不能相互引用？不是很明白什么意思，我试了每个page都能获取所有的state，并不是只能获取属于自己的。可能是我理解有误。


没有看出来umi的好处，只是目录的区别吗？



这个 issues 下有关于umi按page分的讨论。https://github.com/sorrycc/bl...
希望知道umi核心优势的小伙伴留言解释下，前端菜鸟不是很懂。


别忘了关注我 mike啥都想搞


还有其他后端技术分享在我的公众号。
           
               
                                           
                       
                 
            
                     

                 

                                                                                                                    
                         超融合服务器
                                             
                         专线服务
                                                                                                                                                 
                                      
                     
                    
                                                                                               前端框架react
                                                                                                           系统开发框架
                                                                                                           框架整合
                                                                                                           mongodb管理与开发实战详解深入云计算
                                                         
                 

               
              

             
               

                   
 文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

                 
                   
转载请注明本文地址：https://www.ucloud.cn/yun/58879.html

               

                      
               
              
              

                
相关文章

                
    
                             
                                                                    
  • 
                                                
    
                          
    React框架Umi实战(2)整合dva开发后台管理系统
    
                                                     
    摘要：官方推荐结合使用更配哦，其实他们都是同一位开发者开发的，属于阿里内部开源框架。但是名字必须为，不然不能自动注册。只有一个的话，可以不用建目录。可能是我理解有误。

umi官方推荐结合dva使用更配哦，其实他们都是同一位开发者开发的，属于阿里内部开源框架。
1 修改.umirc.js，开启dva支持

// ref: https://umijs.org/config/
export def...
    
                                                   
                          
    
                                
    
                                    beita
                                    
                                    评论0 
                                    收藏0 
                                
    
                          
    
                      
    
                    
    •  
                                                                                                                       
  • 
                                                
    
                          
    React框架Umi实战(3)路由进阶
    
                                                     
    摘要：的路径是相对于的。在需要权限控制的的路由下使用属性配置。这些框架其实都是比较好上手，关键还是的基础要掌握好，还有的语法。

前面的课程都是使用的约定路由，就是自动生成的，但是我们做项目大部分都是涉及权限控制的，这时就还是得用控制路由，仅今天就来改进一下
1 修改配置.umirc.js


// ref: https://umijs.org/config/
export default {...
    
                                                   
                          
    
                                
    
                                    fasss
                                    
                                    评论0 
                                    收藏0 
                                
    
                          
    
                      
    
                    
    •  
                                                                                       
  • 
                                                
    
                          
    React框架Umi实战(1)简介与使用脚手架
    
                                                     
    摘要：之前写完了入门系列它只是一个纯粹的数据流框架拿来开发是没有问题的但是还是有一些繁琐的步骤每次要手动注册手写路由的出现结合使得开发更加的优雅与便捷特性

之前写完了dva入门系列,它只是一个纯粹的数据流框架,拿来开发是没有问题的.但是还是有一些繁琐的步骤,每次要手动注册model,手写route路由.Umi的出现结合dva,使得开发更加的优雅与便捷.
1 特性
    
                                                   
                          
    
                                
    
                                    Donald
                                    
                                    评论0 
                                    收藏0 
                                
    
                          
    
                      
    
                    
    •  
                                                                                       
  • 
                                                
    
                          
    从项目中由浅入深的学习react (2)
    
                                                     
    摘要：序列文章从项目中由浅入深的学习微信小程序和快应用前言从和原生两个项目来介绍的使用搞懂这两个项目上手撸代码篇效果图项目欢迎技术栈路由版本状态管理组件字体适配方案适配技能点分析技能点对应的种定义组件方法函数式定义的无状态组

showImg(https://segmentfault.com/img/bVbqPvN?w=820&h=512);
序列文章
从项目中由浅入深的学习vue,微信小程序...
    
                                                   
                          
    
                                
    
                                    leap_frog
                                    
                                    评论0 
                                    收藏0 
                                
    
                          
    
                      
    
                    
    •  
                                                                                       
  • 
                                                
    
                          
    Umi.js
    
                                                     
    摘要：，中文可发音为乌米，是一个可插拔的企业级应用框架。以路由为基础的，支持类的约定式路由，以及各种进阶的路由功能，并以此进行功能扩展，比如支持路由级的按需加载。全局存于目录，所有页面都可引用页面不能被其他页面所引用。

umi，中文可发音为乌米，是一个可插拔的企业级 react 应用框架。umi 以路由为基础的，支持类 next.js 的约定式路由，以及各种进阶的路由功能，并以此进行功能扩展...
    
                                                   
                          
    
                                
    
                                    30e8336b8229
                                    
                                    评论0 
                                    收藏0 
                                
    
                          
    
                      
    
                    
    •  
                                                                           
                

              

              
               

                  
                  
发表评论

                   

                                      
                      

                        登陆后可评论
                      
                   

               

              

                

                  
0条评论
   
                
 
                      

              

           
           

              
 
                

                    
                    
Anleb

                    
男|高级讲师

                    

                     
                                                                      
      
                                                                                        我要私信
                     
                                            
                    

                    

                          
TA的文章

                          阅读更多
                    

                      
                

                
                 


                  
云社区相关服务
 
                    

                        
                            提问
                            提问
                        
                        
                            学习
                            学习
                        
                        
                        
                            认证
                            认证
                        
                      
                        
                            产品
                            产品
                        
                        
                        
                            技术服务
                            技术服务
                        
                          
                            售前咨询
                            售前咨询
                        
                    
   
                
                   
              
  

                  
最新活动
 
           
         

                    
                      
                    
                    
              





                                
              

           

        
       
    
    
     

      
    

    
    

    
       
       

         
阅读需要支付1元查看
  
         
     
       

      
  
    
    








        

            

              

                    
UCloud （优刻得科技股份有限公司）

                    
UCloud （优刻得科技股份有限公司）是中立、安全的云计算服务平台，坚持中立，不涉足客户业务领域。公司自主研发IaaS、PaaS、大数据流通平台、AI服务平台等一系列云计算产品，并深入了解互联网、传统企业在不同场景下的业务需求，提供公有云、混合云、私有云、专有云在内的综合性行业解决方案。

              

              

                  

            

            
Copyright © 2012-2023 UCloud 优刻得科技股份有限公司｜沪公网安备 31011002000058号｜ 沪ICP备12020087号-3｜ 





 
        

    



<