1) Introducción

UmiJSPronunciación: (Umi)
UmiJSes un Reactmarco de aplicación de nivel empresarial conectable . La dirección del sitio web oficial es: https://umijs.org/zh/

Caracteristicas:

Enchufe de
umi todo el ciclo de vida de todos los plug-ins, e incluso su implementación interna es un gran número de plug-ins, tales como: PWA, la carga de la demanda, un interruptor de llave preact, una IE9 compatible clave, etc., son implementadas por los plug-ins.
Fuera de la caja
que necesita es un umidependiente puede comenzar a desarrollar, sin tener que instalar react, preact, webpack, react-router, babel, jesty así sucesivamente.
Enrutamiento convencional
Similar next.jsal enrutamiento convencional, no hay necesidad de mantener una configuración de enrutamiento redundante, soporte de permisos, enrutamiento dinámico, enrutamiento anidado, etc.

2), instalación

2.1), instalar nodejs

Para usarlo, UmijSprimero instala el nodejsentorno, instálalo en Mac nodejs:

    brew install nodejs

Para instalar en Windows, debe ir al sitio web oficial para descargar el programa de instalación y luego completar el siguiente paso y el siguiente, que también es muy simple. No lo presentaré aquí, pero también puedo Baidu por mí mismo. Hay muchos en línea.

2.2), instale hilo

Puede yarnverse como optimizado npm, que tyarnutiliza la fuente de npm.taobao.org , que es más rápido. Úselo si normalmente lo usa tyarn.

npm i yarn tyarn -g --registry=https://registry.npm.taobao.org

2.3), Azumi umi

tyarn global add umi

Compruebe si la instalación se realizó correctamente:

umi -v

Si hay 'umi' 不是内部或外部命令，也不是可运行的程序或批处理文件o prontaumi: command not found

3), usa umi

3.1), crear un proyecto

mkdir ~/Documents/umi-demo

3.2), inicialización

Ir a la carpeta del proyecto

cd ~/Documents/umi-demo

Luego cree umiotros directorios predeterminados, estos nombres de directorio predeterminados no pueden estar equivocados.

mkdir -p {config,mock,src/pages,src/models,src/layouts}

config/: La config.jsconfiguración predeterminada en este directorio es la configuración global
mock/: el directorio js que simula los datos de solicitud de fondo
src/: el directorio de código
pages/: la página de inicio, el sufijo de la página puede ser .js o .jsx
models/: la capa de datos, el archivo js que procesa los datos
layouts/: predeterminado Es el archivo de diseño básico para todo el proyecto.

El package.jsonarchivo se generará a través del comando de inicialización , que es el archivo NodeJSacordado utilizado para almacenar la información del proyecto y la información de configuración.

tyarn init -y

Establezca una página de expansión predeterminada para el proyecto, porque los archivos se umiJScargan de manera predeterminada cuando se inicia en segundo plano src/pages/index.js. Use el siguiente comando para crear el archivo index.js a través del comando umi.

umi g page index

Puede ver que los archivos index.js e index.css se crean en páginas.

3.3) Abra la herramienta de desarrollo

Estructura del directorio

3.4), ejecutando proyecto

umi dev

Visita: http: // localhost: 8000

4) desarrollo en capas

4.1), diagrama de proceso

5 5

Descripción:

En la imagen de arriba, la izquierda es el usuario, el medio es el extremo frontal y la derecha es el extremo posterior. Estábamos en la estratificación frontal, que se puede dividir en Page,, Model3 Servicecapas.

Page Responsable de tratar directamente con los usuarios: renderizar páginas, aceptar la entrada del usuario y enfocarse en la lógica interactiva de tipo pantalla.
Model Responsable de procesar la lógica de negocios, leer y escribir, cambiar, almacenar temporalmente los datos y el estado de Page.
Service Es responsable de la interfaz con la interfaz HTTP para la lectura y escritura de datos puros.

En el que la Pagecapa UmiJSdel umi-plugin-reactplug-in dvafunción, puede llamar a los Modeldatos y los métodos de capa definidos; Modelcapa importdefine la función de petición asincrónico request.jsa llamar a la Servicecapa; la Servicecapa es hasta el extremo posterior de los datos solicitados.

4.2), comenzar el desarrollo

4.2.1), agregar dependencias

umiDependencias agregadas

tyarn add umi --dev

Agregar umi-plugin-reactcomplemento

tyarn add umi-plugin-react --dev

