Directorio de artículos
prefacio
A partir de este artículo, le enseñaré cómo usar react+Ant Design para crear un sistema de gestión de fondo desde cero. La serie de artículos se actualizará continuamente. Una vez completado, el código se enviará a todos para su estudio y referencia. Si no hay mucho que decir, solo comience directamente
si los conceptos básicos de reaccionar no son muy buenos Buenos estudiantes, pueden echar un vistazo a mi columna de reacción para revisar los conceptos básicos: Comenzar con la serie de reacciones desde cero
1. Primero construyamos un estante: cree un proyecto
Aquí, usamos el scaffolding de reacción para compilar el proyecto y eliminamos los archivos desordenados iniciales para obtener un proyecto de reacción puro
. y obtuve un proyecto de reacción pura.
2. Preparación - Cargando algunas herramientas
enrutamiento y axios
yarn add -D react-router-dom axios # 用yarn安装路由和axios
npm i -D react-router-dom axios # 用npm安装路由和axios
Preprocesador CSS SCSS
npm install -g cnpm --registry=https://registry.npm.taobao.org
cnpm i node-sass -D #不指定版本默认下载最新版,可以用@5.0.0指定版本
Instalar diseño de hormigas
AntDesign es una biblioteca de componentes de react-ui de código abierto de Ant Financial. Tiene buena compatibilidad y es compatible con los navegadores de uso común e IE11. (La compatibilidad con IE11 requiere polyfiles, es una biblioteca JS, la función principal es resolver problemas de compatibilidad y resolver una diferencia en la implementación de js entre diferentes navegadores), también es compatible con la representación del lado del servidor (SSR)
cnpm i antd -D
3. Comienza a escribir el proyecto
Definir la estructura del archivo del proyecto
Antes de comenzar, pensemos en un diseño del proyecto, cree carpetas y archivos
1. Defina la carpeta de componentes para almacenar componentes, el contenido actual es la parte inferior del encabezado y la barra de navegación
2. Defina el contenido de la carpeta de configuración para almacenar el directorio, porque primero acceda a la interfaz, escriba algunos datos muertos en ella
3. Defina la carpeta de estilo y almacene algunos archivos de estilo (estilo predeterminado, estilo público)
app.js para el diseño
Primero escriba el pie de página, el encabezado y el archivo index.js debajo del archivo de navegación en el componente. Aquí hay un ejemplo:
import React, {
Component } from 'react'
export class Index extends Component {
render() {
return (
<div>我是footer</div>
)
}
}
export default Index
Luego introdúzcalo en app.js para el diseño:
import {
Row, Col } from 'antd'
import Nav from './components/nav'
import Header from './components/header'
import Footer from './components/footer'
import './style/common.scss'
function App(){
return (
<div>
<Row className='container'>
<Col>
<Nav/>
</Col>
<Col>
<Header/>
<Row>
我是内容区
</Row>
<Footer/>
</Col>
</Row>
</div>
)
}
export default App;
Compruebe el efecto, el diseño actual es así:
navegación lateral de navegación
Vaya directamente al documento de Ant Design para encontrar el estilo de navegación deseado y enséñele un pequeño truco: si no puede escribir para principiantes, copie el caso en el documento y luego cámbielo lentamente a la forma que desea.
Comience a escribir la barra de navegación:
1. En primer lugar, debemos introducir los componentes necesarios aquí, como el menú Menú, el ícono Configuración delineada y SubMenú (estructurado desde Menú). Finalmente, necesitamos introducir los datos de la barra de navegación que escribimos en menuConfig
2. Escriba la estructura en el render primero
3. Defina el método para obtener el menú, recorra directamente, luego llámelo en el ciclo de vida del componenteDidMount y asigne un valor
4 Para el recorrido aquí, la lógica es continuar recorriendo hacia abajo y mostrar si hay niños, y mostrar directamente si no hay niños.
nav/index.js:
import React, {
Component } from 'react'
import {
Menu } from 'antd';
import menuConfig from '../../config/menu';
import './index.scss'
import {
SettingOutlined } from '@ant-design/icons';
const {
SubMenu } = Menu;
export class index extends Component {
state = {
menuItem: ''
}
componentDidMount() {
let menuItem = this.getMenuItem(menuConfig)
// console.log(menuItem)
this.setState({
menuItem})
}
// 获取菜单方法,直接遍历
getMenuItem = (data) => {
// console.log(data)
return data.map(item => {
if (item.children) {
return <SubMenu key={
item.key} title={
item.title}>
{
item.children.map(items => {
// console.log(items)
return <Menu.Item key={
items.key} title={
items.title}>{
items.title}</Menu.Item>
})
}
</SubMenu>
} else {
return <Menu.Item key={
item.key} title={
item.title}>{
item.title}</Menu.Item>
}
})
}
render() {
return (
<div className='nav-left'>
<h1>后台管理系统</h1>
<Menu mode="inline" theme="dark">
{
this.state.menuItem}
</Menu>
</div>
);
}
}
export default index
El resultado final es:
Bien, este artículo lo llevará a completar mucho primero y puede probarlo usted mismo.
Recuerde prestar atención a la colección, y continuaré llevándolo a completar este proyecto más adelante, y también publicaré el código fuente al final ~
¡continúe actualizando! ! !