Dva + ANTD + MockJS implements user management

const fs=require('fs');
const path=require('path');
const mockPath=path.join(__dirname+'/mock');

const mock={};
fs.readdirSync(mockPath).forEach(file=>{

    Object.assign(mock,require('./mock/'+file));
});

module.exports=mock;Copy the code

const Mock=require('mockjs');

let db=Mock.mock({
    'data|3-6':[{
        id:'@id',
        name:'@name'.'age|18-32': 1}}); module.exports={ [`GET /api/users`](req,res){ res.status(200).json(db); }, [`POST /api/users`](req,res){let user=req.body;
        console.log(req);
        user.id=Mock.mock('@id'); db.data.push(user); res.status(200).json(user); }}Copy the code

Babel-plugin-import is used to load ANTD scripts and styles on demand

{
  "entry": "src/index.js"."env": {
    "development": {
      "extraBabelPlugins": [
        "dva-hmr"."transform-runtime"["import", {"libraryName":"antd"."style":"css"}}]]."production": {
      "extraBabelPlugins": [
        "transform-runtime"["import", {"libraryName":"antd"."style":"css"}]}}Copy the code

import { connect } from 'dva';

const UserPage=()=>{

    return (
        <div>
            <h1>UserPage</h1>
        </div>
    );
};

export default connect()(UserPage);Copy the code

import React from 'react';
import { Router, Route, Switch } from 'dva/router';
import dynamic from 'dva/dynamic';
import IndexPage from './routes/IndexPage';

function RouterConfig({ history,app }) {

  const UserPage=dynamic({
    app,
    
    component:()=>import('./routes/usersPage')});return (
    <Router history= {history}>
      <Switch>
        <Route path="/" exact component={IndexPage} />
        <Route path="/users" exact component={UserPage} />
      </Switch>
    </Router>
  );
}

export default RouterConfig;Copy the code

There are also many specific advantages and disadvantages of using AXIo that have not been studied.

import fetch from 'dva/fetch';

const checkStatus=(response)=>{

    if(response.status>=200 && response.status<=200){

      return response;
    }

    const error=new Error(response.statusText);
    error.response=response;
    throw error;
};

export default async function request(url,options={}) {
    
    options.headers={
        'Content-Type':'application/json'
    }
    const response=await fetch(url,options);
    checkStatus(response);
    const data=await response.json();

    return data;
}Copy the code

import request from '.. /utils/request';
const User={
    namespace:"user",

    state:{
        list:[],
        visibleModal:false
    },
    reducers:{
        save(state,{ payload:{ data:list } }){

            return {
                ...state,
                list
            };
        }
    },
    effects:{
        * query({},{ call,put }){
            const { data }=yield call(request,'/api/users',{ method:'GET' });
            yield put({type:'save',payload:{ data }});
        },
        * create({ payload:{ user } },{ call,put }){
            yield call(request,'/api/users',{ 
                body:JSON.stringify(user),
                method:'POST'
            });
            yield put({type:'query',payload:{  }});
        }
    }, 
    subscriptions:{
        setup({ dispatch,history }){

            console.log('running subscriptions ... ');
            return history.listen(({ pathname,search })=>{

                console.log(`pathname: ${pathname}`);
                dispatch({ type:'query'}); }); }}};export default User;Copy the code

Dva’s encapsulation of Redux React-Saga is shown here

import React from 'react';
import { Router, Route, Switch } from 'dva/router';
import dynamic from 'dva/dynamic';
import IndexPage from './routes/IndexPage';

function RouterConfig({ history,app }) {

  const UserPage=dynamic({
    app,
    models:()=>[
      import('./models/user')
    ],
    component:()=>import('./routes/usersPage')});return (
    <Router history= {history}>
      <Switch>
        <Route path="/" exact component={IndexPage} />
        <Route path="/users" exact component={UserPage} />
      </Switch>
    </Router>
  );
}

export default RouterConfig;Copy the code

import { Table,Button } from 'antd';
import { connect } from 'dva';
import UserModal from './create';

const UserTable = ({ list,dispatch }) => {

    const createUser=(user)=>{
        dispatch({
            type:'user/create',
            payload:{
                user
            }
        });
    };

    const columns=[
        {
            Title:'ID',
            dataIndex:'id'
        },
        {
            Title:'NAME',
            dataIndex:'name'
        },
        {
            Title:'AGE',
            dataIndex:'age'}];return (
        <div>
            <UserModal record={ {} } ok={ createUser }>
                <Button type="primary">NEW</Button>
            </UserModal>
            <Table
                columns={ columns }
                dataSource={ list }
                rowKey={ t=>t.id }
                pagination={ false }>
                {/* users datatable */}
            </Table>
        </div>
    );
};

export default connect(({ user }) => {

    console.log(user);
    return {
        list: user.list
    };
})(UserTable);Copy the code

import React,{ Component } from 'react';
import { Modal,Form,Input } from 'antd';

class UserModal extends Component{
    constructor(props){
        super(props);
        this.state={
            visible:false
        };
    }

    
    render(){
        const { children,form:{ getFieldDecorator },record,ok }=this.props;

        const showModal=()=>{

            this.setState({
                visible:true
            });
        };
        const hideModal=()=>{

            this.setState({
                visible:false
            });
        };
        const save=()=>{

            this.props.form.validateFields((err,val)=>{
                //val ==> record

                // console.log(val);
                ok(val);
                hideModal();
            });
        };

        return (
            <div>
                <span onClick={ showModal }>
                    { children }
                </span>
                <Modal
                    title="Create User"
                    visible={ this.state.visible }
                    onCancel={ hideModal }
                    onOk={ save }>
                    <Form>
                        <Form.Item label="Name">
                            {
                                getFieldDecorator('name', {
                                    initialValue: record.name
                                })(<Input />)
                            }
                        </Form.Item>
                        <Form.Item>
                            {
                                getFieldDecorator('age',{
                                    initialValue:record.age
                                })(<Input />)
                            }
                        </Form.Item>
                    </Form>
                </Modal>
            </div>
        );
    };
}


export default Form.create()(UserModal);Copy the code

import { connect } from 'dva';
import Main from '.. /components/layout/main';
import UserTable from '.. /components/user/user';

const UserPage=()=>{

    return (
        <Main>
            <h1>UserPage</h1>
            <UserTable />
        </Main>
    );
};

export default connect()(UserPage);Copy the code