Agregar .gitignorearchivo

node_modules
dist
.umi

config/config.jsIntroducir umi-plugin-reactcomplementos en la configuración

export default { 
    plugins: [ 
        ['umi-plugin-react', { 
            dva: true,
            antd: true
            
        }] 
    ] 
};

4.2.2), diseño básico antd

Agregue diseño y estilo básicos: cree archivos
en el layoutsdirectorio de archivos index.js, en el index.jsque escribimos:

import { Component } from 'react';
import { Layout } from 'antd';

// Header, Footer, Sider, Content组件在Layout组件模块下
const { Header, Footer, Sider, Content } = Layout;

class BasicLayout extends Component {
    render() {
        return (
            <Layout>
                <Sider width={256} style={{ minHeight: '100vh', color: 'white' }}>
                    Sider
                </Sider>
                <Layout >
                    <Header style={{ background: '#fff', textAlign: 'center', padding: 0 }}>Header</Header>
                    <Content style={{ margin: '24px 16px 0' }}>
                        <div style={{ padding: 24, background: '#fff', minHeight: 360 }}>
                            {this.props.children}
                        </div>
                    </Content>
                    <Footer style={{ textAlign: 'center' }}>Ant Design ©2018 Created by Ant UED</Footer>
                </Layout>
            </Layout>
        )
    }
}

export default BasicLayout;

En el código anterior, hemos creado un diseño básico de tres partes: Encabezado, Contenido, Pie de página. Luego, reemplazamos el Contenido con {this.props.children}, de modo que la ruta que establezcamos más adelante cambiará el contenido al reemplazar la variable secundaria.

Después de instalar los componentes que deben presentarse anteriormente, podemos escribir nuestro código de front-end. Podemos escribir de acuerdo con el diagrama anterior, en orden de abajo hacia arriba, es decir, Service→ Model→ Page.

4.2.3), el servicio solicita datos asincrónicamente

Cree el directorio de utilidades en el directorio src, cree el archivo request.js

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);
    return await response.json();
}

4.2.4) Datos de simulación simulados

Cree el archivo UserList.js en el directorio simulado para simular datos. Debido a que umi tiene una función simulada integrada de forma predeterminada, solo necesita escribir datos simulados.

export default {
    'get /ds/list' : function (req, res) {
        res.json({
            data: ['zhangsan','lisi','wangwu']
        })
    }
}

4.2.5). El archivo js se introduce en la capa Modelo para solicitudes asincrónicas

import request from '../../utils/request'

export default {
    namespace: 'user',
    //该模型中的一些属性
    state: {
        data: []
    },
    //一些正常的同步方法
    reducers: {
        //state是原先的数据，result是effets中异步调用返回的数据
        save(state, result){
            //如果 result.data中存在数据，表示该函数是被异步调用初始化。直接返回
            if (result.data){
                return result.data;
            }
            let list = [...state.data, 'freeman'];
            //返回更新后的state对象
            return {
                data: list
            }
        }
    },
    effects: {
        // 这里定义异步方法
        *initData(params, sagaEffects) { //定义异步方法
            const {call, put} = sagaEffects; //获取到call、put方法
            const url = "/ds/list"; // 定义请求的url
            let result = yield call(request, url); //执行请求
            yield put({ // 调用reducers中的方法
                type : "save", //指定方法名
                data : result  //传递ajax回来的数据, 注意 put 会指定调用的同步方法[reducers 中定义的方法],
                //该调用的方法会在定义的方法的入参添加一个参数（result）, 使用该参数才能获取到put方法,取到的值
            });
        }
    }

}

El objeto modelo DVA tiene varias propiedades básicas que todos deben comprender.

namespace: modelEl espacio de nombres solo puede usar cadenas. Una aplicación grande puede contener múltiples model, namespacedistinguiendo.
state: Actuales modelvalores de estado iniciales, representan el estado actual.
reducers: Un procesamiento de la sincronización, puede ser modificado statepor el actiongatillo. reducerEs puramente una función que toma una corriente statey un cuerpo de datos ( payload) como la referencia, una nueva vuelta state.
effects: Para el procesamiento de las operaciones asincrónicas (por ejemplo: para interactuar con el servidor) y una lógica de servicio, sino también por el actiongatillo. Sin embargo, no puede modificar el estado, al ser activado por actionllamadas reducerpara lograr stateoperaciones indirectas.
action: ¿Es reducersy el effectsgatillo es generalmente un objeto, tales como la forma { type: 'add', payload: todo }, por typepuede ser adaptado a las propiedades de un particular, reducero effect, payloadcon los datos de atributos de los mismos, para la entrega a reducero effect.

