Cómo crear un sistema de gestión backend con React Family Bucket
Prólogo
Cuando era estudiante, constantemente hacía ejercicios y resúmenes para dominar un determinado punto de conocimiento, ¿no es lo mismo después de ingresar al lugar de trabajo? Hacer negocios es como hacer ejercicios. Si haces un resumen adecuado después de clase, definitivamente mejorarás más rápido.
Debido a que la empresa utiliza la pila de tecnología de nodos de reacción, completó un pequeño proyecto de reacciónSPA, con la intención de abstraer el negocio encontrado en el trabajo diario y las cosas interesantes encontradas en el estudio en una demostración para mostrar. En la actualidad, el proyecto solo construye un prototipo y el efecto es el siguiente. Basado en este artículo, escribí otro artículo sobre el uso del depósito de la familia React para crear un sistema de administración de backend. Le invitamos a leerlo. (Nota: dado que el proyecto no se actualiza periódicamente, es posible que el artículo no se actualice de inmediato, por lo que prevalecerá el proyecto real)
De hecho, este estilo de interfaz no solo se puede utilizar como interfaz del backend. sistema de gestión, pero también se puede modificar para mostrar proyectos y hermosos blogs.
La siguiente es una descripción de la estructura del directorio
El proyecto se inicializa utilizando create-react-app, que es el andamio de reacción oficial de Facebook y una de las mejores herramientas de desarrollo de aplicaciones React de la industria. ;
p>
El directorio de middleware se utilizará en el futuro. El middleware que puede provocar registros, etc.; los contenedores y el almacenamiento de componentes son componentes de reacción. La diferencia es que siempre que los componentes relacionados con el estilo de la página de inicio se coloquen en el contenedor, los módulos relacionados con las funciones (como el subensamblaje forman el componente I). implementado, componente del cuadro de entrada emergente, etc.) deben colocarse en el componente; el front-end y el almacenamiento de componentes son componentes de reacción. La diferencia es que siempre que los componentes relacionados con el estilo de la página de inicio se coloquen en el contenedor. . ) deben colocarse en el componente; algunas configuraciones comunes del front-end se guardan mejor en el global (navegador), para que no sea necesario hacer referencia a ellas al llamar, lo cual es conveniente para el módulo ajax; implementado por usted mismo es que necesitará tener Cors entre dominios y otros requisitos requieren personalizar varias solicitudes de Ajax (si se usa fetch, fetch será cada vez más poderoso en el futuro)
Pila de tecnología
Aunque la pila de tecnología está relacionada
Aunque uso muchas pilas de tecnología
, no soy competente en su uso. La mayoría de ellas se utilizan al verificar las API. , por lo que solo enumero algunas pilas de tecnología relacionadas para resolver el problema
webpack (2.6)
① Carga bajo demanda:
babel-plugin-import es Se utiliza para cargar código de componentes y estilos a pedido.
complemento de babel (principio), realice las siguientes modificaciones en el archivo config/webpack.config.dev.js:
{
test:/\.(js|jsx) $/,
incluye: paths.appSrc,
cargador: 'babel',
consulta: {
complementos: [
['importar', [{ nombrebiblioteca: "antd", estilo: 'css' } estilo: 'css' }]],
],
cacheDirectory: true
}
},
②Llamar a less:
Primero, llame a less-loader para cargar el estilo less y cambie la configuración/paquete web al mismo tiempo el archivo .config.dev.js
cargador: [
{
excluir: [
/\.html$/,
/\.(js|jsx)$/,
/\.less$/,
/\.css $/,
/\.json$/,
/\.svg$/
],
cargador: 'url ',
},
...
// Usa Babel para procesar JS.
{
prueba:/\.(js| jsx)$/,
incluye: paths.appSrc,
cargador: 'babel',
consulta: {
complementos: [
- ['importar', [{ nombrebiblioteca: 'antd', estilo: 'css' } estilo: 'css' }]],
['importar', [ { nombre de la biblioteca: "antd", estilo: verdadero }]], // cargar menos archivos
],
},
...
// Analiza el archivo less y agrega variables para anular la configuración
{
test:/\.less$/,
cargador: 'estilo !css!postcss!less?{modifyVars:{"@primary-color":" #1DA57A"}}.#1DA57A"}}'
} ,
]
El modificarVars de less-loader se utiliza aquí para la configuración del tema. Para variables y otras configuraciones, consulte el documento del tema de configuración.
③ Publique en gh-pages con un clic:
Al usar gh-pages, puede usar npm run implementar para publicar en sus gh-pages. Este es un entorno de producción, por lo que. usted Es necesario modificar el archivo config/webpack.config.dev.js. También debe realizar exactamente las mismas modificaciones en config/webpack.config.prod.js.
ps: aunque publiqué en gh-pages de esta manera, la visualización de gh-pages para este proyecto está aquí, y la visualización en gh-pages es obviamente más grande que la visualización local. Unos pocos píxeles, así que si Alguien sabe el motivo, no dude en decírmelo.
④ Abreviatura de ruta de referencia:
resolve: {
fallback: paths.nodePaths,
alias: {
'react-native': 'react-native-web',
componentes: path.resolve(dirname, '...') '/src/common/components',
contenedor: path.resolve(dirname, '...') '/src/common/container',
imágenes: path.resolve(dirname, '...') '/ src/common/container',
}
¿Pero su simplicidad está destinada a permitirnos personalizar sus extensiones, o es inherentemente imperfecta? Cuando llamé a la solicitud JSONP, descubrí que era diferente de fetch. Cuando revisé la documentación, descubrí que no admitía llamadas JSONP. Afortunadamente, la comunidad aún encontró muy bien el módulo fetch-jsonp e implementó JSONP. llamadas de la interfaz Baidu Music. El uso de fetch-jsonp también es similar a fetch, el código es el siguiente
fetchJsonp(url, {method: 'GET'}) .then((res) =gt; res.json() ) .then((( data) =gt; {})
redux
He estado usando redux por un tiempo. Mi definición de redux es administrar mejor el estado de los componentes. Cuando no hay redux Las aplicaciones como las actuales tienen menos lógica y los cambios de estado no son demasiado complicados. Sin embargo, una vez que la lógica es complicada y se combinan varios estados de componentes e interfaces, es fácil cometer errores. Entonces nació redux para resolver esto. problema, para que podamos ser más flexibles. Centrarse más en la capa de interfaz de usuario y menos en el estado. He escrito algunos artículos sobre redux antes, pero solo los entiendo brevemente en papel y sé que necesito hacerlo en detalle.
--------------------------Actualizado-------------- -- ----------
La pila redux se ha agregado al proyecto.
Algunos planes de expansión para el proyecto
Encapsulación de componentes
No importa qué tan bien estén encapsulados los componentes, personalmente creo que es mejor mejorar el nivel práctico. y continuar encapsulando varios componentes funcionales. Un método muy efectivo.
Escriba script
La empresa probablemente comenzará un nuevo proyecto en junio y el nuevo proyecto se desarrollará utilizando ts, por lo que también dirigiré la sintaxis ts en el proyecto. La sensación es usar ts Finalmente, será más fácil conectar el front-end y el back-end sin errores de bajo nivel, como una falta de coincidencia de tipos, y antd parece tener buena compatibilidad con ts.
Marco de prueba
De hecho, todavía tengo poca experiencia en esta parte, así que escribiré sobre ello primero. Si tengo la oportunidad, usaré este proyecto para escribir. mi experiencia.
Creo que dominas la metodología después de leer este artículo. Para obtener más información interesante, presta atención a otros artículos relacionados en el sitio web de Gxl.
Lectura recomendada: