Comment utiliser React pour développer un système de gestion backend réactif

Comment utiliser React pour développer un système de gestion back-end réactif

Avec le développement rapide d'Internet, de plus en plus d'entreprises et d'organisations ont besoin d'un système de gestion back-end efficace, flexible et facile à gérer pour gérer leurs opérations quotidiennes. . En tant que l'une des bibliothèques JavaScript les plus populaires actuellement, React fournit un moyen concis, efficace et maintenable de créer des interfaces utilisateur. Cet article expliquera comment utiliser React pour développer un système de gestion backend réactif et donnera des exemples de code spécifiques.

1. Créer un projet React

Tout d'abord, nous devons installer Node.js et npm pour créer et gérer des projets React. Ouvrez l'outil de ligne de commande et exécutez la commande suivante pour créer un nouveau projet React :

npx create-react-app backend-system

Cela créera un nouveau répertoire appelé backend-system et installera automatiquement React et ses dépendances associées.

2. Disposition du système de conception

Dans un système de gestion backend, il y a généralement une barre latérale et une zone de contenu principale. Nous pouvons utiliser des composants React pour créer la mise en page complète.

Tout d'abord, créez un dossier nommé Layout dans le répertoire src et créez-y un nouveau fichier Layout.js. Dans le fichier Layout.js, nous pouvons définir un composant React nommé Layout comme mise en page de l'ensemble du système de gestion d'arrière-plan.

import React from 'react';

const Layout = () => {
  return (
    <div className="layout">
      <div className="sidebar">
        {/* 侧边栏的内容 */}
      </div>
      <div className="content">
        {/* 主要内容区域的内容 */}
      </div>
    </div>
  );
}

export default Layout;

3. Création d'une barre latérale

Dans le composant Layout, nous devons créer une barre latérale pour afficher le menu de navigation. Nous pouvons utiliser la fonctionnalité de rendu de liste de React pour générer des éléments de menu.

Dans Layout.js, ajoutez le code suivant :

import React from 'react';

const Layout = () => {
  const menuItems = [
    { title: '首页', path: '/' },
    { title: '用户管理', path: '/users' },
    { title: '订单管理', path: '/orders' },
    // 其他菜单项
  ];

  return (
    <div className="layout">
      <div className="sidebar">
        <ul>
          {menuItems.map((item, index) => (
            <li key={index}>
              <a href={item.path}>{item.title}</a>
            </li>
          ))}
        </ul>
      </div>
      <div className="content">
        {/* 主要内容区域的内容 */}
      </div>
    </div>
  );
}

export default Layout;

4. Créez la zone de contenu principale

En plus de la barre latérale, nous devons également créer une zone de contenu principale pour afficher le contenu spécifique de chaque module. Dans le composant Layout, nous pouvons utiliser React Router pour implémenter le routage et le rendu des pages.

Tout d'abord, nous devons installer React Router :

npm install react-router-dom

Ensuite, introduisez React Router dans Layout.js et créez un composant nommé MainContent pour afficher la page de contenu spécifique.

import React from 'react';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';

const Home = () => <h1>首页</h1>;
const Users = () => <h1>用户管理</h1>;
const Orders = () => <h1>订单管理</h1>;
// 其他页面组件

const MainContent = () => {
  return (
    <Switch>
      <Route exact path="/" component={Home} />
      <Route path="/users" component={Users} />
      <Route path="/orders" component={Orders} />
      // 其他路由规则
    </Switch>
  );
}

const Layout = () => {
  const menuItems = [
    { title: '首页', path: '/' },
    { title: '用户管理', path: '/users' },
    { title: '订单管理', path: '/orders' },
    // 其他菜单项
  ];

  return (
    <Router>
      <div className="layout">
        <div className="sidebar">
          <ul>
            {menuItems.map((item, index) => (
              <li key={index}>
                <a href={item.path}>{item.title}</a>
              </li>
            ))}
          </ul>
        </div>
        <div className="content">
          <MainContent />
        </div>
      </div>
    </Router>
  );
}

export default Layout;

5. Conception réactive

Afin que le système de gestion d'arrière-plan ait de bons effets d'affichage sur différents appareils, nous devons ajouter la fonction de conception réactive. La modularité CSS de React peut nous aider à atteindre cet objectif.