4.2.6), la capa de página presenta datos y métodos de la capa Modelo

dva es un marco frontal ligero basado en redux, redux-saga y react-router. Sitio web oficial: https://dvajs.com/

@connect(mapStateToProps, mapDispatchToProps) Se requieren 2 parámetros:

mapStateToProps: Es un método, el valor de retorno de este método es un objeto de propiedad {}, su función es inyectar este objeto que contiene la propiedad de estado en this.props. El componente puede obtener los datos en el modelo a través de this.props.xx.
- Framework Se inicia el marco umi, leerá automáticamente todos los archivos de modelo en el directorio de modelos (como: datos en user / List.js)
- ②, estos datos del modelo ingresarán al mapStateToPropsmétodo
- ③ En los datos globales, habrá muchos, por lo que debe distinguir por el espacio de nombres, así que state[namespace]obtenga los datos por
- ④, obtenga los datos en los datos del modelo, es decir, los ['zhangsan','lisi','wangwu']datos, regrese después de envolver {}
- ⑤ Los datos devueltos se encapsularán en this.propsél, por lo que this.props.listDatalos datos en el modelo se pueden obtener pasando .
mapDispatchToProps: Es un método, su valor de retorno es un objeto de función {}, su función es inyectar estas funciones en this.props.
- ① Por lo tanto, puede Modelvincular el método expuesto al componente actual, definir un método para recibir y luego vincular al onClickevento, puede implementar la operación de clic; también puede obtener los datos cuando se carga la página Operación de renderizado (solo necesita unirse a la función del ciclo de vida).
- ② La función de despacho es la única forma de lidiar con el modelo dva. La función de despacho acepta un objeto como parámetro de entrada. Conceptualmente, lo llamamos una acción. El único campo obligatorio es el campo de tipo, tipo de cadena, que se utiliza para decirle a dva lo que queremos hacer. Podemos optar por adjuntar otros campos a la acción. Aquí hemos acordado utilizar el campo de carga útil para indicar información adicional.

En pagesel nuevo directorio user/List.js(o List.jsxpágina), utilice las teclas de acceso directo rcco rccppuede reaccionar rápidamente generar componentes.

import React, {Component} from 'react';
import { connect } from 'dva';
const namespace = 'user';

const mapStateToProps = (state)=>{
    let listData = state[namespace].data;
    return {listData}
};

const mapDispatchToProps = (dispatch) => {
    // 定义方法，dispatch是内置函数
    return { //返回的这个对象将绑定到this.props对象中
        addUser : () =>{
            // 定义方法
            dispatch({ // 通过调用dispatch()方法，调用model中reducers的方法
                type: `${namespace}/save` // 指定方法，格式： namespace/方法名
            });
        },
        userList : () => { //新增初始化方法的定义
            dispatch({
                type: `${namespace}/initData`
            });
        }
    }
}
@connect(mapStateToProps, mapDispatchToProps)
class List extends Component {

    componentDidMount() {
        this.props.userList();
    }

    render() {
        return (
            <div>
                <ul>
                    {
                        this.props.listData.map(
                            (v, i) => {return <li key={i}>{v}</li>}
                        )
                    }
                </ul>
                <button onClick={() => {this.props.addUser()}}>
                    添加
                </button>
            </div>
        );
    }
}

export default List;

4.3.), Actualización del complemento Umi-plugin-react

En el período previo umi devo umi buildejecutar aplicaciones o implementar que a veces "ruta debe ser una cadena" error. Solución:

Siga el sitio web oficial para actualizar la versión de umi-plugin-react.

①, archivo package.json

{
  "devDependencies": {
-   "umi-plugin-react": "^1"
+   "@umijs/preset-react": "^1"
  }
}

②, archivo config / config.js

export default {
- plugins: [
-   ['umi-plugin-react', {
-     dva: {},
-     antd: {},
-     ...
-   }]
- ],
+ dva: {},
+ antd: {},
+ ...
}

Puede consultar: https://umijs.org/docs/upgrade-to-umi-3# upgrade-umi-plugin-react-to-umijspreset-react

Dirección del proyecto: https://gitee.com/zhaoxxnbsp/umi-demo.git

Volver arriba ↑

Use el marco UmiJS para desarrollar aplicaciones React