dva + antd + mockjs для управления пользователями

внешний интерфейс JavaScript API React.js

1. Установите два-кли

  • npm install dva-cli -g

2.Создать приложение

два новый dvadashboard

​[dvadashboard — название проекта]

3. Установите mockjs

  • ​npm install mockjs --save

4. Настройте mockjs

  • ​Откройте .roadhogrc.mock.js и установите его следующим образом.

​

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;

5. Имитация API управления пользователями

​Создайте новый user.js в фиктивной папке

​

Настройки API:

Здесь моделируются только два API 1. Получить все пользовательские данные 2. Добавить пользователей

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);
    }
}

Затем посмотрите, можно ли использовать API, войдите в каталог проекта и выполните npm start для запуска.

Введите страницу по умолчанию.Номер порта по умолчанию 8000. Следующая страница является страницей по умолчанию после запуска проекта.

Посетите API http://localhost:8000/api/users Хорошо, вы можете получить доступ к успешно возвращенным данным смоделированного списка пользователей

​

6. Установите и

​

  • npm install antd babel-plugin-import --save

​

babel-plugin-import используется для загрузки скриптов и стилей antd по запросу.

После завершения установки настройте использование antd для изменения файла .roadhogrc.

Добавьте ["import",{ "libraryName":"antd","style":"css" }] Окончательный файл выглядит так:

​

{
  "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" }]
      ]
    }
  }
}

​

7. Определите маршрут

  • ​Создайте новый файл usersPage.js в папке src/routes/.

Это, наверное, самая простая страница

import { connect } from 'dva';

const UserPage=()=>{

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

export default connect()(UserPage);
  • Зарегистрируйте информацию о маршрутизации. Измените файл src/router.js.

Добавлен динамически загружаемый компонент

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;

Проверьте эффект конфигурации маршрутизации и посетите http://localhost:8000/#/users.

Отображает содержимое

8. Добавляем связь с сервером

  • ​Измените src/utils/request.js следующим образом, чтобы обеспечить базовый доступ к данным ajax.

​

Есть также много конкретных преимуществ и недостатков использования axio, которые не были изучены.

​

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;
}

Здесь (базовый пакет AJAX, предоставляющий интерфейс услуг связи), предоставляется для простого понимания в одном запросе на участие в одном уровне пользователя.

  • Затем создайте новый user.js в разделе src/models.
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;

Это в основном отражает инкапсуляцию dva редукционной саги с первого взгляда.

  • Затем зарегистрируйте модель и измените код маршрутизации на:
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;

9. Создайте новый компонент списка пользовательских данных и используйте таблицу antd для его переноса.

Я также построил форму для добавления пользователей.

user.js

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);

create.js

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);

usersPage.js

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);

10. Демонстрация эффекта

11. Загрузка исходного кода

или https://pan.baidu.com/s/1bo1R7o7


Категории