Tout d'abord, nous devons installer les deux bibliothèques classnames et réagir-responsive :

npm install classnames react-responsive

Ensuite, nous pouvons utiliser ces deux bibliothèques dans Layout.js pour implémenter un design réactif.

import React from 'react';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
import { useMediaQuery } from 'react-responsive';
import classNames from 'classnames';

const Home = () => <h1>首页</h1>;
const Users = () => <h1>用户管理</h1>;
const Orders = () => <h1>订单管理</h1>;
// 其他页面组件

const MainContent = () => {
  return (
    <Switch>
      <Route exact path="/" component={Home} />
      <Route path="/users" component={Users} />
      <Route path="/orders" component={Orders} />
      // 其他路由规则
    </Switch>
  );
}

const Layout = () => {
  const menuItems = [
    { title: '首页', path: '/' },
    { title: '用户管理', path: '/users' },
    { title: '订单管理', path: '/orders' },
    // 其他菜单项
  ];

  const isMobile = useMediaQuery({ maxWidth: 767 });

  return (
    <Router>
      <div className={classNames('layout', { 'mobile': isMobile })}>
        <div className="sidebar">
          <ul>
            {menuItems.map((item, index) => (
              <li key={index}>
                <a href={item.path}>{item.title}</a>
              </li>
            ))}
          </ul>
        </div>
        <div className="content">
          <MainContent />
        </div>
      </div>
    </Router>
  );
}

export default Layout;

Dans le code ci-dessus, nous utilisons le hook useMediaQuery dans la bibliothèque réactive pour déterminer si l'appareil actuel est un appareil mobile. Selon différentes situations, nous pouvons ajouter différents noms de classe aux éléments de mise en page pour obtenir différents styles.

6. Ajouter des styles

Enfin, nous devons également ajouter quelques styles au système de gestion backend. Nous pouvons utiliser la modularité CSS pour gérer et écrire des styles. Créez un dossier nommé styles dans le répertoire src et créez-y un fichier nommé layout.module.css.

.layout {
  display: flex;
  height: 100vh;
}

.sidebar {
  width: 240px;
  background: #f0f0f0;
  padding: 20px;
}

.content {
  flex: 1;
  padding: 20px;
}

.mobile .sidebar {
  display: none;
}

.mobile .content {
  width: 100%;
}

ul {
  list-style: none;
  padding: 0;
}

li {
  margin-bottom: 10px;
}

a {
  text-decoration: none;
  color: #333;
}

a:hover {
  color: #ff6600;
}

Dans Layout.js, utilisez l'approche modulaire CSS pour introduire les styles.

import React from 'react';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
import { useMediaQuery } from 'react-responsive';
import classNames from 'classnames';
import styles from './styles/layout.module.css';

const Home = () => <h1>首页</h1>;
const Users = () => <h1>用户管理</h1>;
const Orders = () => <h1>订单管理</h1>;
// 其他页面组件

const MainContent = () => {
  return (
    <Switch>
      <Route exact path="/" component={Home} />
      <Route path="/users" component={Users} />
      <Route path="/orders" component={Orders} />
      // 其他路由规则
    </Switch>
  );
}

const Layout = () => {
  const menuItems = [
    { title: '首页', path: '/' },
    { title: '用户管理', path: '/users' },
    { title: '订单管理', path: '/orders' },
    // 其他菜单项
  ];

  const isMobile = useMediaQuery({ maxWidth: 767 });

  return (
    <Router>
      <div className={classNames(styles.layout, { [styles.mobile]: isMobile })}>
        <div className={styles.sidebar}>
          <ul>
            {menuItems.map((item, index) => (
              <li key={index}>
                <a href={item.path}>{item.title}</a>
              </li>
            ))}
          </ul>
        </div>
        <div className={styles.content}>
          <MainContent />
        </div>
      </div>
    </Router>
  );
}

export default Layout;

Jusqu'à présent, nous avons achevé le développement d'un système de gestion backend réactif basé sur React. Bien entendu, il ne s’agit que d’un simple exemple. Dans les projets réels, davantage de fonctions et d’interfaces doivent être développées en fonction de besoins spécifiques. J'espère que cet article pourra vous aider, si vous avez des questions, n'hésitez pas à les poser.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!